@api-client/ui 0.5.24 → 0.5.26

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/elements/index.html

@@ -33,25 +33,28 @@
 
         <dt><a href="currency/index.html">Currency picker</a></dt>
         <dd>A component for selecting currencies with chips display.</dd>
-        
+
         <dt><a href="environment/index.html">Environment</a></dt>
         <dd>The environment elements library.</dd>
 
         <dt><a href="har/index.html">HAR utilities</a></dt>
         <dd>Elements related to processing and visualizing HAR data.</dd>
-        
+
         <dt><a href="highlight/index.html">Highlight</a></dt>
         <dd>The syntax highlighting library.</dd>
-        
+
         <dt><a href="http/index.html">HTTP</a></dt>
         <dd>The HTTP UI library.</dd>
-        
+
         <dt><a href="http-client/index.html">HTTP Client</a></dt>
         <dd>The HTTP Client UI library.</dd>
 
         <dt><a href="mention-textarea/index.html">Mention Textarea</a></dt>
         <dd>The mention-textarea component.</dd>
 
+        <dt><a href="navigation/navigation-item.html">Navigation Item</a></dt>
+        <dd>The navigation-item component.</dd>
+
         <dt><a href="icons/index.html">Icons</a></dt>
         <dd>The icons library.</dd>
 

package/demo/elements/navigation/navigation-item.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Navigation item Demo</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" 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" />
+  <link href="../../page.css" rel="stylesheet" type="text/css" />
+  <style>
+    .nav-rail,
+    .nav-bar {
+      padding: 12px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 12px;
+      width: fit-content;
+    }
+
+    .nav-rail {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .nav-bar {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+    }
+
+    .demo-row {
+      gap: 16px;
+    }
+  </style>
+</head>
+<body data-gr-ext-disabled="next">
+  <div id="app"></div>
+  <script type="module" src="/.tmp/demo/elements/navigation/navigation-item.js"></script>
+</body>
+</html>

package/demo/elements/navigation/navigation-item.ts

@@ -0,0 +1,112 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import { reactive } from '../../../src/decorators/index.js'
+
+import '../../../src/elements/navigation/ui-navigation-item.js'
+import '../../../src/md/icons/ui-icon.js'
+import '../../../src/md/checkbox/ui-checkbox.js'
+
+class ComponentDemoPage extends DemoPage {
+  @reactive()
+  protected accessor selected = false
+
+  @reactive()
+  protected accessor disabled = false
+
+  @reactive()
+  protected accessor iconOnly = false
+
+  @reactive()
+  protected accessor withIcon = true
+
+  constructor() {
+    super()
+    this.componentName = '<ui-navigation-item>'
+  }
+
+  override contentTemplate(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h3>Interactive demo</h3>
+        <div class="demo-row">
+          <div class="nav-rail">
+            <ui-navigation-item ?selected="${this.selected}" ?disabled="${this.disabled}" ?iconOnly="${this.iconOnly}">
+              ${this.withIcon ? html`<ui-icon slot="icon">inbox</ui-icon>` : ''} ${this.iconOnly ? '' : 'Inbox'}
+            </ui-navigation-item>
+          </div>
+        </div>
+        <div class="demo-row">
+          <ui-checkbox
+            id="selected"
+            name="selected"
+            @change="${this._toggleBooleanOption}"
+            .checked=${this.selected}
+          ></ui-checkbox>
+          <label for="selected">Selected</label>
+          <ui-checkbox
+            id="disabled"
+            name="disabled"
+            @change="${this._toggleBooleanOption}"
+            .checked=${this.disabled}
+          ></ui-checkbox>
+          <label for="disabled">Disabled</label>
+          <ui-checkbox
+            id="iconOnly"
+            name="iconOnly"
+            @change="${this._toggleBooleanOption}"
+            .checked=${this.iconOnly}
+          ></ui-checkbox>
+          <label for="iconOnly">Icon only</label>
+          <ui-checkbox
+            id="withIcon"
+            name="withIcon"
+            @change="${this._toggleBooleanOption}"
+            .checked=${this.withIcon}
+          ></ui-checkbox>
+          <label for="withIcon">With icon</label>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Navigation Rail</h3>
+        <div class="demo-row">
+          <div class="nav-rail">
+            <ui-navigation-item selected>
+              <ui-icon slot="icon">inbox</ui-icon>
+              Inbox
+            </ui-navigation-item>
+            <ui-navigation-item>
+              <ui-icon slot="icon">star</ui-icon>
+              Starred
+            </ui-navigation-item>
+            <ui-navigation-item>
+              <ui-icon slot="icon">send</ui-icon>
+              Sent
+            </ui-navigation-item>
+            <ui-navigation-item disabled>
+              <ui-icon slot="icon">drafts</ui-icon>
+              Drafts
+            </ui-navigation-item>
+          </div>
+          <div class="nav-rail">
+            <ui-navigation-item iconOnly selected>
+              <ui-icon slot="icon">inbox</ui-icon>
+            </ui-navigation-item>
+            <ui-navigation-item iconOnly>
+              <ui-icon slot="icon">star</ui-icon>
+            </ui-navigation-item>
+            <ui-navigation-item iconOnly>
+              <ui-icon slot="icon">send</ui-icon>
+            </ui-navigation-item>
+            <ui-navigation-item iconOnly disabled>
+              <ui-icon slot="icon">drafts</ui-icon>
+            </ui-navigation-item>
+          </div>
+        </div>
+      </section>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()

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.24",
+  "version": "0.5.26",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/navigation/internals/AppNavigationElement.ts

@@ -1108,12 +1108,7 @@ export default class AppNavigation extends ApiElement {
           data-key="${key}"
           data-kind="${kind}"
         />
-        <ui-icon-button
-          @click="${this.handleNameCommit}"
-          aria-label="Confirm name change"
-          class="name-commit-button"
-          type="standard"
-        >
+        <ui-icon-button @click="${this.handleNameCommit}" aria-label="Confirm name change" class="name-commit-button">
           <ui-icon icon="check"></ui-icon>
         </ui-icon-button>
       </div>