@api-client/ui 0.5.23 → 0.5.25

package/build/src/md/select/internals/Select.styles.js

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);
+    --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);
+    --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);
+    --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);
+  }
+
+  .input {
+    anchor-name: --input;
+    cursor: default;
+  }
+
+  .menu {
+    position-anchor: --input;
+  }
+`;
+//# sourceMappingURL=Select.styles.js.map

package/build/src/md/select/internals/Select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    position: relative;\n    outline: none;\n    --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);\n  }\n\n  .input {\n    anchor-name: --input;\n    cursor: default;\n  }\n\n  .menu {\n    position-anchor: --input;\n  }\n`\n"]}

package/build/src/md/select/ui-option.d.ts

@@ -0,0 +1,12 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/Option.js';
+export declare class UiOptionElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-option': Element;
+    }
+}
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js';
+//# sourceMappingURL=ui-option.d.ts.map

package/build/src/md/select/ui-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-option.d.ts","sourceRoot":"","sources":["../../../../src/md/select/ui-option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAI3C,qBACa,eAAgB,SAAQ,OAAO;IAC1C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAuB;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAA;KACrB;CACF;AAED,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA"}

package/build/src/md/select/ui-option.js

@@ -0,0 +1,29 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/Option.js';
+import styles from './internals/Option.styles.js';
+import listStyles from '../list/internals/ListItem.styles.js';
+let UiOptionElement = (() => {
+    let _classDecorators = [customElement('ui-option')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiOptionElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiOptionElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles, listStyles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiOptionElement = _classThis;
+})();
+export { UiOptionElement };
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js';
+//# sourceMappingURL=ui-option.js.map

package/build/src/md/select/ui-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-option.js","sourceRoot":"","sources":["../../../../src/md/select/ui-option.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAC3C,OAAO,MAAM,MAAM,8BAA8B,CAAA;AACjD,OAAO,UAAU,MAAM,sCAAsC,CAAA;IAGhD,eAAe;4BAD3B,aAAa,CAAC,WAAW,CAAC;;;;sBACU,OAAO;+BAAf,SAAQ,WAAO;;;;YAA5C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;;YADvD,uDAAe;;;;;SAAf,eAAe;AAU5B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/Option.js'\nimport styles from './internals/Option.styles.js'\nimport listStyles from '../list/internals/ListItem.styles.js'\n\n@customElement('ui-option')\nexport class UiOptionElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles, listStyles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-option': Element\n  }\n}\n\nexport { ListItemImage, ListItemLines } from '../list/internals/ListItem.js'\n"]}

package/build/src/md/select/ui-select.d.ts

@@ -0,0 +1,12 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/Select.js';
+export declare class UiSelectElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-select': Element;
+    }
+}
+export type { UiSelectChangeEvent } from './internals/Select.js';
+//# sourceMappingURL=ui-select.d.ts.map

package/build/src/md/select/ui-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-select.d.ts","sourceRoot":"","sources":["../../../../src/md/select/ui-select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAG3C,qBACa,eAAgB,SAAQ,OAAO;IAC1C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAA;KACrB;CACF;AAED,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}

package/build/src/md/select/ui-select.js

@@ -0,0 +1,27 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/Select.js';
+import styles from './internals/Select.styles.js';
+let UiSelectElement = (() => {
+    let _classDecorators = [customElement('ui-select')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiSelectElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiSelectElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiSelectElement = _classThis;
+})();
+export { UiSelectElement };
+//# sourceMappingURL=ui-select.js.map

package/build/src/md/select/ui-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-select.js","sourceRoot":"","sources":["../../../../src/md/select/ui-select.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAC3C,OAAO,MAAM,MAAM,8BAA8B,CAAA;IAGpC,eAAe;4BAD3B,aAAa,CAAC,WAAW,CAAC;;;;sBACU,OAAO;+BAAf,SAAQ,WAAO;;;;YAA5C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAe;;;;;SAAf,eAAe","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/Select.js'\nimport styles from './internals/Select.styles.js'\n\n@customElement('ui-select')\nexport class UiSelectElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-select': Element\n  }\n}\n\nexport type { UiSelectChangeEvent } from './internals/Select.js'\n"]}

package/build/src/md/text-field/internals/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1C,OAAO,KAAK,MAAM,sBAAsB,CAAA;AAExC,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK;cACvB,WAAW,IAAI,cAAc;CAgEjD"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1C,OAAO,KAAK,MAAM,sBAAsB,CAAA;AAExC,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK;cACvB,WAAW,IAAI,cAAc;CAiEjD"}

package/build/src/md/text-field/internals/TextField.js

@@ -50,6 +50,7 @@ export default class TextField extends Input {
         ?multiple="${this.multiple}"
         spellcheck="${ifDefined(this.spellcheck)}"
         list="input-list"
+        tabindex="${ifDefined(this.tabIndex)}"
         @change=${this.retargetEvent}
         @input=${this.handleInput}
         @select=${this.retargetEvent}

package/build/src/md/text-field/internals/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextField.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { live } from 'lit/directives/live.js'\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js'\nimport Input from '../../input/Input.js'\n\nexport default class TextField extends Input {\n  protected override renderInput(): TemplateResult {\n    const placeholderValue = this.placeholder || undefined\n    const maxValue = this.max || undefined\n    const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined\n    const minValue = this.min || undefined\n    const patternValue = this.pattern || undefined\n    const roleValue = this.dataRole || undefined\n    const stepValue = this.step || undefined\n    const { disabled } = this\n\n    const style: StyleInfo = {}\n    if (this.textDirection) {\n      style.direction = this.textDirection\n    }\n\n    const ariaActiveDescendantValue = this.ariaActiveDescendant || undefined\n    const ariaAutoCompleteValue = this.ariaAutoComplete || undefined\n    const ariaControlsValue = this.ariaControls || undefined\n    const ariaDescribedByValue = this.getAriaDescribedBy() || undefined\n    const ariaExpandedValue = this.ariaExpanded || undefined\n    const ariaLabelValue = this.ariaLabel || this.label || undefined\n    const ariaLabelledByValue = this.ariaLabelledBy || undefined\n\n    return html`\n      <input\n        class=\"input\"\n        style=${styleMap(style)}\n        type=${this.effectiveType}\n        name=\"${ifDefined(this.name)}\"\n        .value=${live(this.getInputValue())}\n        max=${ifDefined(maxValue)}\n        maxlength=${ifDefined(maxLengthValue)}\n        min=${ifDefined(minValue)}\n        minlength=${ifDefined(this.minLength)}\n        pattern=${ifDefined(patternValue)}\n        placeholder=${ifDefined(placeholderValue)}\n        role=${ifDefined(roleValue as 'textbox')}\n        ?disabled=${disabled}\n        ?readonly=${this.readOnly}\n        ?required=${this.required}\n        step=${ifDefined(stepValue)}\n        autocomplete=\"${ifDefined(this.autocomplete)}\"\n        autocapitalize=\"${ifDefined(this.autocapitalize)}\"\n        inputmode=\"${ifDefined(this.inputMode)}\"\n        size=\"${ifDefined(this.size)}\"\n        accept=\"${ifDefined(this.accept)}\"\n        ?multiple=\"${this.multiple}\"\n        spellcheck=\"${ifDefined(this.spellcheck)}\"\n        list=\"input-list\"\n        @change=${this.retargetEvent}\n        @input=${this.handleInput}\n        @select=${this.retargetEvent}\n        @invalid=${this.invalidHandler}\n        aria-activedescendant=${ifDefined(ariaActiveDescendantValue)}\n        aria-autocomplete=${ifDefined(ariaAutoCompleteValue)}\n        aria-controls=${ifDefined(ariaControlsValue)}\n        aria-describedby=${ifDefined(ariaDescribedByValue)}\n        aria-expanded=${ifDefined(ariaExpandedValue)}\n        aria-invalid=${this.getError()}\n        aria-label=${ifDefined(ariaLabelValue)}\n        aria-labelledby=${ifDefined(ariaLabelledByValue)}\n      />\n    `\n  }\n}\n"]}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextField.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { live } from 'lit/directives/live.js'\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js'\nimport Input from '../../input/Input.js'\n\nexport default class TextField extends Input {\n  protected override renderInput(): TemplateResult {\n    const placeholderValue = this.placeholder || undefined\n    const maxValue = this.max || undefined\n    const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined\n    const minValue = this.min || undefined\n    const patternValue = this.pattern || undefined\n    const roleValue = this.dataRole || undefined\n    const stepValue = this.step || undefined\n    const { disabled } = this\n\n    const style: StyleInfo = {}\n    if (this.textDirection) {\n      style.direction = this.textDirection\n    }\n\n    const ariaActiveDescendantValue = this.ariaActiveDescendant || undefined\n    const ariaAutoCompleteValue = this.ariaAutoComplete || undefined\n    const ariaControlsValue = this.ariaControls || undefined\n    const ariaDescribedByValue = this.getAriaDescribedBy() || undefined\n    const ariaExpandedValue = this.ariaExpanded || undefined\n    const ariaLabelValue = this.ariaLabel || this.label || undefined\n    const ariaLabelledByValue = this.ariaLabelledBy || undefined\n\n    return html`\n      <input\n        class=\"input\"\n        style=${styleMap(style)}\n        type=${this.effectiveType}\n        name=\"${ifDefined(this.name)}\"\n        .value=${live(this.getInputValue())}\n        max=${ifDefined(maxValue)}\n        maxlength=${ifDefined(maxLengthValue)}\n        min=${ifDefined(minValue)}\n        minlength=${ifDefined(this.minLength)}\n        pattern=${ifDefined(patternValue)}\n        placeholder=${ifDefined(placeholderValue)}\n        role=${ifDefined(roleValue as 'textbox')}\n        ?disabled=${disabled}\n        ?readonly=${this.readOnly}\n        ?required=${this.required}\n        step=${ifDefined(stepValue)}\n        autocomplete=\"${ifDefined(this.autocomplete)}\"\n        autocapitalize=\"${ifDefined(this.autocapitalize)}\"\n        inputmode=\"${ifDefined(this.inputMode)}\"\n        size=\"${ifDefined(this.size)}\"\n        accept=\"${ifDefined(this.accept)}\"\n        ?multiple=\"${this.multiple}\"\n        spellcheck=\"${ifDefined(this.spellcheck)}\"\n        list=\"input-list\"\n        tabindex=\"${ifDefined(this.tabIndex)}\"\n        @change=${this.retargetEvent}\n        @input=${this.handleInput}\n        @select=${this.retargetEvent}\n        @invalid=${this.invalidHandler}\n        aria-activedescendant=${ifDefined(ariaActiveDescendantValue)}\n        aria-autocomplete=${ifDefined(ariaAutoCompleteValue)}\n        aria-controls=${ifDefined(ariaControlsValue)}\n        aria-describedby=${ifDefined(ariaDescribedByValue)}\n        aria-expanded=${ifDefined(ariaExpandedValue)}\n        aria-invalid=${this.getError()}\n        aria-label=${ifDefined(ariaLabelValue)}\n        aria-labelledby=${ifDefined(ariaLabelledByValue)}\n      />\n    `\n  }\n}\n"]}

package/demo/md/index.html

@@ -47,6 +47,8 @@
         <dd>A Material 3 listbox.</dd>
         <dt><a href="menu/index.html">menu</a></dt>
         <dd>A Material 3 menu.</dd>
+        <dt><a href="select/index.html">select</a></dt>
+        <dd>A Material 3 select.</dd>
         <dt><a href="inputs/switch.html">switch</a></dt>
         <dd>A Material 3 switch.</dd>
 

package/demo/md/inputs/input.ts

@@ -177,6 +177,10 @@ class ComponentDemoPage extends DemoPage {
             <span class="column-title title-medium">Filled</span>
             <span class="column-title title-medium">Outlined</span>
 
+            <span class="row-name title-small">Password</span>
+            <ui-filled-text-field label="Enter password" name="pwd-filled" type="password"></ui-filled-text-field>
+            <ui-outlined-text-field label="Enter password" name="pwd-outlined" type="password"></ui-outlined-text-field>
+
             <span class="row-name title-small">Color</span>
             <ui-filled-text-field label="Select a color" name="color-filled" type="color"></ui-filled-text-field>
             <ui-outlined-text-field label="Select a color" name="color-outlined" type="color"></ui-outlined-text-field>

package/demo/md/select/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>UI Select</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_drop_down,check" rel="stylesheet" />
+    <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+    <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/.tmp/demo/md/select/index.js"></script>
+  </body>
+</html>

package/demo/md/select/index.ts

@@ -0,0 +1,202 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import { reactive } from '../../../src/decorators/index.js'
+import '../../../src/md/select/ui-select.js'
+import '../../../src/md/select/ui-option.js'
+import '../../../src/md/button/ui-button.js'
+import '../../../src/md/icons/ui-icon.js'
+
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'UI Select'
+
+  @reactive() accessor basicSelected: string | undefined
+
+  @reactive() accessor iconSelected: string | undefined
+
+  @reactive() accessor supportingSelected: string | undefined
+
+  @reactive() accessor noIconSelected: string | undefined
+
+  @reactive() accessor programmaticSelected: string | undefined
+
+  contentTemplate(): TemplateResult {
+    return html`
+      <a href="../">Back</a>
+      <h1>UI Select</h1>
+      <p>A Material Design 3 select component that behaves like an outlined text field with dropdown.</p>
+
+      <section>
+        <h2>Basic Select</h2>
+        <p>Select a fruit from the list:</p>
+        <ui-select id="basic-select" @change="${this.handleBasicSelectChange}" label="Select a fruit">
+          <ui-option value="apple">Apple</ui-option>
+          <ui-option value="banana">Banana</ui-option>
+          <ui-option value="cherry">Cherry</ui-option>
+          <ui-option value="date">Date</ui-option>
+          <ui-option value="elderberry">Elderberry</ui-option>
+        </ui-select>
+        <p>Selected: <span id="basic-result">None</span></p>
+      </section>
+
+      <section>
+        <h2>Select with Icons</h2>
+        <p>Select a country with icons:</p>
+        <ui-select id="icon-select" @change="${this.handleIconSelectChange}" value="us" label="Select a country">
+          <ui-option value="us">
+            <ui-icon slot="start">🇺🇸</ui-icon>
+            United States
+          </ui-option>
+          <ui-option value="gb">
+            <ui-icon slot="start">🇬🇧</ui-icon>
+            United Kingdom
+          </ui-option>
+          <ui-option value="de">
+            <ui-icon slot="start">🇩🇪</ui-icon>
+            Germany
+          </ui-option>
+          <ui-option value="fr">
+            <ui-icon slot="start">🇫🇷</ui-icon>
+            France
+          </ui-option>
+          <ui-option value="jp">
+            <ui-icon slot="start">🇯🇵</ui-icon>
+            Japan
+          </ui-option>
+        </ui-select>
+        <p>Selected: <span id="icon-result">None</span></p>
+      </section>
+
+      <section>
+        <h2>Select with Supporting Text</h2>
+        <p>Select a user with additional information:</p>
+        <ui-select id="supporting-select" @change="${this.handleSupportingSelectChange}">
+          <ui-option value="alice" lines="two">
+            Alice Johnson
+            <span slot="supporting-text">alice@example.com</span>
+          </ui-option>
+          <ui-option value="bob" lines="two">
+            Bob Smith
+            <span slot="supporting-text">bob@example.com</span>
+          </ui-option>
+          <ui-option value="carol" lines="two">
+            Carol Davis
+            <span slot="supporting-text">carol@example.com</span>
+          </ui-option>
+          <ui-option value="dave" lines="two">
+            Dave Wilson
+            <span slot="supporting-text">dave@example.com</span>
+          </ui-option>
+        </ui-select>
+        <p>Selected: <span id="supporting-result">None</span></p>
+      </section>
+
+      <section>
+        <h2>Disabled Select</h2>
+        <p>This select is disabled:</p>
+        <ui-select id="disabled-select" disabled>
+          <ui-option value="option1">Option 1</ui-option>
+          <ui-option value="option2">Option 2</ui-option>
+          <ui-option value="option3">Option 3</ui-option>
+        </ui-select>
+      </section>
+
+      <section>
+        <h2>Select without Selection Icon</h2>
+        <p>Select without the check icon:</p>
+        <ui-select id="no-icon-select" @change="${this.handleNoIconSelectChange}">
+          <ui-option value="red">Red</ui-option>
+          <ui-option value="green">Green</ui-option>
+          <ui-option value="blue">Blue</ui-option>
+          <ui-option value="yellow">Yellow</ui-option>
+        </ui-select>
+        <p>Selected: <span id="no-icon-result">None</span></p>
+      </section>
+
+      <section>
+        <h2>Programmatic Control</h2>
+        <p>Control the select value programmatically:</p>
+        <ui-select id="programmatic-select" @change="${this.handleProgrammaticSelectChange}">
+          <ui-option value="one">One</ui-option>
+          <ui-option value="two">Two</ui-option>
+          <ui-option value="three">Three</ui-option>
+          <ui-option value="four">Four</ui-option>
+        </ui-select>
+        <p>Selected: <span id="programmatic-result">None</span></p>
+        <div class="button-group">
+          <ui-button @click="${this.setValueOne}">Set to "One"</ui-button>
+          <ui-button @click="${this.setValueTwo}">Set to "Two"</ui-button>
+          <ui-button @click="${this.clearValue}">Clear</ui-button>
+        </div>
+      </section>
+    `
+  }
+
+  handleBasicSelectChange(e: CustomEvent): void {
+    const { value } = e.detail
+    this.basicSelected = value
+    const resultElement = document.querySelector('#basic-result')
+    if (resultElement) {
+      resultElement.textContent = value || 'None'
+    }
+  }
+
+  handleIconSelectChange(e: CustomEvent): void {
+    const { value } = e.detail
+    this.iconSelected = value
+    const resultElement = document.querySelector('#icon-result')
+    if (resultElement) {
+      resultElement.textContent = value || 'None'
+    }
+  }
+
+  handleSupportingSelectChange(e: CustomEvent): void {
+    const { value } = e.detail
+    this.supportingSelected = value
+    const resultElement = document.querySelector('#supporting-result')
+    if (resultElement) {
+      resultElement.textContent = value || 'None'
+    }
+  }
+
+  handleNoIconSelectChange(e: CustomEvent): void {
+    const { value } = e.detail
+    this.noIconSelected = value
+    const resultElement = document.querySelector('#no-icon-result')
+    if (resultElement) {
+      resultElement.textContent = value || 'None'
+    }
+  }
+
+  handleProgrammaticSelectChange(e: CustomEvent): void {
+    const { value } = e.detail
+    this.programmaticSelected = value
+    const resultElement = document.querySelector('#programmatic-result')
+    if (resultElement) {
+      resultElement.textContent = value || 'None'
+    }
+  }
+
+  setValueOne(): void {
+    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
+    if (select) {
+      select.value = 'one'
+    }
+  }
+
+  setValueTwo(): void {
+    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
+    if (select) {
+      select.value = 'two'
+    }
+  }
+
+  clearValue(): void {
+    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
+    if (select) {
+      select.value = ''
+    }
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.23",
+  "version": "0.5.25",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/dropdown-list/internals/UiDropdownList.ts

@@ -368,9 +368,10 @@ export default class UiDropdownList extends LitElement {
   }
 
   protected activate(e: Event): void {
-    if (e.defaultPrevented) {
-      return
-    }
+    // if (e.defaultPrevented) {
+    //   We now cancel the event in the menu list
+    //   return
+    // }
     const path = e.composedPath()
     let item: HTMLElement | undefined
     while (!item) {

package/src/md/input/Input.ts

@@ -1,11 +1,11 @@
-import { html, nothing, PropertyValues, TemplateResult } from 'lit'
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
 import { property, queryAssignedElements, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { SupportedAutocapitalize, SupportedAutocomplete, SupportedInputTypes } from '../../types/input.js'
 import { ARIAAutoComplete, ARIAExpanded, ARIARole } from '../../types/role.js'
-import { isDisabled, setDisabled } from '../../lib/disabled.js'
 import { UiElement } from '../UiElement.js'
+import { isDisabled, setDisabled } from '../../lib/disabled.js'
 import '../icon-button/ui-icon-button.js'
 import '../icons/ui-icon.js'
 
@@ -16,6 +16,7 @@ const floatTypes = ['date', 'color', 'datetime-local', 'file', 'month', 'time',
  * @slot suffix - A slot in which to render suffixes of the input
  */
 export default abstract class Input extends UiElement {
+  static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
   #_userInteracted: boolean
 
   // static override shadowRootOptions: ShadowRootInit = {mode: 'open', delegatesFocus: true};
@@ -33,28 +34,20 @@ export default abstract class Input extends UiElement {
    */
   @property({ type: String, reflect: true }) accessor type: SupportedInputTypes
 
-  /**
-   * Disables the input.
-   * @attribute
-   */
   get disabled(): boolean {
     return isDisabled(this)
   }
 
+  /**
+   * When set, the input is a disabled state.
+   * @attribute
+   */
   @property({ reflect: true, type: Boolean })
   set disabled(value: boolean) {
     const old = isDisabled(this)
     setDisabled(this, value)
     this.requestUpdate('disabled', old)
     this._updateFormValue()
-    if (value) {
-      this.dataset.tabindex = this.getAttribute('tabindex') || '0'
-      this.removeAttribute('tabindex')
-    } else {
-      const index = this.dataset.tabindex || '0'
-      this.setAttribute('tabindex', index)
-      this.blur()
-    }
   }
 
   /**
@@ -433,8 +426,6 @@ export default abstract class Input extends UiElement {
    */
   #showPassword = false
 
-  protected removingTabindex = false
-
   get files(): FileList | null {
     return this.getNativeValue('files') as FileList | null
   }
@@ -750,34 +741,14 @@ export default abstract class Input extends UiElement {
       return
     }
     this.focused = true
-    this.removingTabindex = true
-    // Note, the input is automatically focused when form is being submitted and
-    // it won't pass validation. In this case the form will throw an error
-    // as the input is not focusable. In overall, this still works with forms and validation.
-    if (this.checkNativeValidity()) {
-      this.dataset.tabindex = this.getAttribute('tabindex') || '0'
-      this.removeAttribute('tabindex')
-    }
-    input.focus()
-    this.#_userInteracted = true
-    setTimeout(() => {
-      this.removingTabindex = false
-    }, 1)
   }
 
   protected handleBlur(): void {
-    if (this.matches(':focus-within') || this.removingTabindex) {
+    if (this.matches(':focus-within')) {
       // Changing focus to another child within the text field, like a button
       return
     }
     this.focused = false
-    const index = this.dataset.tabindex || '0'
-    delete this.dataset.tabindex
-    this.setAttribute('tabindex', index)
-  }
-
-  private checkNativeValidity(): boolean {
-    return this.input?.validity.valid ?? true
   }
 
   private checkValidityAndDispatch(): { valid: boolean; canceled: boolean } {

package/src/md/list/internals/List.ts

@@ -28,6 +28,8 @@ export interface UiListItemsChange {
  *                 The `event.detail` object contains the `item` and `index` properties.
  * @fires itemschange - Dispatched when the list items change, e.g. when the slot changes.
  *                The `event.detail` object contains the `items` property with the list of items.
+ * @fires highlightchange - Dispatched when the highlighted item changes.
+ *                The `event.detail` object contains the `items` property with the list of items.
  */
 export default class UiList extends LitElement {
   /**
@@ -210,7 +212,7 @@ export default class UiList extends LitElement {
     }
     this.removeAttribute('tabindex')
     item.activate()
-    item.scrollIntoView({ block: 'end', inline: 'nearest' })
+    item.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
   }
 
   handleKeydown(event: KeyboardEvent): void {
@@ -311,15 +313,21 @@ export default class UiList extends LitElement {
     this.activateFromEvent(event)
   }
 
-  protected highlightItem(item?: UiListItem | null): void {
+  highlightItem(item?: UiListItem | null): void {
+    if (this.highlightListItem === item) {
+      return
+    }
     if (this.highlightListItem) {
       this.highlightListItem.classList.remove('highlight')
     }
     this.highlightListItem = item || null
     if (this.highlightListItem) {
       this.highlightListItem.classList.add('highlight')
-      this.highlightListItem.scrollIntoView({ block: 'end', inline: 'nearest' })
+      this.highlightListItem.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
     }
+    this.dispatchEvent(
+      new CustomEvent('highlightchange', { bubbles: false, composed: false, detail: { item: this.highlightListItem } })
+    )
   }
 
   /**
@@ -345,9 +353,8 @@ export default class UiList extends LitElement {
     this.manageSelection(item)
     item.activate()
     this.activeListItem = item
-    if (this.notifySelect(item)) {
-      e.preventDefault()
-    }
+    e.preventDefault()
+    this.notifySelect(item)
   }
 
   /**