Repository: Lundalogik/lime-elements
Pull request #3518: get rid of MDC input fields (step 1)
Author: login: Kiarokh
Labels: name: visual design
description: Visual styling that may or may not affect usability
name: maintenance
description: Things that are important but not urgent, and not directly related to any specific bug or feature
name: accessibility
description: Issues that make it harder, or even impossible, for some specific group of users to use the software
name: released
name: 🦄✨ yolo
Created: 2025-04-04T09:24:03Z | Merged: 2025-04-16T07:33:24Z

This is a private component, used to render a notched outline around all input elements that can have a floating label. Inspired by Material Design's styles for input fields. We will use it in various components to unify styles and avoid repeating code.

fix https://github.com/Lundalogik/crm-feature/issues/4696

>[!IMPORTANT]
>- This PR updates `limel-input-field` which is used in several other components, such as date-picker, color-picker, file. A visual inspection of those components would be nice during the review.
>- it also updates `limel-chip-set` which is used in `limel-picker`. That one also needs to be tested.

<!-- If the PR title includes `@coderabbitai`, CodeRabbit will generate an automatic PR title -->

<!-- Automated summary by CodeRabbit will be added here -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
  - Introduced an interactive notched outline component with a live example, enhancing the presentation of input fields.
  - Added a new basic example for the notched outline component to demonstrate its functionality.

- **Refactor**
  - Streamlined the layout and rendering of input fields and text editors for improved modularity and accessibility.
  - Enhanced the management of identifiers for input fields to improve accessibility.
  - Simplified the rendering logic in the `TextEditor` and `SelectTemplate` components for better structure.

- **Style**
  - Updated visual styling for input elements, icons, and various component states (e.g., focus, disabled) for consistent user experience.
  - Added new styles for the notched outline component and its states.
  - Removed unnecessary styles from the text editor and input field components to simplify the design.
  - Introduced a new border radius variable for select components.
  - Updated styles for the chip set component to reflect new design choices.
  - Enhanced styles for the `limel-notched-outline` component to improve visual hierarchy and responsiveness.

- **Tests**
  - Refined component tests to focus on key visual and accessibility attributes for more robust validation.
  - Updated end-to-end tests to align with the new structure of components, ensuring accurate verification of labels and outlines.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- End of CodeRabbit summary -->

## Review:
- [ ] Commits are [atomic](https://seesparkbox.com/foundry/atomic_commits_with_git)
- [ ] Commits have the correct *type* for the changes made
- [ ] Commits with *breaking changes* are marked as such

### Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:
- [ ] Chrome
- [ ] Edge
- [ ] Firefox

Linux:
- [ ] Chrome
- [ ] Firefox

macOS:
- [ ] Chrome
- [ ] Firefox
- [ ] Safari

Mobile:
- [ ] Chrome on Android
- [ ] iOS



Diff:
diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
index ea2b05b180..783015abef 100644
--- a/etc/lime-elements.api.md
+++ b/etc/lime-elements.api.md
@@ -555,6 +555,17 @@ export namespace Components {
         "allowClicksElement": HTMLElement;
         "open": boolean;
     }
+    export interface LimelNotchedOutline {
+        "disabled": boolean;
+        "hasFloatingLabel": boolean;
+        "hasLeadingIcon": boolean;
+        "hasValue": boolean;
+        "invalid": boolean;
+        "label"?: string;
+        "labelId"?: string;
+        "readonly": boolean;
+        "required": boolean;
+    }
     // (undocumented)
     export interface LimelPicker {
         "actionPosition": ActionPosition;
@@ -1119,6 +1130,8 @@ export namespace JSX {
         // (undocumented)
         "limel-menu-surface": LimelMenuSurface;
         // (undocumented)
+        "limel-notched-outline": LimelNotchedOutline;
+        // (undocumented)
         "limel-picker": LimelPicker;
         // (undocumented)
         "limel-popover": LimelPopover;
@@ -1618,6 +1631,17 @@ export namespace JSX {
         "onDismiss"?: (event: LimelMenuSurfaceCustomEvent<void>) => void;
         "open"?: boolean;
     }
+    export interface LimelNotchedOutline {
+        "disabled"?: boolean;
+        "hasFloatingLabel"?: boolean;
+        "hasLeadingIcon"?: boolean;
+        "hasValue"?: boolean;
+        "invalid"?: boolean;
+        "label"?: string;
+        "labelId"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+    }
     // (undocumented)
     export interface LimelPicker {
         "actionPosition"?: ActionPosition;
diff --git a/src/components/chip-set/chip-set.e2e.ts b/src/components/chip-set/chip-set.e2e.ts
index 60651b9f56..6317973037 100644
--- a/src/components/chip-set/chip-set.e2e.ts
+++ b/src/components/chip-set/chip-set.e2e.ts
@@ -25,7 +25,9 @@ describe('limel-chip-set', () => {
             ]);
             await page.waitForChanges();
 
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find(
+                'limel-chip-set >>> .limel-notched-outline--notch label',
+            );
             chips = await page.findAll('limel-chip-set >>> limel-chip');
 
             spy = await chipSet.spyOnEvent('interact');
diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
index 85cc8e71b8..ed93941943 100644
--- a/src/components/chip-set/chip-set.scss
+++ b/src/components/chip-set/chip-set.scss
@@ -6,9 +6,6 @@
 
 @use '@material/textfield';
 @use '@material/textfield/icon';
-@use '@material/notched-outline/mdc-notched-outline';
-@use '@material/floating-label';
-@use '@material/floating-label/mdc-floating-label';
 
 /**
  * @prop --icon-background-color: Background color of the icon. Defaults to transparent.
@@ -21,14 +18,7 @@
 @include textfield.core-styles;
 @include icon.icon-core-styles;
 
-@include shared_input-select-picker.outlined-style-overrides;
-@include shared_input-select-picker.floating-label-overrides;
-@include shared_input-select-picker.cropped-label-hack;
-@include shared_input-select-picker.disabled-overrides;
-@include shared_input-select-picker.readonly-overrides;
 @include shared_input-select-picker.leading-icon;
-@include shared_input-select-picker.lime-empty-value-for-readonly;
-@include shared_input-select-picker.lime-looks-like-input-value;
 
 $height-of-chip-set-input: functions.pxToRem(36);
 $leading-icon-space: 1.5rem;
@@ -37,6 +27,21 @@ $leading-icon-space: 1.5rem;
     isolation: isolate;
 }
 
+:host(limel-chip-set[type='input']) {
+    limel-notched-outline {
+        [slot='content'] {
+            min-height: shared_input-select-picker.$height-of-mdc-text-field;
+        }
+    }
+}
+
+:host(limel-chip-set:not([type='input'])) {
+    .limel-notched-outline {
+        --limel-notched-outline-border-color: transparent;
+        --limel-notched-outline-background-color: transparent;
+    }
+}
+
 .mdc-chip-set {
     display: flex;
     flex-wrap: wrap;
@@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
-            padding-left: functions.pxToRem(4);
-        }
-    }
-
     &.mdc-chip-set--input {
         padding: 0.4rem 0.5rem;
         width: 100%;
@@ -75,7 +74,7 @@ $leading-icon-space: 1.5rem;
         @include shared_input-select-picker.input-field-placeholder;
 
         width: auto;
-        padding: 0 functions.pxToRem(12);
+        padding: 0 0.5rem;
 
         flex-grow: 1;
         flex-shrink: 0;
@@ -100,39 +99,6 @@ $leading-icon-space: 1.5rem;
     }
 }
 
-// used only in chipsets that do not have input
-.chip-set__label {
-    @include mixins.truncate-text;
-    width: 120%; // `120%` instead of `100%`,
-    // because this class is always together with `mdc-floating-label--float-above`,
-    // which scales the label down. So there is more horizontal space to display the label in.
-    top: functions.pxToRem(13);
-    padding-left: functions.pxToRem(20);
-}
-
-// Because MDC removes some classes in chipset, we add custom
-// classes with similar names and expected behavior & styles.
-// These class names start with `lime-`, instead of `mdc-`.
-.lime-notched-outline--notched {
-    .mdc-notched-outline__notch {
-        border-top: 1px solid transparent !important;
-
-        .lime-floating-label--float-above {
-            // This overrides MDC's original top value which is `top: 50%`.
-            // The reason is that a % value aligns the label in a wrong position
-            // vertically, when there are multiple rows of chips.
-            top: functions.pxToRem(27);
-
-            transform: translateY(-34.75px) scale(0.75) !important;
-            font-size: shared_input-select-picker.$cropped-label-hack--font-size;
-        }
-    }
-}
-
-.force-invalid {
-    @extend .mdc-text-field--invalid;
-}
-
 .clear-all-button {
     @include mixins.clear-all-button;
     @include mixins.visualize-keyboard-focus;
@@ -144,14 +110,14 @@ $leading-icon-space: 1.5rem;
     opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).
 
     &:focus,
-    .has-chips:not(.mdc-text-field--disabled):hover &,
-    .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused & {
+    .has-chips:not(.disabled):hover &,
+    .has-chips:not(.disabled).mdc-text-field--focused & {
         opacity: 1;
         outline: none;
     }
 
     .mdc-chip-set:not(.has-chips) &,
-    .has-chips.mdc-text-field--disabled & {
+    .has-chips.disabled & {
         display: none; // Won't receive focus when disabled
     }
 }
@@ -161,15 +127,6 @@ $leading-icon-space: 1.5rem;
         .mdc-text-field__input {
             padding-left: $leading-icon-space;
         }
-
-        .mdc-floating-label {
-            &:not(.lime-floating-label--float-above) {
-                left: $leading-icon-space;
-            }
-            &.mdc-floating-label--float-above {
-                left: functions.pxToRem(4);
-            }
-        }
     }
 
     limel-chip {
@@ -207,10 +164,3 @@ limel-chip {
 
 @import './partial-styles/_readonly';
 @import './partial-styles/_helper-text';
-
-// To make the input field render smaller than the default MDC UI
-.mdc-text-field {
-    &.mdc-text-field--outlined {
-        min-height: shared_input-select-picker.$height-of-mdc-text-field;
-    }
-}
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
index 680c4ce493..5887692d8a 100644
--- a/src/components/chip-set/chip-set.tsx
+++ b/src/components/chip-set/chip-set.tsx
@@ -7,7 +7,6 @@ import {
     Event,
     EventEmitter,
     h,
-    Host,
     Method,
     Prop,
     State,
@@ -18,6 +17,7 @@ import translate from '../../global/translations';
 import { getHref, getTarget } from '../../util/link-helper';
 import { isEqual } from 'lodash-es';
 import { LimelChipCustomEvent } from '../../components';
+import { createRandomString } from '../../util/random-string';
 
 const INPUT_FIELD_TABINDEX = 1;
 
@@ -243,8 +243,10 @@ export class ChipSet {
 
     private mdcTextField: MDCTextField;
     private readonly handleKeyDown = handleKeyboardEvent;
+    private labelId: string;
 
     constructor() {
+        this.labelId = createRandomString();
         this.renderChip = this.renderChip.bind(this);
         this.renderInputChip = this.renderInputChip.bind(this);
         this.isFull = this.isFull.bind(this);
@@ -337,35 +339,70 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+            >
+                <div slot="content" {...this.getContentProps()} class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
     }
 
+    private getContentProps() {
+        if (this.type === 'input') {
+            return {
+                onClick: this.handleTextFieldFocus,
+            };
+        }
+
+        return {
+            role: 'grid',
+        };
+    }
+
+    private renderContent = (value: Chip[]) => {
+        if (this.type === 'input') {
+            return this.renderInputChips();
+        }
+
+        return value.map(this.renderChip);
+    };
+
     private readonly getValue = () => {
         return this.value.map((chip) => ({
             ...chip,
@@ -385,113 +422,42 @@ export class ChipSet {
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
 
     private readonly floatLabelAbove = () => {
-        if (!!this.value.length || this.editMode || this.readonly) {
+        if (
+            !!this.value.length ||
+            this.editMode ||
+            this.readonly ||
+            this.textValue
+        ) {
             return true;
         }
     };
diff --git a/src/components/chip-set/partial-styles/_readonly.scss b/src/components/chip-set/partial-styles/_readonly.scss
index a59794ef4e..836319e928 100644
--- a/src/components/chip-set/partial-styles/_readonly.scss
+++ b/src/components/chip-set/partial-styles/_readonly.scss
@@ -1,6 +1,6 @@
 :host(limel-chip-set[readonly]) {
     .mdc-text-field {
-        &.mdc-text-field--disabled {
+        &.disabled {
             pointer-events: auto;
         }
     }
diff --git a/src/components/input-field/input-field.e2e.ts b/src/components/input-field/input-field.e2e.ts
index bf96fa12d8..f7290fc43f 100644
--- a/src/components/input-field/input-field.e2e.ts
+++ b/src/components/input-field/input-field.e2e.ts
@@ -5,8 +5,6 @@ describe('limel-input-field', () => {
     let page: E2EPage;
     let limelInput: E2EElement;
     let inputContainer: E2EElement;
-    let label: E2EElement;
-    let outline: E2EElement;
 
     const types: Array<{ name: InputType; [key: string]: any }> = [
         { name: 'email' },
@@ -97,42 +95,6 @@ describe('limel-input-field', () => {
                     expect(nativeInput).toHaveClass('mdc-text-field__input');
                 });
             });
-            describe('the label', () => {
-                beforeEach(async () => {
-                    label = await page.find(
-                        'limel-input-field>>>.mdc-floating-label',
-                    );
-                });
-                it('is NOT floating', () => {
-                    expect(label).not.toHaveClass(
-                        'mdc-floating-label--float-above',
-                    );
-                });
-                describe('after focusing', () => {
-                    beforeEach(async () => {
-                        label.click();
-                        await page.waitForEvent('click');
-                        await page.waitForChanges();
-                    });
-                    it('IS floating', () => {
-                        expect(label).toHaveClass(
-                            'mdc-floating-label--float-above',
-                        );
-                    });
-                });
-            });
-            describe('the outline', () => {
-                beforeEach(async () => {
-                    outline = await page.find(
-                        'limel-input-field>>>.mdc-notched-outline',
-                    );
-                });
-                it('has the expected structure', () => {
-                    expect(replaceLabelId(outline.outerHTML)).toEqual(
-                        '<span class="mdc-notched-outline mdc-notched-outline--upgraded" tabindex="-1"><span class="mdc-notched-outline__leading"></span><span class="mdc-notched-outline__notch"><span class="mdc-floating-label" id="tf-input-label">Test</span></span><span class="mdc-notched-outline__trailing"></span></span>',
-                    );
-                });
-            });
             describe('when invalid is set to true', () => {
                 beforeEach(async () => {
                     limelInput.setAttribute('invalid', true);
@@ -247,21 +209,11 @@ describe('limel-input-field', () => {
             page = await createPage(`
                 <limel-input-field
                     type="urlAsText"
-                    label="Website"
                     show-link="true"
+                    label="Test"
                 ></limel-input-field>
             `);
 
-            await page.evaluate(() => {
-                const elements = document.querySelectorAll(
-                    '.mdc-floating-label',
-                );
-
-                elements.forEach((el) => {
-                    el.id = 'test';
-                });
-            });
-
             limelInput = await page.find('limel-input-field');
             inputContainer = await page.find(
                 'limel-input-field>>>label.mdc-text-field',
@@ -354,10 +306,3 @@ describe('limel-input-field', () => {
 async function createPage(content: string) {
     return newE2EPage({ html: content });
 }
-
-function replaceLabelId(HTML: string) {
-    return HTML.replace(
-        /"a_(\d|[a-f]){8}-(\d|[a-f]){4}-(\d|[a-f]){4}-(\d|[a-f]){4}-(\d|[a-f]){12}"/g,
-        '"tf-input-label"',
-    );
-}
diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
index 855877f131..a4ef9a38f0 100644
--- a/src/components/input-field/input-field.scss
+++ b/src/components/input-field/input-field.scss
@@ -7,10 +7,6 @@
 
 @use '@material/textfield';
 @use '@material/textfield/icon';
-@use '@material/notched-outline/mdc-notched-outline';
-@use '@material/floating-label';
-@use '@material/floating-label/mdc-floating-label';
-@use '@material/ripple';
 @use '@material/list';
 @use '@material/elevation';
 @use '@material/menu-surface';
@@ -47,14 +43,9 @@
 @include textfield.core-styles;
 @include icon.icon-core-styles;
 
-@include shared_input-select-picker.outlined-style-overrides;
 @include shared_input-select-picker.readonly-overrides;
-@include shared_input-select-picker.cropped-label-hack;
-@include shared_input-select-picker.disabled-overrides;
 @include shared_input-select-picker.leading-icon;
 @include shared_input-select-picker.trailing-icon;
-@include shared_input-select-picker.floating-label-overrides;
-@include shared_input-select-picker.lime-empty-value-for-readonly;
 @include shared_input-select-picker.lime-looks-like-input-value;
 
 .lime-text-field--empty {
@@ -65,6 +56,15 @@
     }
 }
 
+limel-notched-outline {
+    &[has-value],
+    &:focus-within {
+        .mdc-text-field__affix {
+            opacity: 1;
+        }
+    }
+}
+
 .mdc-text-field {
     width: 100%;
 
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index c5e1af28dd..e9b5a9392a 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
+                <label slot="content" class={this.getContainerClassList()}>
+                    {this.renderLeadingIcon()}
+                    {this.renderPrefix()}
+                    {this.renderFormattedNumber()}
+                    {this.renderInput(properties)}
+                    {this.renderSuffix()}
+                    {this.renderTextarea(properties)}
+                    {this.renderTrailingLinkOrButton()}
+                </label>
+            </limel-notched-outline>,
             this.renderHelperLine(),
             this.renderAutocompleteList(),
         ];
@@ -408,7 +413,6 @@ export class InputField {
     private getContainerClassList = () => {
         const classList = {
             'mdc-text-field': true,
-            'mdc-text-field--no-label': !this.label,
             'mdc-text-field--outlined': true,
             'mdc-text-field--invalid': this.isInvalid(),
             'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -569,16 +573,6 @@ export class InputField {
         );
     };
 
-    private renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.isEmpty()) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
     private renderSuffix = () => {
         if (!this.hasSuffix() || this.type === 'textarea') {
             return;
@@ -650,26 +644,6 @@ export class InputField {
         }
     };
 
-    private renderLabel = () => {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-floating-label--float-above':
-                !this.isEmpty() || this.isFocused || this.readonly,
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <span class="mdc-notched-outline__notch">
-                <span class={labelClassList} id={this.labelId}>
-                    {this.label}
-                </span>
-            </span>
-        );
-    };
-
     private renderLeadingIcon = () => {
         if (this.type === 'textarea') {
             return;
diff --git a/src/components/notched-outline/examples/notched-outline-basic.scss b/src/components/notched-outline/examples/notched-outline-basic.scss
new file mode 100644
index 0000000000..d1712b75b4
--- /dev/null
+++ b/src/components/notched-outline/examples/notched-outline-basic.scss
@@ -0,0 +1,22 @@
+* {
+    box-sizing: border-box;
+}
+
+section {
+    padding: 1rem;
+    background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+    background-size: 0.5rem;
+}
+
+input[type='text'] {
+    // Overriding some of the native input styles for the
+    // sake of this example.
+    border: none;
+    outline: none;
+
+    height: 2.5rem;
+    width: 100%;
+    padding: 0 1rem;
+
+    background-color: transparent;
+}
diff --git a/src/components/notched-outline/examples/notched-outline-basic.tsx b/src/components/notched-outline/examples/notched-outline-basic.tsx
new file mode 100644
index 0000000000..b5d0f68d49
--- /dev/null
+++ b/src/components/notched-outline/examples/notched-outline-basic.tsx
@@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
+}
diff --git a/src/components/notched-outline/notched-outline.scss b/src/components/notched-outline/notched-outline.scss
new file mode 100644
index 0000000000..a12953e0b8
--- /dev/null
+++ b/src/components/notched-outline/notched-outline.scss
@@ -0,0 +1,249 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.3;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        &:not([disabled]:not([disabled='false'])) {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+            &:hover {
+                --limel-notched-outline-border-color: var(
+                    --lime-error-text-color
+                );
+            }
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon] {
+        &:not([has-leading-icon='false']):not([has-floating-label]):not(
+                [has-value]
+            ) {
+            --limel-notched-outline-label-transform-x: 1.25rem;
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
+}
+
+// Transitioning the floating label
+@mixin float-label {
+    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+    --limel-notched-outline-label-transform-x: 0;
+    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+    --limel-notched-outline-notch-border-top-color: transparent;
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover,
+        &:focus,
+        &:focus-within {
+            label {
+                will-change: color, transform, font-size;
+            }
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            @include float-label;
+        }
+    }
+
+    &[has-floating-label],
+    &[has-value]:not([has-value='false']),
+    &[readonly]:not([has-value]:not([has-value='true'])) {
+        @include float-label;
+    }
+}
diff --git a/src/components/notched-outline/notched-outline.tsx b/src/components/notched-outline/notched-outline.tsx
new file mode 100644
index 0000000000..bdd0fb0f07
--- /dev/null
+++ b/src/components/notched-outline/notched-outline.tsx
@@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as internal parts
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+@Component({
+    tag: 'limel-notched-outline',
+    styleUrl: 'notched-outline.scss',
+    shadow: false,
+})
+export class NotchedOutline {
+    /**
+     * Set to `true` when the input element is required.
+     * This applies proper visual styles, such as inclusion of an asterisk
+     * beside the label.
+     */
+    @Prop({ reflect: true })
+    public required = false;
+
+    /**
+     * Set to `true` when the input element is readonly.
+     * This applies proper visual styles, such as making the outline transparent.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input element is
+     * invalid. This applies proper visual styles, such as making the outlines red.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * Set to `true` to indicate that the input element is
+     * disabled. This applies proper visual styles, such as making the outlines
+     * and the label transparent.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    /**
+     * Label to display for the input element.
+     * :::important
+     * Note that the input element of the consumer component will be
+     * labeled by this label, using the `labelId` prop.
+     * :::
+     */
+    @Prop({ reflect: true })
+    public label?: string;
+
+    /**
+     * The `id` of the input element which should be
+     * labeled by the provided label.
+     */
+    @Prop({ reflect: true })
+    public labelId?: string;
+
+    /**
+     * Set to `true` when the user has entered a value for the input element,
+     * shrinking the label in size, and visually rendering it above the entered value.
+     */
+    @Prop({ reflect: true })
+    public hasValue = false;
+
+    /**
+     * Set to `true` when the consumer element displays a leading icon.
+     * This applies proper visual styles, such as rendering the label
+     * correctly placed beside the leading icon.
+     */
+    @Prop({ reflect: true })
+    public hasLeadingIcon = false;
+
+    /**
+     * Set to `true` when the consumer element needs to render the
+     * label above the input element, despite existence of a `value`.
+     * For example in the `text-editor` or `limel-select`,
+     * where the default layout requires a floating label.
+     */
+    @Prop({ reflect: true })
+    public hasFloatingLabel = false;
+
+    public render() {
+        return (
+            <div class="limel-notched-outline">
+                <slot name="content" />
+                <span
+                    class="limel-notched-outline--outlines"
+                    aria-hidden="true"
+                >
+                    <span class="limel-notched-outline--leading-outline" />
+                    {this.renderLabel()}
+                    <span class="limel-notched-outline--trailing-outline" />
+                    {this.renderEmptyReadonlyValue()}
+                </span>
+            </div>
+        );
+    }
+
+    private renderLabel() {
+        if (!this.label) {
+            return;
+        }
+
+        return (
+            <span class="limel-notched-outline--notch">
+                <label htmlFor={this.labelId}>{this.label}</label>
+            </span>
+        );
+    }
+
+    private renderEmptyReadonlyValue() {
+        if (!this.readonly || this.hasValue) {
+            return;
+        }
+
+        return (
+            <span
+                class="limel-notched-outline--empty-readonly-value"
+                aria-hidden="true"
+            >
+                –
+            </span>
+        );
+    }
+}
diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts
index ca30e78160..41d7bfc4f1 100644
--- a/src/components/select/select.e2e.ts
+++ b/src/components/select/select.e2e.ts
@@ -11,7 +11,9 @@ describe('limel-select (native)', () => {
                 <limel-select data-native label="Favourite Doctor"></limel-select>
             `);
             limelSelect = await page.find('limel-select');
-            label = await page.find('limel-select>>>.mdc-floating-label');
+            label = await page.find(
+                'limel-select >>> .limel-notched-outline--notch label',
+            );
         });
         it('displays the correct label', () => {
             expect(label).toEqualText('Favourite Doctor');
@@ -224,7 +226,9 @@ describe('limel-select (menu)', () => {
                 <limel-select label="Favourite Doctor"></limel-select>
             `);
             limelSelect = await page.find('limel-select');
-            label = await page.find('limel-select>>>.mdc-floating-label');
+            label = await page.find(
+                'limel-select >>> .limel-notched-outline--notch label',
+            );
         });
         it('displays the correct label', () => {
             expect(label).toEqualText('Favourite Doctor');
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 79b5dd38e1..79380d8059 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -3,15 +3,16 @@
 @use '../../style/mixins';
 
 @use '@material/select/styles';
-@use '@material/floating-label';
-@use '@material/floating-label/mdc-floating-label';
 
 // Note! The `--dropdown-z-index` property is used from `select.tsx`.
 /**
  * @prop --dropdown-z-index: z-index of the dropdown menu.
  */
 
-:host {
+$border-radius: 0.375rem;
+
+:host(limel-select) {
+    --limel-notched-outline-border-radius: #{$border-radius};
     display: block;
     position: relative;
 }
@@ -20,12 +21,13 @@
     display: none;
 }
 
-.mdc-select--outlined .mdc-floating-label {
-    left: functions.pxToRem(16);
+limel-notched-outline:not([invalid]:not([invalid='false'])) {
+    .limel-notched-outline--outlines {
+        --limel-notched-outline-border-color: transparent;
+    }
 }
 
 .mdc-select__anchor,
-.mdc-floating-label,
 .mdc-select__selected-text {
     // As long as this component is depended on MDC,
     // we need to force it to be font-agnostic.
@@ -69,12 +71,6 @@
     flex-wrap: wrap;
     width: 100%;
 
-    &:not(.limel-select--readonly) {
-        .limel-select-trigger {
-            background-color: shared_input-select-picker.$background-color-focused;
-        }
-    }
-
     .mdc-select__anchor {
         height: functions.pxToRem(36);
         padding-left: functions.pxToRem(0);
@@ -85,18 +81,7 @@
         display: inline-flex;
         align-items: center;
 
-        border-radius: functions.pxToRem(5);
-
-        .mdc-floating-label {
-            color: shared_input-select-picker.$label-color;
-            width: calc(
-                100% - #{functions.pxToRem(16)}
-            ); //This forces the label to truncate when container is too little.
-            &.mdc-floating-label--float-above {
-                font-size: shared_input-select-picker.$cropped-label-hack--font-size;
-                transform: translateY(functions.pxToRem(-27)) scale(0.75);
-            }
-        }
+        border-radius: $border-radius;
     }
 
     .limel-select-trigger,
@@ -135,10 +120,6 @@
             &.limel-select--focused {
                 background-color: shared_input-select-picker.$background-color-focused;
 
-                .mdc-floating-label {
-                    color: var(--mdc-theme-primary);
-                }
-
                 .mdc-select__dropdown-icon {
                     svg {
                         fill: var(--mdc-theme-primary);
@@ -157,27 +138,11 @@
         }
     }
 
-    .readonly-option {
-        position: absolute;
-        top: 1.145rem;
-    }
-
-    &.limel-select--required {
-        .mdc-floating-label::after {
-            content: '*';
-        }
-    }
-
     &.limel-select--invalid {
         .limel-select__selected-option__text,
         .invalid-icon {
             color: var(--lime-error-text-color);
         }
-        .mdc-floating-label:not(.mdc-floating-label--float-above) {
-            max-width: calc(
-                100% - #{functions.pxToRem(64)}
-            ); // leaves space for the invalid-icon
-        }
     }
 }
 
diff --git a/src/components/select/select.template.tsx b/src/components/select/select.template.tsx
index 439c1abe9d..699aaf4d3c 100644
--- a/src/components/select/select.template.tsx
+++ b/src/components/select/select.template.tsx
@@ -3,7 +3,6 @@ import { Option } from '../select/option.types';
 import { FunctionalComponent, h } from '@stencil/core';
 import { isMultiple } from '../../util/multiple';
 import { getIconColor, getIconName } from '../icon/get-icon-props';
-
 interface SelectTemplateProps {
     disabled?: boolean;
     readonly?: boolean;
@@ -50,27 +49,34 @@ export const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (
     const classList = {
         'limel-select': true,
         'mdc-select': true,
-        'mdc-select--outlined': true,
         'mdc-select--disabled': props.disabled,
         'limel-select--readonly': props.readonly,
-        'limel-select--required': props.required,
         'limel-select--invalid': !isValid,
-        'limel-select--empty': !hasValue,
         'limel-select--with-helper-text': typeof props.helperText === 'string',
     };
 
-    return (
-        <div class={classList}>
+    return [
+        <limel-notched-outline
+            class={classList}
+            labelId="s-label"
+            label={props.label}
+            required={props.required}
+            invalid={!isValid}
+            disabled={props.disabled}
+            readonly={props.readonly}
+            hasValue={hasValue}
+            hasFloatingLabel={props.isOpen}
+        >
             <SelectValue
                 {...props}
                 hasValue={hasValue}
                 isValid={isValid}
                 hasEmptyText={hasEmptyText}
             />
-            <HelperText text={props.helperText} isValid={!props.invalid} />
-            <SelectDropdown {...props} />
-        </div>
-    );
+        </limel-notched-outline>,
+        <HelperText text={props.helperText} isValid={!props.invalid} />,
+        <SelectDropdown {...props} />,
+    ];
 };
 
 const SelectValue: FunctionalComponent<
@@ -85,18 +91,10 @@ const SelectValue: FunctionalComponent<
         'limel-select-trigger': true,
         'limel-select--focused': props.isOpen,
     };
-    const labelClassList = {
-        'mdc-floating-label': true,
-        'mdc-floating-label--float-above':
-            !props.hasEmptyText ||
-            props.isOpen ||
-            props.readonly ||
-            props.hasValue,
-        'mdc-floating-label--active': props.isOpen,
-    };
 
     return (
         <button
+            slot="content"
             class={anchorClassList}
             onClick={props.open}
             onKeyPress={props.onTriggerPress}
@@ -107,16 +105,13 @@ const SelectValue: FunctionalComponent<
             aria-required={props.required}
             disabled={props.disabled || props.readonly}
         >
-            <span id="s-label" class={labelClassList}>
-                {props.label}
-            </span>
             <span class="mdc-select__selected-text-container limel-select__selected-option">
                 {getSelectedIcon(props.value)}
                 <span
                     id="s-selected-text"
                     class="mdc-select__selected-text limel-select__selected-option__text"
                 >
-                    {getSelectedText(props.value, props.readonly)}
+                    {getSelectedText(props.value)}
                 </span>
             </span>
             <ShowIcon {...props} isValid={props.isValid} />
@@ -323,22 +318,16 @@ function getMenuOptionFilter(selectIsRequired: boolean) {
     };
 }
 
-function getSelectedText(value: Option | Option[], readonly: boolean): string {
-    const emptyReadOnlyOption = <span class="readonly-option">–</span>;
-
+function getSelectedText(value: Option | Option[]): string {
     const isEmptyValue = !value || (isMultiple(value) && !value.length);
     if (isEmptyValue) {
-        return readonly ? emptyReadOnlyOption : '';
+        return '';
     }
 
     if (isMultiple(value)) {
         return value.map((option) => option.text).join(', ');
     }
 
-    if (readonly && (value.value === 'empty' || value.text === '')) {
-        return emptyReadOnlyOption;
-    }
-
     return value.text;
 }
 
diff --git a/src/components/text-editor/text-editor.scss b/src/components/text-editor/text-editor.scss
index c140449914..f4f2cc7f18 100644
--- a/src/components/text-editor/text-editor.scss
+++ b/src/components/text-editor/text-editor.scss
@@ -6,19 +6,14 @@
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).
  */
 
-@include shared_input-select-picker.lime-looks-like-input-value;
-.lime-looks-like-input-value {
-    padding: var(--limel-text-editor-padding);
-}
-
 * {
     box-sizing: border-box;
 }
 
+$min-height: 5rem;
+
 :host(limel-text-editor) {
-    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};
-    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};
-    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};
+    --limel-notched-outline-z-index: 2; // since `div.toolbar` has `z-index: 1;`
     --limel-prosemirror-adapter-toolbar-opacity: 0.6;
     --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;
     --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;
@@ -37,7 +32,7 @@
 
     width: 100%;
     min-width: 5rem;
-    min-height: 5rem;
+    min-height: $min-height;
     height: 100%;
     max-height: var(
         --text-editor-max-height,
@@ -61,15 +56,11 @@
     --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;
     --limel-prosemirror-adapter-toolbar-opacity: 0;
     --limel-text-editor-placeholder-top: 0;
-    min-height: 2.5rem;
-}
 
-:host(limel-text-editor:hover) {
-    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
-}
-
-:host(limel-text-editor:focus-within) {
-    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+    min-height: calc($min-height / 2);
+    limel-prosemirror-adapter {
+        min-height: calc($min-height / 2);
+    }
 }
 
 :host(limel-text-editor:focus-within),
@@ -80,22 +71,15 @@
 }
 
 :host(limel-text-editor[disabled]:not([disabled='false'])) {
-    @include shared_input-select-picker.looks-disabled;
-
     limel-prosemirror-adapter {
+        @include shared_input-select-picker.looks-disabled;
         pointer-events: none;
     }
 }
 
-:host(limel-text-editor[invalid]:not([invalid='false'])) {
-    --limel-text-editor-outline-color: var(--lime-error-text-color);
-}
-
 :host(limel-text-editor[readonly]:not([readonly='false'])) {
     --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;
     --limel-text-editor-placeholder-top: 0;
-    --limel-text-editor-outline-color: transparent;
-    --limel-text-editor-background-color: transparent;
 
     limel-markdown {
         // displayed when `readonly` instead of the adapter
@@ -138,74 +122,6 @@
     }
 }
 
-.notched-outline {
-    transition: bottom
-        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
-        cubic-bezier(1, 0.09, 0, 0.89);
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    bottom: var(--limel-text-editor-notched-outline-bottom, 0);
-
-    display: flex;
-    background-color: var(--limel-text-editor-background-color);
-}
-
-.leading-outline,
-.notch,
-.trailing-outline {
-    transition: border-color 0.2s ease;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--limel-text-editor-outline-color);
-}
-
-.leading-outline {
-    flex-shrink: 0;
-    width: 0.75rem;
-    border-right-width: 0;
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-}
-
-.notch {
-    flex-shrink: 0;
-
-    position: relative;
-    z-index: 2;
-
-    border-top-width: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-
-    max-width: calc(100% - 1.5rem);
-}
-
-.trailing-outline {
-    flex-grow: 1;
-    border-left-width: 0;
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-}
-
-label {
-    transform: translateY(-50%);
-
-    @include mixins.truncate-text;
-    display: block;
-    padding: 0 0.25rem;
-
-    color: var(--limel-text-editor-label-color);
-    font-size: 0.65rem; // `10.4px` similar to MDC's floating label
-    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
-
-    :host(limel-text-editor[required]:not([required='false'])) & {
-        &::after {
-            content: '*';
-        }
-    }
-}
-
 .placeholder {
     transition-property: top;
     transition-duration: var(
@@ -231,18 +147,12 @@ limel-prosemirror-adapter {
     flex-grow: 1;
 
     min-width: 0;
-    min-height: 0;
+    min-height: $min-height;
     height: 100%;
     overflow: hidden auto;
 }
 
 @include mixins.hide-helper-line-when-not-needed(limel-text-editor);
-:host(limel-text-editor.has-helper-text:focus-within),
-:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {
-    .notched-outline {
-        --limel-text-editor-notched-outline-bottom: 1rem;
-    }
-}
 
 :host(limel-text-editor[allow-resize]) {
     limel-prosemirror-adapter {
diff --git a/src/components/text-editor/text-editor.spec.tsx b/src/components/text-editor/text-editor.spec.tsx
index 7da57bab79..3e5c2c88c3 100644
--- a/src/components/text-editor/text-editor.spec.tsx
+++ b/src/components/text-editor/text-editor.spec.tsx
@@ -18,16 +18,22 @@ describe('limel-text-editor', () => {
         getAttributesRecursively(textEditor, ariaControls, 'aria-controls');
         getAttributesRecursively(textEditor, ids, 'id');
 
-        expect(textEditor)
-            .toEqualHtml(`<limel-text-editor allow-resize="" language="en" ui="standard">
-        <mock:shadow-root>
-          <span class="notched-outline">
-            <span class="leading-outline"></span>
-            <span class="trailing-outline"></span>
-          </span>
-          <limel-prosemirror-adapter aria-controls=${ariaControls[0]} contenttype="markdown" id=${ids[0]} language="en"></limel-prosemirror-adapter>
-        </mock:shadow-root>
-      </limel-text-editor>`);
+        const notchedOutline = textEditor.shadowRoot.querySelector(
+            'limel-notched-outline',
+        );
+        expect(notchedOutline).not.toBeFalsy();
+        expect(notchedOutline.getAttribute('hasfloatinglabel')).toBe('');
+
+        const prosemirrorAdapter = textEditor.shadowRoot.querySelector(
+            'limel-prosemirror-adapter',
+        );
+        expect(prosemirrorAdapter).not.toBeFalsy();
+        expect(prosemirrorAdapter.getAttribute('contenttype')).toBe('markdown');
+        expect(prosemirrorAdapter.getAttribute('language')).toBe('en');
+        expect(prosemirrorAdapter.getAttribute('slot')).toBe('content');
+
+        const labelId = notchedOutline.getAttribute('labelid');
+        expect(prosemirrorAdapter.getAttribute('id')).toBe(labelId);
     });
 
     test.each([
@@ -147,9 +153,14 @@ describe('limel-text-editor', () => {
         });
 
         test('it renders the label', () => {
-            const label = textEditor.shadowRoot.querySelector('label');
+            const notchedOutline = textEditor.shadowRoot.querySelector(
+                'limel-notched-outline',
+            );
+            expect(notchedOutline).not.toBeFalsy();
+            expect(notchedOutline.getAttribute('label')).toEqual('my label');
 
-            expect(label.innerHTML).toEqual('my label');
+            const hasLabelProp = notchedOutline.hasAttribute('label');
+            expect(hasLabelProp).toBe(true);
         });
     });
 });
diff --git a/src/components/text-editor/text-editor.tsx b/src/components/text-editor/text-editor.tsx
index 61d91d8ff6..b10811cba5 100644
--- a/src/components/text-editor/text-editor.tsx
+++ b/src/components/text-editor/text-editor.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
 import { FormComponent } from '../form/form.types';
 import { Languages } from '../date-picker/date.types';
 import { createRandomString } from '../../util/random-string';
@@ -224,44 +224,39 @@ export class TextEditor implements FormComponent<string> {
     }
 
     public render() {
-        return (
-            <Host
-                class={{
-                    'has-helper-text': !!this.helperText,
-                }}
+        return [
+            <limel-notched-outline
+                labelId={this.editorId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasFloatingLabel={true}
             >
-                <span class="notched-outline">
-                    <span class="leading-outline" />
-                    {this.renderLabel()}
-                    <span class="trailing-outline" />
-                </span>
                 {this.renderEditor()}
-            </Host>
-        );
+                {this.renderPlaceholder()}
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
     }
 
     private renderEditor() {
-        if (this.readonly && !this.value) {
-            return [
-                <span class="lime-looks-like-input-value">–</span>,
-                this.renderHelperLine(),
-            ];
-        }
-
         if (this.readonly) {
-            return [
+            return (
                 <limel-markdown
+                    slot="content"
                     value={this.value}
                     aria-controls={this.helperTextId}
                     id={this.editorId}
-                />,
-                this.renderPlaceholder(),
-                this.renderHelperLine(),
-            ];
+                />
+            );
         }
 
-        return [
+        return (
             <limel-prosemirror-adapter
+                slot="content"
                 aria-placeholder={this.placeholder}
                 contentType={this.contentType}
                 onChange={this.handleChange}
@@ -272,24 +267,12 @@ export class TextEditor implements FormComponent<string> {
                 aria-controls={this.helperTextId}
                 id={this.editorId}
                 aria-disabled={this.disabled}
+                aria-invalid={this.invalid}
+                aria-required={this.required}
                 language={this.language}
                 triggerCharacters={this.triggers}
                 disabled={this.disabled}
-            />,
-            this.renderPlaceholder(),
-            this.renderHelperLine(),
-        ];
-    }
-
-    private renderLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <span class="notch">
-                <label htmlFor={this.editorId}>{this.label}</label>
-            </span>
+            />
         );
     }
 
@@ -299,7 +282,7 @@ export class TextEditor implements FormComponent<string> {
         }
 
         return (
-            <span class="placeholder" aria-hidden="true">
+            <span class="placeholder" aria-hidden="true" slot="content">
                 {this.placeholder}
             </span>
         );
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index db9b5bb41e..3111388c3b 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -214,9 +214,15 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 
 @mixin leading-icon {
     .mdc-text-field__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         color: $input-text-leading-icon-color;
-        width: functions.pxToRem(24);
-        height: functions.pxToRem(24);
+
+        limel-icon {
+            width: functions.pxToRem(24);
+            height: functions.pxToRem(24);
+        }
     }
 }
 


Reviews:
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T10:29:05Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>♻️ Duplicate comments (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

`103-103`: **Appropriate use of `aria-hidden` for decorative elements.**

The `aria-hidden="true"` attribute is correctly applied to the outlines container since it's purely decorative. The label is still properly associated with its input via the `htmlFor` attribute.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 6d7e67b56ea9842fc56504e7f05275ba653f10f0 and d10cf750b2930ba270bf257174b4c0ed2405c6d2.

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/input-field/input-field.scss` (2 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Definitions (3)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-140)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (27)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (1)</summary>

`1-22`: **Code looks good!**

The styling is appropriate for an example component. Setting box-sizing globally ensures consistent layout, the SVG background pattern adds visual texture without being intrusive, and the input styling clearly removes native styles for demonstration purposes.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (5)</summary>

`21-21`: **Good addition of import for createRandomString utility.**

This import provides access to the utility function needed for generating unique identifiers.

---

`247-247`: **Good property addition for improving accessibility.**

Adding a private labelId property will ensure that each chip set has a unique identifier for better accessibility practices, connecting the label to its input element.

---

`250-250`: **Good initialization of the labelId in the constructor.**

Using createRandomString() to initialize the labelId ensures that each ChipSet instance will have a unique identifier, which is important for accessibility when multiple chip-sets are present on the same page.

---

`425-425`: **Good implementation of the generated labelId attribute.**

Using the dynamic labelId to connect the input element to its label improves accessibility by ensuring each input has a unique identifier even when multiple chip-sets are present on a page.

---

`489-489`: **Good implementation of labelId for label association.**

Using the labelId for the htmlFor attribute properly connects the label to its input element, which is important for accessibility and follows HTML best practices.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`217-225`: **Improved icon layout with flexbox.**

The changes to the leading icon styles improve the layout by:
1. Using flexbox (display, align-items, justify-content) for better centering
2. Better encapsulating the styles by moving size properties to the nested limel-icon selector

This will ensure icons are consistently centered and properly sized across components.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (5)</summary>

`1-9`: **Good setup for the NotchedOutline component styles.**

The file properly:
- Imports required mixins and shared styles
- Documents the CSS custom property with JSDoc
- Defines clear constants for border-radius and positioning

This provides a solid foundation for the component's styling.

---

`10-21`: **Good implementation of the component's root selector.**

The styles:
- Define essential CSS custom properties with appropriate default values
- Apply proper display properties
- Ensure consistent box-sizing for all elements within the component

This establishes a consistent styling environment for the component.

---

`23-130`: **Well-structured core component styles with clear organization.**

The core styles for the notched outline are well-organized with:
- Proper positioning of elements
- Clear transitions for interactive states
- Well-structured outlines with appropriate border properties
- Good handling of the label styling and transitions
- Proper handling of empty readonly values

The code includes helpful comments explaining the prefix usage due to shadow: false.

---

`132-201`: **Well-implemented state variations with CSS custom properties.**

The state-based styles effectively:
- Handle hover, focus, and disabled states
- Implement required field styling with appropriate indicators
- Apply invalid state styling with error colors
- Handle readonly states with appropriate visual cues
- Account for components with leading icons

Using CSS custom properties for these state changes makes the code more maintainable.

---

`202-231`: **Well-implemented floating label functionality.**

The floating label implementation:
- Uses a clear mixin to encapsulate the floating behavior
- Handles various states (focus, has-value, readonly) consistently
- Includes appropriate performance optimizations (will-change)
- Maintains proper alignment and sizing during transitions

This provides a smooth and consistent label animation experience.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

`43-44`: **Ignore false positive about missing key property.**

Biome flags a missing key property for these returned elements in an array, but we’re in Stencil, not React. Since this array is static (not dynamically rendered), the keys are unnecessary and this is likely a false positive.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (2)</summary>

`21-36`: **Good, granular assertions.**

Verifying each element in the shadow DOM, such as `limel-notched-outline` and `limel-prosemirror-adapter`, ensures the new structure is tested. The approach to check attributes like `hasfloatinglabel` and `id` binding is solid.

---

`155-164`: **Label rendering tests look correct.**

These additions accurately confirm the label value is passed to `limel-notched-outline`. This test covers the core label behavior, enhancing confidence in correctness.

</details>
<details>
<summary>src/components/input-field/input-field.tsx (2)</summary>

`324-333`: **No key needed for static array elements.**

Biome suggests adding a key property for each element in the returned array, but this is a static array in Stencil, not a reactive iteration in React. You can safely ignore this warning or keep it in mind if you ever make the array dynamic.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`334-342`: **Nested label is already associated with the input.**

Despite the static analysis warning, having the `<input>` inside the `<label>` element inherently associates them without needing a `for` or `htmlFor` attribute. This pattern should be accessible as is, so you can likely disregard the warning.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (3)</summary>

`248-254`: **LGTM! Good simplification for readonly mode.**

The readonly mode rendering is now cleaner and more focused, properly using the slot attribute.

---

`257-275`: **Good accessibility improvements with ARIA attributes.**

The addition of `aria-invalid` and `aria-required` attributes improves the accessibility of the component, ensuring screen readers can properly announce the state of the input.

---

`285-287`: **LGTM! Consistent use of slots.**

The placeholder now correctly uses `slot="content"` to ensure proper positioning within the notched outline component.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (2)</summary>

`1-24`: **LGTM! Well-structured private component with appropriate settings.**

The component is properly set up as a private utility with `shadow: false` for better performance and correct label-input associations. This is a good approach for centralizing the notched outline pattern.

---

`126-139`: **Good UX enhancement for empty readonly fields.**

Displaying a dash for empty readonly fields provides better visual feedback to users than an empty space, making it clear that the field is intentionally empty rather than missing data.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (4)</summary>

`13-13`: **Good use of a variable for consistency.**

Extracting the min-height value into a variable improves maintainability and ensures consistency throughout the component.

---

`16-16`: **LGTM! Appropriate z-index configuration.**

Setting the z-index for the notched outline ensures proper layering with the toolbar that has z-index: 1.

---

`35-35`: **Consistent application of the min-height variable.**

The min-height variable is consistently applied throughout the stylesheet, which ensures visual consistency across different states of the component.



Also applies to: 60-63, 152-152

---

`75-76`: **Good reuse of shared styles.**

Using the shared mixin for disabled styles promotes consistency across components and reduces code duplication, which aligns with the PR objectives.

</details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary>

`64-71`: **LGTM! Appropriate styles for the notched outline component.**

The new styles for the notched outline component properly handle opacity changes for the text field affix when the field has a value or focus, providing a consistent user experience.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T08:11:05Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>♻️ Duplicate comments (1)</summary><blockquote>

<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: _🧹 Nitpick (assertive)_

**Consider adding a `key` property to the returned array elements.**
Although Stencil doesn't strictly require keys as React does, the static analysis tools raise a warning. Including a `key` can help manage potential reorderings and avoid false positives. For example:

```diff
  return [
-     <limel-notched-outline
+     <limel-notched-outline
+         key="limel-notched-outline"
          labelId={this.editorId}
          label={this.label}
          ...
      />,
-     this.renderHelperLine(),
+     <div key="helperLineWrapper">
+         {this.renderHelperLine()}
+     </div>,
  ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between d10cf750b2930ba270bf257174b4c0ed2405c6d2 and f781b85523664fd879487f087d3bf5af17e6781b.

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/notched-outline/notched-outline.tsx`
- `src/components/text-editor/text-editor.tsx`

</details>
<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/notched-outline/notched-outline.tsx`
- `src/components/text-editor/text-editor.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Definitions (3)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-140)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (40)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (1)</summary>

`1-22`: **Well structured and organized styles for the example component.**

The CSS correctly sets up the example environment with proper box-sizing, background styling, and input field appearance. The comment on lines 12-13 helpfully explains why certain native styles are being overridden for the example.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary>

`21-21`: **Good accessibility improvement with unique identifiers.**

Adding the `labelId` property and importing the `createRandomString` utility improves accessibility by ensuring each input has a unique ID that's properly associated with its label.



Also applies to: 247-247, 250-250

---

`425-425`: **Properly implemented input-label association.**

The labelId is correctly applied to both the input's `id` attribute and the label's `htmlFor` attribute, creating a proper association for screen readers.



Also applies to: 489-490

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`217-225`: **Improved icon layout with flexbox.**

The changes to the leading-icon mixin improve icon positioning by:
1. Using flexbox for proper centering
2. Moving the sizing properties to the actual icon element instead of its container
3. Maintaining consistent spacing and alignment

This approach is more robust and will provide better visual consistency.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (4)</summary>

`1-21`: **Good component structure and CSS custom properties.**

The component establishes appropriate custom properties for theming and correctly sets up the base styling. The box-sizing declaration ensures layout consistency, and the CSS documentation for the z-index property is helpful.

---

`23-130`: **Well-structured BEM-style component architecture.**

The component structure follows good CSS architecture practices:
- Clear class naming using BEM-style patterns
- Proper positioning and z-index management
- Thoughtful transitions for interactive states
- Good separation of layout concerns between leading, notch, and trailing outlines

The positioning and styling of the label element is also well implemented with appropriate transitions.

---

`132-199`: **Comprehensive state handling with attribute selectors.**

The component handles all relevant states (hover, focus, disabled, required, invalid, readonly) with appropriate visual treatments. The use of `:not([attr='false'])` with attribute selectors is a smart approach to correctly interpret boolean attributes.

---

`202-231`: **Clean implementation of the floating label pattern.**

The floating label mixin and its applications are well implemented:
- Proper font-size adjustments
- Appropriate positioning transforms
- Good transitions between states
- Correct handling of focus and value states

This implementation provides a smooth and accessible floating label experience.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (3)</summary>

`1-14`: **Looks good overall!**

No issues found with the import statements and documentation comments for this new example component. All references and doc comments appear accurate.

---

`44-111`: **Static analysis warning: false positive for missing keys in returned array.**

The Stencil framework allows returning an array of elements without React-style `key` props. This warning can be safely ignored.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`114-118`: **Input event handling is correct.**

The `handleInput` method correctly updates both `inputValue` and `hasValue`. This approach provides accurate state management as the user types.

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (4)</summary>

`21-26`: **Excellent check for the outline element.**

Verifying the presence of `<limel-notched-outline>` and its `hasfloatinglabel` attribute ensures correct rendering of floating labels.

---

`27-34`: **Validating prosemirror adapter configuration.**

These assertions confirm the correct setup of content type, language, and slot. Nicely done!

---

`35-36`: **Use of matching IDs is a good accessibility practice.**

It’s excellent that the adapter’s `id` matches the notched outline’s `labelId`. This helps screen readers associate the label and the editor.

---

`156-164`: **Label rendering tested thoroughly.**

Ensuring that the label attribute is present and accurate validates the new notched outline structure. Looks solid.

</details>
<details>
<summary>src/components/input-field/input-field.tsx (2)</summary>

`324-333`: **Static analysis warning about missing keys in array returns.**

Returning an array of elements in Stencil is valid, and keys are not required in non-React frameworks. This can be disregarded as a false positive.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`334-342`: **Label-element association is handled through `aria-labelledby`.**

Although the linter complains about a form label needing a `for` attribute, your setup uses `labelId` and `aria-labelledby` instead, which is a common and valid Stencil pattern. The code is correct from an accessibility standpoint.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (4)</summary>

`1-1`: **No issues with the import statement.**
All necessary decorators and utilities from `@stencil/core` are present.

---

`247-254`: **Great approach for read-only content.**
Using `<limel-markdown>` in read-only mode ensures a clear, static display. No issues found.

---

`257-275`: **ProseMirror adapter usage looks solid.**
Properties and event handlers are appropriately passed, and accessibility attributes (e.g., `aria-*`) are set correctly.

---

`285-285`: **Placeholder slot inclusion is appropriate.**
This properly handles empty states by rendering an accessible placeholder string.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (6)</summary>

`13-13`: **New `$min-height` variable is a good enhancement.**
This makes the min-height more flexible and maintainable.

---

`16-16`: **Z-index adjustment aligns with layered elements.**
Defining `--limel-notched-outline-z-index: 2` helps manage stack contexts.

---

`35-35`: **`min-height: $min-height;` usage is correct.**
This ensures the host element consistently references the new SASS variable.

---

`60-63`: **Dynamic min-height for minimal UI is well-structured.**
Using half of `$min-height` for the minimal variant and applying that in the nested `limel-prosemirror-adapter` is coherent.

---

`75-75`: **`looks-disabled` mixin usage is appropriate.**
Consistently styles the underlying adapter for the disabled state.

---

`151-151`: **Ensuring consistent min-height in `limel-prosemirror-adapter`.**
This improves uniformity across the editor’s internal layout.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (12)</summary>

`1-2`: **Imports from `@stencil/core` are appropriately used.**
No issues found regarding import statements.

---

`3-18`: **Inline documentation is clear and well-structured.**
The JSDoc provides a concise explanation of the component’s private nature and purpose.

---

`19-23`: **Component metadata looks good.**
Specifying `shadow: false` aligns with your intent to keep label association intact.

---

`24-24`: **Class declaration is properly defined.**
No issues with the naming or export for a private component.

---

`25-54`: **Required, readonly, invalid, and disabled props are clearly defined.**
Reflecting them to the host ensures consistent styling.

---

`55-70`: **`label` and `labelId` props provide straightforward label association.**
This maintains accessibility by linking the label to its input.

---

`72-77`: **`hasValue` prop ensures floating logic is triggered when content is present.**
Nicely implemented for the notched outline.

---

`79-85`: **`hasLeadingIcon` prop is a good addition for icon integration.**
Allows fine-tuned spacing within the outline.

---

`87-94`: **`hasFloatingLabel` effectively forces label elevation.**
This helps keep a consistent layout for components like the text editor.

---

`96-111`: **Main render method is well-structured.**
Placing `aria-hidden="true"` on outlines won't affect label accessibility since the label is properly linked.

---

`113-123`: **`renderLabel` method is concise and conditionally rendered.**
Skipping label rendering if not defined optimizes the DOM.

---

`125-138`: **`renderEmptyReadonlyValue` handles the read-only placeholder cleverly.**
Displaying a dash (`–`) ensures clarity for empty read-only fields.

</details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary>

`8-13`: <details>
<summary>❓ Verification inconclusive</summary>

**Legacy MDC Styling Presence**

While the PR aims to eliminate the use of MDC input fields in favor of the new `limel-notched-outline` component, there are still several MDC-related styles and `@use` statements (e.g., for `@material/textfield`, as well as the `.mdc-text-field` rules) in this file. Please ensure that:
 
- These legacy MDC styles are either still required for backward compatibility or have been earmarked for removal in the near future.
- There is no conflict between the old MDC styles and the new notched outline styling.

This review comment is a reminder to verify that the transition away from MDC is complete or, if gradual, that the coexistence of both styling systems is clearly documented.





Also applies to: 68-83

---

Below is a shell script to verify whether legacy MDC selectors (such as “mdc-text-field”) are still present in the SCSS file and to check for any usage of the new `limel-notched-outline` styling:




Once you’ve reviewed the output of this script, please confirm that the legacy MDC imports (lines 8–13 and any additional blocks such as 68–83) are either still required for backward compatibility or are clearly marked for removal, and that no conflicts exist with the new `limel-notched-outline` styling.

---

**Legacy MDC Styling – Confirmation Required**

- The file still imports several MDC modules (e.g., `@material/textfield` and `@material/textfield/icon`) on lines 8–13.
- Similar legacy MDC styles are also found in the later section (lines 68–83).
- **Action needed:** Verify if these legacy MDC styles are intentionally preserved for compatibility or if they’re scheduled for removal. Also, ensure that their coexistence does not interfere with the new notched outline styling.



---

🏁 Script executed:

```shell
#!/bin/bash
echo "Searching for legacy MDC selectors in src/components/input-field/input-field.scss..."
rg "mdc-text-field" src/components/input-field/input-field.scss

echo "Searching for new limel-notched-outline usage in src/components/input-field/input-field.scss..."
rg "limel-notched-outline" src/components/input-field/input-field.scss
```

Length of output: 1559

---



</details>

**Attention**: Confirm Coexistence or Removal of Legacy MDC Styling

The file `src/components/input-field/input-field.scss` still contains multiple MDC-specific styles (e.g., `.mdc-text-field`, `.mdc-text-field--textarea`, etc.) across sections (lines 8–13 and 68–83), alongside a reference to the new `limel-notched-outline` styling.

- Verify whether the legacy MDC styles are intentionally maintained for backward compatibility or if they are scheduled for removal.
- Ensure that the coexistence of both the legacy MDC styles and the new notched outline style does not lead to visual or functional conflicts.

Please update the documentation or code comments accordingly to clarify the transition strategy.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T08:27:25Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T08:35:13Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T09:03:47Z
user: login: adrianschmidt
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T09:49:38Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T09:50:32Z
user: login: adrianschmidt
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T09:52:34Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T10:21:22Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 4**

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between f781b85523664fd879487f087d3bf5af17e6781b and 404823365b406b969460e74dec026e1b8d08295d.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/notched-outline/notched-outline.scss` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: Docs / Publish Docs
* GitHub Check: Test
* GitHub Check: Build

</details>

<details>
<summary>🔇 Additional comments (16)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (16)</summary>

`1-2`: **Module Imports are Correct and Modern.**  
The use of `@use` to import both the global mixins and shared input–select picker variables is in line with current Sass best practices.

---

`3-6`: **Comprehensive Documentation for Custom Properties.**  
The comment block clearly documents the purpose of the `--limel-notched-outline-z-index` custom property.

---

`7-9`: **Well-defined SASS Variables.**  
Declaring `$border-radius` and `$value-top` at the top makes subsequent fallbacks clean and maintainable.

---

`10-21`: **Appropriate Definition of Core Custom Properties.**  
The `limel-notched-outline` selector is used to set key custom properties (like border and background colors) with proper fallbacks from `shared_input-select-picker`. The inclusion of a `display: block` and box-sizing reset ensures consistent layout.

---

`23-32`: **Scoped Styling for Slot Content.**  
The nested `[slot='content']` block smartly applies the background color and border-radius using a custom property with a fallback to the `$border-radius` variable.

---

`34-36`: **Clear Justification Comments.**  
The inline comments explaining the prefixing approach due to `shadow: false;` helps maintain clarity and prevent unintended style inheritance.

---

`50-57`: **Consistent Border Styling for Outline Variants.**  
Grouping the selectors `&--leading-outline`, `&--notch`, and `&--trailing-outline` to define common border properties (including transition and style) is clean and DRY.

---

`59-71`: **Well-Defined Leading Outline Styling.**  
The `&--leading-outline` block clearly sets dimensions, disables shrinking, and applies appropriate border-radius fallbacks for the left side.

---

`125-137`: **Solid Trailing Outline Configuration.**  
The `&--trailing-outline` block leverages `flex-grow` along with proper border removal and dynamic corner rounding using custom properties or fallbacks.

---

`139-144`: **Handling Readonly Value Display Elegantly.**  
The `&--empty-readonly-value` block uses a mixin from `shared_input-select-picker` for consistent styling, and positions the value appropriately.

---

`147-160`: **Responsive State Styling with Hover and Focus Effects.**  
This block uses sophisticated attribute selectors in combination with `:hover` and the modern `:has()` pseudo-class to update border and background colors.  
*Note:* Since `:has()` is a relatively new CSS feature, please ensure that its use is acceptable across all target browsers.

---

`161-163`: **Clear Disabled State Styling.**  
The `[disabled]:not([disabled='false'])` selector effectively adjusts the label color for the disabled state, leveraging shared styling variables.

---

`165-176`: **Concise Required Field Indicator.**  
The `[required]:not([required='false'])` block correctly injects an asterisk using the `:after` pseudo-element, with a visible scale adjustment to emphasize required fields.

---

`178-195`: **Robust Invalid State Handling.**  
By setting both the default and hover border colors to error-specific values, and ensuring that labels and readonly values reflect the error state, the invalid styling is thorough and clear.

---

`197-206`: **Intentional Readonly Styling with No Animation.**  
The `[readonly]:not([readonly='false'])` selector forcefully makes the border and background transparent (using `!important`) and removes transition animations from the label. This is likely to avoid misleading visual cues on readonly fields.

---

`217-223`: **DRY Approach with Float-Label Mixin.**  
The `@mixin float-label` encapsulates the floating label adjustments (font size, transform values, and notch border color) effectively, promoting reusability and consistency with MDC’s styling.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T11:56:45Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>♻️ Duplicate comments (4)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (1)</summary><blockquote>

`73-124`: _🧹 Nitpick (assertive)_

**Consider setting a default content for the label's pseudo-element.**

The `&:after` pseudo-element inside the label block specifies positioning and padding but lacks a default `content` property. This might lead to unexpected rendering when not explicitly set for required fields.

```diff
 &:after {
+    content: "";
     position: absolute;
     right: 0;
     padding: 0 0.25rem;
 }
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`114-153`: **Consolidate toggle methods.** 

Using a single toggle function could reduce repetition. This was previously suggested and deferred, so marking as a repeated recommendation.

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: **Add unique keys when returning an array.**  
The static analysis points out missing keys in this array return. While Stencil doesn’t strictly require them, certain tooling or frameworks rely on unique keys for efficient reconciliation.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-67`: _🧹 Nitpick (assertive)_

**Clarify Notched Outline Styling States with Documentation**

The new styling block for `limel-notched-outline` is aligned with the goal to centralize input field styling by ensuring that when the element either carries the `has-value` attribute or is in a `:focus-within` state, its internal `.mdc-text-field__affix` becomes fully opaque. To enhance maintainability and help future developers understand the rationale, please consider adding an inline comment that explains:
- Why these specific states were selected.
- Whether additional states (e.g., error or disabled) might need similar treatment.

A suggested diff snippet to add inline documentation:

```diff
+/* 
+  The styles below ensure that .mdc-text-field__affix is fully visible when:
+    - the limel-notched-outline element has the 'has-value' attribute (indicating non-empty input), or
+    - the element gains focus (via :focus-within).
+  Consider reviewing if error or disabled states should also adjust the affix opacity.
+*/
```

This documentation will reinforce the design decisions and support future style adjustments.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 404823365b406b969460e74dec026e1b8d08295d and 79d5f30b8cde5964961c447a620f7ec373f2ae46.

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Definitions (3)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-140)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (23)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (2)</summary>

`5-9`: **Well-structured background pattern for the example.**

The SVG background pattern creates a subtle grid effect that helps visualize the component boundaries in the example. This is a nice touch for the demo.

---

`11-22`: **Clean input element styling for demonstration purposes.**

The comment clearly explains that these styles are specifically for the example. The removal of default borders and outlines allows the notched outline component to be displayed properly.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary>

`21-21`: **Good accessibility improvement with dynamic ID generation.**

Using `createRandomString()` to generate unique IDs for input elements improves accessibility by ensuring proper label-input associations. This is better than using hardcoded IDs which could potentially clash in complex UIs.



Also applies to: 247-247, 250-250

---

`425-425`: **Correctly implemented label-input association.**

The generated `labelId` is properly applied to both the input's `id` attribute and the label's `htmlFor` attribute, creating the necessary connection for accessibility.



Also applies to: 489-490

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`216-226`: **Improved icon alignment with flexbox.**

Refactoring the icon styles to use flexbox for alignment is a good modernization step. Moving the dimensions to the nested `limel-icon` element provides better encapsulation and aligns with the goal of reducing MDC dependencies.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (1)</summary>

`1-21`: **Well-structured component setup with clear custom properties.**

The component properly establishes custom properties for colors and z-index, making it easy for consumers to customize the appearance if needed. The box-sizing setup ensures consistent sizing behavior.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

`44-44`: **Ignore the static analysis “key” warning here.**

The “Missing key property” error is a false positive, since this file uses Stencil, not React. No action is needed.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (2)</summary>

`21-37`: **Tests look good.**

The checks for `limel-notched-outline` and `limel-prosemirror-adapter` are straightforward and verify the correct attributes.

---

`155-164`: **Label rendering test is appropriate.**

This test accurately verifies the presence and value of the `label` attribute on `limel-notched-outline`.

</details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary>

`324-333`: **Safe to disregard the “Missing key” warning.**

Static analysis raises a React-specific complaint about missing “key” properties, which does not apply to Stencil.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (5)</summary>

`13-14`: **Use of `$min-height` variable is a welcome improvement.**  
This variable-driven approach increases consistency and maintainability across components.

---

`35-35`: **Good practice for maintainable layout.**  
Replacing hardcoded values with `$min-height` ensures a single source of truth for the text editor’s minimum height.

---

`60-63`: **Minimal UI variant is well-handled.**  
Reducing the min-height by half for the minimal UI, along with applying it to `limel-prosemirror-adapter`, provides a compact and consistent layout.

---

`75-75`: **Consistent disabled state styling.**  
Using the shared mixin `looks-disabled` helps ensure a uniform disabled appearance.

---

`150-150`: **Ensuring alignment with `$min-height` approach.**  
Applying `$min-height` here maintains consistency throughout the editor's layout.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (5)</summary>

`1-1`: **Import statement looks correct.**  
The import from `@stencil/core` aligns with Stencil's standard usage.

---

`247-247`: **Read-only check is logical.**  
Returning a `limel-markdown` for a read-only state is a clean separation of behaviors.

---

`249-254`: **Markdown usage with `slot="content"`.**  
Declaring the slot ensures correct placement within the notched outline, enhancing layout consistency.

---

`257-275`: **ProseMirror adapter integration.**  
The slot-based rendering and additional ARIA attributes effectively handle accessibility while preserving advanced text editing functionality.

---

`285-285`: **Placeholder rendering with slot.**  
Displaying the placeholder as a slotted element helps maintain consistency with the new outline structure.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (3)</summary>

`1-18`: **Clear documentation and private scope.**  
Marking this component as private while providing thorough doc comments helps future maintainers understand its purpose without exposing it externally.

---

`19-23`: **Shadow DOM disabled for label association.**  
Disabling Shadow DOM is sensible here. It ensures that the `<label>` element can correctly reference the corresponding input in the consumer’s DOM, preserving accessibility.

---

`24-139`: **Well-structured notched outline and label logic.**  
The approach of rendering the label within a notched area, plus the handling of empty read-only states, aligns with Material Design styling while maintaining accessibility (due to `aria-hidden` usage where appropriate). This keeps the code organized and readable.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T12:12:57Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T12:24:10Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>♻️ Duplicate comments (2)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (2)</summary><blockquote>

`73-124`: _🧹 Nitpick (assertive)_

**Notch and Label Styling with Floating Label Setup**  
The `&--notch` block is comprehensive, especially with its nested `label` that resets styles, truncates text, and incorporates smooth transitions and transforms.  
  
However, note that in the `label`’s `&:after` block (lines 118–122), no default `content` property is specified. To ensure consistent rendering of the pseudo-element, consider adding `content: ""`.  

_**Suggested Diff:**_
```diff
@@ In the label block within &--notch:
-            &:after {
-                position: absolute;
-                right: 0;
-                padding: 0 0.25rem;
-            }
+            &:after {
+                content: "";
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
```

---

`241-245`: _🧹 Nitpick (assertive)_

**Complex Attribute Selectors for Floating Label Activation**  
The final rule uses compound attribute selectors—`[has-floating-label]`, `[has-value]:not([has-value='false'])`, and `[readonly]:not([has-value]:not([has-value='true']))`—to conditionally apply the `float-label` mixin. These selectors are effective but can be hard to parse. Consider adding inline comments or refactoring for improved maintainability and clarity.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 79d5f30b8cde5964961c447a620f7ec373f2ae46 and 90674658e12f62924e7489706454569bb287d27a.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/notched-outline/notched-outline.scss` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Test

</details>

<details>
<summary>🔇 Additional comments (14)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (14)</summary>

`3-9`: **Documentation and Variable Definitions**  
The file-level documentation for the custom property (`--limel-notched-outline-z-index`) and the definitions of `$border-radius` and `$value-top` provide clear context and flexibility.

---

`10-21`: **Base Component Styling**  
The base styles for `limel-notched-outline` effectively set key custom properties and apply a universal box-sizing reset, ensuring that all inner elements (and their pseudo-elements) are consistently rendered.

---

`23-32`: **Content Slot Styling**  
The `[slot='content']` selector leverages custom properties for setting the background and border-radius. This approach is concise and should help maintain visual consistency.

---

`34-48`: **Outline Container Styling**  
The `&--outlines` block sets up an absolutely positioned container with pointer events disabled, and applies a transition on the `bottom` property using a customizable speed. Verify that transitioning only the `bottom` property achieves the desired animation effect for your component.

---

`50-57`: **Common Outline Styling**  
Grouping the common border, width, and transition properties for the leading, notch, and trailing outlines is well executed and promotes reusability with consistent styling across variants.

---

`59-71`: **Leading Outline Styling**  
The styles applied in the `&--leading-outline` block (e.g., fixed width, removal of the right border, and appropriate border radius on the left) are straightforward and align well with the intended design.

---

`126-137`: **Trailing Outline Styling**  
The `&--trailing-outline` block efficiently uses `flex-grow` to occupy available space and applies proper border adjustments on the right side. This supports a clean and balanced layout.

---

`139-145`: **Empty Readonly Value Styling**  
The styling for `&--empty-readonly-value` leverages a shared mixin and positions the element appropriately. This adds to the component’s consistency with other input elements.

---

`147-159`: **Interactive States: Hover and Focus**  
The hover and focus states for `limel-notched-outline` update the border and background colors using theme variables. The use of modern selectors like `:has()` aids in addressing inner element states. Be sure these selectors have adequate browser support per your target audience.

---

`161-164`: **Disabled State Styling**  
The styling for the disabled state modifies the label color appropriately, making it clear when the component is non-interactive.

---

`177-195`: **Invalid State Styling**  
The invalid state is clearly defined by applying error colors to the border and label (including the pseudo-element). Confirm that the error color variable (`--lime-error-text-color`) matches your overall theme and accessibility standards.

---

`207-214`: **Leading Icon Adjustments**  
The adjustments applied when `[has-leading-icon]` is present (i.e., altering the label’s transform and adjusting the position of the readonly value element) are clear and help maintain alignment with the icon.

---

`217-223`: **Float-label Mixin Definition**  
The `@mixin float-label` succinctly encapsulates the floating label behavior, setting font size and transform properties in line with Material Design guidelines. Its reusability within the component is a strong design choice.

---

`225-239`: **Performance Optimization with will-change**  
By applying `will-change` to the label during hover, focus, and focus-within states, you’ve proactively optimized the transitions for performance. This practice is commendable for smoother animations.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T12:24:45Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 90674658e12f62924e7489706454569bb287d27a and 47bca80f3616e8eaae650e33c0cfa674fb91f80b.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/notched-outline/notched-outline.scss` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (4)</summary>

* GitHub Check: Docs / Publish Docs
* GitHub Check: Test
* GitHub Check: Build
* GitHub Check: SonarCloud

</details>

<details>
<summary>🔇 Additional comments (14)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (14)</summary>

`1-2`: **Module Imports Verification.**  
The `@use` directives for `mixins.scss` and `shared_input-select-picker` are succinct and correctly reference shared style resources.

---

`3-6`: **Component Property Documentation.**  
The comment block clearly documents the purpose of the custom property `--limel-notched-outline-z-index`, which aids future maintainability.

---

`10-21`: **Base Notched Outline Styling & Box-Sizing.**  
The top-level `limel-notched-outline` block sets up essential custom properties (border and background colors) and applies a universal box-sizing rule. This ensures predictable sizing behavior.

---

`23-32`: **Content Slot Styling.**  
The styles for the `[slot='content']` element, including the background color and border-radius with a fallback to `$border-radius`, are well defined.

---

`37-43`: **Outlines Container Setup.**  
The `&--outlines` block correctly uses absolute positioning, `inset: 0`, and a flex display to manage the inner layout.

---

`45-52`: **Uniform Outline Border & Transition.**  
Defining the transition on `border-color` and standardizing border widths/styles for leading, notch, and trailing outlines ensures consistency in user interactions.

---

`54-66`: **Leading Outline Styling.**  
The `&--leading-outline` block establishes a fixed width and removes the right border, which aids in composing a unified input field appearance.

---

`68-119`: **Notch Component & Label Styling.**  
The `&--notch` block—with its controlled width, border settings, and nested `label`—is thoughtfully structured to achieve the floating label effect.

---

`113-117`: **Default Pseudo-element Content Missing.**  
Inside the `label` block’s `&:after` pseudo-element, consider explicitly setting a default `content: ""` to prevent any unexpected rendering issues in cases where no content is otherwise provided.  
[suggest_nitpick, duplicate_comment]

---

`121-132`: **Trailing Outline Styling.**  
The `&--trailing-outline` block complements the leading outline with similar border radius adjustments and flex-grow, ensuring that the outline spans correctly.

---

`134-139`: **Empty Readonly Value Styling.**  
Using the mixin from `shared_input-select-picker` and absolutely positioning the empty readonly value is a neat solution to mimic input appearance.

---

`142-155`: **Interactive State Styling – Hover and Focus.**  
The state-specific adjustments for hover and focus (via custom property overrides) are well isolated within a dedicated block—improving readability and maintainability.

---

`156-156`: **Disabled State Styling.**  
The rule for `[disabled]:not([disabled='false'])` that adjusts the label color is straightforward and fits the design intent.

---

`173-190`: **Invalid State Feedback.**  
Overriding the border and label colors for invalid states with error color variables provides clear visual feedback, consistent with Material Design error handling.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:20:13Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:26:20Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:28:05Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 4**

<details>
<summary>♻️ Duplicate comments (8)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (3)</summary><blockquote>

`237-241`: _🧹 Nitpick (assertive)_

**Complex attribute selector for floating label state.**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` is quite complex and could benefit from a clarifying comment.

Add a comment to explain the complex selector logic:

```diff
+// Float label when component: has explicit floating label, has a value, or is readonly without an explicit false value
&[has-floating-label],
&[has-value]:not([has-value='false']),
&[readonly]:not([has-value]:not([has-value='true'])) {
    @include float-label;
}
```

---

`161-172`: _🧹 Nitpick (assertive)_

**Required field indicator needs clarification about scale comment.**

The required field styling correctly adds an asterisk, but there's a commented-out scale property with a TODO.

The TODO comment about uncommenting the scale property later could be more descriptive about why this is being delayed and what conditions need to be met before it can be enabled.

```diff
&:after {
    content: '*';
-   // scale: 1.5; //TODO: uncomment this line later when all components have implemented this
+   // scale: 1.5; //TODO: uncomment when all components have implemented notched-outline to maintain visual consistency
}
```

---

`69-120`: _🧹 Nitpick (assertive)_

**Comprehensive notch styling with proper label handling.**

The notch section demonstrates attention to detail with:
- Proper z-index management for layering
- Flexible border styling with fallbacks
- Comprehensive label styling with transitions
- Text truncation for overflow management

However, the `&:after` pseudo-element is missing a default `content` property.

Consider adding a default empty content value to the `&:after` pseudo-element:

```diff
&:after {
+   content: "";
    position: absolute;
    right: 0;
    padding: 0 0.25rem;
}
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`120-153`: **Consider implementing the previously discussed handler optimization in a separate PR**

As mentioned in past comments, the repeated toggle methods could be refactored to reduce boilerplate. Based on the discussion, this should be addressed in a separate PR for all examples at once.

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary><blockquote>

`334-342`: **Label must be associated with the input for accessibility.**

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: **Add key properties to each array element.**

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

`96-111`: **Accessible component structure.**

The component structure appropriately uses `aria-hidden="true"` on the outline container since it's purely decorative, while ensuring the label is properly associated with the input element.

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-66`: _🧹 Nitpick (assertive)_

**New styling for notched outline.**

The new CSS block for `limel-notched-outline` properly handles the opacity of affixes when there is a value or when the element has focus. This aligns with the objective of improving input styling.

Consider adding a comment explaining the purpose of these specific states and whether other states (like error or disabled) might need similar treatment for future maintainability.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 47bca80f3616e8eaae650e33c0cfa674fb91f80b and abf66b4d5ad4131b1ed183d86072b87027291a74.

</details>

<details>
<summary>📒 Files selected for processing (13)</summary>

* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (2 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/select/select.template.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/select/select.template.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-139)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 60-70: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 79-79: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (35)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (3)</summary>

`1-3`: **Good use of box-sizing for consistent component sizing.**

The `box-sizing: border-box` rule ensures all elements maintain consistent sizing behavior when padding and borders are applied, which is a best practice for component development.

---

`5-9`: **Well-implemented background pattern using inline SVG.**

Using an inline SVG for the background pattern is efficient and eliminates an extra HTTP request. The specific size setting ensures the pattern displays consistently.

---

`11-22`: **Clear input styling with helpful comments.**

The input styling removes browser defaults and sets consistent dimensions with proper comments explaining the purpose. The transparent background allows the section's background pattern to show through.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (3)</summary>

`21-21`: **Good addition of the createRandomString import.**

Adding this utility import allows for generating unique IDs for accessibility purposes, which is a best practice when working with form elements.

---

`247-247`: **Proper implementation of unique label ID generation.**

The addition of the `labelId` property and its initialization with a random string in the constructor improves accessibility by ensuring unique IDs for label-input associations.



Also applies to: 250-250

---

`425-425`: **Correctly applied labelId to form elements.**

The `labelId` is properly applied to both the input's `id` attribute and the label's `htmlFor` attribute, establishing the necessary connection between them for accessibility.



Also applies to: 489-489

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`215-226`: **Improved icon alignment with flexbox properties.**

The changes to the `leading-icon` mixin enhance the alignment and presentation of icons by:
1. Using flexbox (`display: flex`, `align-items: center`, `justify-content: center`) for better centering
2. Moving size constraints to the inner `limel-icon` element instead of the container

This approach provides better control over icon positioning and sizing.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (3)</summary>

`1-21`: **Well-structured component foundation with proper documentation.**

The component establishes a strong foundation with:
- Clear documentation of custom properties
- Proper variable definitions with consistent units
- Good default values from the shared styles
- Appropriate box-sizing to ensure consistent layout

This approach makes the component both maintainable and customizable.

---

`35-44`: **Clear documentation and proper positioning for outlines.**

The comment explaining why styles are prefixed provides valuable context for future maintainers. The absolute positioning with `inset: 0` and `z-index` management ensures proper stacking of elements.

---

`193-201`: **Usage of !important flags in readonly styles.**

While using `!important` is generally discouraged, it appears necessary here to ensure readonly states always have transparent borders and backgrounds regardless of other state combinations.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (2)</summary>

`1-15`: **LGTM: New component with proper documentation**

The component setup and documentation look good, establishing context for the notched outline component with clear JSDoc comments.

---

`114-118`: **LGTM: Input handler implementation**

The `handleInput` method correctly updates both the input value and the `hasValue` state based on input content.

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (2)</summary>

`21-36`: **LGTM: Updated tests for notched-outline integration**

The test now correctly checks for the presence of the `limel-notched-outline` component and verifies its attributes. This is a more targeted approach that focuses on the component structure rather than the entire HTML output.

---

`156-163`: **LGTM: Improved label testing**

The updated test for the label correctly verifies that the `label` attribute is set on the `limel-notched-outline` component, which is more specific and maintainable than checking the inner HTML of a label element.

</details>
<details>
<summary>src/components/select/select.template.tsx (1)</summary>

`105-106`: **LGTM: Added slot attribute for content placement**

The `slot="content"` attribute allows the button to be correctly positioned within the `limel-notched-outline` component.

</details>
<details>
<summary>src/components/select/select.scss (3)</summary>

`12-16`: **LGTM: Good use of CSS variables for consistent border radius**

The introduction of the `$border-radius` variable and setting it as a CSS custom property on the host ensures consistent border radius styling across the component.

---

`24-28`: **LGTM: Added styles for non-invalid notched outline**

The new selector for `limel-notched-outline:not([invalid]:not([invalid='false']))` properly handles the styling for the notched outline when it's not in an invalid state.

---

`84-85`: **LGTM: Updated border-radius to use the new variable**

The border-radius property of `.limel-select-trigger` now uses the `$border-radius` variable, maintaining consistency with the host element.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (6)</summary>

`13-13`: **Good use of a SCSS variable.**
Defining `$min-height` at the top increases maintainability and reusability of styles.

---

`16-16`: **Z-index set for the notched outline.**
No issues spotted. This ensures the outline sits above the toolbar.

---

`35-35`: **Switching to a SCSS variable for min-height.**
This centralizes styling and makes future refactoring easier.

---

`75-75`: **Looks-disabled mixin for disabled state.**
This is a straightforward approach to unify disabled styling.

---

`150-150`: **Reusing the same min-height variable.**
Retaining visual consistency across different states of the editor.

---

`60-63`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify reduced min-height for minimal UI.**

Halving the baseline min-height might cause cramped spacing for some content. Please confirm that this layout still meets design expectations and doesn’t overlap or cut off the toolbar or editor content.

---

🏁 Script executed:

```shell
#!/bin/bash
# Checking for references to the minimal UI usage in SCSS to see if there's any overrides or warnings
rg -A 10 --regexp ":host\(limel-text-editor\[ui='minimal'\]\:"
```

Length of output: 219

---

**Action Required: Manually verify spacing for minimal UI usage.**

The min-height is now set to half of the baseline in `src/components/text-editor/text-editor.scss` (lines 60-63). However, our initial regex search to automatically locate minimal UI-specific overrides failed due to a regex error. A revised search command is provided below for further investigation:



Since automated checks did not yield clear results, please manually confirm that halving the baseline min-height does not lead to cramped spacing—particularly ensuring that the toolbar and editor content remain fully visible and accessible in the minimal UI.



---

🏁 Script executed:

```shell

#!/bin/bash
# Searching for minimal UI usage in SCSS files using a simplified pattern for limel-text-editor
rg "limel-text-editor\[ui='minimal'\]" -C 10
```

Length of output: 1927

---



</details>

**Minimal UI Spacing Verification Needed**

The minimal UI-specific SCSS block in `src/components/text-editor/text-editor.scss` (lines 60-63) now sets both the host and its nested `limel-prosemirror-adapter` to use `min-height: calc($min-height / 2)`. The updated grep output confirms that this styling is applied under the minimal UI context for `limel-text-editor`. 

- **Action Required:** Please manually verify—via visual inspection against design mockups—that halving the baseline min-height does not lead to cramped spacing or overlapping of the toolbar and editor content.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (4)</summary>

`1-1`: **No functional impact on the import statement.**

---

`247-254`: **Appropriate read-only markdown approach.**
Utilizing `<limel-markdown>` with `slot="content"` looks correct for rendering read-only text.

---

`257-277`: **Good use of ARIA attributes for accessibility.**
The `aria-required`, `aria-invalid`, and `aria-disabled` properties ensure screen readers handle state changes properly.

---

`285-285`: **Placeholder slotted as content.**
This maintains a consistent structure with the notched outline.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (7)</summary>

`1-18`: **Good implementation of a reusable notched outline component.**

The creation of this private component aligns well with the PR objective of eliminating MDC input fields. The docstring clearly explains the purpose and implementation details, especially the reasoning behind using `shadow: false`.

---

`19-24`: **LGTM! Good component configuration.**

The component configuration uses `shadow: false` as explained in the documentation, which is the correct approach for ensuring label associations work properly.

---

`25-54`: **Props are well-defined with appropriate documentation.**

All the props related to input states (required, readonly, invalid, disabled) are properly defined with the `reflect: true` option, which ensures they'll be reflected in the DOM. The documentation for each prop clearly explains its purpose and visual effect.

---

`55-71`: **Good documentation for label-related props.**

The `label` and `labelId` props are well-documented, with important notes about how they interact. The use of the `:::important` block effectively highlights the critical relationship between these props.

---

`72-95`: **Props for controlling label behavior are well-defined.**

The `hasValue`, `hasLeadingIcon`, and `hasFloatingLabel` props effectively handle different visual states of the label. The documentation clearly explains when to use each prop.

---

`113-123`: **Good conditional rendering of label.**

The `renderLabel` method handles the conditional rendering of the label appropriately, checking if the label exists before rendering it.

---

`125-139`: **Helpful readonly placeholder.**

The `renderEmptyReadonlyValue` method provides a good visual cue for readonly inputs that have no value, improving the user experience.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T10:07:24Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T12:31:28Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T13:06:13Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T16:12:24Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>♻️ Duplicate comments (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (1)</summary><blockquote>

`225-246`: **Interactive States and Floating Label Activation.**  
This block applies interactive styles on hover, focus, and focus-within—then triggers the float label transformation based on attributes like `has-floating-label`, `has-value`, and `readonly`. The compound attribute selectors, particularly `[readonly]:not([has-value]:not([has-value='true']))`, are quite complex. It is recommended to add inline documentation or refactor these selectors for improved readability.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 0a791ec690675d0d862b8988a9cdad26636e8eee and a7550902777e21b9c136cd3b33e2d68f68eb1587.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/notched-outline/notched-outline.scss` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: Docs / Publish Docs
* GitHub Check: Test
* GitHub Check: Build

</details>

<details>
<summary>🔇 Additional comments (11)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (11)</summary>

`10-21`: **Global Notched Outline Container Styles.**  
The base `limel-notched-outline` style correctly sets up custom properties, including the outline's `z-index` and box-sizing for all nested elements. This foundational styling ensures that the component’s internal layout remains consistent.

---

`23-33`: **Content Slot Styling.**  
The styling for the `[slot='content']` block uses CSS custom properties effectively for `background-color` and `border-radius` with proper fallbacks. This approach helps maintain visual consistency with the shared input-select picker styles.

---

`35-44`: **Notched Outline Outlines Container.**  
The explicit comments explain why all styles are prefixed, and the `&--outlines` block nicely positions the outlines while disabling pointer events. This aids in preventing unwanted style inheritance.

---

`46-52`: **Combined Outlines Styling.**  
Grouping `&--leading-outline`, `&--notch`, and `&--trailing-outline` for common properties is an effective DRY approach. The transition on `border-color` is well defined for a smooth visual change on state transitions.

---

`55-67`: **Leading Outline Specific Styles.**  
The rules applied to `&--leading-outline` appropriately adjust the layout (e.g., flex shrinking, width, and border adjustments) to achieve the intended leading outline design.

---

`122-133`: **Trailing Outline Styles.**  
The `&--trailing-outline` settings apply flexible layout properties and border radius modifications correctly for the trailing edge. This aligns well with the overall design intent for the component.

---

`135-140`: **Empty Readonly Value Styling.**  
Utilizing the `shared_input-select-picker.lime-looks-like-input-value` mixin maintains visual consistency with input fields. The absolute positioning defined here is clear and serves the intended purpose.

---

`143-155`: **Interactive Outline Styles.**  
The hover and focus styles adjust border and background colors using shared style variables, providing necessary visual feedback during user interactions. This implementation supports a more responsive UI.

---

`157-159`: **Disabled State Styling.**  
The disabled state is handled by setting the label's color via a custom property, which is straightforward and effective for visual differentiation.

---

`174-191`: **Invalid State Visual Feedback.**  
The component clearly reflects invalid state styles by updating the border and label colors to an error color. The hover state reiterates these changes to ensure consistency.

---

`204-214`: **Adjustment for Components with Leading Icons.**  
The styles correctly adjust the label’s horizontal transform and reposition the empty readonly value when a leading icon is present, ensuring that the component’s layout remains visually balanced.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T16:14:18Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T16:20:06Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T16:21:48Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🔭 Outside diff range comments (2)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**This selector needs to be updated**

Line 82 still uses the old selector `.chip-set__label` to find the label element, while line 29 has been updated to use the new selector `.limel-notched-outline--notch label`. This inconsistency will cause test failures.


```diff
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find('limel-chip-set >>> .limel-notched-outline--notch label');
```

</blockquote></details>
<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

`10-10`: _⚠️ Potential issue_

**Remove unused import**

The `Host` import is declared but never used in the code, which is causing a pipeline failure. Consider removing it to fix the build.


```diff
-    Host,
```


Also applies to: 21-21

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: Lint</summary>

[failure] 10-10: 
Remove this unused import of 'Host'                                    

---

[failure] 10-10: 
'Host' is defined but never used. Allowed unused vars must match /^h$/u

</details>
<details>
<summary>🪛 ESLint</summary>

[error] 10-10: Remove this unused import of 'Host'.

(sonarjs/unused-import)

---

[error] 10-10: 'Host' is defined but never used. Allowed unused vars must match /^h$/u.

(@typescript-eslint/no-unused-vars)

</details>
<details>
<summary>🪛 GitHub Actions: Pull Request Checks</summary>

[error] 10-10: 'Host' is declared but its value is never read.

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between d2f3c8640d884f98df5e127d2c20414cf7e2c634 and 9fe0de170d4e26a9028a4dd266fc25cc8ca4a88a.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (2 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (2)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/chip-set/chip-set.tsx`
- `src/components/select/select.e2e.ts`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 368-380: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 368-380: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-369: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 368-380: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 419-439: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>
<details>
<summary>🪛 GitHub Actions: Pull Request Checks</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 10-10: 'Host' is declared but its value is never read.

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (13)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **Class selector updated to align with MDC removal**

The selector has been updated from `&.mdc-text-field--disabled` to `&.disabled` to align with the PR objective of eliminating MDC input fields. The functionality remains the same, but now uses a custom class name instead of the MDC-specific one.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated selector to match new component structure**

The selector for finding the label element has been changed to target the new structure that uses the `limel-notched-outline` component. This correctly reflects the updated DOM structure where the label is now within an element with the class `limel-notched-outline--notch`.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Updated selector to match new component structure**

The selector for finding the label element has been changed to target the new structure that uses the `limel-notched-outline` component. This correctly reflects the updated DOM structure where the label is now within an element with the class `limel-notched-outline--notch`.

---

`229-231`: **Updated selector to match new component structure**

Similar to the change in lines 14-16, this selector has been updated to target the label element within the new `limel-notched-outline` component structure. This ensures consistency across the test file.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (5)</summary>

`247-247`: **Good addition of unique ID for accessibility**

Adding a `labelId` property initialized with a random string is a good practice for accessibility. This ensures that the label and input are properly associated, which is important for screen readers.



Also applies to: 250-250

---

`346-346`: **Class name updated to align with MDC removal**

The class name has been updated to use a custom `disabled` class instead of the MDC-specific one, aligning with the PR objective of eliminating MDC input fields.

---

`353-363`: **Refactored class assignment in a cleaner way**

Good refactoring of the class assignment using `Object.assign()` to make the code more readable and maintainable. This change maintains the same functionality while improving code organization.

---

`389-395`: **Good extraction of rendering logic**

The new `renderContent` method cleanly separates the rendering logic based on the type of chip-set, improving code organization and maintainability.

---

`422-422`: **Good use of labelId for accessibility**

Using the `labelId` for the input's ID attribute ensures proper association between the label and the input element, which is important for accessibility.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (4)</summary>

`30-36`: **Apply Notched Outline Styling for Input-Type Chip-Sets**  
This block cleanly applies a notched outline style when the chip-set’s `type` is set to `'input'`. The inner `[slot='content']` receives a `min-height` based on the shared variable `shared_input-select-picker.$height-of-mdc-text-field`. Please verify that this variable is defined consistently across your shared style files and aligns with the new private component strategy.

---

`38-43`: **Override Notched Outline Styles for Non-Input Chip-Sets**  
For chip-sets that are not of type `'input'`, this segment forces the notched outline’s border and background to be transparent. This approach effectively neutralizes any unintended inherited styling from the MDC-based definitions. Ensure that these custom property overrides do not unintentionally affect other components that might share similar selectors.

---

`113-114`: **Refine Clear-All Button Hover/Focus States**  
The updated selectors now reveal the clear-all button when the parent chip-set is not marked as disabled (i.e. it uses `.has-chips:not(.disabled)` and `.mdc-text-field--focused` conditions). This change helps ensure that interactive cues are only applied when appropriate. Please double-check that this new state logic is consistent with the overall UX expectations for disabled components.

---

`120-122`: **Ensure Inactive State for Clear-All Button When Disabled**  
Adjusting the selector to target `.has-chips.disabled` guarantees that the clear-all button is not displayed when the chip-set is in a disabled state. This change effectively shifts from the old MDC-specific `.mdc-text-field--disabled` check. Confirm that the component logic assigns the `.disabled` class correctly in all relevant contexts.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T06:01:23Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**Selector needs to be updated for consistency.**

Line 82 still uses the old `.chip-set__label` selector, while line 29 was updated to use `.limel-notched-outline--notch label`. This inconsistency will likely cause the test to fail.

```diff
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find('limel-chip-set >>> .limel-notched-outline--notch label');
```

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (10)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

`417-439`: _🧹 Nitpick (assertive)_

**Add key property to input element**

The input element is missing a key property when rendered in an array.


```diff
 return [
     this.value.map(this.renderInputChip),
     <input
+        key="input-field"
         tabIndex={INPUT_FIELD_TABINDEX}
         type={this.inputType}
         id={this.labelId}
         disabled={this.readonly || this.disabled}
         class={{
             'mdc-text-field__input': true,
             hidden: this.inputHidden(),
         }}
         value={this.textValue}
         onBlur={this.handleInputBlur}
         onFocus={this.handleTextFieldFocus}
         onKeyDown={this.handleKeyDown}
         onInput={this.handleTextInput}
         // Some browsers emit a change event on input elements, we need to stop
         // that event from propagating since we are emitting our own change event
         onChange={this.inputFieldOnChange}
         placeholder={this.isFull() ? '' : this.searchLabel}
         readonly={this.isFull()}
         autocomplete={this.autocomplete}
     />,
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 419-439: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`367-386`: _⚠️ Potential issue_

**Fix accessibility issues in notched-outline implementation**

The implementation using `limel-notched-outline` aligns with the PR objective but has several accessibility issues.


```diff
 return [
     <limel-notched-outline
-        role="grid"
+        key="notched-outline"
         labelId={this.labelId}
         label={this.label}
         required={this.required}
         invalid={this.invalid || this.isInvalid()}
         disabled={this.disabled}
         readonly={this.readonly}
         hasValue={!!this.value}
         hasLeadingIcon={!!this.leadingIcon}
         hasFloatingLabel={this.floatLabelAbove()}
         onClick={this.handleTextFieldFocus}
+        onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
     >
         <div slot="content" class={classes}>
             {this.renderContent(value)}
         </div>
     </limel-notched-outline>,
     this.renderHelperLine(),
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 368-380: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 368-380: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-369: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 368-380: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (1)</summary><blockquote>

`217-246`: _🧹 Nitpick (assertive)_

**Consider documenting the complex attribute selector**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` on line 243 is complex and could benefit from a comment explaining when this condition is met.


```diff
 // Transitioning the floating label
 @mixin float-label {
     --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
     --limel-notched-outline-label-transform-x: 0;
     --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
     --limel-notched-outline-notch-border-top-color: transparent;
 }

 limel-notched-outline {
     &:not([disabled]:not([disabled='false'])) {
         &:hover,
         &:focus,
         &:focus-within {
             label {
                 will-change: color, transform, font-size;
             }
         }

         &:has([slot='content']:focus-visible),
         &:has([slot='content']:focus-within) {
             @include float-label;
         }
     }

+    // Float label when: has explicit floating label, has a value, or is readonly without explicit false value
     &[has-floating-label],
     &[has-value]:not([has-value='false']),
     &[readonly]:not([has-value]:not([has-value='true'])) {
         @include float-label;
     }
 }
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`40-112`: _⚠️ Potential issue_

**Add keys to elements in the render array**

The elements returned in the array need key properties to help React identify them when the order changes.


```diff
return [
-    <section>
+    <section key="notched-outline">
         <limel-notched-outline
             labelId={id}
             label="Label"
             required={this.required}
             invalid={this.invalid}
             disabled={this.disabled}
             readonly={this.readonly}
             hasValue={this.hasValue}
             hasLeadingIcon={this.hasLeadingIcon}
             hasFloatingLabel={this.hasFloatingLabel}
         >
             <input
                 slot="content"
                 id={id}
                 type="text"
                 required={this.required}
                 disabled={this.disabled}
                 readonly={this.readonly}
                 value={this.inputValue}
                 onInput={this.handleInput}
             />
         </limel-notched-outline>
     </section>,
-    <limel-example-controls>
+    <limel-example-controls key="controls">
         <limel-checkbox
             checked={this.disabled}
             label="Disabled"
             onChange={this.setDisabled}
         />
         <limel-checkbox
             checked={this.readonly}
             label="Readonly"
             onChange={this.setReadonly}
         />
         <limel-checkbox
             checked={this.required}
             label="Required"
             onChange={this.setRequired}
         />
         <limel-checkbox
             checked={this.invalid}
             label="Invalid"
             onChange={this.setInvalid}
         />
         <hr
             style={{
                 gridColumn: '1/-1',
             }}
         />
         <limel-checkbox
             checked={this.hasValue}
             label="Has value"
             onChange={this.setHasValue}
         />
         <limel-checkbox
             checked={this.hasLeadingIcon}
             label="Has leading icon"
             onChange={this.setHasLeadingIcon}
         />
         <limel-checkbox
             checked={this.hasFloatingLabel}
             label="Has floating label"
             onChange={this.setHasFloatingLabel}
         />
     </limel-example-controls>,
-    <limel-example-value value={this.hasValue} />,
+    <limel-example-value key="value" value={this.hasValue} />,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary><blockquote>

`324-343`: **Accessibility caution regarding the `<label>` element.**  
This code nests `<label slot="content">` around the input element without a `htmlFor` attribute. Although you set `aria-labelledby` to associate them, some static analysis tools still report an a11y warning. You’re likely fine using `aria-labelledby` in a shadow DOM environment, but you might need to document the approach or restructure to fully satisfy external accessibility validators.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (2)</summary><blockquote>

`59-69`: **Add key properties for list elements returned in the array.**  
Even though this is Stencil and not React, the static analysis tool warns that elements in arrays missing a `key` may cause updates to render incorrectly. This is consistent with a previous feedback, so marking as a duplicate.  

```diff
 return [
-    <limel-notched-outline
+    <limel-notched-outline
+        key="notched-outline"
         class={classList}
         labelId="s-label"
         label={props.label}
         required={props.required}
         ...
     />,
-    <HelperText text={props.helperText} isValid={!props.invalid} />,
-    <SelectDropdown {...props} />,
+    <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
+    <SelectDropdown key="select-dropdown" {...props} />,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`77-78`: **Add key properties for array elements.**  
The static analysis is also flagging these additional elements, which are part of the same array. Consider assigning unique keys for consistency and predictable re-renders. This matches a past comment as well.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: **Add key properties for elements in the returned array.**  
Similar to previous comments, consider adding `key` to each child element to avoid warnings or potential rendering inconsistencies.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

`96-111`: **Accessible render implementation.**

The render method effectively uses `aria-hidden="true"` on the outlines container, ensuring that screen readers don't announce the purely visual elements.

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-66`: **Effective styling for affixes in notched outline.**

The new CSS block for `limel-notched-outline` properly sets the opacity of text field affixes to 1 when the field has a value or is focused, ensuring they're visible when relevant.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 21d97b68e2443bad9619453bbbd69f2946bf7e77 and 0fcb1cc36deb4af4d765dcf52f778de6373715e3.

</details>

<details>
<summary>📒 Files selected for processing (18)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (2 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (0 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>💤 Files with no reviewable changes (1)</summary>

* src/components/input-field/input-field.e2e.ts

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/chip-set/chip-set.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/select/select.template.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/select/select.e2e.ts`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/select/select.template.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-139)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 368-380: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 368-380: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-369: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 368-380: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 419-439: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: Docs / Publish Docs
* GitHub Check: Test

</details>

<details>
<summary>🔇 Additional comments (32)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **LGTM on class name change from MDC to custom implementation.**

The change from `.mdc-text-field--disabled` to `.disabled` aligns with the PR objective of removing Material Design Components (MDC) input fields in favor of custom components.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (1)</summary>

`1-22`: **Styles look clean and appropriate for demo purposes.**

The styling provides a good foundation for demonstrating the notched outline component with a grid background pattern and properly styled inputs.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated selector to match new component structure.**

The selector has been appropriately updated to target the label within the new notched outline component structure, ensuring the test continues to work with the architectural changes.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Updated selector to match new component structure.**

The selector has been appropriately updated to target the label within the new notched outline component structure, ensuring the test continues to work with the architectural changes.

---

`229-231`: **Updated selector to match new component structure.**

The selector has been appropriately updated to target the label within the new notched outline component structure for the menu version of the select component.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`215-226`: **Icon layout improved with Flexbox**

The update to the `leading-icon` mixin now uses flexbox to properly center the icon content, providing better alignment and layout control. Separating the dimensions into a nested `limel-icon` selector is a good practice that aligns with the PR objective of refactoring away from MDC components.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary>

`21-21`: **Good addition of unique labelId for accessibility**

Adding a randomly generated ID using `createRandomString()` improves accessibility by creating a proper association between the label and input element.



Also applies to: 247-251

---

`389-395`: **Good refactoring of content rendering logic**

Extracting the content rendering logic into a separate method improves code organization and readability.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (3)</summary>

`1-21`: **Well-structured CSS setup with clear organization**

Good use of SCSS modules and custom properties to define theming variables. The box-sizing declaration ensures consistent layout behavior.

---

`38-44`: **Effective outline positioning**

The `--outlines` class block properly sets up the absolute positioning with `inset: 0` and disables pointer events so input interactions can pass through to the content.

---

`193-202`: **Necessary use of !important for readonly states**

While `!important` should generally be avoided, it's appropriate here to ensure that readonly fields have transparent borders and backgrounds regardless of other state styles.

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (3)</summary>

`21-26`: **Looks great!**

The test correctly checks for the existence of the `limel-notched-outline` and verifies its boolean attribute, ensuring the intended UI structure is preserved.

---

`27-36`: **Good attribute validations.**

These assertions successfully confirm that `limel-prosemirror-adapter` is set up with the expected attributes and tied to the same `labelId` as the notched outline, validating proper DOM wiring.

---

`155-164`: **Clear label rendering test.**

This test validates the presence of the `label` attribute and ensures the notched outline receives it properly, maintaining a consistent label display in line with the new design.

</details>
<details>
<summary>src/components/select/select.scss (1)</summary>

`12-13`: **Changes reviewed and approved.**

The introduction of `$border-radius` and the new rules for `limel-notched-outline` align well with the removal of MDC references. These SCSS updates appear consistent with the goal of simplifying styling and replacing MDC’s floating label with the new notched outline component.



Also applies to: 14-18, 24-28, 84-84

</details>
<details>
<summary>src/components/select/select.template.tsx (3)</summary>

`97-97`: **Slot usage looks good.**  
Introducing `slot="content"` for the button is consistent with the notched outline architecture and ensures the label and floating behavior remain properly encapsulated.

---

`114-114`: **Usage of `getSelectedText` is consistent.**  
Confirmed the function call still aligns with the updated signature, and there's no usage for the removed parameter.

---

`321-324`: <details>
<summary>✅ Verification successful</summary>

**Function signature updated correctly.**  
Removing the `readonly` parameter aligns with the rest of the code. Ensure that external callers (if any) are updated accordingly.  

Run the following command to check for all `getSelectedText` references in the codebase, verifying the arguments:

---

🏁 Script executed:

```shell
#!/bin/bash
rg -A 3 "getSelectedText"
```

Length of output: 696

---



</details>

**Updated function signature verified.**  
The function signature for `getSelectedText` in `src/components/select/select.template.tsx` now correctly omits the `readonly` parameter, and the single usage—`getSelectedText(props.value)`—aligns with the update. Please double-check if any external callers exist elsewhere, though our repository search only shows the updated usage.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (3)</summary>

`247-254`: **Read-only rendering approach looks good.**  
Displaying `limel-markdown` with `slot="content"` is a clean solution for read-only cases.

---

`259-275`: **Enhanced accessibility.**  
Adding `slot="content"`, `aria-invalid`, and `aria-required` improves the usability for assistive technologies.

---

`285-285`: **Consistent placeholder placement.**  
Using `slot="content"` for the placeholder ensures it's layered correctly in the notched outline.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (4)</summary>

`13-16`: **Good introduction of `$min-height`.**  
Centralizing the minimum height in a variable improves maintainability and consistency throughout the SCSS.

---

`60-63`: **Smart scaling for minimal UI.**  
Using `calc($min-height / 2)` provides a tidy reduction for minimal mode without duplicating numeric values.

---

`75-75`: **Properly applying disabled styling.**  
Reusing `@include shared_input-select-picker.looks-disabled;` ensures consistent appearance across disabled fields.

---

`150-150`: **Consistent application of `$min-height`.**  
Reusing the variable here avoids hardcoding and aligns with the existing design tokens.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (3)</summary>

`30-36`: **Good implementation of input type styling with notched outline.**

The new styling for chip sets with `type='input'` properly sets a minimum height for the notched outline content, maintaining visual consistency with other input components.

---

`38-43`: **Clear styling for non-input chip sets.**

Making the border and background transparent for non-input chip sets is appropriate, as these variants don't need the input field styling.

---

`113-114`: **Correctly updated class selectors for MDC removal.**

The selectors have been properly updated from MDC-specific classes (like `mdc-text-field--disabled`) to more generic classes (`.disabled`), aligning with the PR objective of eliminating MDC dependencies.




Also applies to: 120-120

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (4)</summary>

`1-23`: **Well-structured component definition with clear documentation.**

The component is properly defined with appropriate documentation explaining its purpose, behavior, and the rationale behind using `shadow: false`.

---

`24-95`: **Props are well-documented with clear descriptions.**

All properties have helpful JSDoc comments explaining their purpose and behavior. The use of `@Prop({ reflect: true })` ensures these properties are reflected as attributes in the DOM, which is good for styling and testing.

---

`113-123`: **Correct label rendering with proper accessibility association.**

The `renderLabel` method correctly sets the `htmlFor` attribute to associate the label with its input element via the `labelId` prop, ensuring proper accessibility.

---

`125-138`: **Good handling of readonly empty state.**

The `renderEmptyReadonlyValue` method appropriately displays a dash character for empty readonly fields, with proper `aria-hidden="true"` to prevent screen readers from announcing this visual-only element.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T06:56:23Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T06:57:16Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T07:00:02Z
user: login: coderabbitai[bot]
body: > [!CAUTION]
> Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.  If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

**Actionable comments posted: 2**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**Missing selector update in the choice chip set test.**

There's an inconsistency in the selectors used for finding the label. Line 82 still uses the old selector `.chip-set__label` while line 28-30 has been updated to use the new notched outline structure.

Update the selector on line 82 to match the new structure:

```diff
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find(
+                'limel-chip-set >>> .limel-notched-outline--notch label',
+            );
```

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (11)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

`416-442`: _⚠️ Potential issue_

**Add a key property to the input element in the iterable.**

The static analysis tool correctly flagged that the input element is missing a key property, which is required for elements in an array.


```diff
<input
    tabIndex={INPUT_FIELD_TABINDEX}
    type={this.inputType}
    id={this.labelId}
+   key="input-field"
    disabled={this.readonly || this.disabled}
    class={{
        'mdc-text-field__input': true,
        hidden: this.inputHidden(),
    }}
    value={this.textValue}
    onBlur={this.handleInputBlur}
    onFocus={this.handleTextFieldFocus}
    onKeyDown={this.handleKeyDown}
    onInput={this.handleTextInput}
    // Some browsers emit a change event on input elements, we need to stop
    // that event from propagating since we are emitting our own change event
    onChange={this.inputFieldOnChange}
    placeholder={this.isFull() ? '' : this.searchLabel}
    readonly={this.isFull()}
    autocomplete={this.autocomplete}
/>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (2)</summary><blockquote>

`241-246`: _🧹 Nitpick (assertive)_

**Clarify the complex attribute selector for label floating.**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` on line 243 is complex and could be difficult to understand.


Add a comment explaining when this condition is met:

```diff
+ // Float label when: has explicit floating label, has a value, or is readonly without explicit false value
&[has-floating-label],
&[has-value]:not([has-value='false']),
&[readonly]:not([has-value]:not([has-value='true'])) {
    @include float-label;
}
```

---

`69-121`: _🧹 Nitpick (assertive)_

**Comprehensive notch and label styling with smooth transitions.**

The label styling is well implemented with appropriate transitions for font-size, color, and transforms. However, the `&:after` pseudo-element (lines 114-118) doesn't specify a default `content` property.


While the content is set when specific styles like invalid state are applied, explicitly setting a default empty content would ensure consistent behavior:

```diff
&:after {
+    content: "";
    position: absolute;
    right: 0;
    padding: 0 0.25rem;
}
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`40-112`: _⚠️ Potential issue_

**Add key properties to elements in the render array.**

Elements returned in an array should have unique key properties to help React efficiently update the DOM.


```diff
return [
-    <section>
+    <section key="notched-outline">
        <limel-notched-outline
            labelId={id}
            label="Label"
            required={this.required}
            invalid={this.invalid}
            disabled={this.disabled}
            readonly={this.readonly}
            hasValue={this.hasValue}
            hasLeadingIcon={this.hasLeadingIcon}
            hasFloatingLabel={this.hasFloatingLabel}
        >
            <input
                slot="content"
                id={id}
                type="text"
                required={this.required}
                disabled={this.disabled}
                readonly={this.readonly}
                value={this.inputValue}
                onInput={this.handleInput}
            />
        </limel-notched-outline>
    </section>,
-    <limel-example-controls>
+    <limel-example-controls key="controls">
        <limel-checkbox
            checked={this.disabled}
            label="Disabled"
            onChange={this.setDisabled}
        />
        <!-- Other checkboxes -->
    </limel-example-controls>,
-    <limel-example-value value={this.hasValue} />,
+    <limel-example-value key="value" value={this.hasValue} />,
];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (2)</summary><blockquote>

`324-333`: **Adopting the notched outline is correct.**  
This replaces the old label approach and aligns with the new design system.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`334-343`: **Nesting the input inside the label is valid for accessibility.**  
This approach is already mentioned in prior reviews, so consider existing guidance about `htmlFor` attributes if needed.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (2)</summary><blockquote>

`58-69`: **Add key properties for array elements**  
Static analysis flags a missing key property for these elements in the returned array. Although Stencil doesn't require keys in the same way as React, adding them can help maintain consistent rendering, especially if their order might change.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`77-79`: **Include unique key attributes for generated elements**  
Similar to the first element, `HelperText` and `SelectDropdown` in this array should have a unique key property to avoid potential mismatches in DOM updates.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: **Consider adding key properties to each returned element**  
Returning multiple elements in an array without a unique key can cause warnings or unexpected behavior in certain frameworks. Although Stencil differs from React, adding a key can reduce potential rendering conflicts and silence static analysis reports.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

`102-102`: **Appropriate aria-hidden usage.**

The `aria-hidden="true"` attribute on the outlines container ensures screen readers ignore the visual elements while still maintaining the association between label and input through the `htmlFor` attribute.

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-66`: _🧹 Nitpick (assertive)_

**Effective notched outline styling for input states.**

The new styles for `limel-notched-outline` ensure proper opacity for affixes when the input has a value or is focused, providing better visual feedback to users.


Consider adding a brief comment explaining why these specific states were chosen and whether other states (like error or disabled) might need similar treatment, as this would help future maintainers understand the implementation.

```diff
 limel-notched-outline {
+    // Show affixes at full opacity when the field has a value or is focused
     &[has-value],
     &:focus-within {
         .mdc-text-field__affix {
             opacity: 1;
         }
     }
 }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🛑 Comments failed to post (2)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

367-379: _⚠️ Potential issue_

**Address accessibility issues with the notched outline.**

The component has several accessibility issues flagged by static analysis:
1. Using a non-interactive role (`grid`) on an interactive element
2. Missing keyboard event handler to complement the onClick handler
3. Missing key property in the iterable array


```diff
<limel-notched-outline
-    role="grid"
     labelId={this.labelId}
     label={this.label}
     required={this.required}
     invalid={this.invalid || this.isInvalid()}
     disabled={this.disabled}
     readonly={this.readonly}
     hasValue={!!this.value?.length}
     hasLeadingIcon={!!this.leadingIcon}
     hasFloatingLabel={this.floatLabelAbove()}
     onClick={this.handleTextFieldFocus}
+    onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
+    key="notched-outline"
>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
            <limel-notched-outline
                labelId={this.labelId}
                label={this.label}
                required={this.required}
                invalid={this.invalid || this.isInvalid()}
                disabled={this.disabled}
                readonly={this.readonly}
                hasValue={!!this.value?.length}
                hasLeadingIcon={!!this.leadingIcon}
                hasFloatingLabel={this.floatLabelAbove()}
                onClick={this.handleTextFieldFocus}
                onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
                key="notched-outline"
            >
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

120-153: _🧹 Nitpick (assertive)_

**Consider refactoring repeated event handlers.**

The checkbox event handlers follow the same pattern and could be refactored to reduce code duplication.


You could use a factory method to generate these handlers:

```typescript
private createSetterHandler(property: string) {
    return (event: CustomEvent<boolean>) => {
        event.stopPropagation();
        this[property as keyof NotchedOutlineBasicExample] = event.detail;
    };
}

// Then in the constructor or componentWillLoad:
constructor() {
    this.setDisabled = this.createSetterHandler('disabled');
    this.setReadonly = this.createSetterHandler('readonly');
    this.setRequired = this.createSetterHandler('required');
    this.setInvalid = this.createSetterHandler('invalid');
    this.setHasValue = this.createSetterHandler('hasValue');
    this.setHasLeadingIcon = this.createSetterHandler('hasLeadingIcon');
    this.setHasFloatingLabel = this.createSetterHandler('hasFloatingLabel');
}
```

</blockquote></details>

</blockquote></details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T07:53:42Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**Inconsistent selector in choice chip set test.**

Line 82 still uses the old selector `.chip-set__label` while line 29 was updated to use the new `.limel-notched-outline--notch label` selector. This inconsistency may cause the test to fail.

```diff
-label = await page.find('limel-chip-set >>> .chip-set__label');
+label = await page.find('limel-chip-set >>> .limel-notched-outline--notch label');
```

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (12)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

`416-442`: _🧹 Nitpick (assertive)_

**Add key property to input element in the array.**

The input element is missing a key property, which is needed when rendering items in an array.


```diff
<input
+   key="input-field"
    tabIndex={INPUT_FIELD_TABINDEX}
    type={this.inputType}
    id={this.labelId}
    disabled={this.readonly || this.disabled}
    class={{
        'mdc-text-field__input': true,
        hidden: this.inputHidden(),
    }}
    value={this.textValue}
    onBlur={this.handleInputBlur}
    onFocus={this.handleTextFieldFocus}
    onKeyDown={this.handleKeyDown}
    onInput={this.handleTextInput}
    // Some browsers emit a change event on input elements, we need to stop
    // that event from propagating since we are emitting our own change event
    onChange={this.inputFieldOnChange}
    placeholder={this.isFull() ? '' : this.searchLabel}
    readonly={this.isFull()}
    autocomplete={this.autocomplete}
/>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`367-385`: _💡 Verification agent_

<details>
<summary>❓ Verification inconclusive</summary>

**Add keyboard event handling and key property to the notched outline.**

The notched outline component has an `onClick` handler but is missing keyboard event handling, which creates an accessibility issue. Also, a key property is needed for this element in the array.



```diff
<limel-notched-outline
-   role="grid"
+   key="notched-outline"
    labelId={this.labelId}
    label={this.label}
    required={this.required}
    invalid={this.invalid || this.isInvalid()}
    disabled={this.disabled}
    readonly={this.readonly}
    hasValue={!!this.value?.length}
    hasLeadingIcon={!!this.leadingIcon}
    hasFloatingLabel={this.floatLabelAbove()}
    onClick={this.handleTextFieldFocus}
+   onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
>
```

---



</details>

**Accessibility and Unique Key for Notched Outline**

- The notched outline component currently has only an onClick handler, which limits keyboard accessibility.
- Ensure the component is fully accessible by also handling keyboard events (e.g., adding an onKeyDown handler for the "Enter" key).
- When returning multiple JSX elements in an array, a unique key property is required for proper reconciliation.

```diff
<limel-notched-outline
-   role="grid"
+   key="notched-outline"
    labelId={this.labelId}
    label={this.label}
    required={this.required}
    invalid={this.invalid || this.isInvalid()}
    disabled={this.disabled}
    readonly={this.readonly}
    hasValue={!!this.value?.length}
    hasLeadingIcon={!!this.leadingIcon}
    hasFloatingLabel={this.floatLabelAbove()}
    onClick={this.handleTextFieldFocus}
+   onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (3)</summary><blockquote>

`193-202`: _🧹 Nitpick (assertive)_

**Consider alternative to !important for readonly styles.**

While the `!important` flags ensure that readonly fields appear transparent, this approach can lead to specificity issues. Consider using higher specificity selectors if possible.

---

`243-245`: _🧹 Nitpick (assertive)_

**Document complex attribute selector logic.**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` is complex and could be difficult to understand for future maintainers.



```diff
+// Float label when: has explicit floating label, has a value, or is readonly without explicit false value
&[has-floating-label],
&[has-value]:not([has-value='false']),
&[readonly]:not([has-value]:not([has-value='true'])) {
    @include float-label;
}
```

---

`114-118`: _🧹 Nitpick (assertive)_

**Set default content for the label's :after pseudo-element.**

The `:after` pseudo-element is missing a default `content` property, which could lead to inconsistent rendering across browsers.


```diff
&:after {
+   content: "";
    position: absolute;
    right: 0;
    padding: 0 0.25rem;
}
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`43-111`: _⚠️ Potential issue_

**Add key properties to elements rendered in the array.**

Each root-level element in the array should have a key property to help React with reconciliation.


```diff
return [
-   <section>
+   <section key="notched-outline-section">
        <limel-notched-outline
            labelId={id}
            label="Label"
            required={this.required}
            invalid={this.invalid}
            disabled={this.disabled}
            readonly={this.readonly}
            hasValue={this.hasValue}
            hasLeadingIcon={this.hasLeadingIcon}
            hasFloatingLabel={this.hasFloatingLabel}
        >
            <input
                slot="content"
                id={id}
                type="text"
                required={this.required}
                disabled={this.disabled}
                readonly={this.readonly}
                value={this.inputValue}
                onInput={this.handleInput}
            />
        </limel-notched-outline>
    </section>,
-   <limel-example-controls>
+   <limel-example-controls key="controls">
        <!-- controls content -->
    </limel-example-controls>,
-   <limel-example-value value={this.hasValue} />,
+   <limel-example-value key="example-value" value={this.hasValue} />,
];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (2)</summary><blockquote>

`324-333`: **Consider adding a unique key to each returned element**  
Although StencilJS doesn't strictly require a `key` property for each item in a returned array, the static analysis hints that a key might help track changes if the array ordering is modified.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`334-342`: **Consider clarifying the label's association with the input for accessibility.**  
Currently, the label element does not have a `for` (or `htmlFor`) attribute, but the `aria-labelledby` approach may suffice. Double-check that screen readers correctly announce the label for the input.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (2)</summary><blockquote>

`58-76`: **Add unique key props to array items.**

Returning multiple elements in an array without unique `key` props can cause reconciliation issues in some JSX-based frameworks and triggers linter warnings. Although StencilJS does not strictly require `key` props, adding them can prevent potential rendering issues.


Here’s an illustrative fix:

```diff
 return [
-    <limel-notched-outline
+    <limel-notched-outline
+        key="select-notched-outline"
         class={classList}
         labelId="s-label"
         label={props.label}
         required={props.required}
         invalid={!isValid}
         disabled={props.disabled}
         readonly={props.readonly}
         hasValue={hasValue}
         hasFloatingLabel={props.isOpen}
     >
         <SelectValue
             {...props}
             hasValue={hasValue}
             isValid={isValid}
             hasEmptyText={hasEmptyText}
         />
     </limel-notched-outline>,
     ...
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`77-79`: **Add unique key props to `<HelperText>` and `<SelectDropdown>`.**

Similarly, ensure each element in the returned array has a unique `key` prop to avoid lint warnings and potential rendering issues.


```diff
 return [
     <limel-notched-outline key="select-notched-outline" ... />,
-    <HelperText text={props.helperText} isValid={!props.invalid} />,
-    <SelectDropdown {...props} />,
+    <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
+    <SelectDropdown key="select-dropdown" {...props} />,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: **Add unique key props to array elements.**

Returning an array of elements without `key` props triggers lint warnings that can surface in frameworks using JSX-based reconciliations. While StencilJS does not require them in normal usage, adding explicit keys can eliminate warnings and improve clarity.


```diff
 return [
-    <limel-notched-outline
+    <limel-notched-outline
+        key="text-editor-outline"
         labelId={this.editorId}
         label={this.label}
         required={this.required}
         invalid={this.invalid}
         disabled={this.disabled}
         readonly={this.readonly}
         hasValue={!!this.value}
         hasFloatingLabel={true}
     >
         ...
     </limel-notched-outline>,
-    this.renderHelperLine(),
+    <div key="helper-line">{this.renderHelperLine()}</div>,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-66`: _🧹 Nitpick (assertive)_

**New notched outline styling is consistent with intended behavior.**

The styles ensure that elements like affixes become fully visible when the input has a value or is focused, which maintains a good user experience.

Consider adding a comment explaining why these specific states were chosen and whether other states (error, disabled) might need similar treatment in the future:

```diff
 limel-notched-outline {
+    /* 
+     * Show affixes at full opacity when the field has a value or is focused.
+     * Other states like invalid or disabled rely on the default styling.
+     */
     &[has-value],
     &:focus-within {
         .mdc-text-field__affix {
             opacity: 1;
         }
     }
 }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between e1a589272ad959659647852a1fa2438f20a27df1 and 05d49aa6360bfd42b863d59da2413ef07b49719c.

</details>

<details>
<summary>📒 Files selected for processing (18)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (2 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (0 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>💤 Files with no reviewable changes (1)</summary>

* src/components/input-field/input-field.e2e.ts

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/select/select.e2e.ts`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/select/select.template.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/select/select.template.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-139)

</details>

</blockquote></details>
<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (41)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **Selector updated from MDC-specific class to generic class.**

The class selector has been changed from what was likely `&.mdc-text-field--disabled` to `&.disabled`, which aligns with the PR objective to remove MDC components. This helps unify styling across components by using a more generic class name.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (1)</summary>

`1-22`: **New component styling looks good.**

The styling for the notched outline component example has been implemented with clean and well-structured CSS. The use of transparent background for the input field allows the notched outline to be visible.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated selector for label element.**

The selector has been updated to target the label within the new notched outline component structure, which is part of the effort to replace MDC input fields. This change maintains test functionality while supporting the new component architecture.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Updated selector for label element in native select tests.**

The selector has been changed from likely `.mdc-floating-label` to target the label within the new notched outline component structure. This maintains test functionality while supporting the new DOM structure.

---

`229-231`: **Updated selector for label element in menu select tests.**

Similar to the native select tests, this selector has been updated to work with the new notched outline component, ensuring consistent testing across both select variations.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`215-226`: **Good refactoring of the leading-icon mixin using flexbox.**

The refactoring to use flexbox for icon centering is a better approach than setting explicit dimensions directly on the container. Moving the width/height properties to the nested `limel-icon` element creates a cleaner separation of concerns.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (3)</summary>

`19-20`: **Good addition of the random string utility.**

Using the `createRandomString` utility is appropriate for generating unique identifiers.

---

`246-249`: **Good implementation of the labelId property.**

Adding a private `labelId` property and initializing it with a random string in the constructor ensures each chip-set has a unique identifier for its input element, improving accessibility.

---

`388-394`: **Good abstraction of content rendering logic.**

The new `renderContent` method effectively abstracts the rendering logic, making the code more modular and easier to maintain.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (4)</summary>

`7-8`: **Good use of SCSS variables for consistent styling.**

Defining `$border-radius` and `$value-top` as variables ensures consistency throughout the component. These could potentially be moved to a central variables file if they're used across multiple components.

---

`10-21`: **Well-structured component base with custom properties.**

The base styling for `limel-notched-outline` is well-structured with custom properties that make it easy to override specific aspects of the styling. The use of `box-sizing: border-box` ensures consistent sizing calculations.

---

`35-44`: **Good documentation and structuring of outline container.**

The comments explaining the prefix usage are helpful for future maintainers. The `--outlines` element is well-positioned with appropriate z-index handling and pointer-events disabled.

---

`217-223`: **Well-defined float-label mixin with detailed comments.**

The `float-label` mixin is well-defined with clear custom properties and helpful comments explaining the values. This makes it easy to understand and maintain.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

`114-118`: **Well-implemented input handler updating both value and state.**

The input handler correctly updates both the input value and the `hasValue` state based on the presence of input.

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (5)</summary>

`21-26`: **The test coverage looks solid.**  
These assertions correctly verify the presence of the `limel-notched-outline` and its attributes, ensuring that the new structure is properly rendered.

---

`27-34`: **Looks good!**  
The checks for `limel-prosemirror-adapter` presence and its attributes (`contenttype`, `language`, and `slot`) look properly validated.

---

`35-36`: **Consistency in label referencing is confirmed.**  
Verifying that the adapter's `id` matches the `labelId` from the outline is a good approach to maintain consistency.

---

`156-160`: **Accurate label property validation.**  
It's appropriate to check the `limel-notched-outline` is rendered and that the `label` attribute matches the expected text.

---

`162-163`: **Well-structured label attribute presence check.**  
The test ensures the actual `label` attribute is set, providing strong coverage.

</details>
<details>
<summary>src/components/select/select.scss (4)</summary>

`12-13`: **Radius variable looks consistent.**  
Defining `$border-radius: 0.375rem;` helps keep border styling unified.

---

`14-18`: **Applying the border radius to the notched outline**  
The new host selector and `--limel-notched-outline-border-radius` ensure that the design is consistent across components.

---

`24-28`: **Transparent outline for valid states**  
Hiding the outline when not invalid keeps the UI cleaner and aligns with the new notched outline logic.

---

`84-84`: **Border radius inside .limel-select-trigger**  
Ensuring the trigger matches the new `$border-radius` maintains visual consistency.

</details>
<details>
<summary>src/components/select/select.template.tsx (3)</summary>

`97-97`: **No issues with slot usage.**

Specifying `slot="content"` is consistent with rendering nested elements inside `<limel-notched-outline>`.

---

`114-114`: **Confirmed refactor of text display logic.**

The direct usage of `getSelectedText(props.value)` is clear and maintainable.

---

`321-324`: **Function body for empty value check looks correct.**

This change correctly returns an empty string for empty values. No issues found.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (6)</summary>

`13-14`: **Use of `$min-height` variable is a good practice.**

Defining `$min-height: 5rem;` promotes consistency and maintainability in your styling.

---

`16-16`: **Custom property for outlining z-index.**

`--limel-notched-outline-z-index: 2;` is appropriate for ensuring the notched outline is rendered above other elements.

---

`35-35`: **Using `$min-height` consistently.**

Replacing hardcoded values with `$min-height` improves readability and eases future modifications.

---

`60-63`: **Minimal variant resizing is straightforward.**

Applying half of `$min-height` for the minimal UI variant is logical. Also applying the same to `limel-prosemirror-adapter` keeps heights consistent.

---

`75-75`: **Disabled styling with shared mixin.**

Including `@include shared_input-select-picker.looks-disabled;` is correct and remains consistent with your project’s shared styling approach.

---

`150-150`: **Ensuring the editor has a proper minimum height.**

`min-height: $min-height;` is consistent with the rest of your styling strategy and helps unify layout rules.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (4)</summary>

`1-1`: **No issues with import statement.**

This change is valid and aligns with StencilJS component conventions.

---

`247-255`: **Read-only branch rendering is valid.**

Rendering `<limel-markdown>` with `slot="content"` for read-only mode follows the design pattern for notched-outline usage.

---

`257-277`: **Form adapter rendering with ARIA attributes.**

Including `slot="content"`, `aria-invalid`, and `aria-required` ensures proper accessibility support and consistency with your new notched-outline approach.

---

`285-285`: **Placeholder element placement is correct.**

Using `slot="content"` for the placeholder ensures it's wrapped by the notched outline, matching the new architectural pattern.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (3)</summary>

`30-36`: **Implementation looks good.**

The new styles for input-type chip sets properly integrate with the `limel-notched-outline` component, ensuring the content has the appropriate minimum height consistent with other input elements.

---

`38-43`: **Transparent background/border provides a clean non-input appearance.**

The transparent styling for non-input chip sets ensures visual consistency while providing a clear distinction from the input-type variant.

---

`113-114`: **Updated selector targets the correct disabled state.**

The selector has been properly updated to use the `.disabled` class instead of the MDC-specific `.mdc-text-field--disabled` class, maintaining functionality while removing the MDC dependency.



Also applies to: 120-120

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (2)</summary>

`1-95`: **Well-structured new component with appropriate accessibility considerations.**

The component effectively encapsulates the notched outline functionality with appropriate props and documentation. The decision to use `shadow: false` is well-justified for label association and performance.

---

`96-139`: **Render implementation correctly handles accessibility concerns.**

The component properly handles accessibility with `aria-hidden="true"` for purely presentational elements while ensuring the label is correctly associated with the input element through the `htmlFor` attribute.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T08:19:37Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T08:27:12Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T08:34:15Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T09:01:51Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T09:32:35Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T09:40:02Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T09:44:00Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T09:52:34Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 4**

<details>
<summary>♻️ Duplicate comments (2)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (2)</summary><blockquote>

`228-249`: **Final Notched Outline Behavior on Interaction**  
This block applies interactive styles—using the `float-label` mixin on hover, focus, and based on attribute states. The compound attribute selector `[readonly]:not([has-value]:not([has-value='true']))` is notably complex; it would be beneficial to add an inline comment explaining the intended condition to aid future maintainers.

---

`72-124`: _🧹 Nitpick (assertive)_

**Notch Block and Label Styling: Consider Default Content for Pseudo-element**  
The `&--notch` block is robust and the nested `label` styling includes useful transitions and truncation. However, the `&:after` pseudo-element (lines 117-121) lacks an explicit `content` declaration, which may lead to inconsistent rendering across browsers.  
  
Consider adding a default `content` property as shown below:
```diff
@@ In the label &:after block:
-            &:after {
-                position: absolute;
-                right: 0;
-                padding: 0 0.25rem;
-            }
+            &:after {
+                content: "";
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 05d49aa6360bfd42b863d59da2413ef07b49719c and 30d6c679c115d126601937059214097498fee35a.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/notched-outline/notched-outline.scss` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (4)</summary>

* GitHub Check: Docs / Publish Docs
* GitHub Check: Test
* GitHub Check: Build
* GitHub Check: SonarCloud

</details>

<details>
<summary>🔇 Additional comments (9)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.scss (9)</summary>

`10-23`: **Component Base Style Setup is Solid**  
The base `limel-notched-outline` block effectively sets up custom properties and applies universal box-sizing. The use of shared color variables via interpolation is appropriate.

---

`25-37`: **Slot Content Styling is Clear**  
The `[slot='content']` selector applies the background color and border-radius properly using a fallback to the local `$border-radius` variable.

---

`41-47`: **Outlines Container Setup is Correct**  
The `&--outlines` block ensures that the outlines are correctly positioned, non-interactive, and cover the full area via `inset: 0`. This aids in preventing style leakage when shadow DOM is not used.

---

`58-70`: **Leading Outline Styling is Consistent**  
The styling for `&--leading-outline` appropriately sets flex properties and border adjustments, with proper usage of border radii via custom properties.

---

`125-144`: **Trailing Outline Styling is Well-Defined**  
The `&--trailing-outline` block applies the correct flex and border-radius properties, ensuring a seamless visual extension on the right side.

---

`146-157`: **Interactive States: Hover and Focus Styling**  
The hover and focus states (lines 146-157) update the border and background colors using shared variables, which should provide a consistent interactive experience.

---

`160-162`: **Disabled State Styling is Correct**  
The `[disabled]` state correctly sets the label's color to a disabled variant using the shared input-select picker color variable.

---

`177-194`: **Invalid State Feedback is Adequate**  
The `[invalid]` state changes the border color to signal errors, with consistent hover behavior. The additional styling for the label’s pseudo-element in this state is concise and effective.

---

`196-205`: **Readonly State Styling with Specificity Considerations**  
Readonly fields are styled to appear transparent, using `!important` to enforce the design decision. This approach is acceptable given the intent to avoid visual confusion with editable states.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T10:49:26Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T10:56:14Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T11:56:45Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary><blockquote>

`8-9`: _🧹 Nitpick (assertive)_

**Remove unused variables or reference them if needed.**

The pipeline fails due to `'label'` (and possibly `'outline'`) being defined but never used. If not required, please remove these variables to avoid linter errors.

Apply this diff to remove them if they are truly unused:

```diff
- let label: E2EElement;
- let outline: E2EElement;
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 ESLint</summary>

[error] 8-8: 'label' is defined but never used. Allowed unused vars must match /^h$/u.

(@typescript-eslint/no-unused-vars)

---

[error] 9-9: 'outline' is defined but never used. Allowed unused vars must match /^h$/u.

(@typescript-eslint/no-unused-vars)

</details>
<details>
<summary>🪛 GitHub Check: Lint</summary>

[failure] 8-8: 
'label' is defined but never used. Allowed unused vars must match /^h$/u  

---

[failure] 9-9: 
'outline' is defined but never used. Allowed unused vars must match /^h$/u

</details>
<details>
<summary>🪛 GitHub Actions: Pull Request Checks</summary>

[error] 8-9: 'label' is defined but never used. Allowed unused vars must match /^h$/u    @typescript-eslint/no-unused-vars

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (4)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

`366-385`: _⚠️ Potential issue_

**Remove or adjust `role="grid"` for accessibility compliance.**

Static analysis flags the use of `role="grid"` for an interactive element with an `onClick` handler. If it must remain interactive, consider removing or replacing the non-interactive role to avoid accessibility issues. Also, ensure that an appropriate keyboard event is handled for accessibility.



Apply a possible fix by removing the role or switching to a suitable role:
```diff
- <limel-notched-outline
-     role="grid"
-     ...
+ <limel-notched-outline
+     ...
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary><blockquote>

`324-333`: _🧹 Nitpick (assertive)_

**Consider adding a key to the returned array.**

Although Stencil is less strict about keys than React, the linter might complain about returning an array without a top-level key. Adding a key could help quell warnings and reduce confusion about how the elements are tracked.

```diff
 return [
-    <limel-notched-outline ...>
+    <limel-notched-outline ... key="notched-outline">
     ...
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (2)</summary><blockquote>

`58-69`: **Add a unique key property for each element in the array.**  
Although this code uses StencilJS rather than React, the static analysis still flags missing keys for these newly introduced array elements. This comment was raised previously; adding unique keys can prevent potential rendering anomalies.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`77-79`: **Add unique keys to remaining elements.**  
Similarly, `<HelperText>` and `<SelectDropdown>` also lack unique keys in this array. Including them can help avoid confusion in certain reconciler scenarios.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 572609f787f4b709f990c5787e53f8dac15004a3 and 5872949b1eb850355ea7b183c8e9cc6a46f66327.

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (2 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (1 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (2)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/select/select.e2e.ts`
- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/input-field/input-field.e2e.ts`
- `src/components/chip-set/chip-set.tsx`
- `src/components/select/select.template.tsx`
- `src/components/input-field/input-field.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`
- `src/components/select/select.template.tsx`
- `src/components/input-field/input-field.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>

</details><details>
<summary>🪛 GitHub Actions: Pull Request Checks</summary>

<details>
<summary>src/components/input-field/input-field.e2e.ts</summary>

[error] 8-9: 'label' is defined but never used. Allowed unused vars must match /^h$/u    @typescript-eslint/no-unused-vars

</details>

</details>
<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (20)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **LGTM: Class selector update aligns with MDC removal goal**

The change from `&.mdc-text-field--disabled` to `&.disabled` aligns with the PR objective to remove MDC input fields in favor of custom implementations.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Selector updated to match new notched outline structure**

The selector has been updated to target the label within the new notched outline component structure, replacing the previous MDC-based selector.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Selector updated to match new notched outline structure**

The selector has been updated to target the label within the new notched outline component structure, replacing the previous MDC-based selector.

---

`229-231`: **Selector updated to match new notched outline structure**

The selector has been updated to target the label within the new notched outline component structure, replacing the previous MDC-based selector.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`217-225`: **Improved icon layout with proper component scoping**

The changes to the leading icon styles improve layout by:
1. Using flexbox for proper centering of icon content
2. Moving dimension properties to the `limel-icon` component instead of applying them to the container

This change provides better component encapsulation and ensures proper alignment.

</details>
<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary>

`215-215`: **No issues with label change.**

Changing the label from "Website" to "Test" looks consistent with the rest of the file. Verify any downstream usage if referencing the label text directly in other tests or documentation.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (3)</summary>

`20-20`: **New `labelId` property for unique labeling.**

Introducing `labelId` and assigning it via `createRandomString()` is a good approach for ensuring IDs remain unique, and helps with accessibility if used consistently.



Also applies to: 246-248

---

`388-394`: **Well-structured content logic.**

The new `renderContent` abstraction provides a clean, maintainable way to decide between rendering input chips or standard chips.

---

`416-441`: <details>
<summary>✅ Verification successful</summary>

**Verify the array rendering and key usage.**

Returning multiple elements in an array is valid in Stencil, and each chip is assigned a key. However, static analysis might still register a missing key error. Verify that the linter is satisfied or consider adding a key to the top-level array items if needed.

To check if the linter still flags these lines, run:

---

🏁 Script executed:

```shell
#!/bin/bash
# Re-run the lint checks; observe any warnings/errors about missing keys
npm run lint
```

Length of output: 587

---



</details>

**Array Rendering and Key Assignment Verified**  
The lint checks confirm that no missing key warnings are reported in the `chip-set.tsx` file. Stencil’s support for array-based rendering is functioning as expected with each chip assigned a key. The lint errors in `src/components/input-field/input-field.e2e.ts` are unrelated to this component.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>
<details>
<summary>src/components/select/select.scss (4)</summary>

`12-12`: **Adopt a standard border-radius variable.**  
Defining a `$border-radius` variable is a good move toward consistent theming. No concerns here.

---

`14-18`: **Streamlined usage of the notched outline CSS variable.**  
The `--limel-notched-outline-border-radius` assignment ensures consistent rounding across the component. Looks good!

---

`24-28`: **Good approach for hiding the outline in normal state.**  
Applying `--limel-notched-outline-border-color: transparent` helps keep a clean look when not invalid. Implementation seems correct.

---

`84-85`: **Ensure border-radius consistency.**  
Re-applying `$border-radius` here maintains the design consistency across different elements. No issues.

</details>
<details>
<summary>src/components/select/select.template.tsx (3)</summary>

`97-97`: **Slot usage looks correct.**  
Using `slot="content"` for `<button>` is a clean approach to keep the outline and content separated.

---

`114-114`: **Inline function usage is valid.**  
`{getSelectedText(props.value)}` is straightforward and matches the updated signature. No concerns.

---

`321-324`: **Validation logic no longer depends on readonly state.**  
Removing the `readonly` parameter simplifies the function. Confirm that ignoring read-only status is intended.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (4)</summary>

`30-36`: **Customizing the chip-set for input mode.**  
Using `min-height: shared_input-select-picker.$height-of-mdc-text-field;` aligns its height with other input fields, enhancing visual consistency.

---

`38-43`: **Transparent outline for non-input chip sets.**  
Hiding the outline by setting it to transparent ensures a cleaner UI for chip sets that aren’t used as inputs.

---

`113-114`: **Conditional hover and focus styling.**  
Allowing the clear-all button to become visible only when `.has-chips:not(.disabled)` is hovered or focused is a solid usability improvement.

---

`120-120`: **Hide clear-all in disabled state.**  
Ensuring `.has-chips.disabled &` is not interactable or visible is good practice for accessibility.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T14:11:36Z
user: login: LucyChyzhova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T07:35:55Z
user: login: LucyChyzhova
body: great job Kia! ❤️ Approving! 
just lint and build checks failed. 
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T07:41:57Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T08:06:26Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T08:26:15Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 4**

<details>
<summary>🔭 Outside diff range comments (2)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**Selector needs to be updated for consistency.**

Line 82 still uses the old selector `.chip-set__label` for the choice chip set test, which needs to be updated to use the new notched outline structure for consistency with the change on line 29.

```diff
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find('limel-chip-set >>> .limel-notched-outline--notch label');
```

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary><blockquote>

`8-9`: _⚠️ Potential issue_

**Remove unused variable declaration.**

The `label` variable is declared but never used in the code, which is causing an ESLint error.


```diff
    let limelInput: E2EElement;
    let inputContainer: E2EElement;
-   let label: E2EElement;
    let outline: E2EElement;
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: Lint</summary>

[failure] 8-8: 
'label' is defined but never used. Allowed unused vars must match /^h$/u  

---

[failure] 9-9: 
'outline' is defined but never used. Allowed unused vars must match /^h$/u

</details>
<details>
<summary>🪛 ESLint</summary>

[error] 8-8: 'label' is defined but never used. Allowed unused vars must match /^h$/u.

(@typescript-eslint/no-unused-vars)

---

[error] 9-9: 'outline' is defined but never used. Allowed unused vars must match /^h$/u.

(@typescript-eslint/no-unused-vars)

</details>
<details>
<summary>🪛 GitHub Actions: Pull Request Checks</summary>

[error] 8-9: 'label' is defined but never used. Allowed unused vars must match /^h$/u    @typescript-eslint/no-unused-vars

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (12)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

`418-438`: _⚠️ Potential issue_

**Add key property to the input element.**

The input element is missing a key property in the iterable, which is flagged by static analysis.


```diff
<input
    tabIndex={INPUT_FIELD_TABINDEX}
    type={this.inputType}
    id={this.labelId}
+   key="input-field"
    disabled={this.readonly || this.disabled}
    class={{
        'mdc-text-field__input': true,
        hidden: this.inputHidden(),
    }}
    value={this.textValue}
    onBlur={this.handleInputBlur}
    onFocus={this.handleTextFieldFocus}
    onKeyDown={this.handleKeyDown}
    onInput={this.handleTextInput}
    // Some browsers emit a change event on input elements, we need to stop
    // that event from propagating since we are emitting our own change event
    onChange={this.inputFieldOnChange}
    placeholder={this.isFull() ? '' : this.searchLabel}
    readonly={this.isFull()}
    autocomplete={this.autocomplete}
/>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`367-379`: _⚠️ Potential issue_

**Fix accessibility issues with the notched outline component.**

The `limel-notched-outline` component has several accessibility issues identified by static analysis:
1. Using a non-interactive role (`grid`) on an interactive element
2. Missing keyboard event handlers for the onClick event
3. Missing key property in the iterable



```diff
<limel-notched-outline
-    role="grid"
     labelId={this.labelId}
     label={this.label}
     required={this.required}
     invalid={this.invalid || this.isInvalid()}
     disabled={this.disabled}
     readonly={this.readonly}
     hasValue={!!this.value?.length}
     hasLeadingIcon={!!this.leadingIcon}
     hasFloatingLabel={this.floatLabelAbove()}
     onClick={this.handleTextFieldFocus}
+    onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
+    key="notched-outline"
>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (4)</summary><blockquote>

`243-248`: _🧹 Nitpick (assertive)_

**Document the complex attribute selector logic.**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` is complex and could be difficult to understand for future maintainers.


```diff
+   // Float label when: has explicit floating label, has a value, or is readonly without explicit false value
    &[has-floating-label],
    &[has-value]:not([has-value='false']),
    &[readonly]:not([has-value]:not([has-value='true'])) {
        @include float-label;
    }
```

---

`220-226`: _🧹 Nitpick (assertive)_

**Document numerical values in the float-label mixin.**

The `float-label` mixin contains specific numerical values that would benefit from additional explanation.


```diff
// Transitioning the floating label
@mixin float-label {
-   --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+   --limel-notched-outline-label-font-size: 0.65rem; // 10.4px - matches MDC's floating label sizing
    --limel-notched-outline-label-transform-x: 0;
-   --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+   --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem); // Centers label in the notch and applies fine adjustment
    --limel-notched-outline-notch-border-top-color: transparent;
}
```

---

`72-123`: _🧹 Nitpick (assertive)_

**Provide default content for pseudo-element.**

The `&:after` pseudo-element in the label block specifies positioning and padding but lacks a default `content` property, which might lead to inconsistent rendering.


```diff
            &:after {
+               content: "";
                position: absolute;
                right: 0;
                padding: 0 0.25rem;
            }
```

---

`164-174`: _🧹 Nitpick (assertive)_

**Consider tuning the asterisk scale for required fields.**

The `scale: 1.3` property for the required field asterisk might appear too large compared to the rest of the text. Consider adjusting it for better visual harmony.


```diff
                &:after {
                    content: '*';
-                   scale: 1.3;
+                   scale: 1.2; /* More subtle scaling */
                }
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`120-153`: _🧹 Nitpick (assertive)_

**Consolidate repetitive event handlers**  
You have multiple setter methods with the same structure. Consider creating a reusable handler to reduce duplication.  


Here's an example:

```diff
+private toggleState = (property: keyof NotchedOutlineBasicExample) => (event: CustomEvent<boolean>) => {
+    event.stopPropagation();
+    this[property] = event.detail;
+};

-private setDisabled = (event: CustomEvent<boolean>) => {
-    event.stopPropagation();
-    this.disabled = event.detail;
-};
+private setDisabled = this.toggleState('disabled');

# And so forth for the other methods...
```

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary><blockquote>

`324-333`: _🧹 Nitpick (assertive)_

**Add unique keys to each returned array element**  
Stencil doesn't strictly require keys, but adding them can preempt potential issues and silence lint warnings about missing keys in arrays.  


```diff
 return [
-    <limel-notched-outline ... >
+    <limel-notched-outline key="notched-outline" ... >
         ...
     </limel-notched-outline>,
-    this.renderHelperLine(),
+    <fragment key="helper-line">{this.renderHelperLine()}</fragment>,
-    this.renderAutocompleteList(),
+    <fragment key="autocomplete-list">{this.renderAutocompleteList()}</fragment>,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (2)</summary><blockquote>

`58-69`: _🧹 Nitpick (assertive)_

**Add keys to array elements to address lint warnings.**

Returning multiple elements in an array without a corresponding `key` property can cause rendering issues, especially if the order of these elements changes. To resolve this, add a unique `key` to each returned element:


```diff
 return [
-    <limel-notched-outline
-        class={classList}
-        labelId="s-label"
-        ...
-    >
-        <SelectValue {...props} />
-    </limel-notched-outline>,
-    <HelperText text={props.helperText} isValid={!props.invalid} />,
-    <SelectDropdown {...props} />,
+    <limel-notched-outline
+        key="notched-outline"
+        class={classList}
+        labelId="s-label"
+        ...
+    >
+        <SelectValue {...props} />
+    </limel-notched-outline>,
+    <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
+    <SelectDropdown key="select-dropdown" {...props} />,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`76-79`: _🧹 Nitpick (assertive)_

**Apply unique keys to elements returned in the array.**

The same reasoning applies here. Add a `key` prop to each of these elements to ensure stable identity for JSX elements.


```diff
-        </limel-notched-outline>,
-        <HelperText text={props.helperText} isValid={!props.invalid} />,
-        <SelectDropdown {...props} />,
-    ];
+        </limel-notched-outline>,
+        <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
+        <SelectDropdown key="select-dropdown" {...props} />,
+    ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: _🧹 Nitpick (assertive)_

**Add keys to the array elements for consistency.**

Despite being Stencil rather than React, multiple elements in an array can still benefit from `key` props to maintain stable references and silence lint warnings.


```diff
 return [
-    <limel-notched-outline
-        labelId={this.editorId}
-        label={this.label}
-        ...
-    >
-        {this.renderEditor()}
-        {this.renderPlaceholder()}
-    </limel-notched-outline>,
-    this.renderHelperLine(),
+    <limel-notched-outline
+        key="notched-outline"
+        labelId={this.editorId}
+        label={this.label}
+        ...
+    >
+        {this.renderEditor()}
+        {this.renderPlaceholder()}
+    </limel-notched-outline>,
+    <div key="helper-line">{this.renderHelperLine()}</div>,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-67`: _🧹 Nitpick (assertive)_

**Fixed affix opacity for relevant states.**

This styling ensures that affixes (additional content like units or icons) are fully visible when the input has a value or is focused, improving usability. 

Consider adding a comment explaining why these specific states were chosen (has-value and focus-within) to help future maintainers understand the rationale.


```diff
 limel-notched-outline {
+    /* Ensure affixes are fully visible when input has value or is focused */
     &[has-value],
     &:focus-within {
         .mdc-text-field__affix {
             opacity: 1;
         }
     }
 }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 08d44ab9e9f39e5c6e3845ee3dfd63afdc1a1368 and 0a878f4df5faf1bf59a45edcc9c5e59a36bb095c.

</details>

<details>
<summary>📒 Files selected for processing (18)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (3 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (1 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/input-field/input-field.e2e.ts`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/select/select.template.tsx`
- `src/components/select/select.e2e.ts`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/select/select.template.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-139)

</details>

</blockquote></details>
<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 GitHub Actions: Pull Request Checks</summary>

<details>
<summary>src/components/input-field/input-field.e2e.ts</summary>

[error] 8-9: 'label' is defined but never used. Allowed unused vars must match /^h$/u    @typescript-eslint/no-unused-vars

</details>

</details>
<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (40)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **Class selector updated to align with new component structure.**

The selector has been changed from `&.mdc-text-field--disabled` to `&.disabled`, which is consistent with the PR objective of removing MDC (Material Design Components) references. This simplifies the class naming convention while maintaining the same functionality.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (1)</summary>

`5-9`: **LGTM! Good addition of the background pattern.**

The background pattern provides a visual grid that helps demonstrate the notched outline component's boundaries clearly.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated selector to match new component structure.**

The selector has been updated to target the label element within the new notched outline component. This change aligns with the PR objective of using the custom notched outline component instead of MDC input fields.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Updated selector to match new component structure.**

The selector has been updated to target the label element within the new notched outline component instead of using the MDC-specific class. This change is consistent with the PR objective of replacing MDC components.

---

`229-231`: **Updated selector for menu variant as well.**

Similar to the change for the native variant, this selector update ensures the test works with the new component structure using the notched outline component. Good consistency across different variants.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`215-226`: **Good use of flexbox for icon alignment.**

The changes to the `leading-icon` mixin improve icon positioning by using flexbox alignment properties. This ensures that icons are properly centered regardless of their size, which is more robust than the previous approach.

</details>
<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary>

`215-215`: **Label text change for consistency.**

Changed the label from "Website" to "Test" to maintain consistency with other test cases.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (4)</summary>

`20-20`: **Good addition of unique ID for input accessibility.**

Adding a unique identifier using `createRandomString()` improves accessibility by properly connecting the label to the input field. This is a crucial part of the component refactoring.



Also applies to: 246-246, 249-249

---

`381-382`: **Use of slot for content improves component composition.**

The content is now properly encapsulated within a slot, which improves the component's structure and makes it more modular.

---

`388-394`: **Good extraction of rendering logic to a dedicated method.**

The new `renderContent` method improves code organization by centralizing the conditional rendering logic for different types of chip content.

---

`445-450`: **Updated condition logic for floating label.**

The `floatLabelAbove` method now includes additional conditions to ensure the label floats properly in different states. This makes the component behavior more consistent.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (3)</summary>

`1-9`: **Good use of custom properties and shared styles.**

The file appropriately imports shared styles and defines component-specific variables. The use of CSS custom properties (`--limel-notched-outline-*`) allows for easy customization by consumers.

---

`38-47`: **Clear documentation on component structure.**

The comment explaining the prefix usage due to `shadow: false` is valuable for future maintainers. The `--outlines` block correctly sets up positioning and pointer events.

---

`196-205`: **Use of !important flags in readonly styles.**

Setting border and background colors to `transparent !important` for readonly states ensures they won't display visual indicators. While `!important` is generally discouraged, this appears to be an intentional design choice based on past review comments.

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (2)</summary>

`21-36`: **Excellent test coverage for the new notched outline structure**  
This verifies that the label ID relationship with the ProseMirror adapter is established correctly, ensuring floating label behavior is tested and reliable.

---

`155-164`: **Solid label rendering test**  
Verifying that `limel-notched-outline` receives the correct label attribute helps prevent regressions in label handling.

</details>
<details>
<summary>src/components/select/select.scss (2)</summary>

`12-15`: **Use of a shared border-radius variable**  
Defining `$border-radius` and reusing it both for the notched outline and the select trigger promotes consistency across the component.  



Also applies to: 85-85

---

`24-28`: **Confirm correct invalid-state styling logic**  
The nested selector `not([invalid]:not([invalid='false']))` might be a bit complex to read. Ensure it accurately applies styles only when valid, and that end users see the intended outline color in all states.  

Please confirm the final visuals match the design specs for valid/invalid states across browsers.

</details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary>

`334-342`: **Validate label usage with nested input**  
Wrapping the input in a `<label>` is valid HTML, but the linter complains about missing `htmlFor`. If you’d like to silence the warning, switch `<label>` to a `<div>` or add `htmlFor` to explicitly associate them.  

Would you like to keep the label wrapping approach, or prefer a standard `label` with `htmlFor`?

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

</details>
<details>
<summary>src/components/select/select.template.tsx (3)</summary>

`97-97`: **Slot usage looks appropriate.**

Using `slot="content"` here aligns with the approach in other components to place content within the `limel-notched-outline`. No issues detected.

---

`321-324`: **Function simplification looks good.**

Removing the unused `readonly` parameter and returning an empty string for empty values is straightforward and clear. No further issues found.

---

`114-114`: <details>
<summary>✅ Verification successful</summary>

**Confirm removal of the second parameter in `getSelectedText`.**

The code no longer passes `readonly` to `getSelectedText`. Verify that no other callers rely on the old signature.

---

🏁 Script executed:

```shell
#!/bin/bash
# Searching for potential old calls to `getSelectedText` that might still pass two arguments
rg -A 2 "getSelectedText\("
```

Length of output: 537

---



</details>

**Verified Removal of Extra Parameter:** The search confirms that all calls to `getSelectedText` now pass only a single argument (as seen in `src/components/select/select.template.tsx`), and no legacy calls with a second parameter exist. Please proceed with this change.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (6)</summary>

`13-14`: **Use of `$min-height` variable is beneficial for maintainability.**

Defining a SCSS variable here makes it easier to adjust the minimum height across different parts of the stylesheet.

---

`35-35`: **SCSS variable usage is consistent.**

Using `$min-height` here improves consistency with the previously defined variable.

---

`60-63`: **Adapted min-height for minimal UI mode.**

Using half the original `$min-height` reflects the minimal UI variant design requirement. No issues detected.

---

`75-75`: **Mixing in shared “looks-disabled” style is appropriate.**

This aligns with the codebase convention for styling disabled states and keeps logic centralized.

---

`150-150`: **Reusing `$min-height` is consistent with the rest of the file.**

No problems spotted with applying the same variable in the adapter block.

---

`16-16`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify z-index layering for potential stacking conflicts.**

Increasing or assigning a z-index can create unintended overlap. Confirm no unexpected UI layering issues occur with other components.

---

🏁 Script executed:

```shell
#!/bin/bash
# Search all SCSS/TSX files for other z-index usage to check for potential clashes
fd -e scss -e tsx --exec rg "z-index"
```

Length of output: 4180

---



</details>

**Z-index Layering Verification – Manual Check Recommended**

The assignment of `--limel-notched-outline-z-index: 2` in `src/components/text-editor/text-editor.scss` is intended to ensure that the notched outline appears above `div.toolbar` (which uses `z-index: 1`). However, our search across SCSS/TSX files shows multiple z-index values in use—including several instances of 1 and 2, as well as some negative values. Given the variety of z-index assignments, please conduct a manual UI verification to ensure that these settings aren’t inadvertently causing stacking or overlap issues with other components.

- **File:** `src/components/text-editor/text-editor.scss` (Line 16)
- **Concern:** Confirm that the elevated z-index for the notched outline doesn’t lead to unintended overlaps with other UI elements that might be using similar or adjacent z-index values.
- **Action:** Test the component in different contexts and screen sizes, and review other components that assign z-index to ensure safe layering.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (4)</summary>

`1-1`: **Imports appear standard.**

No issues found with the Stencil imports, and they seem appropriate for the added functionality.

---

`247-254`: **Read-only rendering approach is clear.**

Rendering a `<limel-markdown>` component for read-only mode is straightforward and maintains separation between editable and static content.

---

`257-275`: **Conditional adapter usage looks sound.**

Passing `aria-*` attributes for accessibility is a good practice, and merging them with standard HTML attributes helps ensure consistency.

---

`285-285`: **Slotting the placeholder preserves layout consistency.**

Assigning `slot="content"` ensures the placeholder is rendered within the notched outline. Implementation aligns with the rest of the code.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (4)</summary>

`30-36`: **Well-structured host styling for input type chip-set.**

The styling for the input type chip-set ensures consistent height with other input elements by setting the minimum height to the shared input field height constant. This maintains visual consistency across components.

---

`38-43`: **Clear styling for non-input chip-set.**

Making both border and background transparent for non-input chip-sets creates a cleaner appearance, which is appropriate since these don't need to visually behave like form inputs.

---

`113-114`: **Updated selector to match new component structure.**

You've correctly updated the selector to check for `.disabled` class instead of `.mdc-text-field--disabled`, which aligns with moving away from MDC-specific classes.

---

`120-120`: **Consistent update to disabled class selector.**

This change aligns with the previous selector update, maintaining consistency in how disabled states are handled.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (4)</summary>

`1-24`: **Well-designed component structure with clear documentation.**

The component is properly set up with detailed documentation explaining its purpose and usage. Setting `shadow: false` is a good decision for ensuring proper label-input association in the consumer's DOM.

---

`25-95`: **Well-documented props with clear responsibilities.**

All properties are properly decorated with `@Prop({ reflect: true })` and have detailed JSDoc comments explaining their purpose. The properties cover all necessary states for an input field (required, readonly, invalid, disabled) and additional features like floating labels and icons.

---

`96-111`: **Accessible and clean render implementation.**

The render method creates a clean structure with appropriate ARIA attributes. Using `aria-hidden="true"` on the outlines container is correct since the visual elements shouldn't be exposed to screen readers, while the actual label remains accessible through its `htmlFor` attribute.

---

`113-139`: **Clear helper methods for conditional rendering.**

Both `renderLabel` and `renderEmptyReadonlyValue` methods properly handle their specific cases with clear conditional logic. The readonly placeholder dash (–) provides good visual feedback for empty readonly fields.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T08:35:30Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>♻️ Duplicate comments (2)</summary><blockquote>

<details>
<summary>src/components/input-field/input-field.tsx (1)</summary><blockquote>

`324-333`: _🧹 Nitpick (assertive)_

**Consider adding a key to the returned array elements.**
When returning an array of elements, certain lint checks recommend providing a unique key, even though this is Stencil (not React). Doing so can help prevent future conflicts and quell linter warnings.


```diff
return [
-    <limel-notched-outline
+    <limel-notched-outline key="outline"
       labelId={this.labelId}
       ...
    />,
    this.renderHelperLine(),
    ...
];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (1)</summary><blockquote>

`58-79`: _🧹 Nitpick (assertive)_

**Consider adding a key property to each element in the returned array.**

When returning multiple siblings in an array, it can be helpful to assign unique keys (even in StencilJS) if your build tools or lint rules expect them. Having a `key` helps the virtual DOM engine track changes more reliably in certain edge cases, and it resolves the static analysis warnings.


You can apply something like this:

```diff
 return [
-    <limel-notched-outline
+    <limel-notched-outline
+        key="notched-outline"
         class={classList}
         labelId="s-label"
         label={props.label}
         ...
     >
         ...
     </limel-notched-outline>,
-    <HelperText text={props.helperText} isValid={!props.invalid} />,
-    <SelectDropdown {...props} />,
+    <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
+    <SelectDropdown key="select-dropdown" {...props} />,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 0a878f4df5faf1bf59a45edcc9c5e59a36bb095c and 44add9865641fe7cfdb5d56fac0a76293301708e.

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (3 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (1 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (2)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/input-field/input-field.e2e.ts`
- `src/components/select/select.e2e.ts`
- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/input-field/input-field.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/select/select.template.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/input-field/input-field.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/select/select.template.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 367-379: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 367-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 367-368: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 367-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (22)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **Class selector updated to align with new component structure.**

The selector has been changed from `&.mdc-text-field--disabled` to `&.disabled`, which is consistent with the PR goal of removing MDC dependencies in favor of a custom implementation.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated selector to match new component structure.**

The test was correctly updated to reflect the new DOM structure, changing from `.chip-set__label` to `.limel-notched-outline--notch label`, which aligns with using the new `limel-notched-outline` component.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Updated selector for native variant label.**

The test was correctly updated to target the label within the new component structure, replacing MDC-specific selector with `.limel-notched-outline--notch label`.

---

`229-231`: **Updated selector for menu variant label.**

Similar to the native variant, this selector was correctly updated to target the label within the new `limel-notched-outline` component. This change supports the PR goal of removing MDC dependencies.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`217-225`: **Improved icon alignment with Flexbox.**

The implementation now uses Flexbox for icon alignment and moves width/height properties to the nested `limel-icon` element, which improves modularity and clarity of styling responsibilities. This change supports the goal of unifying styles across components.

</details>
<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary>

`213-213`: **Updated label text looks good.**
No functional issues are apparent. The new label is clear and consistent with the rest of the test suite.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (5)</summary>

`20-20`: **New import is fine.**
No concerns; importing `createRandomString` is perfectly valid here.

---

`246-249`: **Introduction of `labelId` property is appropriate.**
This property will help with accessibility and consistent labeling. Good job.

---

`345-345`: **Class assignment for `disabled` state looks correct.**
This ensures the component reflects disabled or readonly states consistently.

---

`347-347`: **No substantial change in this line.**

---

`352-361`: **Adding relevant MDC classes for input type is consistent with the PR objective.**
No issues found. This aligns with the notched outline approach and the intended styling patterns.

</details>
<details>
<summary>src/components/select/select.scss (4)</summary>

`12-12`: **Good introduction of a border-radius variable.**

Defining `$border-radius` is a clean way to ensure consistent theming of the component's outlines. No issues found here.

---

`14-15`: **Consistent custom property usage.**

Using `--limel-notched-outline-border-radius` within `:host(limel-select)` effectively ties the styling to your new `$border-radius` variable, improving maintainability. Good job.

---

`24-27`: **Transparent border for non-invalid outlines.**

This styling ensures the notched outline remains hidden when the component is not in an invalid state. This aligns well with the design goal of providing clear, minimal borders. Looks good.

---

`84-84`: **Applying the border-radius to .limel-select-trigger.**

Consistently reusing the `$border-radius` variable here is a nice touch for uniform corner radii. Approved.

</details>
<details>
<summary>src/components/select/select.template.tsx (2)</summary>

`97-97`: **Slot usage is correct.**

Using `slot="content"` for the button is a valid approach here to ensure that `<SelectValue>` content is placed inside the notched outline’s content slot. No issues found.

---

`114-114`: **Clean use of `getSelectedText`.**

At line 114, calling `getSelectedText(props.value)` centralizes your display logic. The implementation at lines 321 and 324 handles empty values gracefully by returning an empty string. This is straightforward and maintainable.  



Also applies to: 321-324

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (5)</summary>

`30-37`: **Setting a minimum height for the slot content.**

By assigning `min-height: shared_input-select-picker.$height-of-mdc-text-field`, you maintain consistent sizing with other input-based components. This improves alignment and helps unify the visual style.

---

`38-43`: **Transparent outline for non-input chip sets.**

Making the notched outline transparent in non-input scenarios is a solid approach to distinguish chips meant for selection vs. chips meant purely for display/interaction. Approved.

---

`77-77`: **Maintaining consistent padding.**

Padding of `0 0.5rem` on the `.mdc-text-field__input` ensures a comfortable space around text, matching the spacing pattern in other elements. Looks good.

---

`113-114`: **Improved hover and focus logic for the clear-all button.**

Allowing `.clear-all-button` to appear on hover and focus only when chips exist is logical, preventing unnecessary UI clutter.

---

`120-120`: **Hide clear button when no chips are present or disabled.**

Displaying none for `.mdc-chip-set:not(.has-chips) &` and `.has-chips.disabled &` is consistent with the previous logic, avoiding a non-functional button.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T08:59:53Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:00:41Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:01:19Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:01:38Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:02:22Z
user: login: LucyChyzhova
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:05:37Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 8**

<details>
<summary>♻️ Duplicate comments (9)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (2)</summary><blockquote>

`1-3`: _🧹 Nitpick (assertive)_

**Consider scoping the global box-sizing rule.**

Using the universal selector `*` applies `box-sizing: border-box` to all elements, which could potentially affect other components. Consider scoping this to the specific example component.

```diff
-* {
+.notched-outline-example * {
    box-sizing: border-box;
}
```

---

`11-22`: _🧹 Nitpick (assertive)_

**Consider adding more specific selector for the input styles.**

The current selector applies to all text inputs, which could have unintended consequences if this file is included in a broader context. Since this is for an example, it might be safer to scope these styles more narrowly.

```diff
-input[type='text'] {
+.notched-outline-example input[type='text'] {
    // Overriding some of the native input styles for the
    // sake of this example.
    border: none;
    outline: none;

    height: 2.5rem;
    width: 100%;
    padding: 0 1rem;

    background-color: transparent;
}
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (1)</summary><blockquote>

`244-248`: _🧹 Nitpick (assertive)_

**Consider documenting the complex attribute selector**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` is complex and could benefit from documentation explaining when this condition is met.

```diff
+    // Float label when: has explicit floating label, has a value, 
+    // or is readonly without explicitly being set to have no value
     &[has-floating-label],
     &[has-value]:not([has-value='false']),
     &[readonly]:not([has-value]:not([has-value='true'])) {
         @include float-label;
     }
```

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (3)</summary><blockquote>

`41-42`: _🛠️ Refactor suggestion_

**Use a dynamic ID instead of hardcoded value**

Using a hardcoded ID ('abcd') can lead to issues if this component is rendered multiple times. Consider using a dynamic ID generation approach.

```diff
-        const id = 'abcd';
+        const id = `notched-outline-example-${Math.random().toString(36).substring(2, 11)}`;
```

---

`43-111`: _🛠️ Refactor suggestion_

**Add keys to elements rendered in an array**

When returning an array of elements, each element should have a unique `key` property to help React efficiently update the DOM.

```diff
 return [
-            <section>
+            <section key="notched-outline">
                 <limel-notched-outline
                     labelId={id}
                     label="Label"
                     required={this.required}
                     invalid={this.invalid}
                     disabled={this.disabled}
                     readonly={this.readonly}
                     hasValue={this.hasValue}
                     hasLeadingIcon={this.hasLeadingIcon}
                     hasFloatingLabel={this.hasFloatingLabel}
                 >
                     <input
                         slot="content"
                         id={id}
                         type="text"
                         required={this.required}
                         disabled={this.disabled}
                         readonly={this.readonly}
                         value={this.inputValue}
                         onInput={this.handleInput}
                     />
                 </limel-notched-outline>
             </section>,
-            <limel-example-controls>
+            <limel-example-controls key="controls">
                 <limel-checkbox
                     checked={this.disabled}
                     label="Disabled"
                     onChange={this.setDisabled}
                 />
                 <!-- other checkboxes... -->
             </limel-example-controls>,
-            <limel-example-value value={this.hasValue} />,
+            <limel-example-value key="example-value" value={this.hasValue} />,
         ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

---

`120-153`: _🧹 Nitpick (assertive)_

**Consider refactoring repetitive event handlers**

There's significant repetition in the event handler methods. Consider creating a generic handler to reduce duplication.

```diff
+    private toggleState = (property: keyof NotchedOutlineBasicExample) => (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this[property] = event.detail;
+    };
+
-    private setDisabled = (event: CustomEvent<boolean>) => {
-        event.stopPropagation();
-        this.disabled = event.detail;
-    };
+    private setDisabled = this.toggleState('disabled');
 
-    private setReadonly = (event: CustomEvent<boolean>) => {
-        event.stopPropagation();
-        this.readonly = event.detail;
-    };
+    private setReadonly = this.toggleState('readonly');

     // Apply the same pattern to the remaining event handlers
```

Note: While this reduces code duplication, be aware that using arrow functions in properties can have performance implications in StencilJS if the component re-renders frequently.

</blockquote></details>
<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

`445-450`: _🧹 Nitpick (assertive)_

**Return `false` explicitly for clarity in `floatLabelAbove()`.**
Currently, this function returns `true` if conditions match, else `undefined`. Explicitly returning `false` makes the logic clearer and more consistent.
```diff
 private readonly floatLabelAbove = () => {
     if (
         !!this.value.length ||
         this.editMode ||
         this.readonly ||
         this.textValue
     ) {
         return true;
     }
-    // returns undefined otherwise
+    return false;
 };
```

---

`389-394`: _🧹 Nitpick (assertive)_

**Ensure proper keys in `renderContent` when mapping.**
When returning `value.map(this.renderChip)`, consider adding `key={chip.id}` or a unique identifier to `<limel-chip>`. Though Stencil may not strictly require it, adding keys can avoid linter warnings and potential rendering issues.

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: _🧹 Nitpick (assertive)_

**Add `key` attributes to the returned elements in the array.**

The component returns an array of two elements: `<limel-notched-outline>` and the helper line. While Stencil is more lenient than React about keyed arrays, providing a `key` helps avoid potential rendering mismatches if the array’s elements are reordered or conditionally rendered in the future.



Example fix:
```diff
return [
-   <limel-notched-outline
+   <limel-notched-outline
+       key="editor-outline"
        labelId={this.editorId}
        ...
    >
        ...
    </limel-notched-outline>,
-   this.renderHelperLine(),
+   <div key="editor-helper-line">{this.renderHelperLine()}</div>,
];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5bbafc51d975b294e604a392a48557c773e8807d and 185a983b18c23c87b4f5aae7ae52672e33ff6bb1.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `etc/lime-elements.api.md` is excluded by `!etc/lime-elements.api.md`

</details>

<details>
<summary>📒 Files selected for processing (18)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (3 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (1 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/input-field/input-field.e2e.ts`
- `src/components/select/select.e2e.ts`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/select/select.template.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/notched-outline/notched-outline.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/select/select.template.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-139)

</details>

</blockquote></details>
<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>
<details>
<summary>src/components/chip-set/chip.types.ts (1)</summary>

* `Chip` (9-110)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 368-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: Docs / Post link to docs on PR
* GitHub Check: Test

</details>

<details>
<summary>🔇 Additional comments (38)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **Selector updated to remove MDC dependency.**

The change from `&.mdc-text-field--disabled` to `&.disabled` properly aligns with the PR objective of removing Material Design Components dependencies while maintaining the same functionality.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Selector updated to target label within the new notched outline component.**

The selector has been properly updated to reflect the new DOM structure where labels are now contained within the notched outline component. This ensures that tests continue to work correctly with the updated implementation.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Selector updated for native select label.**

The selector has been properly updated to target the label within the new notched outline component structure, replacing the MDC-specific selector. This ensures the tests correctly locate the label element after the component refactoring.

---

`229-231`: **Selector updated for menu select label.**

Similarly, the menu variant's label selector has been updated to work with the new component structure. This change maintains test coverage while adapting to the removal of MDC dependencies.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`217-225`: **Improved icon layout with flexbox**

The changes to the `leading-icon` mixin improve the layout by using flexbox to properly center the icon content, while also providing better encapsulation by nesting the size properties within a `limel-icon` selector.

</details>
<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary>

`213-214`: **Label standardization**

The change from "Website" to "Test" standardizes the label text across test cases, improving consistency throughout the test suite.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (3)</summary>

`1-24`: **Well-structured component styling with custom properties**

The file starts with appropriate imports and establishes key variables for consistent styling. The use of custom properties with appropriate fallbacks enhances component flexibility.

---

`72-124`: **Clear implementation of notch styles**

The notch styling is well-implemented with appropriate transitions and positioning. The label is properly handled with text truncation and smooth transitions for different states.

---

`196-205`: **Deliberate use of !important for readonly states**

The use of `!important` is typically discouraged, but here it's an intentional design choice to ensure readonly fields always have transparent borders and backgrounds, regardless of other style rules that might apply.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (6)</summary>

`20-20`: **New import for `createRandomString` looks good.**
No issues found with this addition.

---

`246-246`: **Introduction of `labelId` is appropriate.**
Storing a unique ID enables better accessibility and label-to-input association.

---

`249-249`: **Proper initialization of `labelId`.**
Assigning a random string is consistent with the approach of ensuring unique IDs.

---

`345-345`: **Conditionally setting `disabled` class is correct.**
Tying the class to `this.disabled || this.readonly` ensures accurate styling.

---

`347-347`: **No further concerns.**

---

`365-365`: **Double-check the use of `role="grid"`.**
If this `div` can be interacted with, it may conflict with accessibility rules for non-interactive roles. Consider removing or adjusting the role.  

Do you want to confirm that the role is necessary via a short accessibility check script?

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (2)</summary>

`21-37`: **Testing the `limel-notched-outline` integration looks good.**
These assertions confirm the outline element exists and checks attributes like `hasfloatinglabel` and `labelid`. This aligns with the new label/outline approach. No issues found.

---

`156-163`: **Proper label checks.**
Validating the `limel-notched-outline` and its `label` attribute ensures that the label is correctly passed and rendered. Good job verifying `hasLabelProp`.

</details>
<details>
<summary>src/components/select/select.scss (3)</summary>

`12-13`: **Introducing `$border-radius` and applying it at the host level is consistent.**
Keeps the border radius customizable and aligns with the notched outline usage.

---

`24-28`: **Transparent border color for valid states.**
Applying `--limel-notched-outline-border-color: transparent` when not invalid is a neat approach.

---

`84-84`: **Using `$border-radius` for `.limel-select-trigger`.**
Maintaining consistent rounding across the component is good for a unified UI style.

</details>
<details>
<summary>src/components/select/select.template.tsx (3)</summary>

`97-97`: **Good use of `slot="content`.**

Attaching `slot="content"` to the button ensures it resides in the correct projection area inside `<limel-notched-outline>`. This solidifies the layout hierarchy while preserving accessibility.

---

`114-114`: **No issues found with the updated usage of `getSelectedText`.**

Your call to `getSelectedText(props.value)` here appears consistent with the updated function. It should handle both single and multiple selections.

---

`321-324`: <details>
<summary>✅ Verification successful</summary>

**Ensure the removed `readonly` logic is not needed.**

You simplified the function by eliminating the `readonly` parameter and always returning `''` for empty states. While this is a clean approach, confirm that ignoring `readonly` in the displayed text won’t be a problem for your feature set.


If you want to verify that `getSelectedText` is never called with a `readonly` scenario in mind, you might run:

Check any call references to see if they expected different handling for readonly.

---

🏁 Script executed:

```shell
#!/bin/bash
rg -A 3 "getSelectedText"
```

Length of output: 696

---



</details>

**Confirm Removal of `readonly` Handling in `getSelectedText`**

The grep results confirm that all invocations of `getSelectedText` (e.g., using `{getSelectedText(props.value)}` in `src/components/select/select.template.tsx`) pass only a single parameter. There are no call sites providing or expecting a `readonly` flag. This indicates that removing the `readonly` logic is safe for the current feature set.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (2)</summary>

`245-247`: **Read-only rendering approach looks fine.**

Switching to `<limel-markdown>` when `readonly` is set should simplify the component structure. This is consistent with the recommended practice of using a separate viewer component for static content.

---

`249-249`: **Usage of `slot="content` and new ARIA attributes is well-structured.**

- Assigning `slot="content"` to editor elements and placeholders aligns neatly with the notched outline approach.  
- Providing `aria-invalid` and `aria-required` clarifies the field’s validation state for screen readers.




Also applies to: 259-259, 285-285, 270-271

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (6)</summary>

`13-13`: **Consistent variable for the minimum editor height.**

Defining `$min-height: 5rem;` centralizes your styling logic in one place, making updates simpler. Good move!

---

`16-16`: **Applying a higher `z-index` for the notched outline.**

This ensures the outline doesn't get hidden behind the toolbar. The comment clarifies the rationale, which is helpful for future maintenance.

---

`35-35`: **Refactored `min-height` usage.**

Switching from a hard-coded value to `$min-height` keeps your layout scalable and easier to update later.

---

`60-63`: **Dynamic sizing for minimal UI mode.**

Reducing the editor’s height when not focused in minimal mode—via `calc($min-height / 2)`—smoothly complements more compact UI patterns. This is clear and consistent.

---

`75-75`: **Disabled styling now includes `looks-disabled`.**

Using the shared mixin ensures a consistent disabled state across components. This is a coherent approach in line with existing patterns.

---

`150-150`: **Matching the adapter’s `min-height` to `$min-height`.**

This helps maintain the same sizing logic for both the host and the internal editor adapter, avoiding unexpected layout inconsistencies.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (3)</summary>

`38-43`: **Transparent outline for non-input chip-sets looks consistent.**

Making the notched outline fully transparent for non-input chip-sets matches the design goal of visually distinguishing them from the input variant. No issues found.

---

`113-114`: **Confirm accessibility signifier when removing outline on focus.**

By setting `outline: none;` here, the default focus ring is removed. Check that `.mdc-text-field--focused &` or the `mixins.visualize-keyboard-focus` mixin still provides a clear visual focus indicator to meet accessibility guidelines.  

Would you like to run a quick test or script to verify the presence of an alternative focus style so that keyboard navigation remains visible?

---

`120-120`: **Hiding clear button for disabled or empty sets is appropriate.**

Hiding the “clear all” button in these states prevents accidental or meaningless clicks. This is a clean approach.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (3)</summary>

`96-111`: **Render method logic appears consistent.**

The structure correctly includes a slot for input content, wrapped with notches and optional placeholders. This aligns well with the stated design.

---

`113-123`: **Label rendering is straightforward and clear.**

Conditionally rendering the label ensures minimal DOM overhead for unlabeled inputs, and `htmlFor={this.labelId}` properly associates the label with the input.

---

`125-138`: **Empty readonly value strategy is neat.**

Displaying a dash for empty read-only fields clarifies that the field is intentionally blank. Using `aria-hidden="true"` prevents unwanted reading by assistive technologies.

</details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary>

`59-66`: **Conditional affix visibility aligns with new outline style.**

Enabling `.mdc-text-field__affix` only when `[has-value]` or `:focus-within` improves clarity for users. Looks consistent with the updated notched-outline approach.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:06:29Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 10**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**Missing selector update for label in choice chip test.**

There's another selector for finding a label at line 82 that still uses the old `.chip-set__label` class, while the one on line 29 has been updated to use `.limel-notched-outline--notch label`. For consistency, this one should be updated too.


```diff
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find('limel-chip-set >>> .limel-notched-outline--notch label');
```

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (6)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

`40-42`: _🛠️ Refactor suggestion_

**Use a dynamic ID instead of hardcoded value**

The `id` is currently hardcoded as 'abcd'. This should be dynamic to ensure uniqueness, especially in a component that could be instantiated multiple times.


```diff
-        const id = 'abcd';
+        const id = `notched-outline-example-${Math.random().toString(36).substring(2, 11)}`;
```

</blockquote></details>
<details>
<summary>src/components/chip-set/chip-set.tsx (1)</summary><blockquote>

`415-441`: _🧹 Nitpick (assertive)_

**Provide unique keys for array items and handle keyboard events.**

This returns an array of multiple elements, but none are assigned a `key`. While Stencil often doesn't require keys like React does, adding them could help avoid potential warnings or logic issues. Also consider a corresponding keyboard handler if necessary to ensure accessibility for `[this.value.map(this.renderInputChip), <input> ... ]`.

```diff
return [
+    <div key="chips-container">
        this.value.map(this.renderInputChip),
+    </div>,
    <input
        ...
    />,
    ...
];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.tsx (1)</summary><blockquote>

`324-343`: _🧹 Nitpick (assertive)_

**Consider associating the label more explicitly.**

You're returning an array containing `<limel-notched-outline>` and other elements without unique `key` attributes. Additionally, the linter warns about the `<label>` element not having a `for` or `htmlFor`. In Stencil, it's typically sufficient to rely on `aria-labelledby`, but if you want to match common accessibility patterns strictly, you could add `htmlFor={this.labelId}` or remove the `<label>` if it's purely stylistic. Also consider a `key` property for returned siblings to quiet linter complaints.

```diff
<label
+    htmlFor={this.labelId}
    slot="content"
    class={this.getContainerClassList()}
+    key="container-label"
>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/select/select.template.tsx (1)</summary><blockquote>

`77-79`: **[Duplicate comment] Add unique key for elements in returned array.**

Applying unique keys here helps keep each item stable if the array items are re-ordered in the future.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/text-editor/text-editor.tsx (1)</summary><blockquote>

`227-242`: **[Duplicate comment] Add a unique key for returned elements in the array.**

To avoid potential rendering issues in array returns, consider adding `key` attributes even if you’re using Stencil.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>
<details>
<summary>src/components/input-field/input-field.scss (1)</summary><blockquote>

`59-67`: _🧹 Nitpick (assertive)_

**Enhance Inline Documentation for New Notched Outline Styling**

The newly added `limel-notched-outline` block sets the opacity of `.mdc-text-field__affix` when the element either has a value (`[has-value]`) or gains focus (`:focus-within`). To improve maintainability and clarity, please add an inline comment above this block that explains:
- **Rationale:** Why these conditions (`has-value` and `:focus-within`) were selected.
- **Future Considerations:** Whether similar styling adjustments might be needed for additional states such as error or disabled.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 185a983b18c23c87b4f5aae7ae52672e33ff6bb1 and eaea96ee1ae5e070ba937ac4801e3fcabbb8319b.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `etc/lime-elements.api.md` is excluded by `!etc/lime-elements.api.md`

</details>

<details>
<summary>📒 Files selected for processing (18)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (3 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)
* `src/components/input-field/input-field.e2e.ts` (1 hunks)
* `src/components/input-field/input-field.scss` (1 hunks)
* `src/components/input-field/input-field.tsx` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.scss` (1 hunks)
* `src/components/notched-outline/examples/notched-outline-basic.tsx` (1 hunks)
* `src/components/notched-outline/notched-outline.scss` (1 hunks)
* `src/components/notched-outline/notched-outline.tsx` (1 hunks)
* `src/components/select/select.e2e.ts` (2 hunks)
* `src/components/select/select.scss` (3 hunks)
* `src/components/select/select.template.tsx` (4 hunks)
* `src/components/text-editor/text-editor.scss` (5 hunks)
* `src/components/text-editor/text-editor.spec.tsx` (2 hunks)
* `src/components/text-editor/text-editor.tsx` (4 hunks)
* `src/style/internal/shared_input-select-picker.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (3)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/input-field/input-field.e2e.ts`
- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/select/select.e2e.ts`
- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/notched-outline/notched-outline.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/select/select.template.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/text-editor/text-editor.spec.tsx`
- `src/components/chip-set/chip-set.tsx`
- `src/components/notched-outline/examples/notched-outline-basic.tsx`
- `src/components/notched-outline/notched-outline.tsx`
- `src/components/text-editor/text-editor.tsx`
- `src/components/input-field/input-field.tsx`
- `src/components/select/select.template.tsx`

</details>
<details>
<summary>`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...</summary>

> `src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publically exported by lime-elements, the import should be made from `@limetech/lime-elements`. If they import something from another file inside the `example` folder, the import should use a relative path.

- `src/components/notched-outline/examples/notched-outline-basic.tsx`

</details>

</details><details>
<summary>🧠 Learnings (1)</summary>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (1)</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.697Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
```

</details>

</details><details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>
<details>
<summary>src/components/chip-set/chip.types.ts (1)</summary>

* `Chip` (9-110)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary>

* `Component` (19-139)

</details>

</blockquote></details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (1)</summary><blockquote>

<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx (1)</summary>

* `Component` (10-154)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 368-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.tsx</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/input-field/input-field.tsx</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>
<details>
<summary>src/components/select/select.template.tsx</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 77-77: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (46)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`1-7`: **Class selector updated to align with new component structure.**

The selector has been changed from the MDC-specific class `.mdc-text-field--disabled` to the more generic `.disabled`, which aligns with the PR's goal of removing MDC input fields.

</details>
<details>
<summary>src/components/notched-outline/examples/notched-outline-basic.scss (3)</summary>

`1-3`: **Global box-sizing is appropriate in this context.**

Setting `box-sizing: border-box` globally is acceptable here since this style is encapsulated within the component's Shadow DOM and won't affect other components.


I'm using the context from your previous feedback about examples in Lime Elements using Shadow DOM with `shadow: true`, which makes additional class-based selectors unnecessary.

---

`5-9`: **LGTM - Clean styling for the example section.**

The section styling with padding and patterned background creates a good visual context for demonstrating the notched outline component.

---

`11-22`: **Input styling is clean and appropriate for the example.**

The styles properly override native input appearance to work with the notched outline component. Since this is in a Shadow DOM context, the broad selector is appropriate.


These styles align well with the PR objective of creating a custom component for notched outlines around input elements.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated selector to match new component structure.**

The selector has been changed to reflect the new DOM structure after replacing MDC components with the custom notched outline implementation. This ensures the tests continue to work with the refactored component.

</details>
<details>
<summary>src/components/select/select.e2e.ts (2)</summary>

`14-16`: **Updated selector to match new component structure.**

The selector has been changed to target the label within the new notched outline component, reflecting the removal of MDC components as per the PR's objective.

---

`229-231`: **Consistently updated selector for the menu variant test.**

The selector has been updated in the same way as the native variant test, ensuring consistent testing methodology across different component variants.

</details>
<details>
<summary>src/style/internal/shared_input-select-picker.scss (1)</summary>

`215-226`: **Improved layout for icon elements with flexbox**

The refactoring to use flexbox (`display: flex`, `align-items: center`, `justify-content: center`) for centering icons is a good improvement that ensures consistent alignment across different icon sizes and content. Moving the sizing properties to the nested `limel-icon` selector provides better targeting of styles.

</details>
<details>
<summary>src/components/input-field/input-field.e2e.ts (1)</summary>

`213-213`: **Label text updated for consistency**

Changing the label from "Website" to "Test" aligns with the conventions used in other test cases throughout the file.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.scss (7)</summary>

`1-9`: **Well-structured imports and variable declarations**

The file imports necessary mixins and shared styles correctly. The `$border-radius` and `$value-top` variables are appropriately defined with consistent units.

---

`10-23`: **Good use of custom properties for theming**

The custom properties established for the component provide flexibility for consumers to customize appearance. The component also correctly inherits from shared styles while allowing for overrides.

---

`41-47`: **Well-designed outline container**

The `&--outlines` block effectively establishes positioning, disables pointer events, and sets up the z-index via a custom property, which allows for adjustment in different contexts.

---

`72-124`: **Comprehensive styling for notch element and label**

The notch styling and label handling are well implemented with appropriate transitions for smooth animation effects. The positioning and z-index ensure proper visual layering.


However, the `&:after` pseudo-element inside the label block (lines 117-121) doesn't specify a default `content` property, though I see you've intentionally set this elsewhere when needed.

---

`164-174`: **Clear visual indicator for required fields**

The required field styling is well implemented. The asterisk indicator has appropriate scaling and padding to ensure visibility without being too obtrusive.

---

`196-205`: **Intentional styling for readonly state**

Setting border and background colors to transparent for readonly states with `!important` ensures clear visual differentiation. I see from past review comments that this is a deliberate design choice to prevent confusion about editability.

---

`220-249`: **Clean implementation of floating label behaviors**

The `float-label` mixin and its application conditions create a smooth and consistent behavior for floating labels across different states. The comment added to explain the complex attribute selector logic improves maintainability.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (6)</summary>

`20-20`: **Clean import for unique ID generation.**

Importing `createRandomString` here looks good and aligns with the approach for generating unique IDs.

---

`246-249`: **Good practice for generating a unique labelId.**

Using a random string for `labelId` ensures a unique association with the outline. This is a robust approach in Stencil.

---

`345-345`: **Straightforward class assignment for disabled state.**

Properly applying the `disabled` class based on `this.disabled || this.readonly`. This is consistent with the existing logic.

---

`352-361`: **Clear and maintainable block for `input`-type classes.**

Dynamically adding these MDC and custom classes aligns well with the new notched outline usage.

---

`366-366`: **Use of role grid only for non-input types.**

This small conditional assignment of `{ role: 'grid' }` for non-input types looks appropriate. No concerns here.

---

`388-394`: **Rendering content conditionally is clean and functional.**

Switching between `renderInputChips()` or mapping chips is a neat approach and remains easy to read.

</details>
<details>
<summary>src/components/text-editor/text-editor.spec.tsx (2)</summary>

`21-37`: **Tests accurately verify the new notched outline and adapter attributes.**

Checking `limel-notched-outline` and `limel-prosemirror-adapter` for correct attributes is thorough, ensuring that the label ID and content type are set properly.

---

`155-164`: **Validation of label rendering.**

Confirming that the `limel-notched-outline` has the correct label is an excellent approach to ensure that the label is properly provided.

</details>
<details>
<summary>src/components/select/select.scss (3)</summary>

`12-13`: **Good introduction of `$border-radius`.**

Defining a dedicated variable here helps unify the design and maintain consistent corners across the component.

---

`14-19`: **Use of `:host(limel-select)` to set global properties looks clean.**

Applying `--limel-notched-outline-border-radius` based on `$border-radius` neatly centralizes control over the outline radius.

---

`84-85`: **Consistent border-radius usage.**

This ensures the select trigger matches the global `$border-radius` setting introduced above. No issues found.

</details>
<details>
<summary>src/components/select/select.template.tsx (3)</summary>

`97-97`: **Slot assignment is properly set to `"content"`.**

This ensures proper projection under the new `limel-notched-outline` structure.

---

`114-114`: **Invocation of `getSelectedText` looks correct.**

This streamlined call removes the previous `readonly` dependency. Confirm there are no remaining references to old signatures.

---

`321-324`: **Revised `getSelectedText` function signature.**

Dropping the `readonly` argument and returning an empty string for no value simplifies logic.

</details>
<details>
<summary>src/components/text-editor/text-editor.tsx (4)</summary>

`1-1`: **Importing from `@stencil/core` aligns with the Stencil component pattern.**

No issues noted.

---

`247-254`: **Correct slot usage for read-only markdown.**

Specifying `slot="content"` ensures the markdown is projected correctly inside the notched outline.

---

`257-275`: **Prosemirror adapter and accessibility attributes.**

Including `aria-` attributes (`aria-invalid`, `aria-required`) and `slot="content"` helps ensure accessibility and proper slotting.

---

`285-285`: **Placeholder element in the Content slot.**

Displaying the placeholder inside the `limel-notched-outline` keeps it visually consistent and is well-scoped.

</details>
<details>
<summary>src/components/text-editor/text-editor.scss (4)</summary>

`15-15`: **Confirm the layering strategy for `--limel-notched-outline-z-index`.**

You’re increasing the notched outline’s z-index to be on top of the toolbar (`z-index: 1`). Ensure that no overlapping elements are unintentionally hidden beneath or placed above. Regularly test with components or dialogs that might have higher stacking contexts.

---

`35-35`: **Usage of `$min-height` for `:host(limel-text-editor)`.**

Great job referencing the newly introduced variable instead of a hardcoded value. This approach fosters maintainability and consistency.

---

`60-63`: **Approach to minimal UI states.**

Halving the editor’s min-height for minimal UI could impact readability for multiline editing. If the text editor is used in contexts requiring vertical space, consider a responsive approach, or ensure the half-height remains comfortable for typical content.

---

`75-75`: **Check styling overlap for `.looks-disabled`.**

Including `@include shared_input-select-picker.looks-disabled;` is consistent with how other inputs handle the disabled state. Verify it does not conflict with any separate read-only styles.

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (3)</summary>

`30-36`: **Consistent layout for input-type chip sets.**

Using `limel-notched-outline` with a minimum content height ensures visual consistency with other fields. This is a solid approach for input-type chip sets. Verify that the set’s contents (e.g., multiple chips) don’t overflow the notched outline if many chips are present.

---

`38-44`: **Transparent outline for non-input chip sets.**

Making the outline transparent when `type` is not `"input"` helps visually differentiate these chip sets from typical text input fields. This is a neat design choice.

---

`120-120`: **Hide the clear-all button for disabled chip sets.**

Hiding the button when `.has-chips.disabled` is applied is intuitive. This ensures intermediates states (like read-only vs. disabled) do not accidentally reveal an interactive element.

</details>
<details>
<summary>src/components/notched-outline/notched-outline.tsx (5)</summary>

`1-2`: **Use of Stencil imports.**

Using only `@stencil/core` for `Component`, `Prop`, and `h` is standard. Make sure no additional decorators like `State` or `Method` are required if you add more functionality in the future.

---

`3-18`: **Clear documentation and private component annotation.**

The JSDoc block clearly states that this is a private component for internal usage, inspired by Material Design. Great job explaining the motivation. Keep it current if future enhancements add new constraints or usage contexts.

---

`19-23`: **No-shadow DOM is well-justified.**

Setting `shadow: false` is a sensible choice to maintain `for` and `id` associations for screen readers. Just remember to thoroughly test for potential style leakage from consumer contexts.

---

`96-111`: **Robust base structure in `render()`.**

By placing the input slot (`slot="content"`) alongside the leading and trailing outlines, you ensure composability. This approach is logical and aligns well with your intended design.

---

`113-123`: **Label rendering and association.**

Returning early if no `label` is provided helps keep the notch simpler. The `htmlFor={this.labelId}` usage ensures correct accessibility link to the consumer’s input. Nicely done.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T10:29:01Z
user: login: Kiarokh
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T12:21:44Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T12:22:23Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary><blockquote>

`82-82`: _⚠️ Potential issue_

**Consider updating this selector for consistency.**

The test is still using the old `.chip-set__label` selector, while line 28-30 has been updated to use `.limel-notched-outline--notch label`. For consistency, this selector should also be updated.


```diff
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find('limel-chip-set >>> .limel-notched-outline--notch label');
```

</blockquote></details>

</blockquote></details>

<details>
<summary>♻️ Duplicate comments (2)</summary><blockquote>

<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

`454-463`: _🧹 Nitpick (assertive)_

**Consider explicitly returning false.**

The `floatLabelAbove` method returns `true` for specific conditions but implicitly returns `undefined` otherwise. For better clarity, consider explicitly returning `false` when none of the conditions match.


```diff
private readonly floatLabelAbove = () => {
    if (
        !!this.value.length ||
        this.editMode ||
        this.readonly ||
        this.textValue
    ) {
        return true;
    }
+   return false;
};
```

---

`425-452`: _🧹 Nitpick (assertive)_

**Missing key property for child elements in array.**

There are multiple elements being returned in an array without `key` props. While each chip has its own key, the other elements in the array (input, icons, etc.) don't have keys, which can cause React/Stencil to show warnings.


```diff
private renderInputChips() {
    return [
-        this.value.map(this.renderInputChip),
+        this.value.map(this.renderInputChip),
        <input
+            key="input"
            tabIndex={INPUT_FIELD_TABINDEX}
            type={this.inputType}
            id={this.labelId}
            disabled={this.readonly || this.disabled}
            class={{
                'mdc-text-field__input': true,
                hidden: this.inputHidden(),
            }}
            value={this.textValue}
            onBlur={this.handleInputBlur}
            onFocus={this.handleTextFieldFocus}
            onKeyDown={this.handleKeyDown}
            onInput={this.handleTextInput}
            onChange={this.inputFieldOnChange}
            placeholder={this.isFull() ? '' : this.searchLabel}
            readonly={this.isFull()}
            autocomplete={this.autocomplete}
        />,
-        this.renderLeadingIcon(),
-        this.renderClearAllChipsButton(),
+        this.renderLeadingIcon() && <div key="leading-icon">{this.renderLeadingIcon()}</div>,
+        this.renderClearAllChipsButton() && <div key="clear-button">{this.renderClearAllChipsButton()}</div>,
    ];
}
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 428-448: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between eaea96ee1ae5e070ba937ac4801e3fcabbb8319b and d04fb0d2abac03bcea62236ad67ea9661b3e1a23.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `src/components/chip-set/chip-set.e2e.ts` (1 hunks)
* `src/components/chip-set/chip-set.scss` (3 hunks)
* `src/components/chip-set/chip-set.tsx` (4 hunks)
* `src/components/chip-set/partial-styles/_readonly.scss` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>📓 Path-based instructions (2)</summary>

<details>
<summary>`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.</summary>

> `**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

- `src/components/chip-set/chip-set.e2e.ts`
- `src/components/chip-set/chip-set.tsx`

</details>
<details>
<summary>`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.</summary>

> `**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.

- `src/components/chip-set/chip-set.tsx`

</details>

</details><details>
<summary>🧠 Learnings (1)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (3)</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:416-442
Timestamp: 2025-04-14T10:02:20.360Z
Learning: In the Lime Elements codebase, when rendering arrays of components like chips, individual components already have proper keys (e.g., `key={chip.id}`). The decision to wrap mapped arrays in container elements with keys is optional when components already have proper keys and there are no rendering issues.
```

```
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3199
File: src/components/form/examples/dynamic-form.tsx:48-55
Timestamp: 2025-03-02T16:12:55.534Z
Learning: For JSX arrays that are static (never reordered or modified), missing key props are a low-priority issue that can be reasonably suppressed as a false positive, even though React documentation recommends keys for all elements in arrays. This applies to components like the one in src/components/form/examples/dynamic-form.tsx where the render method returns a fixed array of elements.
```

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.289Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
```

</details>

</details><details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx (2)</summary><blockquote>

<details>
<summary>src/util/random-string.ts (1)</summary>

* `createRandomString` (1-10)

</details>
<details>
<summary>src/components/chip-set/chip.types.ts (1)</summary>

* `Chip` (9-110)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/components/chip-set/chip-set.tsx</summary>

[error] 367-377: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 428-448: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: Test
* GitHub Check: Build

</details>

<details>
<summary>🔇 Additional comments (14)</summary><blockquote>

<details>
<summary>src/components/chip-set/partial-styles/_readonly.scss (1)</summary>

`3-3`: **Class selector updated from MDC to custom class.**

This change aligns with the PR objective to move away from Material Design Components. The selector `.disabled` now replaces `.mdc-text-field--disabled` for applying `pointer-events: auto` to the text field when it's in a disabled state.

</details>
<details>
<summary>src/components/chip-set/chip-set.e2e.ts (1)</summary>

`28-30`: **Updated DOM selector for the label element.**

The selector has been changed to target the label within the new `limel-notched-outline` component, reflecting the structural changes in the component. This correctly aligns with the refactoring from MDC to the custom notched outline component.

</details>
<details>
<summary>src/components/chip-set/chip-set.tsx (7)</summary>

`20-20`: **Added import for random string generation.**

The `createRandomString` utility is now imported for generating unique IDs for labels, helping with accessibility and proper label association.

---

`246-246`: **Added private property for label identification.**

This new property provides a unique identifier for the label, improving accessibility by correctly associating form elements with their labels using the `for` attribute.

---

`249-249`: **Initialized unique label ID.**

The constructor now initializes `labelId` with a random string, ensuring each chip set instance has a unique identifier for its label.

---

`386-396`: **Good separation of content props based on type.**

The new `getContentProps` method cleanly handles the different behavior needed for different chip set types. Moving the `onClick` handler to the content div (when type is 'input') is the right approach, as discussed in previous reviews.

---

`398-404`: **Improved content rendering with dedicated method.**

The new `renderContent` method streamlines the rendering logic based on chip type, making the code more maintainable.

---

`431-431`: **Improved label association with input element.**

Using the `labelId` for the input's `id` attribute properly associates the label with the input element, improving accessibility.

---

`366-383`: <details>
<summary>❓ Verification inconclusive</summary>

**Replaced MDC components with custom notched outline component.**

This major refactoring correctly implements the PR objective by replacing MDC text field with the custom `limel-notched-outline` component. The approach is clean and well-structured.


---

🏁 Script executed:

```shell
#!/bin/bash
# Verify that limel-notched-outline is a valid component
fd "limel-notched-outline.tsx" | xargs cat
```

Length of output: 42

---



</details>

**Custom Notched Outline Component Verification**

The major refactor appears to correctly switch from MDC to your new custom notched outline approach. However, our initial automated search for a file named `limel-notched-outline.tsx` returned no results. Please manually verify that the `limel-notched-outline` component is defined and imported as expected—if it’s defined under a different name or location, ensure that this change is intentional and correctly integrated.

- Confirm the definition and export of `limel-notched-outline` in the codebase.
- Check that the component is correctly imported and used within `src/components/chip-set/chip-set.tsx`.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 367-377: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

</details>
<details>
<summary>src/components/chip-set/chip-set.scss (5)</summary>

`30-36`: **Added specific styling for input type chip-set.**

These new styles ensure proper spacing and layout for the notched outline component when the chip-set has type 'input'. The min-height ensures consistent vertical alignment.

---

`38-43`: **Added transparent styling for non-input type chip-sets.**

This is a good approach to apply different styling to chip-sets that aren't of type 'input', making them visually distinct by setting transparent borders and background.

---

`77-77`: **Fixed input padding.**

The updated padding ensures proper spacing for the input element within the chip-set.

---

`113-114`: **Updated hover/focus selectors to use custom classes.**

Changed from `.mdc-text-field--disabled` to `.disabled` for consistency with the broader refactoring away from MDC classes.

---

`120-120`: **Updated disabled state selector.**

This change aligns with the class renaming from MDC-specific classes to custom ones.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T12:53:12Z
user: login: LucyChyzhova
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T07:13:17Z
user: login: jgroth
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T07:33:22Z
user: login: adrianschmidt
body: Changes to external API approved 👍
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T07:34:04Z
user: login: adrianschmidt
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-25T14:36:24Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-25T14:37:59Z

Review comments:
diff_hunk: @@ -0,0 +1,140 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as a internal elements
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+@Component({
+    tag: 'limel-notched-outline',
+    styleUrl: 'notched-outline.scss',
+    shadow: false,
+})
+export class NotchedOutline {
+    /**
+     * Set to `true` when the input element is required.
+     * This applies proper visual styles, such as inclusion of an asterisk
+     * beside the label.
+     */
+    @Prop({ reflect: true })
+    public required = false;
+
+    /**
+     * Set to `true` when the input element is readonly.
+     * This applies proper visual styles, such as making the outline transparent.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input element is
+     * invalid. This applies proper visual styles, such as making the outlines red.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * Set to `true` to indicate that the input element is
+     * disabled. This applies proper visual styles, such as making the outlines
+     * and the label transparent.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    /**
+     * Label to display for the input element.
+     * :::important
+     * Note that the input element of the consumer component will be
+     * labeled by this label, suing the `labelId` prop.
+     * :::
+     */
+    @Prop({ reflect: true })
+    public label?: string;
+
+    /**
+     * The `id` of the input element which should be
+     * labeled by the provided label.
+     */
+    @Prop({ reflect: true })
+    public labelId?: string;
+
+    /**
+     * Set to `true` when the user has entered a value for the input element.
+     shrinking the label in size,
+     * and visually rendering it above the entered value.
+     */
+    @Prop({ reflect: true })
+    public hasValue = false;
+
+    /**
+     * Set to `true` when the consumer element displays a leading icon.
+     * This applies proper visual styles, such as rendering the label
+     * correctly placed beside the leading icon.
+     */
+    @Prop({ reflect: true })
+    public hasLeadingIcon = false;
+
+    /**
+     * Set to `true` when the consumer element needs to render the
+     * label above the input element, despite existence of a `value`.
+     * For example in the `text-editor` or `limel-select`,
+     * where the default layout requires a floating label.
+     */
+    @Prop({ reflect: true })
+    public hasFloatingLabel = false;
+
+    public render() {
+        return (
+            <div class="limel-notched-outline">
+                <slot name="content" />
+                <span
+                    class="limel-notched-outline--outlines"
+                    aria-hidden="true"
path: src/components/notched-outline/notched-outline.tsx
user: login: Kiarokh
body: The `label` is visually inside the outlines container that has `aria-hidden="true"`. But screen readers will still associate the label with its input element due to the explicit `for` relationship. The label is correctly associated with its input via the `htmlFor` attribute
created_at: 2025-04-07T10:29:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -224,44 +224,39 @@ export class TextEditor implements FormComponent<string> {
     }
 
     public render() {
-        return (
-            <Host
-                class={{
-                    'has-helper-text': !!this.helperText,
-                }}
+        return [
+            <limel-notched-outline
+                labelId={this.editorId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasFloatingLabel={true}
             >
-                <span class="notched-outline">
-                    <span class="leading-outline" />
-                    {this.renderLabel()}
-                    <span class="trailing-outline" />
-                </span>
                 {this.renderEditor()}
-            </Host>
-        );
+                {this.renderPlaceholder()}
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
path: src/components/text-editor/text-editor.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider adding `key` attributes to elements in the array.**

The `render` method now returns an array of elements instead of a single element, which is a valid approach. To fix the Biome warning about missing key properties in iterable elements, consider adding key attributes to help with reconciliation:

```diff
return [
    <limel-notched-outline
+       key="outline"
        labelId={this.editorId}
        label={this.label}
        required={this.required}
        invalid={this.invalid}
        disabled={this.disabled}
        readonly={this.readonly}
        hasValue={!!this.value}
        hasFloatingLabel={true}
    >
        {this.renderEditor()}
        {this.renderPlaceholder()}
    </limel-notched-outline>,
+   <div key="helper-line">{this.renderHelperLine()}</div>,
-   this.renderHelperLine(),
];
```

While StencilJS doesn't strictly require keys like React does, adding them can improve performance and prevent potential rendering issues.



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        return [
            <limel-notched-outline
                key="outline"
                labelId={this.editorId}
                label={this.label}
                required={this.required}
                invalid={this.invalid}
                disabled={this.disabled}
                readonly={this.readonly}
                hasValue={!!this.value}
                hasFloatingLabel={true}
            >
                {this.renderEditor()}
                {this.renderPlaceholder()}
            </limel-notched-outline>,
            <div key="helper-line">{this.renderHelperLine()}</div>,
        ];
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 228-237: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits 21df309 to 88e8d02
created_at: 2025-04-08T08:11:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: Kiarokh
body: it would be nice if we did this in all docs examples actually…
created_at: 2025-04-08T08:35:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as a internal elements
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
path: src/components/notched-outline/notched-outline.tsx
user: login: Kiarokh
body: This was I think an important part of the strategy. However, there are minor risks of consumer styles leaking into the elements of this component. For example, if the consumer has styled a `div` element, then the `div`s within `limel-notched-outline` can inherit it. On the other hand, being a native part of the consumer's DOM is crucial for this setup to work. The consumer sometimes needs to be able to style something within the notch-group.

Maybe we could use other unconventional element names instead of `div`s to mitigate styles leaking unintentionally. For example instead of `<div class="limel-notched-outline"` we could write `<notched-outline class="limel-notched-outline"`? 🤔 

Maybe I'm being too careful. The consumer is always us, so we could be more careful in the implementation? What do you think?
created_at: 2025-04-08T09:03:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: adrianschmidt
body: @coderabbitai Thanks for the input! I have one question, and one point of feedback.

## Question
I assume this would be called using something like the following:

```
                <limel-checkbox
                    checked={this.disabled}
                    label="Disabled"
                    onChange={this.toggleState('disabled')}
                />
                <limel-checkbox
                    checked={this.readonly}
                    label="Readonly"
                    onChange={this.toggleState('readonly')}
                />
                <limel-checkbox
                    checked={this.required}
                    label="Required"
                    onChange={this.toggleState('required')}
                />
```

Stencil's documentation recommends that you avoid using `=>` or `.bind` in templates. As far as I've been led to understand, that's because they create a new copy of the function each time the render function is called. I'm not sure if that's the case or not, but if so, isn't that a problem here too?
(Even though this is just an example in the documentation, people often copy from these examples, so it's important that we use practices and coding patterns that are suitable for production code.)

## Feedback
The "Committable suggestion" that you provided is not actually committable. You used git diff syntax instead of GitHub's suggestion syntax.
created_at: 2025-04-08T09:49:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: @adrianschmidt You've raised excellent points!

## Arrow Functions in Templates

You're absolutely right about StencilJS recommending against arrow functions in templates. My suggested approach would indeed have the same performance issue - using `onChange={this.toggleState('disabled')}` would create a new function instance on each render.

Here's a better alternative that still reduces duplication but avoids the performance concern:

```tsx
// Add this property
private propHandlers: Record

<string, (e: CustomEvent<boolean>) => void> = {};

// In constructor or componentWillLoad
constructor() {
  // Pre-create all handlers once
  ['disabled', 'readonly', 'required', 'invalid', 'hasValue', 'hasLeadingIcon', 'hasFloatingLabel'].forEach(prop => {
    this.propHandlers[prop] = (event: CustomEvent<boolean>) => {
      event.stopPropagation();
      this[prop as keyof NotchedOutlineBasicExample] = event.detail;
    };
  });
}

// Then use like:
onChange={this.propHandlers.disabled}
```

This creates the functions only once rather than on every render.

## Suggestion Format

You're right that my suggestion format was incorrect. I apologize for using git diff syntax instead of GitHub's suggestion format. Thank you for pointing this out - I'll make sure to use the correct format in future suggestions.



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@adrianschmidt You've raised excellent points!

## Arrow Functions in Templates

You're absolutely right about StencilJS recommending against arrow functions in templates. My suggested approach would indeed have the same performance issue - using `onChange={this.toggleState('disabled')}` would create a new function instance on each render.

Here's a better alternative that still reduces duplication but avoids the performance concern:

```tsx
// Add this property
private propHandlers: Record<string, (e: CustomEvent<boolean>) => void> = {};

// In constructor or componentWillLoad
constructor() {
  // Pre-create all handlers once
  ['disabled', 'readonly', 'required', 'invalid', 'hasValue', 'hasLeadingIcon', 'hasFloatingLabel'].forEach(prop => {
    this.propHandlers[prop] = (event: CustomEvent<boolean>) => {
      event.stopPropagation();
      this[prop as keyof NotchedOutlineBasicExample] = event.detail;
    };
  });
}

// Then use like:
onChange={this.propHandlers.disabled}
```

This creates the functions only once rather than on every render.

## Suggestion Format

You're right that my suggestion format was incorrect. I apologize for using git diff syntax instead of GitHub's suggestion format. Thank you for pointing this out - I'll make sure to use the correct format in future suggestions.</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-08T09:50:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as a internal elements
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
path: src/components/notched-outline/notched-outline.tsx
user: login: adrianschmidt
body: > The consumer is always us

Yeah, I was a bit confused until I read this, because this component is going to be used by us, inside other components like `limel-input-field`, right? No-shadow is absolutely the way to go here 👍
created_at: 2025-04-08T09:52:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: Kiarokh
body: I think this could be a separate PR where we handle these in all other examples in the same time. For this PR, I think it's better to be consistent with the rest
created_at: 2025-04-08T10:21:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Robust Outline Container with Transition.**  
The `&--outlines` block effectively establishes positioning, disables pointer events, and applies a transition on the `bottom` property.  
*Suggestion:* Verify that transitioning only the `bottom` property meets the desired animation effect; if multiple properties need to animate, consider grouping or specifying them explicitly.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-08T11:56:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        --limel-notched-outline-border-color: var(--lime-error-text-color);
+        &:hover {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            color: var(--lime-error-text-color);
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon]:not([has-leading-icon='false']) {
+        --limel-notched-outline-label-transform-x: 1.25rem;
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
+}
+
+// Transitioning the floating label
+@mixin float-label {
+    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+    --limel-notched-outline-label-transform-x: 0;
+    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+    --limel-notched-outline-notch-border-top-color: transparent;
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover,
+        &:focus,
+        &:focus-within {
+            label {
+                will-change: color, transform, font-size;
+            }
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            @include float-label;
+        }
+    }
+
+    &[has-floating-label],
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Conditional Application of the Floating Label Styles.**  
The final block applies the `float-label` mixin based on several attribute conditions—`[has-floating-label]`, `[has-value]`, and a complex readonly check.  
*Suggestion:* The compound attribute selector `[readonly]:not([has-value]:not([has-value='true']))` is somewhat hard to parse. Consider adding inline documentation or refactoring this condition for improved readability and easier maintenance.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-08T11:56:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        --limel-notched-outline-border-color: var(--lime-error-text-color);
+        &:hover {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            color: var(--lime-error-text-color);
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon]:not([has-leading-icon='false']) {
+        --limel-notched-outline-label-transform-x: 1.25rem;
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Adjustment for Components with Leading Icons.**  
The styles under `[has-leading-icon]:not([has-leading-icon='false'])` adjust both the horizontal transform of the label and the positioning of the empty readonly value. Although the attribute-based specificity is complex, it clearly targets the intended UI variant.

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits f99700b to 79d5f30
created_at: 2025-04-08T11:56:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Detailed Notch Styling with Floating Label Setup.**  
The `&--notch` block is quite comprehensive:  
- It ensures that the notch does not shrink and maintains a higher stack order.  
- It correctly resets side borders (with only the top border color set via a custom property fallback).  
- The nested `label` block employs a mix of utilities such as `all: unset`, a text truncation mixin, and transitions for smooth floating behavior.  

*Minor Nitpick:* The `&:after` pseudo-element inside the `label` block specifies positioning and padding but lacks a default `content` property. This might lead to unexpected rendering of the pseudo-element when not overridden (for example, in non-required states). Consider explicitly setting a default content. For example:

```diff
@@ In the label block within &--notch:
-            &:after {
-                position: absolute;
-                right: 0;
-                padding: 0 0.25rem;
-            }
+            &:after {
+                content: "";
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
```




<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    &--notch {
        flex-shrink: 0;

        position: relative;
        z-index: 2;

        border-top-color: var(
            --limel-notched-outline-notch-border-top-color,
            var(--limel-notched-outline-border-color)
        );
        border-right-width: 0;
        border-left-width: 0;

        max-width: calc(100% - 1.5rem);

        label {
            all: unset;
            @include mixins.truncate-text;
            position: relative;
            transition:
                color 0.2s ease,
                font-size 0.2s ease,
                transform 0.12s ease;

            transform: translate3d(
                var(--limel-notched-outline-label-transform-x, 0),
                var(--limel-notched-outline-label-transform-y, $value-top),
                0
            );
            display: block;
            padding: 0 0.25rem;

            color: var(
                --limel-notched-outline-label-color,
                #{shared_input-select-picker.$label-color}
            );
            font-size: var(
                --limel-notched-outline-label-font-size,
                #{shared_input-select-picker.$cropped-label-hack--font-size}
            );
            letter-spacing: var(
                --mdc-typography-subtitle1-letter-spacing,
                0.009375em
            );

            &:after {
                content: "";
                position: absolute;
                right: 0;
                padding: 0 0.25rem;
            }
        }
    }
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits f99700b to 79d5f30
created_at: 2025-04-08T11:56:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        --limel-notched-outline-border-color: var(--lime-error-text-color);
+        &:hover {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            color: var(--lime-error-text-color);
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon]:not([has-leading-icon='false']) {
+        --limel-notched-outline-label-transform-x: 1.25rem;
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
+}
+
+// Transitioning the floating label
+@mixin float-label {
+    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+    --limel-notched-outline-label-transform-x: 0;
+    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+    --limel-notched-outline-notch-border-top-color: transparent;
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover,
+        &:focus,
+        &:focus-within {
+            label {
+                will-change: color, transform, font-size;
+            }
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            @include float-label;
+        }
+    }
+
+    &[has-floating-label],
+    &[has-value]:not([has-value='false']),
+    &[readonly]:not([has-value]:not([has-value='true'])) {
+        @include float-label;
+    }
+}
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider documenting the complex attribute selector logic.**

The selector `&[readonly]:not([has-value]:not([has-value='true']))` on line 243 is complex and could be difficult to understand for future maintainers. Consider adding a comment explaining when this condition is met.

```diff
 // Transitioning the floating label
 @mixin float-label {
     --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
     --limel-notched-outline-label-transform-x: 0;
     --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
     --limel-notched-outline-notch-border-top-color: transparent;
 }

 limel-notched-outline {
     &:not([disabled]:not([disabled='false'])) {
         &:hover,
         &:focus,
         &:focus-within {
             label {
                 will-change: color, transform, font-size;
             }
         }

         &:has([slot='content']:focus-visible),
         &:has([slot='content']:focus-within) {
             @include float-label;
         }
     }

+    // Float label when: has explicit floating label, has a value, or is readonly without explicit false value
     &[has-floating-label],
     &[has-value]:not([has-value='false']),
     &[readonly]:not([has-value]:not([has-value='true'])) {
         @include float-label;
     }
 }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
// Transitioning the floating label
@mixin float-label {
    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
    --limel-notched-outline-label-transform-x: 0;
    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
    --limel-notched-outline-notch-border-top-color: transparent;
}

limel-notched-outline {
    &:not([disabled]:not([disabled='false'])) {
        &:hover,
        &:focus,
        &:focus-within {
            label {
                will-change: color, transform, font-size;
            }
        }

        &:has([slot='content']:focus-visible),
        &:has([slot='content']:focus-within) {
            @include float-label;
        }
    }

    // Float label when: has explicit floating label, has a value, or is readonly without explicit false value
    &[has-floating-label],
    &[has-value]:not([has-value='false']),
    &[readonly]:not([has-value]:not([has-value='true'])) {
        @include float-label;
    }
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits b5ade74 to 0fcb1cc
created_at: 2025-04-08T12:12:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
path: src/components/notched-outline/notched-outline.scss
user: login: LucyChyzhova
body: It seems too intense now, check before and now:
before:
<img width="320" alt="Screenshot 2025-04-08 at 14 06 30" src="https://github.com/user-attachments/assets/841d72e1-2d00-446a-b3d9-edd87c1bb219" />
<img width="330" alt="Screenshot 2025-04-08 at 13 51 12" src="https://github.com/user-attachments/assets/a2a9bc4b-b242-4416-861f-0f0394a1352c" />

Now:
<img width="493" alt="Screenshot 2025-04-08 at 13 50 30" src="https://github.com/user-attachments/assets/c523c956-2363-4d7b-87cc-d43f055ed64e" />
<img width="233" alt="Screenshot 2025-04-08 at 13 59 00" src="https://github.com/user-attachments/assets/059f62a2-175b-416d-8b58-94e73466b497" />
<img width="476" alt="Screenshot 2025-04-08 at 13 58 56" src="https://github.com/user-attachments/assets/fd6cd31c-506b-4b2c-99e4-bf24716b7581" />



created_at: 2025-04-08T12:24:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    // scale: 1.5; //TODO: uncomment this line later when all components have implemented this
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        --limel-notched-outline-border-color: var(--lime-error-text-color);
+        &:hover {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            color: var(--lime-error-text-color);
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Readonly State Styling and Use of !important**  
Setting border and background colors to transparent for readonly states ensures that the component visually indicates non-editability. However, using `!important` can sometimes lead to specificity issues. Consider whether increasing the selector’s specificity might allow you to eliminate the need for `!important`.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-08T12:24:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,241 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**SCSS Variable Definitions.**  
The use of `$border-radius` and `$value-top` with consistent units is appropriate. Consider centralizing such variables if they’re used across multiple components in the future.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-09T08:20:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
path: src/components/notched-outline/notched-outline.scss
user: login: Kiarokh
body: sharp eyes and good catch. I've commented out the `scale` for now, since there is a risk that we merge this PR and then some components that haven't implemented the notched-outline yet, would look different. Otherwise, I think it's nice to see a bigger asterisk in general :) 
created_at: 2025-04-09T08:26:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    // scale: 1.5; //TODO: uncomment this line later when all components have implemented this
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        --limel-notched-outline-border-color: var(--lime-error-text-color);
+        &:hover {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            color: var(--lime-error-text-color);
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
path: src/components/notched-outline/notched-outline.scss
user: login: Kiarokh
body: this is a conscious choice. Also currently we don't want readonly fields that are invalid to show any visual indication that makes them look like an input field. Users cannot edit invalid&readonly fields, so they can become really confused 
created_at: 2025-04-09T08:28:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add keys to elements rendered in an array**

The static analysis tool detected missing key properties for elements rendered in the array returned by the render method.


```diff
-        return [
-            <section>
+        return [
+            <section key="notched-outline">
                 <limel-notched-outline
                     labelId={id}
                     label="Label"
                     required={this.required}
                     invalid={this.invalid}
                     disabled={this.disabled}
                     readonly={this.readonly}
                     hasValue={this.hasValue}
                     hasLeadingIcon={this.hasLeadingIcon}
                     hasFloatingLabel={this.hasFloatingLabel}
                 >
                     <input
                         slot="content"
                         id={id}
                         type="text"
                         required={this.required}
                         disabled={this.disabled}
                         readonly={this.readonly}
                         value={this.inputValue}
                         onInput={this.handleInput}
                     />
                 </limel-notched-outline>
             </section>,
-            <limel-example-controls>
+            <limel-example-controls key="controls">
                 <limel-checkbox
                     checked={this.disabled}
                     label="Disabled"
                     onChange={this.setDisabled}
                 />
                 <limel-checkbox
                     checked={this.readonly}
                     label="Readonly"
                     onChange={this.setReadonly}
                 />
                 <limel-checkbox
                     checked={this.required}
                     label="Required"
                     onChange={this.setRequired}
                 />
                 <limel-checkbox
                     checked={this.invalid}
                     label="Invalid"
                     onChange={this.setInvalid}
                 />
                 <hr
                     style={{
                         gridColumn: '1/-1',
                     }}
                 />
                 <limel-checkbox
                     checked={this.hasValue}
                     label="Has value"
                     onChange={this.setHasValue}
                 />
                 <limel-checkbox
                     checked={this.hasLeadingIcon}
                     label="Has leading icon"
                     onChange={this.setHasLeadingIcon}
                 />
                 <limel-checkbox
                     checked={this.hasFloatingLabel}
                     label="Has floating label"
                     onChange={this.setHasFloatingLabel}
                 />
             </limel-example-controls>,
-            <limel-example-value value={this.hasValue} />,
+            <limel-example-value key="value" value={this.hasValue} />,
         ];
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
public render() {
    const id = 'abcd';

    return [
        <section key="notched-outline">
            <limel-notched-outline
                labelId={id}
                label="Label"
                required={this.required}
                invalid={this.invalid}
                disabled={this.disabled}
                readonly={this.readonly}
                hasValue={this.hasValue}
                hasLeadingIcon={this.hasLeadingIcon}
                hasFloatingLabel={this.hasFloatingLabel}
            >
                <input
                    slot="content"
                    id={id}
                    type="text"
                    required={this.required}
                    disabled={this.disabled}
                    readonly={this.readonly}
                    value={this.inputValue}
                    onInput={this.handleInput}
                />
            </limel-notched-outline>
        </section>,
        <limel-example-controls key="controls">
            <limel-checkbox
                checked={this.disabled}
                label="Disabled"
                onChange={this.setDisabled}
            />
            <limel-checkbox
                checked={this.readonly}
                label="Readonly"
                onChange={this.setReadonly}
            />
            <limel-checkbox
                checked={this.required}
                label="Required"
                onChange={this.setRequired}
            />
            <limel-checkbox
                checked={this.invalid}
                label="Invalid"
                onChange={this.setInvalid}
            />
            <hr
                style={{
                    gridColumn: '1/-1',
                }}
            />
            <limel-checkbox
                checked={this.hasValue}
                label="Has value"
                onChange={this.setHasValue}
            />
            <limel-checkbox
                checked={this.hasLeadingIcon}
                label="Has leading icon"
                onChange={this.setHasLeadingIcon}
            />
            <limel-checkbox
                checked={this.hasFloatingLabel}
                label="Has floating label"
                onChange={this.setHasFloatingLabel}
            />
        </limel-example-controls>,
        <limel-example-value key="value" value={this.hasValue} />,
    ];
}
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-09T10:07:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -50,27 +50,41 @@
     const classList = {
         'limel-select': true,
         'mdc-select': true,
-        'mdc-select--outlined': true,
         'mdc-select--disabled': props.disabled,
         'limel-select--readonly': props.readonly,
-        'limel-select--required': props.required,
         'limel-select--invalid': !isValid,
-        'limel-select--empty': !hasValue,
         'limel-select--with-helper-text': typeof props.helperText === 'string',
     };
 
-    return (
-        <div class={classList}>
+    return [
+        <limel-notched-outline
+            class={classList}
+            labelId="s-label"
+            label={props.label}
+            required={props.required}
+            invalid={!isValid}
+            disabled={props.disabled}
+            readonly={props.readonly}
+            hasValue={hasValue}
+            hasFloatingLabel={floatLabelAbove(props)}
+        >
             <SelectValue
                 {...props}
                 hasValue={hasValue}
                 isValid={isValid}
                 hasEmptyText={hasEmptyText}
             />
-            <HelperText text={props.helperText} isValid={!props.invalid} />
-            <SelectDropdown {...props} />
-        </div>
-    );
+        </limel-notched-outline>,
+        <HelperText text={props.helperText} isValid={!props.invalid} />,
+        <SelectDropdown {...props} />,
+    ];
path: src/components/select/select.template.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add keys to elements returned in an array**

The static analysis tool detected missing key properties for elements in the array return. This should be addressed to prevent potential rendering issues.


```diff
-    return [
-        <limel-notched-outline
+    return [
+        <limel-notched-outline
+            key="notched-outline"
             class={classList}
             labelId="s-label"
             label={props.label}
             required={props.required}
             invalid={!isValid}
             disabled={props.disabled}
             readonly={props.readonly}
             hasValue={hasValue}
             hasFloatingLabel={floatLabelAbove(props)}
         >
             <SelectValue
                 {...props}
                 hasValue={hasValue}
                 isValid={isValid}
                 hasEmptyText={hasEmptyText}
             />
         </limel-notched-outline>,
-        <HelperText text={props.helperText} isValid={!props.invalid} />,
-        <SelectDropdown {...props} />,
+        <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
+        <SelectDropdown key="dropdown" {...props} />,
     ];
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    return [
        <limel-notched-outline
            key="notched-outline"
            class={classList}
            labelId="s-label"
            label={props.label}
            required={props.required}
            invalid={!isValid}
            disabled={props.disabled}
            readonly={props.readonly}
            hasValue={hasValue}
            hasFloatingLabel={floatLabelAbove(props)}
        >
            <SelectValue
                {...props}
                hasValue={hasValue}
                isValid={isValid}
                hasEmptyText={hasEmptyText}
            />
        </limel-notched-outline>,
        <HelperText key="helper-text" text={props.helperText} isValid={!props.invalid} />,
        <SelectDropdown key="dropdown" {...props} />,
    ];
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 60-70: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 78-78: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 79-79: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits b5ade74 to 0fcb1cc
created_at: 2025-04-09T10:07:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
path: src/components/input-field/input-field.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider adding a key to the returned array element.**

When returning multiple elements in an array, adding a unique key is often recommended (e.g., `key="outline"`) to aid frameworks or future enhancements in identifying and handling the elements. While StencilJS doesn’t strictly require keys, adding them can quash linter warnings and potentially avoid rendering mismatches if elements in the array change order.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-09T10:07:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
+                <label slot="content" class={this.getContainerClassList()}>
+                    {this.renderLeadingIcon()}
path: src/components/input-field/input-field.tsx
user: login: LucyChyzhova
body: Please check this video:

https://github.com/user-attachments/assets/e8a5931d-dd2e-4fdc-9c85-6a7d68c33c2b

When component has a leading icon floating label gets extra space to the left


created_at: 2025-04-09T12:31:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -69,12 +71,6 @@
     flex-wrap: wrap;
     width: 100%;
 
-    &:not(.limel-select--readonly) {
path: src/components/select/select.scss
user: login: LucyChyzhova
body: _
_

https://github.com/user-attachments/assets/50b5026e-8fb6-4090-a48b-b36b62cc61ae


created_at: 2025-04-09T13:06:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
+                <label slot="content" class={this.getContainerClassList()}>
+                    {this.renderLeadingIcon()}
path: src/components/input-field/input-field.tsx
user: login: Kiarokh
body: 🤩 great find! I added a fixup
created_at: 2025-04-09T16:12:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    // scale: 1.5; //TODO: uncomment this line later when all components have implemented this
+                }
+            }
+        }
+    }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Required Field Indicator.**  
The required state styling adds an asterisk (`*`) by setting `content: '*'` in the pseudo-element. The commented-out `scale` property serves as a placeholder for future design enhancements; consider adding a brief inline comment to clarify its purpose and when it might be re-enabled.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-09T16:14:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Notch and Label Styling.**  
The `&--notch` block, including the nested `label` styling, manages transitions for color, font-size, and transform effectively. **However**, the `&:after` pseudo-element (lines 114–118) does not specify a default `content` property. Explicitly setting `content: ""` would help ensure consistent rendering across browsers.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-09T16:14:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**SCSS Variable Declarations.**  
Defining `$border-radius` and `$value-top` clearly establishes design constants for the component. Consider centralizing these variables if they are reused in other components to maintain consistency across the codebase.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-09T16:14:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    // scale: 1.5; //TODO: uncomment this line later when all components have implemented this
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        --limel-notched-outline-border-color: var(--lime-error-text-color);
+        &:hover {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            color: var(--lime-error-text-color);
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Readonly State Styling and !important Usage.**  
Readonly fields are styled to appear transparent by enforcing border and background adjustments with `!important`. Although `!important` is sometimes best avoided, in this case it appears to be a deliberate design choice to ensure that readonly fields do not inherit editing styles. Keep an eye on potential specificity conflicts as the project scales.

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits daac0c2 to 1081adf
created_at: 2025-04-09T16:14:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -69,12 +71,6 @@
     flex-wrap: wrap;
     width: 100%;
 
-    &:not(.limel-select--readonly) {
path: src/components/select/select.scss
user: login: Kiarokh
body: great find. I pushed a fixup! :) 
created_at: 2025-04-09T16:20:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
path: src/components/notched-outline/notched-outline.scss
user: login: Kiarokh
body: the content is set when `invalid` styles are being applied. This is intentional, because in future, we could more easily choose other contents for other types of visualizations if we want.
created_at: 2025-04-09T16:21:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +340,60 @@
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                role="grid"
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Replaced MDC components with custom notched outline component**

The rendering has been substantially refactored to use the new `limel-notched-outline` component, which aligns with the PR objective. However, there are some accessibility issues identified by static analysis:

1. Missing keyboard events for the onClick handler
2. Interactive elements with non-interactive roles
3. Missing key property in the iterable



```diff
            <limel-notched-outline
-               role="grid"
                labelId={this.labelId}
                label={this.label}
                required={this.required}
                invalid={this.invalid || this.isInvalid()}
                disabled={this.disabled}
                readonly={this.readonly}
                hasValue={!!this.value}
                hasLeadingIcon={!!this.leadingIcon}
                hasFloatingLabel={this.floatLabelAbove()}
                onClick={this.handleTextFieldFocus}
+               onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
+               key="notched-outline"
            >
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        return [
            <limel-notched-outline
                labelId={this.labelId}
                label={this.label}
                required={this.required}
                invalid={this.invalid || this.isInvalid()}
                disabled={this.disabled}
                readonly={this.readonly}
                hasValue={!!this.value}
                hasLeadingIcon={!!this.leadingIcon}
                hasFloatingLabel={this.floatLabelAbove()}
                onClick={this.handleTextFieldFocus}
                onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
                key="notched-outline"
            >
                <div slot="content" class={classes}>
                    {this.renderContent(value)}
                </div>
            </limel-notched-outline>,
            this.renderHelperLine(),
        ];
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 368-380: Interactive elements should not be assigned non-interactive roles.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
Unsafe fix: Remove the role attribute.


(lint/a11y/noInteractiveElementToNoninteractiveRole)

---

[error] 368-380: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-369: The elements with the following roles can be changed to the following elements:
<table>


For examples and more information, see WAI-ARIA Roles

(lint/a11y/useSemanticElements)

---

[error] 368-380: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits b5ade74 to 0fcb1cc
created_at: 2025-04-10T06:01:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
+                }
+            }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider adjusting the asterisk scale value**

The `scale: 1.5` property on the required field indicator may make the asterisk appear too large compared to the rest of the text.


```diff
            &:after {
                content: '*';
-               scale: 1.5;
+               scale: 1.2; /* More subtle scaling for the asterisk */
            }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    &[required]:not([required='false']) {
        .limel-notched-outline--notch {
            label {
                padding-right: 0.75rem;

                &:after {
                    content: '*';
                    scale: 1.2; /* More subtle scaling for the asterisk */
                }
            }
        }
    }
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits daac0c2 to 1081adf
created_at: 2025-04-10T06:56:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,246 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+
+        transition: bottom
+            var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
+            cubic-bezier(1, 0.09, 0, 0.89);
+
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s ease;
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.5;
path: src/components/notched-outline/notched-outline.scss
user: login: Kiarokh
body: Now that all components have implemented notched outline, I've commented the `scale` back
created_at: 2025-04-10T06:56:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +340,60 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                role="grid"
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
path: src/components/chip-set/chip-set.tsx
user: login: Kiarokh
body: I've intentionally moved the helper-line here. Previously, only `type` `input` would show the helper text. But this way other types of `chip-set` can also show the helper text. I believe this is the correct and consistent way of doing it. There is no point for the component to have a prop, that only works for a certain type.
created_at: 2025-04-10T07:00:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Use a dynamic ID instead of a hardcoded one.**

The `id` is currently hardcoded as 'abcd'. It would be better to use a dynamic ID generation approach, similar to how you're using `createRandomString` in other components.


```diff
-   const id = 'abcd';
+   const id = `notched-outline-example-${Math.random().toString(36).substring(2, 11)}`;
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    public render() {
-        const id = 'abcd';
+        const id = `notched-outline-example-${Math.random().toString(36).substring(2, 11)}`;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits 286a5af to 572609f
created_at: 2025-04-10T08:19:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as a internal elements
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+@Component({
+    tag: 'limel-notched-outline',
+    styleUrl: 'notched-outline.scss',
+    shadow: false,
+})
+export class NotchedOutline {
+    /**
+     * Set to `true` when the input element is required.
+     * This applies proper visual styles, such as inclusion of an asterisk
+     * beside the label.
+     */
+    @Prop({ reflect: true })
+    public required = false;
+
+    /**
+     * Set to `true` when the input element is readonly.
+     * This applies proper visual styles, such as making the outline transparent.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input element is
+     * invalid. This applies proper visual styles, such as making the outlines red.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * Set to `true` to indicate that the input element is
+     * disabled. This applies proper visual styles, such as making the outlines
+     * and the label transparent.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    /**
+     * Label to display for the input element.
+     * :::important
+     * Note that the input element of the consumer component will be
+     * labeled by this label, using the `labelId` prop.
+     * :::
+     */
+    @Prop({ reflect: true })
+    public label?: string;
+
+    /**
+     * The `id` of the input element which should be
+     * labeled by the provided label.
+     */
+    @Prop({ reflect: true })
+    public labelId?: string;
+
+    /**
+     * Set to `true` when the user has entered a value for the input element,
+     shrinking the label in size, and visually rendering it above the entered value.
path: src/components/notched-outline/notched-outline.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Fix the JSDoc formatting.**

There's a missing closing backtick in the JSDoc comment for the `hasValue` property, causing incorrect formatting.

```diff
-     shrinking the label in size, and visually rendering it above the entered value.
+     * shrinking the label in size, and visually rendering it above the entered value.
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
     * shrinking the label in size, and visually rendering it above the entered value.
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 08d44ab
created_at: 2025-04-10T08:19:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
path: src/components/chip-set/chip-set.scss
user: login: LucyChyzhova
body: not particularly about this line, but could you take a look at the before and after:
before:
<img width="339" alt="Screenshot 2025-04-10 at 10 25 36" src="https://github.com/user-attachments/assets/358018db-2608-47ba-8555-fa1994379a59" />
after:
<img width="301" alt="Screenshot 2025-04-10 at 10 23 08" src="https://github.com/user-attachments/assets/df017179-f6bf-46b6-a42f-11e2cfde2a90" />

Do you want it to have it that close - label and chips? i like more with some space :) 

created_at: 2025-04-10T08:27:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
path: src/components/chip-set/chip-set.scss
user: login: LucyChyzhova
body: before:

https://github.com/user-attachments/assets/27f71da5-f3b6-4f93-8c23-b4395b9068eb

after:

https://github.com/user-attachments/assets/9de20001-19f4-40ae-9cc5-26c0a147e795

Of course, it's not an input field, so users should press enter and get a chip. So maybe not that important, you decide ;) 

created_at: 2025-04-10T08:34:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,7 +6,6 @@
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).
  */
 
-@include shared_input-select-picker.lime-looks-like-input-value;
 .lime-looks-like-input-value {
     padding: var(--limel-text-editor-padding);
path: src/components/text-editor/text-editor.scss
user: login: LucyChyzhova
body: some changes:

https://github.com/user-attachments/assets/fb388e5f-88e6-4ccb-8dd8-aa23cdcce716

before:

https://github.com/user-attachments/assets/8925d824-25ea-4918-ab1d-505e38b96c31


created_at: 2025-04-10T09:01:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,7 +6,6 @@
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).
  */
 
-@include shared_input-select-picker.lime-looks-like-input-value;
 .lime-looks-like-input-value {
     padding: var(--limel-text-editor-padding);
path: src/components/text-editor/text-editor.scss
user: login: LucyChyzhova
body: in lime admin: some new hovering effect. intentionally? 

https://github.com/user-attachments/assets/35e4ccc1-e70f-4f4d-88a5-49be210df5da


created_at: 2025-04-10T09:32:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
path: src/components/chip-set/chip-set.scss
user: login: Kiarokh
body: 🤗 I love your review @LucyChyzhova ! Thanks for checking all these details and finding these issues. 
I'm gonna add fixups
created_at: 2025-04-10T09:40:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
path: src/components/chip-set/chip-set.scss
user: login: Kiarokh
body: 
https://github.com/user-attachments/assets/48513da3-fcf0-4a45-b879-89fa759e274c

on my machine it clears the thing they have typed. 🤔 which I kind of like
maybe we should leave it as is :😆 
created_at: 2025-04-10T09:44:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
path: src/components/chip-set/chip-set.scss
user: login: LucyChyzhova
body: it's because you have a check for `Empty input on blur` , try to uncheck it :) 
created_at: 2025-04-10T09:52:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,249 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.3;
+                }
+            }
+        }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Required Field Indicator Implementation**  
The required field styling adds extra padding to the label and uses the `&:after` pseudo-element to display an asterisk with a `scale` transformation. Please verify that the chosen scale value (`1.3`) aligns with the overall design language.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-10T10:49:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,249 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Imports and Variable Declarations: Consider Centralizing Reusable Variables**  
The file imports necessary mixins and shared styles correctly. However, the local definitions of `$border-radius` and `$value-top` might be candidates for centralization if they are used by other components in the future.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-10T10:49:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,249 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.3;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        &:not([disabled]:not([disabled='false'])) {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+            &:hover {
+                --limel-notched-outline-border-color: var(
+                    --lime-error-text-color
+                );
+            }
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon] {
+        &:not([has-leading-icon='false']):not([has-floating-label]):not(
+                [has-value]
+            ) {
+            --limel-notched-outline-label-transform-x: 1.25rem;
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Leading Icon Adjustments are Properly Scoped**  
The adjustments when `[has-leading-icon]` is applied ensure that the label is shifted appropriately and the empty readonly value is repositioned correctly. Consider verifying that this logic covers all scenarios where a leading icon is present.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-10T10:49:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,249 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.3;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        &:not([disabled]:not([disabled='false'])) {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+            &:hover {
+                --limel-notched-outline-border-color: var(
+                    --lime-error-text-color
+                );
+            }
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon] {
+        &:not([has-leading-icon='false']):not([has-floating-label]):not(
+                [has-value]
+            ) {
+            --limel-notched-outline-label-transform-x: 1.25rem;
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
+}
+
+// Transitioning the floating label
+@mixin float-label {
+    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+    --limel-notched-outline-label-transform-x: 0;
+    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+    --limel-notched-outline-notch-border-top-color: transparent;
+}
path: src/components/notched-outline/notched-outline.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Mixin `float-label` for Floating Label Effects**  
The `float-label` mixin encapsulates the floating label styles effectively. Adding inline documentation to explain the rationale behind the specific numerical values (such as `0.65rem` and the transform calculations) would enhance maintainability.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-10T10:49:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,7 +6,6 @@
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).
  */
 
-@include shared_input-select-picker.lime-looks-like-input-value;
 .lime-looks-like-input-value {
     padding: var(--limel-text-editor-padding);
path: src/components/text-editor/text-editor.scss
user: login: Kiarokh
body: i couldn't figure out why lime admins does this. but fixed the first issue in the feed. I think we can ignore the admin page for now
created_at: 2025-04-10T10:56:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
path: src/components/chip-set/chip-set.scss
user: login: LucyChyzhova
body: looks fine in web-client though. Let's have it as an improvement 🥰
![Screenshot 2025-04-10 at 13 55 38](https://github.com/user-attachments/assets/7ef25c83-b000-4e5b-ae8e-1920b80db083)

created_at: 2025-04-10T11:56:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -65,6 +56,15 @@
     }
 }
 
+limel-notched-outline {
+    &[has-value],
+    &:focus-within {
+        .mdc-text-field__affix {
+            opacity: 1;
+        }
+    }
+}
+
path: src/components/input-field/input-field.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**New Notched Outline Styling Block: Enhance Documentation & Consider Future States**

The new styling block for `limel-notched-outline` clearly sets the opacity of `.mdc-text-field__affix` to `1` when the element either has a value (`[has-value]`) or is focused (`:focus-within`). This aligns with the PR objective of replacing MDC input fields with a custom notched outline component.

**Suggestions:**
- **Documentation:** Please add an inline comment above this block explaining the rationale behind choosing these particular states. This will help future maintainers understand why these conditions were selected.
- **Future-proofing:** Verify if other states (such as error or disabled) require similar handling. If so, consider extending this styling or referencing additional styles to cover those scenarios.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-10T14:11:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
path: src/components/chip-set/chip-set.scss
user: login: LucyChyzhova
body: i'm not sure if you decided to fix it or not 😀
created_at: 2025-04-11T07:35:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
path: src/components/chip-set/chip-set.scss
user: login: Kiarokh
body: This new one is the "correct" placement of it 😊. So in case a readonly with `type` of `input` (like in the web client) is placed side-by-side of a `type` of `choice` for example, then the alignment of their labels and content will be correct. 
created_at: 2025-04-14T08:06:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
path: src/components/chip-set/chip-set.scss
user: login: Kiarokh
body: ⚡ yes, fixed and pushed ;) 
created_at: 2025-04-14T08:26:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,22 @@
+* {
+    box-sizing: border-box;
+}
+
+section {
+    padding: 1rem;
+    background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+    background-size: 0.5rem;
+}
+
+input[type='text'] {
+    // Overriding some of the native input styles for the
+    // sake of this example.
+    border: none;
+    outline: none;
+
+    height: 2.5rem;
+    width: 100%;
+    padding: 0 1rem;
+
+    background-color: transparent;
+}
path: src/components/notched-outline/examples/notched-outline-basic.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider adding more specific selector for the input styles.**

The current selector applies to all text inputs, which could have unintended consequences if this file is included in a broader context. Since this is for an example, it might be safer to scope these styles more narrowly.

```diff
-input[type='text'] {
+.notched-outline-example input[type='text'] {
    // Overriding some of the native input styles for the
    // sake of this example.
    border: none;
    outline: none;

    height: 2.5rem;
    width: 100%;
    padding: 0 1rem;

    background-color: transparent;
}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
.notched-outline-example input[type='text'] {
    // Overriding some of the native input styles for the
    // sake of this example.
    border: none;
    outline: none;

    height: 2.5rem;
    width: 100%;
    padding: 0 1rem;

    background-color: transparent;
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-14T08:35:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,22 @@
+* {
+    box-sizing: border-box;
+}
path: src/components/notched-outline/examples/notched-outline-basic.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider scoping the global box-sizing rule.**

Using the universal selector `*` applies `box-sizing: border-box` to all elements, which could potentially affect other components. Consider scoping this to the specific example component.

```diff
-* {
+.notched-outline-example * {
    box-sizing: border-box;
}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
.notched-outline-example * {
    box-sizing: border-box;
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T08:35:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Add keys to array elements for clarity**  
Even though Stencil doesn't strictly require keys, adding them can help tools track changes in children more easily.  


Here's an example using the `key` attribute:

```diff
 return [
-    <section>
+    <section key="notched-outline-section">
         <limel-notched-outline
             ...
         </limel-notched-outline>
     </section>,
-    <limel-example-controls>
+    <limel-example-controls key="example-controls">
         ...
     </limel-example-controls>,
-    <limel-example-value value={this.hasValue} />,
+    <limel-example-value key="example-value" value={this.hasValue} />,
 ];
```


Also applies to: 68-68, 110-110

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T08:35:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Use caution with arrow functions in event handlers**  
While this pattern is usually acceptable in Stencil, be mindful of potential performance issues if the component re-renders frequently. Pre-binding functions is an alternative if needed.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T08:35:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@ export class ChipSet {
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
 
     private readonly floatLabelAbove = () => {
-        if (!!this.value.length || this.editMode || this.readonly) {
+        if (
+            !!this.value.length ||
+            this.editMode ||
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Explicitly return `false` to improve clarity.**
Currently, `floatLabelAbove` returns `true` under certain conditions but falls back to `undefined`, which may cause unexpected behavior if a strict boolean is required in the template.


```diff
private readonly floatLabelAbove = () => {
    if (
        !!this.value.length ||
        this.editMode ||
        this.readonly ||
        this.textValue
    ) {
        return true;
    }
-   // returns undefined otherwise
+   return false;
};
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    private readonly floatLabelAbove = () => {
        if (
            !!this.value.length ||
            this.editMode ||
            this.readonly ||
            this.textValue
        ) {
            return true;
        }
        return false;
    };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits 1f38941 to 185a983
created_at: 2025-04-14T08:59:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,60 @@
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                role="grid"
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
     }
 
+    private renderContent = (value) => {
+        if (this.type === 'input') {
+            return this.renderInputChips();
+        }
+
+        return value.map(this.renderChip);
+    };
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider adding a type for the `value` parameter.**
Currently `value` is implicitly any. Specifying a stricter type improves readability and helps catch potential errors.

```diff
-private renderContent = (value) => {
+private renderContent = (value: Chip[]) => {
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    private renderContent = (value: Chip[]) => {
        if (this.type === 'input') {
            return this.renderInputChips();
        }

        return value.map(this.renderChip);
    };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits d6a58b7 to 5bbafc5
created_at: 2025-04-14T08:59:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Provide unique keys for array elements.**
Returning multiple elements in an array can trigger lint errors about missing keys, especially if the order or size of the array may change over time. Adding a unique key helps avoid potential re-render mismatches.


```diff
  return [
-    this.value.map(this.renderInputChip),
+    <div key="chips">{this.value.map(this.renderInputChip)}</div>,
     <input ... />,
     ...
  ];
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        return [
            <div key="chips">{this.value.map(this.renderInputChip)}</div>,
            <input
                tabIndex={INPUT_FIELD_TABINDEX}
                type={this.inputType}
                id={this.labelId}
                disabled={this.readonly || this.disabled}
                class={{
                    'mdc-text-field__input': true,
                    hidden: this.inputHidden(),
                }}
                value={this.textValue}
                onBlur={this.handleInputBlur}
                onFocus={this.handleTextFieldFocus}
                onKeyDown={this.handleKeyDown}
                onInput={this.handleTextInput}
                // Some browsers emit a change event on input elements, we need to stop
                // that event from propagating since we are emitting our own change event
                onChange={this.inputFieldOnChange}
                placeholder={this.isFull() ? '' : this.searchLabel}
                readonly={this.isFull()}
                autocomplete={this.autocomplete}
            />,
            this.renderLeadingIcon(),
            this.renderClearAllChipsButton(),
        ];
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-14T08:59:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
+                <label slot="content" class={this.getContainerClassList()}>
+                    {this.renderLeadingIcon()}
+                    {this.renderPrefix()}
+                    {this.renderFormattedNumber()}
+                    {this.renderInput(properties)}
+                    {this.renderSuffix()}
+                    {this.renderTextarea(properties)}
+                    {this.renderTrailingLinkOrButton()}
+                </label>
path: src/components/input-field/input-field.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Ensure label is accessible by the input.**
You already use `aria-labelledby`, which may be sufficient. For additional clarity, consider adding `htmlFor={this.labelId}` or removing the `<label>` if it’s only styling. This helps screen readers form a stronger association between the label and the input.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T08:59:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -65,6 +56,15 @@
     }
 }
 
+limel-notched-outline {
+    &[has-value],
+    &:focus-within {
+        .mdc-text-field__affix {
+            opacity: 1;
+        }
+    }
+}
path: src/components/input-field/input-field.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Enhance Inline Documentation for the New Notched Outline**

This new styling block for `limel-notched-outline` correctly sets the `.mdc-text-field__affix` opacity to `1` when the element either has a value (`[has-value]`) or gains focus via `:focus-within`. To improve maintainability and clarity, please add an inline comment above this block explaining:
- The rationale behind choosing these specific states.
- Whether additional states (such as error or disabled) might need similar adjustments in the future.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T08:59:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,22 @@
+* {
+    box-sizing: border-box;
+}
+
+section {
+    padding: 1rem;
+    background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+    background-size: 0.5rem;
+}
+
+input[type='text'] {
+    // Overriding some of the native input styles for the
+    // sake of this example.
+    border: none;
+    outline: none;
+
+    height: 2.5rem;
+    width: 100%;
+    padding: 0 1rem;
+
+    background-color: transparent;
+}
path: src/components/notched-outline/examples/notched-outline-basic.scss
user: login: Kiarokh
body: @coderabbitai the examples in Lime Elements are already scoped. They all have `shadow: true,` and there is no reason to further scope them like your suggestion. That makes the styles more complicated, harder to read for consumers, and unnecessarily specified.
created_at: 2025-04-14T10:00:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,22 @@
+* {
+    box-sizing: border-box;
+}
+
+section {
+    padding: 1rem;
+    background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+    background-size: 0.5rem;
+}
+
+input[type='text'] {
+    // Overriding some of the native input styles for the
+    // sake of this example.
+    border: none;
+    outline: none;
+
+    height: 2.5rem;
+    width: 100%;
+    padding: 0 1rem;
+
+    background-color: transparent;
+}
path: src/components/notched-outline/examples/notched-outline-basic.scss
user: login: coderabbitai[bot]
body: <details>
<summary>🧩 Analysis chain</summary>

🏁 Script executed:
```
#!/bin/bash
# Check the component definition to verify shadow DOM usage
cat src/components/notched-outline/examples/notched-outline-basic.tsx | grep -A 5 -B 5 "@Component"
```

Length of output: 397

---
</details>

@Kiarokh You're absolutely right. I can see from checking the component definition that it has `shadow: true` specified, which means the styles are already properly scoped through Shadow DOM encapsulation. My suggestion to add an additional class-based selector was unnecessary and would indeed make the styles more complicated without providing any benefit. Thank you for the clarification about how examples are structured in Lime Elements.



⋱(⌣̯̀⌣́)⋰ *thinking about the DOM tree*
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.697Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer><details>
<summary>🧩 Analysis chain</summary>

🏁 Script executed:
```
#!/bin/bash
# Check the component definition to verify shadow DOM usage
cat src/components/notched-outline/examples/notched-outline-basic.tsx | grep -A 5 -B 5 "@Component"
```

Length of output: 397

---



</details>

@Kiarokh You're absolutely right. I can see from checking the component definition that it has `shadow: true` specified, which means the styles are already properly scoped through Shadow DOM encapsulation. My suggestion to add an additional class-based selector was unnecessary and would indeed make the styles more complicated without providing any benefit. Thank you for the clarification about how examples are structured in Lime Elements.



⋱(⌣̯̀⌣́)⋰ *thinking about the DOM tree*
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.697Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-14T10:01:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
path: src/components/chip-set/chip-set.tsx
user: login: Kiarokh
body: @coderabbitai the chips (further down in the file) already have `key`s.
created_at: 2025-04-14T10:01:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: @Kiarokh You're absolutely right! I've checked the code and each individual `limel-chip` component already has a unique key (`key={chip.id}`).

The linter warning is about the top-level array element returned by `this.value.map(this.renderInputChip)` rather than the individual chips themselves. It's more of a technical linter requirement than a functional issue.

Since your chips already have proper keys, you can safely disregard this suggestion if the component is rendering correctly. Your current implementation is technically sound.
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:416-442
Timestamp: 2025-04-14T10:02:20.360Z
Learning: In the Lime Elements codebase, when rendering arrays of components like chips, individual components already have proper keys (e.g., `key={chip.id}`). The decision to wrap mapped arrays in container elements with keys is optional when components already have proper keys and there are no rendering issues.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@Kiarokh You're absolutely right! I've checked the code and each individual `limel-chip` component already has a unique key (`key={chip.id}`).

The linter warning is about the top-level array element returned by `this.value.map(this.renderInputChip)` rather than the individual chips themselves. It's more of a technical linter requirement than a functional issue.

Since your chips already have proper keys, you can safely disregard this suggestion if the component is rendering correctly. Your current implementation is technically sound.
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:416-442
Timestamp: 2025-04-14T10:02:20.360Z
Learning: In the Lime Elements codebase, when rendering arrays of components like chips, individual components already have proper keys (e.g., `key={chip.id}`). The decision to wrap mapped arrays in container elements with keys is optional when components already have proper keys and there are no rendering issues.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-14T10:02:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@ export class ChipSet {
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Provide unique keys for each returned item in `renderInputChips`.**
You’re returning an array of several elements:
1. `this.value.map(...)`
2. `<input ...>`  
3. Icon  
4. Clear-all button  

Each should have a unique `key` in case the order changes. Also keep an eye on Stencil vs. React differences regarding keyed elements.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 418-438: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:06:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,60 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Verify continued references to MDC classes.**
The snippet applies `mdc-text-field` and other MDC classes for `input` type. If the goal is to phase out MDC in favor of the new notched outline, confirm whether these classes still serve a valid purpose.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:06:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,60 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
+        const contentProps = this.type !== 'input' ? { role: 'grid' } : {};
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" {...contentProps} class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add keyboard support for `onClick` event, and consider adding keys for array elements.**
1. `onClick={handleTextFieldFocus}` lacks a corresponding keyboard event, which can hinder keyboard-only users.  
2. Since this returns an array of elements, consider adding unique keys (e.g., `key="outline"`, `key="helperLine"`) to avoid potential issues in certain virtual DOMs.

```diff
-<limel-notched-outline
-    ...
-    onClick={this.handleTextFieldFocus}
->
+<limel-notched-outline
+    ...
+    onClick={this.handleTextFieldFocus}
+    onKeyDown={(e) => e.key === 'Enter' && this.handleTextFieldFocus()}
+    key="outline"
+>

- this.renderHelperLine(),
+ {this.renderHelperLine()?.map((element) => (
+    <div key="helperLine">{element}</div>
+ ))}
```



> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 368-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits 8d029ce to eaea96e
created_at: 2025-04-14T10:06:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
+                <label slot="content" class={this.getContainerClassList()}>
+                    {this.renderLeadingIcon()}
+                    {this.renderPrefix()}
+                    {this.renderFormattedNumber()}
+                    {this.renderInput(properties)}
+                    {this.renderSuffix()}
+                    {this.renderTextarea(properties)}
+                    {this.renderTrailingLinkOrButton()}
+                </label>
+            </limel-notched-outline>,
path: src/components/input-field/input-field.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Address accessibility for the `<label>` element, and consider array keys.**
1. Stencil typically doesn’t enforce a `for` or `htmlFor` attribute, but static analysis flags "label without a control". Since you’re already using `aria-labelledby={this.labelId}`, this might suffice. However, if you prefer to comply strictly with typical HTML semantics, add `htmlFor={this.labelId}` on the label or remove the `<label>` if it’s purely stylistic.
2. If returning multiple siblings in an array is repeated, consider adding unique `key` props.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 334-342: A form label must be associated with an input.

Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element.

(lint/a11y/noLabelWithoutControl)

---

[error] 324-333: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:06:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -37,6 +27,21 @@ $leading-icon-space: 1.5rem;
     isolation: isolate;
 }
 
+:host(limel-chip-set[type='input']) {
+    limel-notched-outline {
+        [slot='content'] {
+            min-height: shared_input-select-picker.$height-of-mdc-text-field;
+        }
+    }
+}
path: src/components/chip-set/chip-set.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Ensure adequate spacing for floating labels and chips.**

The min-height here looks good for maintaining a consistent layout. However, please confirm that the label text doesn’t overlap the chips when they overflow or wrap onto multiple lines. If feedback indicates the label appears too close, consider adding a small bottom margin to preserve readability.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:06:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as a internal elements
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
path: src/components/notched-outline/notched-outline.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Minor grammar fix in documentation.**

At line 12, consider removing the extra “a” before “internal elements.” This helps keep the docstring polished.  


```diff
- * and ensure that its internal elements are considered as a internal elements
+ * and ensure that its internal elements are considered part of the consumer's DOM
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:06:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider refactoring repetitive event handlers**

There's significant repetition across the event handler methods. While I see from past review comments that there's a separate PR planned for handling this pattern consistently across all examples, it's worth noting the opportunity for DRY improvement.


A future improvement could use a pattern like this:

```typescript
private toggleState = (property: string) => (event: CustomEvent<boolean>) => {
    event.stopPropagation();
    this[property as keyof this] = event.detail;
};

// Then use like:
// private setDisabled = this.toggleState('disabled');
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
path: src/components/notched-outline/examples/notched-outline-basic.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add keys to elements in the rendered array**

React/Stencil requires keys for elements rendered in arrays to help with reconciliation and performance.


```diff
 return [
-    <section>
+    <section key="notched-outline">
         <limel-notched-outline
             labelId={id}
             label="Label"
             required={this.required}
             invalid={this.invalid}
             disabled={this.disabled}
             readonly={this.readonly}
             hasValue={this.hasValue}
             hasLeadingIcon={this.hasLeadingIcon}
             hasFloatingLabel={this.hasFloatingLabel}
         >
             <input
                 slot="content"
                 id={id}
                 type="text"
                 required={this.required}
                 disabled={this.disabled}
                 readonly={this.readonly}
                 value={this.inputValue}
                 onInput={this.handleInput}
             />
         </limel-notched-outline>
     </section>,
-    <limel-example-controls>
+    <limel-example-controls key="controls">
         <limel-checkbox
             checked={this.disabled}
             label="Disabled"
             onChange={this.setDisabled}
         />
         <limel-checkbox
             checked={this.readonly}
             label="Readonly"
             onChange={this.setReadonly}
         />
         <limel-checkbox
             checked={this.required}
             label="Required"
             onChange={this.setRequired}
         />
         <limel-checkbox
             checked={this.invalid}
             label="Invalid"
             onChange={this.setInvalid}
         />
         <hr
             style={{
                 gridColumn: '1/-1',
             }}
         />
         <limel-checkbox
             checked={this.hasValue}
             label="Has value"
             onChange={this.setHasValue}
         />
         <limel-checkbox
             checked={this.hasLeadingIcon}
             label="Has leading icon"
             onChange={this.setHasLeadingIcon}
         />
         <limel-checkbox
             checked={this.hasFloatingLabel}
             label="Has floating label"
             onChange={this.setHasFloatingLabel}
         />
     </limel-example-controls>,
-    <limel-example-value value={this.hasValue} />,
+    <limel-example-value key="example-value" value={this.hasValue} />,
 ];
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-44: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 68-68: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

---

[error] 110-110: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,60 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
+        const contentProps = this.type !== 'input' ? { role: 'grid' } : {};
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" {...contentProps} class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add keyboard event handlers for greater accessibility.**

The `onClick` handler is present, but there is no corresponding keyboard event (e.g., `onKeyDown`) for keyboard users. Consider adding a keyboard event and possibly a `key` attribute to the returned array elements to align with best accessibility and to silence linter warnings about missing keys in arrays.


Possible code diff to illustrate the approach for the notched outline element:
```diff
return [
-    <limel-notched-outline
+    <limel-notched-outline
+        onKeyDown={(event) => event.key === 'Enter' && this.handleTextFieldFocus()}
+        key="notched-outline"
        labelId={this.labelId}
        ...
    >
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        return [
            <limel-notched-outline
                onKeyDown={(event) => event.key === 'Enter' && this.handleTextFieldFocus()}
                key="notched-outline"
                labelId={this.labelId}
                label={this.label}
                required={this.required}
                invalid={this.invalid || this.isInvalid()}
                disabled={this.disabled}
                readonly={this.readonly}
                hasValue={!!this.value?.length}
                hasLeadingIcon={!!this.leadingIcon}
                hasFloatingLabel={this.floatLabelAbove()}
                onClick={this.handleTextFieldFocus}
            >
                <div slot="content" {...contentProps} class={classes}>
                    {this.renderContent(value)}
                </div>
            </limel-notched-outline>,
            this.renderHelperLine(),
        ];
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 368-379: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 368-379: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated reply by CodeRabbit -->

✅ Addressed in commit d04fb0d

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -20,12 +21,13 @@
     display: none;
 }
 
-.mdc-select--outlined .mdc-floating-label {
-    left: functions.pxToRem(16);
+limel-notched-outline:not([invalid]:not([invalid='false'])) {
+    .limel-notched-outline--outlines {
+        --limel-notched-outline-border-color: transparent;
+    }
 }
path: src/components/select/select.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Review the complex selector for clarity.**

The `:not([invalid]:not([invalid='false']))` selector works but is somewhat verbose. Consider simplifying to improve maintainability and avoid confusion.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -50,27 +49,34 @@ export const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (
     const classList = {
         'limel-select': true,
         'mdc-select': true,
-        'mdc-select--outlined': true,
         'mdc-select--disabled': props.disabled,
         'limel-select--readonly': props.readonly,
-        'limel-select--required': props.required,
         'limel-select--invalid': !isValid,
-        'limel-select--empty': !hasValue,
         'limel-select--with-helper-text': typeof props.helperText === 'string',
     };
 
-    return (
-        <div class={classList}>
+    return [
+        <limel-notched-outline
+            class={classList}
+            labelId="s-label"
+            label={props.label}
+            required={props.required}
+            invalid={!isValid}
+            disabled={props.disabled}
+            readonly={props.readonly}
+            hasValue={hasValue}
+            hasFloatingLabel={props.isOpen}
+        >
path: src/components/select/select.template.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider using a unique key for this array element.**

Although Stencil doesn't strictly require keys like React, adding a `key` can help prevent potential re-rendering issues should the array order ever change.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 59-69: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,19 +6,14 @@
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).
  */
 
-@include shared_input-select-picker.lime-looks-like-input-value;
-.lime-looks-like-input-value {
-    padding: var(--limel-text-editor-padding);
-}
-
 * {
     box-sizing: border-box;
 }
 
+$min-height: 5rem;
path: src/components/text-editor/text-editor.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider making `$min-height` theme-aware.**

Defining `$min-height` to a static `5rem` helps maintain consistent editor sizing. However, consider retrieving or referencing it from a global theming variable if you anticipate different usage contexts, such as mobile layouts, or if you already have a shared sizing scale in your design system.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -231,18 +147,12 @@ limel-prosemirror-adapter {
     flex-grow: 1;
 
     min-width: 0;
-    min-height: 0;
+    min-height: $min-height;
path: src/components/text-editor/text-editor.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Repeated `min-height: $min-height;`.**

You’re using `$min-height` in two separate rule blocks (lines 35 & 150). Consider extracting a shared mixin or combining rules to avoid inadvertent divergence in future updates.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -144,14 +110,14 @@ $leading-icon-space: 1.5rem;
     opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).
 
     &:focus,
-    .has-chips:not(.mdc-text-field--disabled):hover &,
-    .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused & {
+    .has-chips:not(.disabled):hover &,
+    .has-chips:not(.disabled).mdc-text-field--focused & {
path: src/components/chip-set/chip-set.scss
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Refinement of hover/focus logic with `.has-chips:not(.disabled)`.**

Switching from `mdc-text-field--disabled` to `.disabled` ensures consistency if your project uses `.disabled` as the canonical state class. Confirm that all logic flows (for example, in Stencil or wherever classes are applied) properly toggle `.disabled`.

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit d04fb0d
created_at: 2025-04-14T10:28:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as internal parts
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+@Component({
+    tag: 'limel-notched-outline',
+    styleUrl: 'notched-outline.scss',
+    shadow: false,
+})
+export class NotchedOutline {
+    /**
+     * Set to `true` when the input element is required.
+     * This applies proper visual styles, such as inclusion of an asterisk
+     * beside the label.
+     */
+    @Prop({ reflect: true })
+    public required = false;
+
+    /**
+     * Set to `true` when the input element is readonly.
+     * This applies proper visual styles, such as making the outline transparent.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input element is
+     * invalid. This applies proper visual styles, such as making the outlines red.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * Set to `true` to indicate that the input element is
+     * disabled. This applies proper visual styles, such as making the outlines
+     * and the label transparent.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    /**
+     * Label to display for the input element.
+     * :::important
+     * Note that the input element of the consumer component will be
+     * labeled by this label, using the `labelId` prop.
+     * :::
+     */
+    @Prop({ reflect: true })
+    public label?: string;
+
+    /**
+     * The `id` of the input element which should be
+     * labeled by the provided label.
+     */
+    @Prop({ reflect: true })
+    public labelId?: string;
+
+    /**
+     * Set to `true` when the user has entered a value for the input element,
+     * shrinking the label in size, and visually rendering it above the entered value.
+     */
+    @Prop({ reflect: true })
+    public hasValue = false;
+
+    /**
+     * Set to `true` when the consumer element displays a leading icon.
+     * This applies proper visual styles, such as rendering the label
+     * correctly placed beside the leading icon.
+     */
+    @Prop({ reflect: true })
+    public hasLeadingIcon = false;
+
+    /**
+     * Set to `true` when the consumer element needs to render the
+     * label above the input element, despite existence of a `value`.
+     * For example in the `text-editor` or `limel-select`,
+     * where the default layout requires a floating label.
+     */
+    @Prop({ reflect: true })
+    public hasFloatingLabel = false;
+
path: src/components/notched-outline/notched-outline.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Reflection of multiple props.**

Reflecting many props (e.g., `required`, `readonly`, `invalid`, etc.) in the DOM is convenient for styling. However, confirm that each reflected prop is necessary for global styling and consider potential performance implications if you add more.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:29:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as internal parts
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+@Component({
+    tag: 'limel-notched-outline',
+    styleUrl: 'notched-outline.scss',
+    shadow: false,
+})
+export class NotchedOutline {
+    /**
+     * Set to `true` when the input element is required.
+     * This applies proper visual styles, such as inclusion of an asterisk
+     * beside the label.
+     */
+    @Prop({ reflect: true })
+    public required = false;
+
+    /**
+     * Set to `true` when the input element is readonly.
+     * This applies proper visual styles, such as making the outline transparent.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input element is
+     * invalid. This applies proper visual styles, such as making the outlines red.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * Set to `true` to indicate that the input element is
+     * disabled. This applies proper visual styles, such as making the outlines
+     * and the label transparent.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    /**
+     * Label to display for the input element.
+     * :::important
+     * Note that the input element of the consumer component will be
+     * labeled by this label, using the `labelId` prop.
+     * :::
+     */
+    @Prop({ reflect: true })
+    public label?: string;
+
+    /**
+     * The `id` of the input element which should be
+     * labeled by the provided label.
+     */
+    @Prop({ reflect: true })
+    public labelId?: string;
+
+    /**
+     * Set to `true` when the user has entered a value for the input element,
+     * shrinking the label in size, and visually rendering it above the entered value.
+     */
+    @Prop({ reflect: true })
+    public hasValue = false;
+
+    /**
+     * Set to `true` when the consumer element displays a leading icon.
+     * This applies proper visual styles, such as rendering the label
+     * correctly placed beside the leading icon.
+     */
+    @Prop({ reflect: true })
+    public hasLeadingIcon = false;
+
+    /**
+     * Set to `true` when the consumer element needs to render the
+     * label above the input element, despite existence of a `value`.
+     * For example in the `text-editor` or `limel-select`,
+     * where the default layout requires a floating label.
+     */
+    @Prop({ reflect: true })
+    public hasFloatingLabel = false;
+
+    public render() {
+        return (
+            <div class="limel-notched-outline">
+                <slot name="content" />
+                <span
+                    class="limel-notched-outline--outlines"
+                    aria-hidden="true"
+                >
+                    <span class="limel-notched-outline--leading-outline" />
+                    {this.renderLabel()}
+                    <span class="limel-notched-outline--trailing-outline" />
+                    {this.renderEmptyReadonlyValue()}
+                </span>
+            </div>
+        );
+    }
+
+    private renderLabel() {
+        if (!this.label) {
+            return;
+        }
+
+        return (
+            <span class="limel-notched-outline--notch">
+                <label htmlFor={this.labelId}>{this.label}</label>
+            </span>
+        );
+    }
+
+    private renderEmptyReadonlyValue() {
+        if (!this.readonly || this.hasValue) {
+            return;
+        }
+
+        return (
+            <span
+                class="limel-notched-outline--empty-readonly-value"
+                aria-hidden="true"
+            >
+                –
+            </span>
+        );
+    }
path: src/components/notched-outline/notched-outline.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Empty read-only state.**

Displaying “–” for an empty read-only input is a good way to visually indicate no value is present while preventing user input. Optionally, you might clarify that placeholder in translations if your app is localized.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T10:29:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,60 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
+        const contentProps = this.type !== 'input' ? { role: 'grid' } : {};
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" {...contentProps} class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
path: src/components/chip-set/chip-set.tsx
user: login: Kiarokh
body: @coderabbitai 🤔 oh actually I think this onClick should rather be on the `<div slot="content"` and be conditionally shown, only if the `type` is `input`. However, I don't think a corresponding keyboard event is needed, since users can tab into the `<input />` element which is within the div, and set the focus on it

created_at: 2025-04-14T12:21:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,60 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
+        const contentProps = this.type !== 'input' ? { role: 'grid' } : {};
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+                onClick={this.handleTextFieldFocus}
+            >
+                <div slot="content" {...contentProps} class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: @Kiarokh You're absolutely right! Your approach is more semantically correct and better targeted:

1. Moving the `onClick` to the content div makes more sense since that's where the interaction should happen
2. Making it conditional only when `type === 'input'` is appropriate since that's the only scenario where entering edit mode is relevant

Here's how you could implement that change:

```jsx

<limel-notched-outline
    labelId={this.labelId}
    label={this.label}
    required={this.required}
    invalid={this.invalid || this.isInvalid()}
    disabled={this.disabled}
    readonly={this.readonly}
    hasValue={!!this.value?.length}
    hasLeadingIcon={!!this.leadingIcon}
    hasFloatingLabel={this.floatLabelAbove()}
>
    <div 
        slot="content" 
        {...contentProps} 
        class={classes}
        onClick={this.type === 'input' ? this.handleTextFieldFocus : undefined}
    >
        {this.renderContent(value)}
    </div>
</limel-notched-outline>

```

And you're correct about keyboard accessibility too - if users can already tab to the input element naturally, an additional keyboard event handler would be redundant. The standard tab navigation flow should be sufficient.
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.289Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@Kiarokh You're absolutely right! Your approach is more semantically correct and better targeted:

1. Moving the `onClick` to the content div makes more sense since that's where the interaction should happen
2. Making it conditional only when `type === 'input'` is appropriate since that's the only scenario where entering edit mode is relevant

Here's how you could implement that change:

```jsx
<limel-notched-outline
    labelId={this.labelId}
    label={this.label}
    required={this.required}
    invalid={this.invalid || this.isInvalid()}
    disabled={this.disabled}
    readonly={this.readonly}
    hasValue={!!this.value?.length}
    hasLeadingIcon={!!this.leadingIcon}
    hasFloatingLabel={this.floatLabelAbove()}
>
    <div 
        slot="content" 
        {...contentProps} 
        class={classes}
        onClick={this.type === 'input' ? this.handleTextFieldFocus : undefined}
    >
        {this.renderContent(value)}
    </div>
</limel-notched-outline>
```

And you're correct about keyboard accessibility too - if users can already tab to the input element naturally, an additional keyboard event handler would be redundant. The standard tab navigation flow should be sufficient.
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.289Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-14T12:22:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -337,35 +339,70 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**MDC classes being replaced with custom classes.**

The code now uses `disabled` class instead of MDC-specific classes, aligning with the PR's goal to move away from Material Design Components. However, you're still using MDC class names (`mdc-text-field`, etc.) in some places.


Consider gradually replacing more MDC classes with custom ones in future PRs to complete the transition away from Material Design Components.


Also applies to: 352-361

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-14T12:53:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
path: src/components/chip-set/chip-set.tsx
user: login: adrianschmidt
body: @coderabbitai @Kiarokh This isn't about the keys in the chips (held in `this.value` and rendered by `this.renderInputChip`), this is about the array wrapping the outermost level of elements; the `return […]`. Since both CodeRabbit and SonarQube will complain about the lack of `key` properties on the elements in the array when this pattern is used, we should stop using it, and instead use `return (<Host>…</Host>)`. If you could switch to this pattern @Kiarokh, I might not have to bug CodeRabbit about it all the time 😅
created_at: 2025-04-25T14:36:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -385,113 +412,42 @@
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
path: src/components/chip-set/chip-set.tsx
user: login: coderabbitai[bot]
body: A summary of the edits CodeRabbit can apply:

> We will import Host from @stencil/core in chip-set.tsx to enable the use of the <Host> wrapper for JSX returns.

> We will refactor renderInputChips in chip-set.tsx to return a <Host> wrapper instead of an array, eliminating lint warnings about missing keys.



A plan of each step that CodeRabbit will take in order to execute the edits for each file (with inline rough draft snippets):

<details>
<summary>✏️ src/components/chip-set/chip-set.tsx</summary>

Update the import from @stencil/core to include Host. Replace the existing import block with:
```ts
import {
    Component,
    Element,
    Event,
    EventEmitter,
    h,
    Host,
    Method,
    Prop,
    State,
    Watch,
} from '@stencil/core';
```

---

Replace the entire renderInputChips method body with a JSX return using <Host>. The new implementation should be:
```ts
private renderInputChips() {
    return (
        <Host>
            {this.value.map(this.renderInputChip)}
            <input
                tabIndex={INPUT_FIELD_TABINDEX}
                type={this.inputType}
                id={this.labelId}
                disabled={this.readonly || this.disabled}
                class={{
                    'mdc-text-field__input': true,
                    hidden: this.inputHidden(),
                }}
                value={this.textValue}
                onBlur={this.handleInputBlur}
                onFocus={this.handleTextFieldFocus}
                onKeyDown={this.handleKeyDown}
                onInput={this.handleTextInput}
                // Some browsers emit a change event on input elements, we need to stop
                // that event from propagating since we are emitting our own change event
                onChange={this.inputFieldOnChange}
                placeholder={this.isFull() ? '' : this.searchLabel}
                readonly={this.isFull()}
                autocomplete={this.autocomplete}
            />
            {this.renderLeadingIcon()}
            {this.renderClearAllChipsButton()}
        </Host>
    );
}
```

</details>



A summary of the context that CodeRabbit is considering across the codebase:

> We need to confirm that Host is not currently imported from @stencil/core so that we can add it to the import list.

> We need to inspect the current implementation of renderInputChips to identify the array return that must be replaced with a <Host> wrapper.

- [ ] <!-- {"checkboxId": "32599f3c-a2a5-4bb9-b887-dee90db62b97", "radioGroupId": "edit-actions-group-2060370216"} --> ✅ Create PR with these edits

- [ ] <!-- {"checkboxId": "6b3df8e2-79f5-4eb8-9d4a-c7d3a6a5f7b1", "radioGroupId": "edit-actions-group-2060370216"} --> 📋 Get copyable edits

- [ ] <!-- {"checkboxId": "85e7c9f1-3a23-4b8e-9f25-d7a5b234a8c1", "radioGroupId": "edit-actions-group-2060370216"} --> 📌 Create commit in current branch

- [ ] <!-- {"checkboxId": "1ff584df-7767-46fe-8b5b-0980b49c465f", "radioGroupId": "edit-actions-group-2060370216"} --> 🔄 Try a different approach

⏪ Back to ordinary chat. There will be no more planning in this conversation. <!-- <stateToBan>plan-edits</stateToBan> -->

<!-- <agentComponentType>plan-edits</agentComponentType> -->

<!-- <rawResChunk><toEditFile>src/components/chip-set/chip-set.tsx</toEditFile>
<rationale>
The user requests to replace the pattern of returning an array of elements in the renderInputChips method with a pattern using a single JSX wrapper element, specifically <Host>, to avoid lint errors about missing keys on the array elements. The diff shows the current code returning an array of elements, and the user wants it changed to return a single <Host> element wrapping all children. This file contains the renderInputChips method and is the relevant place to apply this change.
</rationale></rawResChunk> -->

<!-- <rawResChunk><generated_script>
```shell
#!/bin/bash
# Identify TSX files that return arrays at the top level (JSX)
echo "Scanning for 'return [' patterns in TSX components..."
rg -n "return\s*\[" --glob "src/components/**/*.tsx"

# List all TSX component files for context
echo ""
echo "All TSX component files under src/components:"
fd --type f --extension tsx src/components
```
</generated_script>

<rationale>
1. src/components/chip-set/chip-set.tsx  
   – This is the file under review where the `return [… ]` array pattern was introduced and needs to be replaced with a `<Host>` wrapper.

2. src/components/input-field/input-field.tsx  
   – The input-field component may also be returning multiple JSX elements in an array; if so, it should adopt the `<Host>` wrapper pattern for consistency and to satisfy lint rules.

3. src/components/select/select.template.tsx  
   – As a template for the select component, it can contain array returns of JSX fragments. Any such patterns should be updated to use `<Host>`.

4. src/components/notched-outline/notched-outline.tsx  
   – The notched-outline component might be returning multiple elements in arrays (for leading/trailing outlines). It should be audited for `return […]` uses.

5. src/components/notched-outline/examples/notched-outline-basic.tsx  
   – Example usages often mirror component patterns; if they return arrays, they should demonstrate the new `<Host>` pattern.

6. src/components/text-editor/text-editor.tsx  
   – The text-editor component could also use array returns in its render logic; it needs verification against the recommended `<Host>` approach.

By scanning all TSX files for `return [` and reviewing components that use Stencil’s `<Host>`, we can ensure consistent adoption of the wrapper pattern across the codebase.
</rationale></rawResChunk> -->

<!-- <rawResChunk><context>
    <rationale>We need to confirm that Host is not currently imported from @stencil/core so that we can add it to the import list.</rationale>
    <generated_script>```shell
#!/bin/bash
# Locate the import from @stencil/core to check if Host is included.
rg -n "from '@stencil/core'" -C2 src/components/chip-set/chip-set.tsx
```</generated_script>
    <shell_result>4-14:import {
    Component,
    Element,
    Event,
    EventEmitter,
    h,
    Method,
    Prop,
    State,
    Watch,
} from '@stencil/core';</shell_result>
</context>

<context>
    <rationale>We need to inspect the current implementation of renderInputChips to identify the array return that must be replaced with a <Host> wrapper.</rationale>
    <generated_script>```shell
#!/bin/bash
# Show the renderInputChips method and its return value.
rg -n "private renderInputChips" -A10 -C2 src/components/chip-set/chip-set.tsx
```</generated_script>
    <shell_result>425:    private renderInputChips() {
426-452:        return [
            this.value.map(this.renderInputChip),
            <input
                tabIndex={INPUT_FIELD_TABINDEX}
                type={this.inputType}
                id={this.labelId}
                disabled={this.readonly || this.disabled}
                class={{
                    'mdc-text-field__input': true,
                    hidden: this.inputHidden(),
                }}
                value={this.textValue}
                onBlur={this.handleInputBlur}
                onFocus={this.handleTextFieldFocus}
                onKeyDown={this.handleKeyDown}
                onInput={this.handleTextInput}
                // Some browsers emit a change event on input elements, we need to stop
                // that event from propagating since we are emitting our own change event
                onChange={this.inputFieldOnChange}
                placeholder={this.isFull() ? '' : this.searchLabel}
                readonly={this.isFull()}
                autocomplete={this.autocomplete}
            />,
            this.renderLeadingIcon(),
            this.renderClearAllChipsButton(),
        ];</shell_result>
</context>

<fileAction>
    <fileActionSummary>We will import Host from @stencil/core in chip-set.tsx to enable the use of the <Host> wrapper for JSX returns.</fileActionSummary>
    <file_name>src/components/chip-set/chip-set.tsx</file_name>
    <type>Modify</type>
    <start_line>4</start_line>
    <end_line>14</end_line>
    <steps>
        <step>
            <stepNumber>1</stepNumber>
            <generated_instruction>Update the import from @stencil/core to include Host. Replace the existing import block with:
```ts
import {
    Component,
    Element,
    Event,
    EventEmitter,
    h,
    Host,
    Method,
    Prop,
    State,
    Watch,
} from '@stencil/core';
```</generated_instruction>
        </step>
    </steps>
</fileAction>

<fileAction>
    <fileActionSummary>We will refactor renderInputChips in chip-set.tsx to return a <Host> wrapper instead of an array, eliminating lint warnings about missing keys.</fileActionSummary>
    <file_name>src/components/chip-set/chip-set.tsx</file_name>
    <type>Modify</type>
    <start_line>425</start_line>
    <end_line>452</end_line>
    <steps>
        <step>
            <stepNumber>1</stepNumber>
            <generated_instruction>Replace the entire renderInputChips method body with a JSX return using <Host>. The new implementation should be:
```ts
private renderInputChips() {
    return (
        <Host>
            {this.value.map(this.renderInputChip)}
            <input
                tabIndex={INPUT_FIELD_TABINDEX}
                type={this.inputType}
                id={this.labelId}
                disabled={this.readonly || this.disabled}
                class={{
                    'mdc-text-field__input': true,
                    hidden: this.inputHidden(),
                }}
                value={this.textValue}
                onBlur={this.handleInputBlur}
                onFocus={this.handleTextFieldFocus}
                onKeyDown={this.handleKeyDown}
                onInput={this.handleTextInput}
                // Some browsers emit a change event on input elements, we need to stop
                // that event from propagating since we are emitting our own change event
                onChange={this.inputFieldOnChange}
                placeholder={this.isFull() ? '' : this.searchLabel}
                readonly={this.isFull()}
                autocomplete={this.autocomplete}
            />
            {this.renderLeadingIcon()}
            {this.renderClearAllChipsButton()}
        </Host>
    );
}
```</generated_instruction>
        </step>
    </steps>
</fileAction></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T14:37:59Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-04T09:24:10Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

<details>
<summary>📝 Walkthrough</summary>

## Walkthrough
This pull request introduces several modifications across various UI components to enhance identifier management, styling, and component structure. A new private property (`labelId`) is added to the `ChipSet`, while both the `InputField` and `TextEditor` components have been updated to utilize a new `NotchedOutline` component for label handling. Redundant styles and methods have been removed or streamlined, and new SCSS files and components, including an interactive example of the `NotchedOutline`, have been introduced. The tests have been updated to focus on specific elements and attributes within the rendered HTML.

## Changes

| File(s) | Change Summary |
|---------|----------------|
| `src/components/chip-set/chip-set.tsx` | Added a new private property `labelId` to generate dynamic IDs for input and label elements. |
| `src/components/input-field/input-field.scss`<br>`src/components/input-field/input-field.tsx` | Removed unused `@use` statements and commented out `@include` directives; added styles for `limel-notched-outline`; refactored rendering to remove `renderLabel` and `renderEmptyValueForReadonly` in favor of the new outline component. |
| `src/components/notched-outline/...`<br>(`examples/notched-outline-basic.scss`,<br>`examples/notched-outline-basic.tsx`,<br>`notched-outline.scss`,<br>`notched-outline.tsx`) | Introduced a new `NotchedOutline` component with dynamic properties and associated SCSS styles; added a basic example component (`NotchedOutlineBasicExample`) demonstrating interactive state controls. |
| `src/components/text-editor/text-editor.scss`<br>`src/components/text-editor/text-editor.tsx`<br>`src/components/text-editor/text-editor.spec.tsx` | Streamlined styling by defining a new height variable and removing unused outline styles; refactored the render logic to use `limel-notched-outline` and `limel-prosemirror-adapter`, and updated tests to check specific elements and attributes. |
| `src/style/internal/shared_input-select-picker.scss` | Modified the leading-icon mixin to implement a flexbox layout; removed direct width/height properties and introduced a nested `limel-icon` class for icon dimensions. |
| `src/components/select/select.scss`<br>`src/components/select/select.template.tsx` | Removed references to MDC floating label styles; added a new border radius variable and restructured the component to use `limel-notched-outline` for label handling. |
| `src/components/chip-set/chip-set.e2e.ts`<br>`src/components/select/select.e2e.ts` | Updated end-to-end tests to reflect changes in the component structure by modifying selectors for label elements in the `limel-chip-set` and `limel-select` components. |
| `src/components/chip-set/chip-set.scss`<br>`src/components/chip-set/partial-styles/_readonly.scss` | Removed unused `@use` statements and mixin inclusions related to Material Design components; updated styles for `limel-chip-set` and modified selectors for readonly states. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User as User
    participant Example as NotchedOutlineBasicExample
    participant Outline as limel-notched-outline
    participant Editor as limel-prosemirror-adapter

    User->>Example: Toggle checkboxes (update states)
    Example->>Outline: Rerender with updated props (label, required, etc.)
    Outline->>Editor: Render input field with dynamic label association
```

```mermaid
sequenceDiagram
    participant User as User
    participant TextEditor as TextEditor
    participant Outline as limel-notched-outline
    participant ProseMirror as limel-prosemirror-adapter

    User->>TextEditor: Interact with the editor (input/focus)
    TextEditor->>Outline: Render notched outline with dynamic labelId and props
    TextEditor->>ProseMirror: Display editor content with slot="content"
```

## Suggested Reviewers
- adrianschmidt

</details>

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡💬 Agentic Chat (Pro Plan, General Availability)</summary>
> 
> - We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.
> 
> </details>

<!-- announcements_end -->
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEYDEZyAAUASpADK2VmgqyjcEj2wAbb5AokAI7Y0riQ4rjedJAARKRhFPD0+ABmkACyACIAwigY3HiQKfAk3rSIMZAA7mjIiNgCzOo09HKQ2IiUkADS8C74ANaw6Bj0qEns8MXRtZAYTgJdAMwArACMABz8WADi6gASDRowsJ4FFNz4nfxpuAjItijIBJCl8E0Y1J53nh2eqRkvok0H5MtJ4EQsNkWJdyBhcMgABRZbIASjyBTC0zKyHgWBSaAk+D4ALQPESEi+CmYsPYkCUiAh5HoLwCoy6ZIw+FwDFOyTw3jxnn62FGGMKpRIbHhz1g1EYmHQDCYrEUVLJKW8+GoeKIkG8KlKxzgqHIVWptPhTzyiG48ACrXk6SBfVB4MhAHI6rhZFFkClieKsSUcSN6NpmM98O0MFN5IgfX6lRQrshKYl8B0Lfg4QiADThU4BNoO7AMXUKJT07DcQUMHU5jRGACCtFo6ngOZB3lkBbuqEeaDbAUQnWQiqQ9U8tHwDCc7GieMLnmyNnSRRI1GwAX8JEujIIrgLttEU3g9d88knITmCy6ABYAGwATkfxtOjDlGFIyF4+H3i5YP2v4+H4ATBKE6A7niNDsiy0YJgEaDMIK5DLkGRQhvQCa+hWf4MNIyBVOoCBAR+f4iGITYGB41h2FyNCyvKPyQAABoKbDeGAeKYmA2K0Kx2a5gWVQILy1p/GMWCdFIVB+NyRZCewdRlsMsy0F8YB2gwAyUAWTBahQWnnrpFAFpg9DFFEBbgdg9rSJAEhINgII2twojiDm1aJN+6EBE5JDmvhhHHAAkmEIKING0qeRgTFhCx7HvKUYC8vA3BgJ0uCCSqlphKgNYaS0YbtJ0UlsRxKXaaZrEiWJaneFFcwkHQUaQIs4ShHQ1G0Y8eIMN42AMugn6iAMgoJkUgb+SUVSUG1ZD1DudzyiqTQIlBwoEE0DD6cSARiD24SyO5tDmWKK0RRg8gCEhAwVrymA/pt6DcH+vB9DQR3MC4um0GFEWNdGTDwtocUjZ0YidvigaMeIvloAwKajo5Lidlmt34FUnQUOOYr/so8N6ogsgJlKiDmd4dyZkQwwnuWxQMJ1CYViOPgbS4ngMeS+BOUo5UsfUziuNRABigYpNuPx8EouDaI1fbkaBu4QZN9ZYB1iMEaOMwJR+Aa+FjFYAKo2AAMlwADasC4Lg3CIBwAD0jtECRRwqo7ZuihpWquwMjuVWAkoxYgjsFL4jurJsAC6iI23bDvO67dzuywnveyC+B+wHyVB1EIdh6BkfrBsqLURYkDQqwykOE4P2uEYoVkZ4a015DsU3Oh4dgUEIQJgWfx8F7DCyNksCyAAXrAvNkiQAAevCETMb0HZ90NTXwLEjvgg0dwCimL05mbIK3MolXi7b1sVl2QIgH5ys8XUsh+j3fg5LwsYsk37xyaiCj6xx7AfgYtEG+LF3i1ilOwBsWAtSDGQEQfAih2oSgXiOMqMYCIUDljBeQKhMxhFEiQaWt8PyoBYmgFe/5gQ0B4PNLyLxKF/ikOhWwxxh6j3HlPGeKs+7FSIHZDSGACLbEgNPc0LxgrRGIncdCTCUyUj8MFFGAZN73C8L4XhoRqJN13LaHMnQCy9H6EMXctQlrRA4WPSe09KSFnlHfTw4x2SgI/IkWmYR3K4wYdGeRvNvgfjYZAfYWMSCySMX0FMpjIrRkuDBaIBD7F62+KEccO45wUDZJEeQBJ4CoT1BZSAMVobRFrJgNqBQ74jTNJhOeNZwi+OHIRQs4xRwhGOGCW06gAkpMmrkwaI4IkmOGPPReOt6Ag2KEoYRATmKBLsEwHwrRPBsAoKQZIMz0LXgcpzPRO8pD/SMPoYw4AoBkGSGkNAeBCCkHIFQYqp9ODkn4MIDykgHJtCYEoKgqh1BaB0MckwUATS4jxjgAgxAyCE2iI8rgVBzRC3rjdeQXzlC/M0NoXQYBDAnNMAYRAFAGCO1yjmZSxKEAZSyuS9KmViEaARHPDgBgYgsoMBXZsoVIV3K+NhOuLh5AAlfj+dwL8vzPRgimWgZZhTNSChSKk71KA+gqoabwoUBJ5HQqxMe6V7DEJygaUcdVzzDGcR2EE8AJ6AXQiDRCZZDylQrIlJGm4aA2AsiwewuAfJEERKiQSkthGxXfKgdiqr1WCQKuIQUVr4L0lkJ8Ha3Z4zEK1UkQS1BvXwAEHgf4twyH5AlPndgNk9wGnLL5Fih90aICOnKCgtBUXYSzb5GIPE8B5ygfCGI75PBsm+RWX254N5bMLWENK9sxGzEWGQIpigzygOjP1QaVZEoGkWGqjVS413JS4gxXkdAwAENQiQHKMJSXwgLGQL8Fa9QUNHLONeXlFi4DmrOli67SglXAWOzCpR/onBWcQ6e9BWL9soNCeE7BBIP3ai1LAQ5+YNNvt6zcKEhR+XOZQCsAJ23jopXjZ+Tjf3BxLQoOKO8kg6krR+IdTMb41F/DNY+R1bT/2TKmIp7N0pRCKcBxQiBe38Fkt2FDFB7XbjzVq8DFBBJsGpvQWDM6EO0CEB0a+vjlQsGYGqWhPxrhCukFeuK24nVymSUpK0P0YJg1xBteJcEiiiihl2f+8hRJ5KcTSBRZmVmYDQKQGKncJjwgXbjculhmxU0JtDNqLElADRcDA5AAJRnEmKoGAoAg6yvFC+IaQRzrApi8cqxDdAuCsQ+pSWhn7N1cEQrqSNWBEso21RSvV2VNWsQJUSkluZQ4TtpbgallK6UMtYgYKA6R+PhjbOVtiVWqQycg7BXAiJFEhC4Dq7glto7+s1S15AbXdX6q6z14l57+sjaG9drK9LEBzwm1Nmbt8mRbh3IVHlFWkgAF421js7TFGITW2IyabpibbiA5MvaXIdti22Osg+64Si7NIL0Ilu8QzHmhxuQEAEmEbFfsAG9gIaFq+qgAvkjsHY7IfQ4Uwdw1R2EenaXMj3rl2yWDapdzsbD2JsspiEcvF52+tkrw3xLCjsJf8Q0IgBgo4mWC7ZZFzltzoW8uFgKtIhnEAipbmKhy27yI+aQ+2FIaQ8REm8CwreUoZ7yTSDJZQfhWIAAE/iCQTF8EOJV3fLqGqe+k9koZSGQAEA0GmtV305rQAA+hLzoUQxDGR0pQL3iZpCAPcgzc8ybFaeANlqYivl3ee5Qz7mucoWHKfpJKFoFWPfXA9G7n6NBgTeEdvuvkR6BRCkdswRtYBu+HuPUKD0ABuWqbEm+eBb237DIJHaam1ETMAtXJ/T7L831vLol8r+o0QdfqqB9D4P2vjfU/zqgdn5Aefe/O+JDelETfxwWxtg7K5nsBepqGxL3qf3YRFdIPdsA6cQMPKdGveDXcHTA5LgSbGfAPKsGPB0BPAHJPDyVPUyDQMfZkTKTPI9WSRIBkKfBAwAgaQPUhWPNA3iDAlPaqSgDQJGf8U6Y/DdMAOUHSUgqAcg4Aqg1AxPSUegkyRg9sRAFQKIWgQgygYg6QbgxAoAyglAugGgjtOg3ALAxg8/XUNglKfxTJCYRAeQ3gpQ+tFQwQ5PDQhgigMnXOKUbgH0MADbEgPiYkMAJCGcDAHsUggwZsWVdqLUHSTuHCJMJTaAsrSyWGD8JKTiYfbkA9KQ3AoPMXS9aoeqW+HPBdb0X0ByVRLVB+JwkEEIDNMUViAMOcRAMAGRUiDPL4CmdAC3N5Gjf4bgRGdQbXLVDQQfBgMAGgOeDQ/iOPOPNAC3eAR7V4YteEaiAAeRE18ALwM0N3DxIE1A8hGlLBcywGNy5jvBJEt0UKQxCJ2TFE5ECnQA/w7jyK/FoHyQyNPEZgr0Yk7h3ViJH0SL73IFYgi0gCi3b2S2Q3i1EANHuVi07jS2wQST4Cyxy0mHyz1wQJsHtwORn3L29xoBikbz+Dv133b1dC73iJ7ySNPx6LeN70iHHynzOxRxSIxxlylzpP/TlwVyhwRKROiG3yDzRK7SeQ5OxIXw72Xy1EP10O8E3ypI5zRyuwZLKGlwB1l3l1HCe0gERNgPZNn1qPRPYExJ335LxO0O/BFOJL4iFIv1VTFLZ1F05xlFlN4n4htI7XlOZKVJVP8Rv1RLlk1PhG1LnxxMX0f3SkgXNKwHZ1RzylDmlNoHtIGKwiZMVNZNVJvyQJAJD3AJIEbyTP4PMPQKEKsJEJsKSKkKOOkIMJIKR0tMlPFzlPpKrMZIVJZKgBdORJMKUEElALeSkHTIOM8GUPjwsMwOsKYOK1YNqw4MRgGEpItOpKtNpJrJlIjNjPrOVLZMTK7NbJTPeU7IoOQLMN7OzMsM0JsLEIkNHyIMMInODPLLDKjMl3/WvMdLjIbOXIUK3OTLAI3OfL4J7NUI0PUIPI0H1KPxHP0NkKMLLKnIrOtIjLvJjLrOdKfObNfPbLTI/NMOoL7OELTxsMDnsMcOcNcKMg8JzG8LAolKvKgvnNgoQNbEOMz39EDBiJSlJKSJItDPR3DNnMjIoqdOZVZUmxF3ArIo4ugsZIZSV1ZXZTVyhXuWiERX5U7l1310/CeiN2bjYnBzwFFiwjPQgvygwGtxYTJB+iEEDH0LlB8GeLcSwx9TEwkx3DyJ/UxD/TKCE2rWPhQBpEmI9PXjwDyUtRmDYmAFqz0EElIytBeDIHrHth8CpHTBrUs3zDyC3N831E3HbF8nPBzALFq2vwwlCoRBDWQDCNnQCDKQInoGqOqTOJpILFYkCt3TiJ5EJI+JIGCuNXEi1j3A2mdzkh5ntgq3JwEhqtqy31snskGsJz0otXGtYiPOyzoBGtSqItkC3wfgADUijT0crWIH4zZUrdRQoQYvjIBFL4kKBPg/Batdx2RrK6Mp0ZBoCAgEzjxMjGZk1pMrKzZVV6cQMCwL488iYkl9RVUrqB10rkAuRzQfpPh1lXh+jKBzqjpqjtj/CaShNLrUAZMZhxxb4tRCESJkbarKo90CTR9mrWr0A/8Kw8jDLiQVlFBoqZZ3QMBjhqLP8Ebex0J5MQNQcrKABRGkH0dawaEgcWCgREocJamDadB65ctq4YVyjoI6MQspWQGYLAHC+QZwkdQirwnJLCQTIwUWKWIsHTAIH/VieIFbMGCDJnM2JATrLm5BIqrAHTc3EoONN4D4KkFiOHViD0bo3o+eaM/9CALkEUj0afDzcSRjcjdsWKN6phQUaIAQWoBJVSsZCKqTMkWrAq3cVYsQWULmM4u1MQSTNIygHpIGjda0LkfUHMUgKElwMIAEFiazLY39fiL0EG7DXyOjGYuY7wH/XXMTNDE9G1acruku3AMutoJQKIIgQ/Kur9a424j+YBM4wm+qpism7SvKEqR63mVmOgDOKzGbZYyPRdJenua6isQpHWo6LW5Wg0WQb434mLAxAEj8BLYE/41LBedLSErwbLYdWEkoeE57BnA+uAhbeVWhGTfmhw2QIWkIUW8WzwnsP1EHX29S3ATS/9Fimk9i206s4hkS/nBA6bSB5cirRbOBj61VTBxncxNSsdPBsoAh6cohh0kh7hshx7HioXPisAIwS8ti/Exq0m8k8gR2eeZCSBUObeqRlwlOxkBgBcsSoXCSrlDXW+PlVweSpYlsfw+wbIewewTCXjZ2vIb1emsqwGpQYocgbIpMam9qWoYdN4/gZq+KoTIgLUFOvwAQfAOeTKS1PCYrJVK8OoVNF4ViIJhtSgMAIJ8Y6mzRPKwTH42+N5LyPK60I48qkiHgRDW+k4txnSIgFMb2dygLacFYoUegDoEphwVanYOWvJmJ3xO43PJmRkK1ITPDCY7klLW4E6FJfoyAnpe0OvAkdmdqYkb5EqJImA10nK3ZfJ6oQpskemBdRTEgCEG2ESJIO4HK1oj/b8ITFO8pypsUAyCWKI4jRy1ALKAEqgOKVorJV+6LEEj+te2pxLb58GP+y4CE5IKEhoGEvLMBwrAAOTOJMbMYsZbiQgbzYkUZPSSfcbUdgvFNYquzRf71kY8ukEdgF14ogGEfxQErEfxekcJfkfEYSLJPRZUfPHu0ZQEZVx+Mku5WKlkv0cFUMd8JRunJquhZJtoGmOaoACFMXea545Gohp8rGJVbHrUWIrJPBWIaXlHMW2WjqQV4r2ho0/LkAvUIq8kNAhBCMil/NnpurXIuTUZgQ5qHYebggxqt9ZrJCFqJbdat8rcpqVrahkHNq2Idq9rvwDqcwg3EBRYTTdRPqN1p9ClWI8MQ39XoiZNvrkFbVvV7VC7IBjZQo2mkzsaGLiaJH3ilGQrPLAaqgqBJ0JwO6sISpmBuNIFRodJkncjAwQYbHfBkrHXYrjyMnebEZhgD0u3gnrRUI/pkMyQmBMlpBYQ0riYPTPBh25rv13EG6wUwk6QV6ugawvJHXdceoX5pyNx3sHJHbygR0V6KwBn92z5ClJ2BhknHiDdlKMnaJtqLIogcHs2GnuAip35oi02NqSjsJiEjs1rIO3GMEGEC1MQu6+32AhM32P3T3Dc+MFMkRutiFMgkBjzpqso0HJaaqyPe4PXKPiEm5FF01aPcB9hg3IOmOWPEBdqhx9rDr2Pag43V8E2vr0QEx/xXgpArR3oAsYESpPs9NTgpmRwc9UzP2nW+gXWEO070Jn2whZZ5Yf2L2dK8nM8GnGQEYEMH1yweUHBTHzGNXz3xgiWYoZOcYIDZgyQWWmY6XeNSQ5hxWvGlHDWKrTrEYVO+2UxGoR1Yq3KuSDbOW36AW4sv6gSktYphnYbgWMswXgGvPIWCsEDYXzQaTzj+YKsxXK3JWlGZXVG5WFWg9JzSLqXxWmWCX5WiWFHmukiMXVG9WOWhGRGqW8XOvmqGWmqlH1GOWtH1dpLNckUDHv3FKal4W7PPNUXhvxvsWVWpVtYUMci6K1FNWiaGrGXmL4qCwHG8QHp1MWBeqlUwGR0oaAtkqmFNxXmREAQkjrXat6ikCKxWIJ5uJ2RHsCx4mFnbncYcrLmBgKnMwbmd5iQ6hMxCVogUgUxmAIYdygxaVLCeA8yMPL2nm83S6HRkNFoy7FU+BknQmJ4Sn6Bn6CFDnZEjj9u1OYv12VJ2rCr9CCxyiOhzviO5qzpeExrfrJrBQhe77Frdbz3C9VvS2Romg54lw8iAKr76io61JVN1MC2N86KrRenhQxR9w2bNONlx6dLJ712hNPuXolODF3lkNB5rHlBNj6iUhXVTNK1XmDxQS8jwelK34vvgbVSQ58ejP6g3p0tkAohuP0rbUSoNazF0HNaNr6iyfrLbV7a6R6fChEZkZkBzd3eslb4CJPgMwMnWb47LxfrdKXznGe2+AY/V2+wqBfLvwcru8AuT11fCntmHjvVyk2brXQeuhmfre1lMBLUZOARmf0B3gKlTcZUBpXvHJnJXIEBlBCVx597l37eoDq9Ow+B7LgF/OlnUbzBIsvn/jfm69/nf60hwSsugGIWIgoWCuqrL3Z+LvmR+qt71uT0OGOlDrpWxa7SNtWC5JUoVyKRjElw3/ebGURNIilABV5bVqN0kYnoIBfXclgN0a5DcQBRJcAaJUm6q5tGM3XRlrnm6B8jGNSYromnZLlcEilXAAXdTgyzotu0qAWPrFW5at/+QoPVrnWK6oAGQTIS+jJmqSn9vGIoMUE+08rxQFQWAavDKlV7ZVf8xeCsM6FxKuROkTIckP1B4xZ5IA4Ua0PXDnbuddB1WFuJe0KQzgHI3MHyjGm7JygZw5oTINMXXDhUMAN6M4JQFURQ0REhSdPmcAiZ8BzEj6GTi+jfSwJVU1rGQUM01Q+0DE84CgF3VcHpAZehrOAdEzmK3dsE93Rps0RnxWBisrZUQMSGoDEg2muyAIPnWKjI1Uhvaa4BTzhKJVgCTKHgqNQdCsQuATcS+HURQD5oHmhQDGtRwdDmRGiUMXyE5HqAOtaKTYdoVLx7BdDDBowf6kbgGEYRhhQ4I9LrUpi4kChSRLui9ySwzI5hE1BjgJC4DOgKAAwAtgM1mABtxe+kMVMlTP7w9N40YB0KcJmoC9vW3QlYVfDWGjpHmBfH4XQALA/R7o+wyQWKEuoD83mnMKYmQWGpcBaIsIoOiOgcpFpuSXwgaksNoihRMgFlQYWEFyahCrOxUCqh+lVRfC4OwtJYT0NWG4h1hAzWDGSGcJjD3eEwvUJdWN6xRdQNI2oFx1XZRsMA9I/4X0KmDLhoI2NJvo+xBjmQteLMXusDVKrYiyCD8ATofkTalAlhotHblSOrovBz86AIJrbmQ4SgJO/QkaFrXnj204uv7LNrh25q5txMBdc3nlEt6ujp6ZtFoUNFvo41uQI6NDlaEKS2hykI6T7gDCNa+UrUzwKoLElgZAY8OFWGTNqO8CR10iIMOOtDDeoyYdewNFRlp3UBMZpAmdLavAwFqyByOutdNm0yfpoBSYI0VUdPDKBdAiEqlAZpsMSK60SosGWus4X7ou5B6WqBgXyCYFChd66ORgOwDkgmtdutxPIrEN9wVVlB0QgsH+B0wA1M+ZMYRHgmYIoxouWYQhtRAv4/Er+aXT+n8x/oXigWADUFs/xAZ5dwGkAKAcVwiJldxW44z4ji0IZoCq2J6P8aAJIC9coAUApoXgjmy0AaG4LYdB0PmpdZRxdAL8aenf5yoCY2CCCaVwWwwSmY99ZaghM/HNVIBZxcCSV3gHQlh0Dw9NARIq5ETUJOQ0rJBOgk5dg84hQXkjkQkSs6JoEkicEMYlYTKsOEq+gAH4OJhE6tvRNInvjsJLEgaqJJomMDuJL43iehP4nkShJtI4ogpLHFKSwJfEzCepJYnhtY+RAEUWJNokSSeJaEkrAZKgkyScsGo+Nt+DTHmTFJEk5XP10pa4CyUfRDQnQHUDEhHYvkoOHHWJATdlcU3KStZz5YdEFKNEUVN+3iHRFgp/kw8BAMRbWNJU0qSquaE3a8ZWIAAEg+AcE9mHiL3B0zYgrBHqGYk1LuFVGFUXAjaRQNEGcIs9EoxUhTmVIYlXgXa7bXjOoQR5CZWIHU0qTbADT3M2IHAaeAmERBHcUpoUigPtgGl8ArGcnS+liUKkjT9mnWPEGTCHBEjyQYSOKvWialIYBxPxC4jmOr5aotpXU4/pqymlXA1sc0oOiFICkUAOAvPSokjQwBLT12LA2vK7R2bIZWIF4BgIiCKl4gSp20yAI7EgAAAmf1CW3HBAxXotYd2vO2ahkxQMR3P8J0CaCZI3CQ4ShO3nKmWEwpx1AwHqmyFHF/APgByIoNYFYAoGYI30au0LBXA+0pQazjf26w7lvy2PfsnmTkwwCEMYoQ8Slm8aHYHI9QTnmxA0Dast8ZOCNkfmYo1UFZBJZNqUXpSt98kQEjNt2VooYjoij0maS9P6JvTDwlsL1nQD2walPAjM2vEODUzYzkMGZRKG7gzJfl0KuZTCmTiQQ3CwANs2gJSR+lapcZyMKUPaBTBGRiZDhdPAEVnADBjUvGBWvXxZ5dDppz0+qvNPemWwqJtAO2RMyZkWgogX0eQCzIAyzEhxQ9JYiPWQhj1BYiYHDOsN8mvAFphrEsMfVvSlzbRpWMUFAwrCihJI84rPKeIS7X9owgJO/jeIf7/0QW/AbLi/w7D5coA61Z1rxmkmbSoZnUm2FwCqlShzybEURldlzmHggpr01KWFOxYIF156nXjB0BqbtAQOX2NiLdL3mQAD5zAI+ZnKemzSc5l8haftga64sfJgC96RfItlXybC2LAnMNJ3mjSnkkMjANDI8Q/zTZ2c2ImfOJDAKLyg3MBVAoWmQK/JC0zAWvLRjHlSoT8taXZPgUoLd5TyeGRoC/noKs5/8rBeAqtl2Qfs/tS7j9FFLRwOADEREJ9NnAdAqi+NX6bguPn4LrS2CigMQstnXynS+ON+Qgu2lcAwZEM9+WEDhmIzWFf882SQrzncLeFsYfhR6EEXCLRFFRCRf2CkXICxG8ixRdArIWQA75lCx+aQGfmgdaFOirgAAAYf5EczmQTJjlgA45pMn8ZwxcVEL5F6UuBf4sgDILUFNsYJfVTxlRzCZscjSPHNkzRKgBsSiBfEsooeTsBXk0BXIs4WBSSlOeNlho3i7csdGMUygcKnilftA+SU3pMGF4z3SKoACwhe9MnG5g505ueQCxHOEyc/E47Y2ZYIt7LFrqCSPAJiBcrMYsw5iO7kh1WgwhY82nULDuH2DQB0gZsGysTykyJRfJvNBaYJHyEAFRkHkREJcqAX0p8AvNYICCH2C4AUIiIDQL8v2xWNK5YUOKDQCHA/44Yfnc0AECzT7s6gL1EBrIKKBo90IMeZwZAFSEFg6BR0ctsdzG7MCU2IS/GdHKJm5LSZOVN9oXSma2idx/gk4rbESA5pGI6Q8FRDUcjYZpgcgl4oxV4HfjcmVKjmDc1OA6Q7MsHWoABWGroA6V2aXNFGJiTkZigFASMF3BHCZ0Dp2KzJWEuJUkyE5pI8WVNQlEbRQZOYVbD6Hchb4DQ34FyKQC1mgZa03IDNJKoZUGCja2CE2rTRr6dsbhgNRKNRMzT0rc0qqglVkvCWRKE5beA9AWzDQbofVDq/1ajxu6JQ3iyEr4o3FUqXUZMFYduNDB/xpyPVI6MkJGp1GDMYoXdPEHcmCRHKTlAKstIjGkSbNc1fSvlSqpbrREjuis8+AavFW+qpVNAITMyqxgU0moskLIl6uiKJqiJLAtdF9QlVZpHVe0DAPKo+B6hixh0zoCcKMDVy5Iw4n2nXOvSYAREgsOFeWGVTNrulMgHJGIrM56gvIf1PmC5D8BdrHV1rdJv4GoCKQVoqlfQqJkOXHLTl3o4CePPPGgkb+39VLqCVvELzMsQk0Bvlw8A7hdktdEEH8QvHAaUuiXMEvPKf4UTcur/FSi0hBEW4mwZS/it5KqWDLz58SogRFJIHTdopejWKYK1ojD0Ca0AIOlcqGWGsrc+yGVIyEhBnh1YCQUIF6M95Xr1h6a3ulnFZaAY2IISBMMMoPbS1iqstEqKcXNDYq21xXZVvCCyllUhpjo29hCt3DejwYioFwFQA6LpNReSVAoWpu5VB5CkdueoFTE7hgYrK+wUoF4jtrkBMGbTGOtzHebN11hOaqFduGkhE8/1umvmtcqdFO0FN0kCBIKGmBxpgtZ1EaNipMHODRRGQlMojVODt0k+2w76M1KvQcQ8Qi9KtGspPg5hsxrmbutZRvhJlwwPActCQBbELNCkpwbwF4n1B8CpNaqyORqpyVar8lpoftZjQKayJ81tq3AH9mDG4Bgc06v1TQB82zA/Nyqq0IsFUQkBVml0mrQ+tzQs8Oqo4bNL5R9DHhVI6AI7BQsB7nCoObEK7XBPGqOzwikE9IS5uupWBmtrW0NS9lWkvyo8GZSbbjRm1Gr2A82vbbQmRrNid4CzMMRgGMw3pH29mKDBUxk6Uj16CKMLZJgi3XUXJ0WxTLFt7nlzlmByUXr0IBpbMEAKQXSmIn7XfcXoj3GGmHISE6VBxm6hYh0rtaoYG5GGO3DfV8jKIn1ngvdZXRpKejbKngNoPYLCa+Qakz6wpODrHnxdANPzKeclxnlga55mXQBlhtyw4bnxlDbmjxs+B/qfFr8wSSxJkyMNYcTONiCxv6JsbDwji0+dUoUUUb+cqi5LcZoQyZIGxncAAFL2AAAGkWpri7SQVFyCGLqF4wB7g9eVU4QbuQRG7r2pulFpVkTG1aHdxIK3c1ht2sQ7duATPcNrwUkaMczit3eMQJye7sal66PUHpD1Wgw9qVTuCZp90dEY99e/KhQxexJ6TdNCmhunpkwfaa1X2igNnsYC5789hep3QQuMXkaXderVRfL26xA6Ygs2+bcjU93RB29cerAcRsdhHFZS7ec6vvv5k+y/ydZBpZFJ5YyU6NrSmDQlM6WQ7F+9AQvqMrjDhyVZ3EQ6tAKV5YAmd0Rc7AftOrH7vZe5IWX7Oxb2cpNQM16hePdkfhime8NILZwYn3deZXRIfMFMGIJ5v9h2Z6vcTzyXhMptjP7vWNkBcBViwPO7YKEhDcR0SrrUvqSr9wuzxAKQWQKlBB1elpxUGWTJUK+b5jZAiSRYAfxMrMiQYjva4BqCiBzwP2rtL9H7wXDWVl1s2lmjtvZrZqKtGzWgBNrFAMLUDDfeWQHSwNYQhiGVTLU9sU0JkgVe0iXljOKjYqzDBqZhqgAiJtM++aBj8OITYBaGdDuzGGU0I8Pyg5oO4NOUdEToYy2yh0cZdGC+JGHXp2Bxw7nQiqUJHN0/NIO2GlCMgP6/+ouqpqO6OHx9zDGA/d3ERbIQYk9PysYNta1r7F6EHPpoAA1IagNquq8aBo/rgbMNUGp8TC18TK7wYKG9Xe0c113jF5D47DSvKIgV0bWVYY3EIKmApBCNZLPfb+PUL76cy4U8StRqim8tb9ArBbu0oD7ipVKBHSwulI1Z5B9KldKBq5ABAaC/SaKpmpXE4aQBkQOQdEKuOrrVCK6Mya1j+hsbbckDOUuZgkz4BUB2wWYPKcBIcCHr88WyNHNggzm+kBSAFJAX7iRN6knJgFE/AHRRPiqLDWAOesQlZl/Ur4/ouET7y8hoAagOSJFSiC7ofGv0Y/TJjUkhNsQCpI/Aitxw6CRoC+dTZkBswm2oxhazmgJRoCWAAB2L+TVPEjkJctaMpOnGkSgcn3CXJqHN1NVW2FYiv5LNEQAbpOHRwr2jAz0V/JAT6ARp40oJwNLirlpAMmWk9Qpr10BTpqDmJZ0+gyVaKJbLsvQF5HQwqaE0hk94BZr+EbTNm/Ac1SEXchEQ+csXkkCsWRnoz5wnhQSEagkBLFqIf5QTtcNpFap7AnbrPz6WeMlm7YlAPlHBqBilwTbc4Z+yEz5mJpsRs/JidRM5H5ZR3E019PgmOtGZsq2vJXM9MvkJkbwrJrbF1BtTaM1Ii6dVvUNZNshCkLoCiHcLczeWRs/ExMXeClaWgPPY2l0A2JH1BQwu0RHSecZU0qAbAeMdcNZ3dha5iU6oTjy2ZMg+NmAMIHfCmAJQsYjUk+Nd3R4hE/TB3LJjj2qpFNchc4YEkdG3SUBFVAIDky+vBPWslmD7dvtmd4yDzfISgdyOyGET3cvIh5ooJiavqjy4u7KPo0l1aNoaOj2uro3rsKweKt2W89k/M0SZgn4AHQQJWKclOPUf5J8slKsfUJuK9U5MkIUxMmlsLWzOZaRSGRWM5k1jpxyilAD4seRAwW81tbZojNrYEzU1OM6pYLlJnIoqZvbGJc4vWluL6x0pUsYpYGWMcRl04+iTKQ9rKNmxrlqQNo0UC9jVAg46xDktiAWNHlL4HJqtCwZvYlARBGhDvO8bXqYVb3r4Jk5Lhl1U9MuoUkDSbELUACKTZ7uOjuQWBhmSyEivzXAB2wEgYKpjM3qvFbN5NRDT3TvSGcPRaYNfj3Azqgxg0Dgfdj1ThzmImQvuFc72bZl/cA6JpgsmavqommHt1q/pVqZzIQANa0p01OKKeJ3mPKD5juMjSmF3rVODO7kgdNRpSaAjDkVouMhBl1VirYZpRgVZXOjILIl9DMgWs3RmqvqNVIazVQLmetQR01PCTG1rF+5HJlpogC5Ph17rkqkyCENuBUAnaOizOvKOkNup5FZY4Fy7gUIDO2nZ0iEUevU3ajyBIj2SbrRgEhEVXNWH1rUVOtIm8z3ogmJANMTQv2yhpHl3AOm0NYsr5egO7kMDqgzdp7VM6/1cjQZUEB1anlcEfOjYODtMdO4E9Sgltg5hUOnBzQL1viCU26A+egNM5g7i/bfFyGFme9V9aLDALyEIk2ZFexzW+b6VLqm9hN2FI+6hgsICyrRtHQq9IwV4JWLEwVhizEyjataA1qM9p4hQTPqDWxv5alq1Z9dQPXZ2HGHIN5tYjTVtxvmG02NU2nTSlTAkE+wiFI9FQeRWCt+3SM5T9YwsFDRd3oITTuA8xIWkSGalgEEKOksZUbfJmFDbr7qNH36/Rlo7f2vEa6MuIxyDSxOg3PijaQadeD3rLp962ICVjuFLZzIy2g662DalwFJsdwAAPpAAnvQxdspaNW+QbmY7xNwv0+rC2iIDT7DLklni9ZYvoL64F/d9eIPcsLD3+io94WuPYcLrxp7s9nMLtlRDr2fUW9iyzvfWN72vgIEjIC9i3lTbGbq2dfRrDwCc2O9TptnJTepuCDi9lS1+5YSkseR6U9hfe+Nl31mXZFGOXnMNkwcaASA8M4CQiEv1bHr9s3OSi5baWMacOxRsDt2RzKBgR5Roi+HUeBq5Nmz2KzB75ep0sRzkvRQgOcmZg9KoTtEYkBCFK1+AQzR3TB5AD0DSPIATBClENiGJ4mCdJVZreNuGBsP5HzzaR3oFkdKXDr6LHFVfQzYuG+jeQMnTslIQvmulv6sukLaztoq3B+B7pm9TlhrJiE/o2EeZhrr9qnGFIyRdbZYeFMfauevRyd2aqh1NZQmI+65naIHTwVj1WzFNAqJach1etr23VZpUDml2YgJxulwNGlAQehQVui9lJDKhCIiOjK4biS0rEcea03EKpXsfxbuSMCT5k0ZV3oQQNpF4YxBqXmPjKLBXXo209rsdPUN9/Juz07GO66Jj1QKYz9BmNkQ5jBG1BzgJgcDZNHWObBxfuIEOWaNOx5yzrgY0P6jjWqTZyovOOcabcVxpEjcadxNXXIHJe2b7kKSK9orihLI+DAjw8zowdxjvA8aN3xV6i7hi8EdGpjXA8ihZ5qtawDMGdamZc6IN3zZleZMuiJ3UkvlQEB1FZNVdE/vkbPDUcqPwRTsuyQo/7dpqhyc7CbbZUx9BJL8GHGvR58y0KYBjCjVEBolYwYyGAsvhZ564XLqwFQwvpCHLwvganBG4fzzYmSFhMMhflzv0XuSuSyDMwkBLrtOulqIUA2fiudzMo86zEj9Z51gAtAuXHLgeIIjvuoiG+ADtj8CaqcTRNXzd+PDB6BKjFn1A3jiWx4GuCz8Adior5TXF5k6LBIQt0M2E+rbkZVs36D8FBcKRQ8YeVTcHqOa5g5hAejlYdlMV63mn2HhRlGFYyofVPVSSqku4rTLuON3Te3IMRSiHNERCm33MWFuYVVur0IX03sfoU/Zxv5Zy/FwBEt8BJNgH0bYubXhoXIY32ea+WcHP1P1ObDB0nNfWZ6LGGQ6Qcp66O6GnmmZ37DDNw1JRlNROg76SyrARuf4XdwF9ONNC581THQjhb5G3kSCayJVehSLkCgtV6xcLz8xG1HXMRvc60ITc3CL5C7mwEh58wRDqCePqjBHze7wpLmYrA1JSUcgl9O3mmY87w3LWwkIfwDX1V03xXQsWb2XVWvWnNd4i/XbaOAtunnR1u90fjKul3KyL+ApAF0AokdSD+QCUSQxe2bN8BgKjzwVvz35NBneXE2aVIKseaPPpVF1x9xfYmGzn18Orx+OqPkEyNL30e84dgsfqPCFTMruVoJjWByBZfAjkWLIgUJPbHr2afqZe+zsC3H9gny9LIKe9PXZZTwLN/IDlmCb0Q9CORFe6eUK25Rl6p/3IDlg52ns8hNj49KfQDHn8A9gTwk+fzP9E2fhERHQaOaUWULoRZ6EuGKUPury2Fa54X2u9skAInLI9+WQAqcCX3+WbOS+xfiEKlqM2l49AZf0zWXnL8cHy8IFjYf2rVxUUbeyRm30XpgjH1jmduOb0bJlP540AFEJ0DsYRRoGDmP3bEXQAAGR+fFPg32oKlAIxjenrkAGb8s4qW/jMHYcJuq6E09+hHYcePCRsc0ZEPmluxg5/sYofKU397K9CCgZtN9Kp3gdC2fxFHdgPjjOrkr7gEth4To4MGJ6ePxEfnU/z8lvgKxCm9Lv4jWECACO/hvMzq1djCquD+W/iv5qudMqwCwaKciNopRj90mF2ThHL6iUSHy960qgOnXpZzVGSGDmfsnHD5og0Kj+tVaTeAV81+kUqz4BTqQcCTgQ/BT4AJy44Z/O7Ww9oaBjDdoY+M6I/Ly4SPRimkM9w+dOxnj/ci8R710zOdwcz4jHhuDxLOiNaDkvaHEssIPcH+D+T1Rp2fbGb9+zwO/CSu+P706z+nX/sUuMp734dd5acgHofRhHGRGPC8+tYciXLCHD+IfGP4cKgxwXAUlLMrmA6gWEybq6BskLwTTpQ2ANTo+ezwEHgXHNQWLQ6P4TTLqWb3mxjLpdsQPQgfjyNo/NMmfSgEdEGWX4Gs5kpHMjzU1yv0dCgInjVK+hHXR+mOXDQv61Je+GDgr6wY4Unf9X9HPmqd1j2K4LfWH2OxtAXFZVJuifnVYnQtuGMsTbp0VknZvVJ7IDMxzJLB2TsIGiPGZzG2MDY1mQys5olPLkZTo7QUMuq5MrGmV5WzU7WIsQakJg+pIGG/O+Q7H05CL6TyIzoMYEekvir7S+b/KBKDOOHpeJ4eXTuAH3iOum3bq+fmPM7a+hfIsaCM5SuZZcMwdHOQcUODng73YhDhb7EO5AnNxkO9+tODzGpCFjAFs1xo7jhAofjNTSASMNmhB42WEnLn0XzuHL1UEZBw5d0l1IUhLMyNNw4QofDuCpQGtEPKqTQlconI6QBYDED5Og9JUANa/Di2668OFp9ZwYZrnT6vUDPoKpY2I6p4Do0ZZliC4Wl3OIAJ0F0F47OuiwCqC5EuFiMQwemIsGD/o1oO2YAYtEJDBVaxOsnSBEycrEAsQSRHmCVAfbNbSNa4KjfCpOGMlw4LwHkO6Y525yh+BLMpIq6bWcaOsSJOUAGJXxXS3+Ew7V0CutY7D+qdNH6sQ24N4DNgiALLZpW2QfxDVAswK/4l+MQAADqJAAIAHgJAJUAvAMQCxoJgGgJUC0QCTjDZ3oqSCG54gN4EaIXqoiG4E5BXdMIaIedDtdSs8R4sz5pcZ2nLLFmCutHzwAukGcKBsNVCO7liIwvBJrMxCOZCTGmiLMDwWS6vHyhipfGjBXA5QZUHVBtQVh7V2ovnXaK+s8ogGjGyASR7QBcvrAFi++HulzK+SARRbTOwRmgFa+wEE75YBwuDihAouWBHpXIEKLs4wo2mFqQvqCKLfqfIzUj8hqAGKACjYoBgCiFrQ6gAnjlAh3kdKBQKhN7jYIWKMiGnI9IGsABKDACkCSmASgIDwyz4EsA8haAPDLimPISkDwyKwOKZrA4pveACA94AwABKdAPDL3gASisAMAj4LQDwyzIeSGshXIRsBrAAgBsArAKwPDJLAj4I+D3gKQLQAbA4ps+D3g1oSkABK1obQBLAAgCkArAIxFKEkAj4OKZ6hAgFqEohyoXaEmhpoSsCyhASo+ACAr4LaGPgCodKEJYASvDKPgJAPqEbAtAI6F8hKwPQCAorITaG0AKwCkAChBoQwBKAKwK+D3gr4GsAMA94PeDimaAI+DwyASlyGiAEpksBihaACQBPg/oayHPg4YdKGPgKwBsDJh8MikD1hz4EqEkA0oRsDPgIoeaErA94CsAvgqgPDJOhwoWSDZhEAJAA1hAgPWAbAjYaaFrASYYOFoA7Yf2EKhSwEsDyhnIXWHShKQJGFrAKQLuF+h64VAAqAI4RGH3geYUOD3gawEsD6hawHQCbASwFaExh4pvDIGhIocKF8hawGgDShXYRuEBKMEc+D/haoT2HehmYQErARYEVOEbAGwGgDPgxYUOCJhj4KaEkAg4S1BwRL4ZKYrAASj2HCh4puKa4O+ofhE/hj4MWEuh54bg60Aj4BsAjhg4QIBrAA4eKYUR9IMOEXhGwOaEYROERaHPgqYW6FDh4phqEMADYd+FyhTYfDJqhSwPeDCRz4O7wYRyYSKG0A94Lg6PgeEQmG4RH4RqFmhKQEpGqhDABsD1g94GgA4Ra4WSEoh8MmsC0A04QIDcRuDtWEuhQ4BWG2hKwC6GqAXETpF8hT4K6EMR9EcJGNhDAPxHKgpoUoCyhIxB+Him/YY2huhw4fRGphXoS2GShKwCQBLAwkeyF6hQ4CkDKhPIUaHPg04c+BGhpEcmHmhlYaxHChFoWgDshzoT6HCRyYWgADhY4aBEBRpYf2FlhPocaHtRBIEqFLAPEQ2FChCkSkBrAsUZmHlhx4cRExhroYZFYRxEXmHPgGkEqE/hKxAErimsodOFrA+EcJEChXEWqE2hDAGsACRtAGsBERASqdESmKoWOFrAyodOHlhPES1CrALkYYAohEoYmE0RuoeKYVRAgCKE6RNURyESh1oSQDBRD4RpA3R1EQEqORxUc+Gfy1oRFHPg/ER0GGhASqsCFRMEfxEbAYkSQD4RaoWgBPgb4UsDChsUamHVhKgM+BkxBYUzGqhSYVNHzhP0bQCWhxESMSNo0ESxFbA6MQhHWhPER+FuhBIPNGuhpYZTGFRjaAwD4RhUTLGmhqgDRGqhwkQzFtgMkf2FNR7vOKachtAAICZhC4QSDyhMEaOHnhT0SKGDhwkaGEp01kesCeRkpryG2hXoSjFoASwGOGUxhoRKEMA9EUsCkRu4QpElRhoXhEkxxMUpFiRR0RaHuh7YbWFwxiYaBFFRrYSOGqAC0ejGbgm4K+AtQ0EXDEkAh0YKH8htYVWG7h/4a2H1gqgAaG/h2McJFphFoQIAYR8MioCIw+MduGbg9YSaEmRXEQxF4RZofqEBx0ESaFah2oRuGUhuANSGIAtIQFBzQ8eHw76AQAA -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=Lundalogik/lime-elements&utm_content=3518):

> ‼️ **IMPORTANT**
> Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai plan` to trigger planning for file edits and PR creation.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-04T09:26:53Z
body: Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3518/
author_association: NONE
user: login: LucyChyzhova
created_at: 2025-04-10T12:44:35Z
body: I think I tested everything what I could. Thanks for resolving my comments Kia. 🤗  Looks good now. But I'm not sure if I'm the right person to approve it. Tell me how we should proceed with this PR 😉
author_association: CONTRIBUTOR
user: login: Kiarokh
created_at: 2025-04-10T13:53:22Z
body: I think you are absolutely the right person to approve it! 

I just noticed that the tests are failing. I'm gonna push a new fixup. Other than that, I think we can merge this
author_association: CONTRIBUTOR
user: login: adrianschmidt
created_at: 2025-04-16T07:34:31Z
body: Ninja'd again 😆
author_association: CONTRIBUTOR
user: login: lime-opensource
created_at: 2025-04-16T07:35:50Z
body: :tada: This PR is included in version 38.7.2 :tada:

The release is available on:
- [npm package (@latest dist-tag)](https://www.npmjs.com/package/@limetech/lime-elements/v/38.7.2)
- [GitHub release](https://github.com/Lundalogik/lime-elements/releases/tag/v38.7.2)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR