@api-client/ui 0.5.26 → 0.5.28

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type UiOption from './Option.js'\nimport type { UiMenuElement } from '../../menu/ui-menu.js'\n\nimport '../../text-field/ui-outlined-text-field.js'\nimport '../../menu/ui-menu.js'\nimport '../../icons/ui-icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport interface UiSelectChangeEvent {\n  value: string | undefined\n  item: UiOption | null\n}\n\n/**\n * Material Design 3 Select component that behaves like an outlined text field with dropdown.\n *\n * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.\n *                 The `event.detail` object contains the `value` and `item` properties.\n * @fires open - Dispatched when the dropdown opens\n * @fires close - Dispatched when the dropdown closes\n */\nexport default class UiSelect extends LitElement {\n  static readonly formAssociated = true\n  #internals = this.attachInternals()\n\n  /**\n   * The value has a private member so that we can set the value without triggering\n   * the side effects.\n   */\n  #value: string | undefined\n\n  /**\n   * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.\n   * When set programmatically, it will update the selected option if a matching option exists.\n   *\n   * @example\n   * ```html\n   * <ui-select value=\"apple\">\n   *   <ui-option value=\"apple\">Apple</ui-option>\n   *   <ui-option value=\"banana\">Banana</ui-option>\n   * </ui-select>\n   * ```\n   */\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  @property({ type: String })\n  set value(newValue: string | undefined) {\n    const oldValue = this.#value\n    if (newValue === oldValue) return\n    this.#value = newValue\n    this.requestUpdate()\n  }\n\n  /**\n   * The name attribute for form submission. This value will be used as the key\n   * when the form is submitted.\n   *\n   * @example\n   * ```html\n   * <ui-select name=\"country\" value=\"us\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  /**\n   * The label text displayed in the select field. Provides accessible labeling\n   * and is shown as the floating label in the outlined text field.\n   *\n   * @example\n   * ```html\n   * <ui-select label=\"Select a country\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor label: string | undefined\n\n  /**\n   * Whether the select is required for form validation. When true, the select\n   * must have a value selected for the form to be valid.\n   *\n   * @default false\n   * @example\n   * ```html\n   * <ui-select required label=\"Required field\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor required = false\n\n  /**\n   * Whether the select is in an invalid state. This is typically set automatically\n   * during validation, but can be set manually to indicate validation errors.\n   *\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"Please select a valid option\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor invalid: boolean | undefined\n\n  /**\n   * The error message to display when the select is invalid. This text is shown\n   * below the select field when `invalid` is true.\n   *\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"This field is required\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor invalidText: string | undefined\n\n  /**\n   * Whether the select is disabled. When disabled, the select cannot be interacted\n   * with and will not receive focus or respond to user input.\n   *\n   * @default false\n   * @example\n   * ```html\n   * <ui-select disabled label=\"Disabled select\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Whether the dropdown menu is currently open. This property reflects the\n   * current state of the dropdown and can be set programmatically to open/close it.\n   *\n   * @default false\n   * @example\n   * ```javascript\n   * // Open the dropdown programmatically\n   * selectElement.open = true;\n   *\n   * // Close the dropdown\n   * selectElement.open = false;\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  @state() accessor selectedOption: UiOption | null = null\n  @state() accessor ariaActiveDescendant: string | undefined\n  @query('.menu') accessor menu!: UiMenuElement\n\n  /**\n   * Returns the currently selected option element. This provides access to the\n   * full `ui-option` element, not just its value.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * const selectedItem = select.selectedItem;\n   * if (selectedItem) {\n   *   console.log('Selected option:', selectedItem.textContent);\n   * }\n   * ```\n   */\n  get selectedItem(): UiOption | null {\n    return this.selectedOption\n  }\n\n  /**\n   * Returns the text content that should be displayed in the select field.\n   * This is the rendered value of the currently selected option.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * console.log('Display text:', select.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const item = this.selectedOption\n    return item ? item.renderValue : ''\n  }\n\n  /**\n   * Returns the form element that contains this select, if any.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get form(): HTMLFormElement | null {\n    return this.#internals.form\n  }\n\n  /**\n   * Returns the validity state of the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validity(): ValidityState {\n    return this.#internals.validity\n  }\n\n  /**\n   * Returns the validation message for the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validationMessage(): string {\n    return this.#internals.validationMessage\n  }\n\n  /**\n   * Returns whether the select element will be validated when the form is submitted.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get willValidate(): boolean {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * Checks the validity of the select element and returns true if valid.\n   * Part of the form-associated custom element API.\n   *\n   * @returns {boolean} True if the element is valid, false otherwise\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * if (!select.checkValidity()) {\n   *   console.log('Select is invalid:', select.validationMessage);\n   * }\n   * ```\n   */\n  checkValidity(): boolean {\n    return this.#internals.checkValidity()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('blur', this.handleBlur.bind(this))\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'combobox')\n    this.setAttribute('aria-haspopup', 'listbox')\n    this.setAttribute('aria-controls', 'menu')\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  /**\n   * Resets the select to its initial state. Called automatically when the parent\n   * form is reset. Part of the form-associated custom element API.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.formResetCallback(); // Clears the selection\n   * ```\n   */\n  formResetCallback(): void {\n    this.value = undefined\n  }\n\n  /**\n   * Restores the select's state from saved form data. Called automatically when\n   * the browser restores form state. Part of the form-associated custom element API.\n   *\n   * @param {string | null} state - The saved state to restore\n   */\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? undefined\n  }\n\n  /**\n   * Validates the select element and updates its validity state. This is called\n   * automatically during property changes, but can be called manually to trigger validation.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.validate();\n   * if (select.invalid) {\n   *   console.log('Validation failed:', select.invalidText);\n   * }\n   * ```\n   */\n  validate(): void {\n    let message = ''\n    if (this.required && !this.value) {\n      message = 'Please select an item.'\n      this.#internals.setValidity({ valueMissing: true }, message)\n    } else {\n      this.#internals.setValidity({})\n    }\n    this.invalid = !this.#internals.validity.valid\n    this.invalidText = message\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n    if (changedProperties.has('open')) {\n      this.handleOpenChange()\n    }\n    if (changedProperties.has('value')) {\n      this.setCurrentOption()\n      this.#internals.setFormValue(this.value ?? null)\n      this.validate()\n    }\n    if (changedProperties.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label)\n      } else {\n        this.removeAttribute('aria-label')\n      }\n    }\n  }\n\n  protected async setCurrentOption(): Promise<void> {\n    await this.updateComplete\n    if (this.value) {\n      const options = this.querySelectorAll<UiOption>('ui-option')\n      this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null\n    } else {\n      this.selectedOption = null\n    }\n  }\n\n  protected handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled || e.defaultPrevented) return\n    if (this.open) {\n      switch (e.key) {\n        case 'Tab': {\n          // If menu is open and Tab is pressed, close it and allow normal tab navigation\n          if (this.open) {\n            this.open = false\n          }\n          break\n        }\n        case 'Escape': {\n          if (this.open) {\n            e.preventDefault()\n            this.open = false\n            this.focus() // Return focus to the select element\n          }\n          break\n        }\n        case 'ArrowDown':\n          e.preventDefault()\n          this.menu.highlightNext()\n          return\n        case 'ArrowUp':\n          e.preventDefault()\n          this.menu.highlightPrevious()\n          return\n        case 'Home':\n          e.preventDefault()\n          this.menu.highlightFirst()\n          return\n        case 'End':\n          e.preventDefault()\n          this.menu.highlightLast()\n          return\n        case 'Enter':\n        case ' ':\n          if (this.menu.highlightListItem) {\n            e.preventDefault()\n            this.menu.notifySelect(this.menu.highlightListItem as UiOption)\n          }\n          return\n      }\n    } else {\n      switch (e.key) {\n        case 'Enter':\n        case ' ': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          break\n        }\n        case 'ArrowDown':\n        case 'ArrowUp': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          // If menu is open, let the menu handle arrow keys\n          break\n        }\n      }\n    }\n  }\n\n  protected handleBlur(e: FocusEvent): void {\n    if (this.disabled) return\n\n    // Check if focus is moving to the menu or one of its children\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    if (relatedTarget && this.contains(relatedTarget)) {\n      // Focus is moving to the menu, keep it open\n      return\n    }\n\n    // Close the menu when focus leaves the component\n    this.open = false\n  }\n\n  protected handleClick(e: Event): void {\n    if (this.disabled || e.defaultPrevented) return\n    e.preventDefault()\n    e.stopPropagation()\n    this.open = true\n  }\n\n  protected async handleOpenChange(): Promise<void> {\n    const menu = this.menu\n    if (!menu) {\n      // The status can be set before the menu is rendered\n      return\n    }\n    this.setAttribute('aria-expanded', String(this.open))\n    if (this.open) {\n      menu.showPopover()\n      // menu.focus()\n      if (this.selectedOption) {\n        this.menu.highlightItem(this.selectedOption)\n      } else {\n        this.menu.highlightFirst()\n      }\n      this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n      this.focus()\n    } else {\n      menu.hidePopover()\n      this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n    }\n  }\n\n  handleSelect(e: CustomEvent<{ item: UiOption }>): void {\n    e.stopPropagation()\n    const item = e.detail.item\n    this.selectedOption = item\n    this.#value = item.value\n    this.open = false\n\n    // Dispatch change event\n    const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {\n      detail: { value: this.value, item: item },\n      bubbles: false,\n      composed: true,\n    })\n    this.dispatchEvent(changeEvent)\n    this.focus()\n  }\n\n  handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {\n    this.ariaActiveDescendant = e.detail.item?.id\n  }\n\n  handleMenuClose(): void {\n    this.open = false\n    this.focus()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'ui-select': true,\n      'open': this.open,\n      'disabled': this.disabled,\n    })\n    return html`${this.renderFocusRing()}\n      <div class=\"${classes}\" aria-activedescendant=${this.ariaActiveDescendant || ''}>\n        ${this.renderInput()} ${this.renderMenu()}\n      </div> `\n  }\n\n  protected renderInput(): TemplateResult {\n    return html`<ui-outlined-text-field\n      .name=${this.name}\n      .label=${this.label}\n      .value=${this.renderValue}\n      .disabled=${this.disabled}\n      .required=${this.required}\n      readonly\n      tabindex=\"-1\"\n      inert\n      aria-hidden=\"true\"\n      .invalid=${this.invalid}\n      .invalidText=${this.invalidText || ''}\n      class=\"input\"\n    >\n      <ui-icon slot=\"suffix\">arrow_drop_down</ui-icon>\n    </ui-outlined-text-field>`\n  }\n\n  protected renderMenu(): TemplateResult {\n    return html`<ui-menu\n      id=\"menu\"\n      class=\"menu\"\n      popover=\"auto\"\n      selector=\"ui-option\"\n      @select=\"${this.handleSelect}\"\n      @close=\"${this.handleMenuClose}\"\n      @highlightchange=\"${this.handleHighlightChange}\"\n    >\n      <slot></slot>\n    </ui-menu>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n  }\n}\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type UiOption from './Option.js'\nimport type { UiMenuElement } from '../../menu/ui-menu.js'\n\nimport '../../text-field/ui-outlined-text-field.js'\nimport '../../menu/ui-menu.js'\nimport '../../icons/ui-icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport interface UiSelectChangeEvent {\n  value: string | undefined\n  item: UiOption | null\n}\n\n/**\n * Material Design 3 Select component that behaves like an outlined text field with dropdown.\n *\n * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.\n *                 The `event.detail` object contains the `value` and `item` properties.\n * @fires open - Dispatched when the dropdown opens\n * @fires close - Dispatched when the dropdown closes\n */\nexport default class UiSelect extends LitElement {\n  static readonly formAssociated = true\n  #internals = this.attachInternals()\n\n  /**\n   * The value has a private member so that we can set the value without triggering\n   * the side effects.\n   */\n  #value: string | undefined\n\n  /**\n   * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.\n   * When set programmatically, it will update the selected option if a matching option exists.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select value=\"apple\">\n   *   <ui-option value=\"apple\">Apple</ui-option>\n   *   <ui-option value=\"banana\">Banana</ui-option>\n   * </ui-select>\n   * ```\n   */\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  @property({ type: String })\n  set value(newValue: string | undefined) {\n    const oldValue = this.#value\n    if (newValue === oldValue) return\n    this.#value = newValue\n    this.requestUpdate()\n  }\n\n  /**\n   * The name attribute for form submission. This value will be used as the key\n   * when the form is submitted.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select name=\"country\" value=\"us\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  /**\n   * The label text displayed in the select field. Provides accessible labeling\n   * and is shown as the floating label in the outlined text field.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select label=\"Select a country\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor label: string | undefined\n\n  /**\n   * Whether the select is required for form validation. When true, the select\n   * must have a value selected for the form to be valid.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select required label=\"Required field\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor required = false\n\n  /**\n   * Whether the select is in an invalid state. This is typically set automatically\n   * during validation, but can be set manually to indicate validation errors.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"Please select a valid option\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor invalid: boolean | undefined\n\n  /**\n   * The error message to display when the select is invalid. This text is shown\n   * below the select field when `invalid` is true.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"This field is required\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor invalidText: string | undefined\n\n  /**\n   * @attribute\n   */\n  @property({ type: String }) accessor supportingText: string | undefined\n\n  /**\n   * Whether the select is disabled. When disabled, the select cannot be interacted\n   * with and will not receive focus or respond to user input.\n   *\n   * @default false\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select disabled label=\"Disabled select\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Whether the dropdown menu is currently open. This property reflects the\n   * current state of the dropdown and can be set programmatically to open/close it.\n   *\n   * @default false\n   * @example\n   * ```javascript\n   * // Open the dropdown programmatically\n   * selectElement.open = true;\n   *\n   * // Close the dropdown\n   * selectElement.open = false;\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  @state() accessor selectedOption: UiOption | null = null\n  @state() accessor ariaActiveDescendant: string | undefined\n  @query('.menu') accessor menu!: UiMenuElement\n\n  /**\n   * Returns the currently selected option element. This provides access to the\n   * full `ui-option` element, not just its value.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * const selectedItem = select.selectedItem;\n   * if (selectedItem) {\n   *   console.log('Selected option:', selectedItem.textContent);\n   * }\n   * ```\n   */\n  get selectedItem(): UiOption | null {\n    return this.selectedOption\n  }\n\n  /**\n   * Returns the text content that should be displayed in the select field.\n   * This is the rendered value of the currently selected option.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * console.log('Display text:', select.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const item = this.selectedOption\n    return item ? item.renderValue : ''\n  }\n\n  /**\n   * Returns the form element that contains this select, if any.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get form(): HTMLFormElement | null {\n    return this.#internals.form\n  }\n\n  /**\n   * Returns the validity state of the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validity(): ValidityState {\n    return this.#internals.validity\n  }\n\n  /**\n   * Returns the validation message for the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validationMessage(): string {\n    return this.#internals.validationMessage\n  }\n\n  /**\n   * Returns whether the select element will be validated when the form is submitted.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get willValidate(): boolean {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * Checks the validity of the select element and returns true if valid.\n   * Part of the form-associated custom element API.\n   *\n   * @returns {boolean} True if the element is valid, false otherwise\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * if (!select.checkValidity()) {\n   *   console.log('Select is invalid:', select.validationMessage);\n   * }\n   * ```\n   */\n  checkValidity(): boolean {\n    return this.#internals.checkValidity()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('blur', this.handleBlur.bind(this))\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'combobox')\n    this.setAttribute('aria-haspopup', 'listbox')\n    this.setAttribute('aria-controls', 'menu')\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  /**\n   * Resets the select to its initial state. Called automatically when the parent\n   * form is reset. Part of the form-associated custom element API.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.formResetCallback(); // Clears the selection\n   * ```\n   */\n  formResetCallback(): void {\n    this.value = undefined\n  }\n\n  /**\n   * Restores the select's state from saved form data. Called automatically when\n   * the browser restores form state. Part of the form-associated custom element API.\n   *\n   * @param {string | null} state - The saved state to restore\n   */\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? undefined\n  }\n\n  /**\n   * Validates the select element and updates its validity state. This is called\n   * automatically during property changes, but can be called manually to trigger validation.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.validate();\n   * if (select.invalid) {\n   *   console.log('Validation failed:', select.invalidText);\n   * }\n   * ```\n   */\n  validate(): void {\n    let message = ''\n    if (this.required && !this.value) {\n      message = 'Please select an item.'\n      this.#internals.setValidity({ valueMissing: true }, message)\n    } else {\n      this.#internals.setValidity({})\n    }\n    this.invalid = !this.#internals.validity.valid\n    this.invalidText = message\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n    if (changedProperties.has('open')) {\n      this.handleOpenChange()\n    }\n    if (changedProperties.has('value')) {\n      this.setCurrentOption()\n      this.#internals.setFormValue(this.value ?? null)\n      this.validate()\n    }\n    if (changedProperties.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label)\n      } else {\n        this.removeAttribute('aria-label')\n      }\n    }\n  }\n\n  protected async setCurrentOption(): Promise<void> {\n    await this.updateComplete\n    if (this.value) {\n      const options = this.querySelectorAll<UiOption>('ui-option')\n      this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null\n    } else {\n      this.selectedOption = null\n    }\n  }\n\n  protected handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled || e.defaultPrevented) return\n    if (this.open) {\n      switch (e.key) {\n        case 'Tab': {\n          // If menu is open and Tab is pressed, close it and allow normal tab navigation\n          if (this.open) {\n            this.open = false\n          }\n          break\n        }\n        case 'Escape': {\n          if (this.open) {\n            e.preventDefault()\n            this.open = false\n            this.focus() // Return focus to the select element\n          }\n          break\n        }\n        case 'ArrowDown':\n          e.preventDefault()\n          this.menu.highlightNext()\n          return\n        case 'ArrowUp':\n          e.preventDefault()\n          this.menu.highlightPrevious()\n          return\n        case 'Home':\n          e.preventDefault()\n          this.menu.highlightFirst()\n          return\n        case 'End':\n          e.preventDefault()\n          this.menu.highlightLast()\n          return\n        case 'Enter':\n        case ' ':\n          if (this.menu.highlightListItem) {\n            e.preventDefault()\n            this.menu.notifySelect(this.menu.highlightListItem as UiOption)\n          }\n          return\n      }\n    } else {\n      switch (e.key) {\n        case 'Enter':\n        case ' ': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          break\n        }\n        case 'ArrowDown':\n        case 'ArrowUp': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          // If menu is open, let the menu handle arrow keys\n          break\n        }\n      }\n    }\n  }\n\n  protected handleBlur(e: FocusEvent): void {\n    if (this.disabled) return\n\n    // Check if focus is moving to the menu or one of its children\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    if (relatedTarget && this.contains(relatedTarget)) {\n      // Focus is moving to the menu, keep it open\n      return\n    }\n\n    // Close the menu when focus leaves the component\n    this.open = false\n  }\n\n  protected handleClick(e: Event): void {\n    if (this.disabled || e.defaultPrevented) return\n    e.preventDefault()\n    e.stopPropagation()\n    this.open = true\n  }\n\n  protected async handleOpenChange(): Promise<void> {\n    const menu = this.menu\n    if (!menu) {\n      // The status can be set before the menu is rendered\n      return\n    }\n    this.setAttribute('aria-expanded', String(this.open))\n    if (this.open) {\n      menu.showPopover()\n      // menu.focus()\n      if (this.selectedOption) {\n        this.menu.highlightItem(this.selectedOption)\n      } else {\n        this.menu.highlightFirst()\n      }\n      this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n      this.focus()\n    } else {\n      menu.hidePopover()\n      this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n    }\n  }\n\n  handleSelect(e: CustomEvent<{ item: UiOption }>): void {\n    e.stopPropagation()\n    const item = e.detail.item\n    this.selectedOption = item\n    this.#value = item.value\n    this.open = false\n\n    // Dispatch change event\n    const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {\n      detail: { value: this.value, item: item },\n      bubbles: false,\n      composed: true,\n    })\n    this.dispatchEvent(changeEvent)\n    this.focus()\n  }\n\n  handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {\n    this.ariaActiveDescendant = e.detail.item?.id\n  }\n\n  handleMenuClose(): void {\n    this.open = false\n    this.focus()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'ui-select': true,\n      'open': this.open,\n      'disabled': this.disabled,\n    })\n    return html`${this.renderFocusRing()}\n      <div class=\"${classes}\" aria-activedescendant=${this.ariaActiveDescendant || ''}>\n        ${this.renderInput()} ${this.renderMenu()}\n      </div> `\n  }\n\n  protected renderInput(): TemplateResult {\n    return html`<ui-outlined-text-field\n      .name=${this.name}\n      .label=${this.label}\n      .value=${this.renderValue}\n      .disabled=${this.disabled}\n      .required=${this.required}\n      readonly\n      tabindex=\"-1\"\n      inert\n      aria-hidden=\"true\"\n      .invalid=${this.invalid}\n      .invalidText=${this.invalidText || ''}\n      .supportingText=${this.supportingText || ''}\n      class=\"input\"\n    >\n      <ui-icon slot=\"suffix\">arrow_drop_down</ui-icon>\n    </ui-outlined-text-field>`\n  }\n\n  protected renderMenu(): TemplateResult {\n    return html`<ui-menu\n      id=\"menu\"\n      class=\"menu\"\n      popover=\"auto\"\n      selector=\"ui-option\"\n      @select=\"${this.handleSelect}\"\n      @close=\"${this.handleMenuClose}\"\n      @highlightchange=\"${this.handleHighlightChange}\"\n    >\n      <slot></slot>\n    </ui-menu>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n  }\n}\n"]}

package/demo/elements/currency/index.html

@@ -11,6 +11,7 @@
     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" />
@@ -67,7 +68,6 @@
     }
 
     .demo-controls currency-picker {
-      flex: 1;
       min-width: 200px;
     }
 
@@ -75,7 +75,7 @@
       .demo-controls {
         flex-direction: column;
       }
-      
+
       .demo-controls currency-picker {
         min-width: unset;
       }

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

@@ -36,6 +36,10 @@
     .demo-row {
       gap: 16px;
     }
+
+    .wide {
+      width: 360px;
+    }
   </style>
 </head>
 <body data-gr-ext-disabled="next">

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

@@ -102,6 +102,25 @@ class ComponentDemoPage extends DemoPage {
               <ui-icon slot="icon">drafts</ui-icon>
             </ui-navigation-item>
           </div>
+
+          <div class="nav-rail wide">
+            <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>
       </section>
     `

package/demo/md/list/list.ts

@@ -59,18 +59,18 @@ class ComponentDemoPage extends DemoPage {
 
         <h3 class="title-medium">List example</h3>
         <div class="demo-row">
-          <ui-list>
+          <ui-list selectActive>
             <ui-list-item image="avatar">
               <span slot="start" class="avatar">PUP</span>
               Pawel Uchida-Psztyc
               <ui-checkbox slot="end"></ui-checkbox>
             </ui-list-item>
-            <ui-list-item image="avatar" class="highlight">
+            <ui-list-item image="avatar">
               <span slot="start" class="avatar">PUP</span>
               Highlighted item
               <ui-checkbox slot="end"></ui-checkbox>
             </ui-list-item>
-            <ui-list-item image="avatar" class="select">
+            <ui-list-item image="avatar">
               <span slot="start" class="avatar">PUP</span>
               Selected item
               <ui-checkbox slot="end"></ui-checkbox>
@@ -188,6 +188,12 @@ class ComponentDemoPage extends DemoPage {
               @pointerdown="${EventUtils.cancelEvent}"
             ></ui-checkbox>
           </ui-list-item>
+          </ui-list-item>
+
+          <ui-list-item static>
+            2000,00
+            <span slot="end-text">PLN</span>
+          </ui-list-item>
         </div>
       </section>
     `

package/demo/md/progress/progress.ts

@@ -2,6 +2,7 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
 import '../../../src/md/progress/ui-progress.js'
+import '../../../src/md/progress/ui-circular-progress.js'
 import '../../../src/md/button/ui-button.js'
 
 class ComponentDemoPage extends DemoPage {
@@ -46,7 +47,7 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <a href="../">Back</a>
       ${this.imperativeTemplate()} ${this.indeterminateTemplate()} ${this.styledTemplate()} ${this.disabledTemplate()}
-      ${this.secondaryTemplate()}
+      ${this.secondaryTemplate()} ${this.circularProgressTemplate()} ${this.circularProgressIndeterminateTemplate()}
     `
   }
 
@@ -132,6 +133,28 @@ class ComponentDemoPage extends DemoPage {
       </section>
     `
   }
+
+  circularProgressTemplate(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Circular Progress</h2>
+        <div class="demo-row">
+          <ui-circular-progress value="40" max="100" aria-label="Circular progress"></ui-circular-progress>
+        </div>
+      </section>
+    `
+  }
+
+  circularProgressIndeterminateTemplate(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Circular Indeterminate Progress</h2>
+        <div class="demo-row">
+          <ui-circular-progress indeterminate aria-label="Circular indeterminate progress"></ui-circular-progress>
+        </div>
+      </section>
+    `
+  }
 }
 
 const instance = new ComponentDemoPage()

package/demo/md/select/index.ts

@@ -134,6 +134,7 @@ class ComponentDemoPage extends DemoPage {
   handleBasicSelectChange(e: CustomEvent): void {
     const { value } = e.detail
     this.basicSelected = value
+    console.log(`Basic select changed: ${value}`)
     const resultElement = document.querySelector('#basic-result')
     if (resultElement) {
       resultElement.textContent = value || 'None'
@@ -143,6 +144,7 @@ class ComponentDemoPage extends DemoPage {
   handleIconSelectChange(e: CustomEvent): void {
     const { value } = e.detail
     this.iconSelected = value
+    console.log(`Icon select changed: ${value}`)
     const resultElement = document.querySelector('#icon-result')
     if (resultElement) {
       resultElement.textContent = value || 'None'
@@ -152,6 +154,7 @@ class ComponentDemoPage extends DemoPage {
   handleSupportingSelectChange(e: CustomEvent): void {
     const { value } = e.detail
     this.supportingSelected = value
+    console.log(`Supporting select changed: ${value}`)
     const resultElement = document.querySelector('#supporting-result')
     if (resultElement) {
       resultElement.textContent = value || 'None'
@@ -161,6 +164,7 @@ class ComponentDemoPage extends DemoPage {
   handleNoIconSelectChange(e: CustomEvent): void {
     const { value } = e.detail
     this.noIconSelected = value
+    console.log(`No icon select changed: ${value}`)
     const resultElement = document.querySelector('#no-icon-result')
     if (resultElement) {
       resultElement.textContent = value || 'None'
@@ -170,6 +174,7 @@ class ComponentDemoPage extends DemoPage {
   handleProgrammaticSelectChange(e: CustomEvent): void {
     const { value } = e.detail
     this.programmaticSelected = value
+    console.log(`Programmatic select changed: ${value}`)
     const resultElement = document.querySelector('#programmatic-result')
     if (resultElement) {
       resultElement.textContent = value || 'None'

package/demo/md/tabs/tabs.ts

@@ -7,10 +7,6 @@ import { iconWrapper } from '../../../src/md/icons/Icons.js'
 import { reactive } from '../../../src/decorators/index.js'
 import { TabSelectionDetail } from '../../../src/md/tabs/internals/Tabs.js'
 
-import '@material/web/tabs/primary-tab.js'
-import '@material/web/tabs/secondary-tab.js'
-import '@material/web/tabs/tabs.js'
-
 const travelIcon = iconWrapper(
   svg`<path d="M8.5 22v-1.5l2-1.5v-5.5L2 16v-2l8.5-5V3.5q0-.625.438-1.062Q11.375 2 12 2t1.062.438q.438.437.438 1.062V9l8.5 5v2l-8.5-2.5V19l2 1.5V22L12 21Z"/>`
 )

package/package.json

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

package/src/elements/app-bar/internals/AppBar.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult, html, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
-import '@material/web/iconbutton/icon-button.js'
 import '../../../md/icons/ui-icon.js'
+import '../../../md/icon-button/ui-icon-button.js'
 
 export default class AppBar extends LitElement {
   /**
@@ -31,9 +31,9 @@ export default class AppBar extends LitElement {
       return nothing
     }
     return html`
-      <md-icon-button class="back-button">
+      <ui-icon-button class="back-button">
         <ui-icon icon="arrowBack"></ui-icon>
-      </md-icon-button>
+      </ui-icon-button>
     `
   }
 
@@ -43,9 +43,9 @@ export default class AppBar extends LitElement {
       return nothing
     }
     return html`
-      <md-icon-button class="menu-button">
+      <ui-icon-button class="menu-button">
         <ui-icon icon="menu"></ui-icon>
-      </md-icon-button>
+      </ui-icon-button>
     `
   }
 

package/src/elements/currency/internals/Picker.ts

@@ -1,11 +1,12 @@
 import { LitElement, html, type TemplateResult, type PropertyValues, nothing } from 'lit'
 import { property, state, query } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
+import type { UiSelectChangeEvent, UiSelectElement } from '../../../md/select/ui-select.js'
 
-import '@material/web/select/outlined-select.js'
-import '@material/web/select/select-option.js'
 import '../../../md/chip/ui-chip-set.js'
 import '../../../md/chip/ui-chip.js'
+import '../../../md/select/ui-select.js'
+import '../../../md/select/ui-option.js'
 
 /**
  * Represents a currency with all its display information.
@@ -184,8 +185,8 @@ export default class CurrencyPicker extends LitElement {
    * Reference to the Material Design outlined select element.
    * Used to manage the select's internal state and keep it synchronized with the component's selected property.
    */
-  @query('md-outlined-select')
-  private accessor selectElement!: HTMLElement & { value: string }
+  @query('ui-select')
+  private accessor selectElement!: UiSelectElement
 
   /**
    * Returns the form element that contains this component, if any.
@@ -525,9 +526,10 @@ export default class CurrencyPicker extends LitElement {
     }
   }
 
-  private handleCurrencySelect(event: Event) {
+  private handleCurrencySelect(event: CustomEvent<UiSelectChangeEvent>) {
+    event.stopPropagation()
     try {
-      const select = event.target as HTMLSelectElement
+      const select = event.target as UiSelectElement
       const selectedCode = select.value
 
       if (!selectedCode) return
@@ -626,7 +628,6 @@ export default class CurrencyPicker extends LitElement {
 
     // Update form value using ElementInternals
     this.updateFormValue()
-
     this.dispatchEvent(
       new CustomEvent('change', {
         detail: {
@@ -760,7 +761,7 @@ export default class CurrencyPicker extends LitElement {
 
     return html`
       <div class="currency-picker" role="group" aria-label="${ariaLabel}">
-        <md-outlined-select
+        <ui-select
           label="${this.label}"
           @change="${this.handleCurrencySelect}"
           menuPositioning="popover"
@@ -771,23 +772,23 @@ export default class CurrencyPicker extends LitElement {
           aria-describedby="${this.supportingText ? 'supporting-text' : ''}"
           aria-invalid="${hasError ? 'true' : 'false'}"
         >
-          <md-select-option value="">
-            <div slot="headline">Select a currency...</div>
-          </md-select-option>
+          <ui-option value="">
+            <div>Select a currency...</div>
+          </ui-option>
           ${repeat(
             this.selectableCurrencies,
             (currency) => currency.code,
             (currency) => html`
-              <md-select-option value="${currency.code}">
+              <ui-option value="${currency.code}">
                 <div slot="overline">${currency.country}</div>
                 <div slot="supporting-text">${currency.name}</div>
-                <div slot="trailing-supporting-text" class="currency-symbol">${currency.symbol}</div>
+                <div slot="end-text" class="currency-symbol">${currency.symbol}</div>
                 <div slot="start" class="flag">${currency.flag}</div>
-                <div slot="headline">${currency.code}</div>
-              </md-select-option>
+                <div>${currency.code}</div>
+              </ui-option>
             `
           )}
-        </md-outlined-select>
+        </ui-select>
         ${this.renderSelected()}${this.renderError()}
       </div>
     `

package/src/elements/data-table/DataTable.ts

@@ -7,10 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { dataAttr } from '../../directives/data-attr.js'
 import { LiveData } from '../../reactive/LiveData.js'
 
-import '@material/web/icon/icon.js'
-import '@material/web/menu/menu.js'
-import '@material/web/menu/menu-item.js'
 import '@material/web/focus/md-focus-ring.js'
+import '../../md/icons/ui-icon.js'
 
 /**
  * Options for rendering a table cell.
@@ -1025,7 +1023,7 @@ export abstract class DataTable<T extends object> extends LitElement {
       <md-focus-ring .inward="${this.overflow ? true : false}"></md-focus-ring>
       <div class="cell-content">
         ${content}
-        ${isSortable && sortIcon ? html`<md-icon class="sort-icon" role="presentation">${sortIcon}</md-icon>` : nothing}
+        ${isSortable && sortIcon ? html`<ui-icon class="sort-icon" role="presentation">${sortIcon}</ui-icon>` : nothing}
       </div>
     </th> `
   }

package/src/elements/file-system/internals/Breadcrumbs.ts

@@ -4,9 +4,8 @@ import { LiveData } from '../../../reactive/LiveData.js'
 import { type FileBreadcrumb } from '@api-client/core/models/store/File.js'
 import { FolderKind } from '@api-client/core/models/kinds.js'
 
-import '@material/web/iconbutton/icon-button.js'
-import '@material/web/icon/icon.js'
 import '@material/web/focus/md-focus-ring.js'
+import '../../../md/icons/ui-icon.js'
 
 /**
  * @fires navigate - Dispatched when a navigation item is activated.
@@ -141,6 +140,6 @@ export default class Breadcrumbs extends LitElement {
   }
 
   renderSeparator(): TemplateResult {
-    return html`<md-icon class="separator">chevron_right</md-icon>`
+    return html`<ui-icon class="separator">chevron_right</ui-icon>`
   }
 }

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

@@ -44,7 +44,7 @@ export default class NavigationItem extends UiElement {
     const { pressed = false } = this
     const containerClasses = classMap({
       'button': true,
-      'icon': this.hasIcon,
+      'with-icon': this.hasIcon,
       'pressed': pressed,
       'icon-only': this.iconOnly,
     })

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

@@ -1,6 +1,6 @@
-import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { html, LitElement, type PropertyValues, type TemplateResult } from 'lit'
 import { property, queryAssignedElements } from 'lit/decorators.js'
-import UiListItem from './ListItem.js'
+import type UiListItem from './ListItem.js'
 
 const NAVIGATION_KEYS = {
   ArrowDown: 'ArrowDown',
@@ -61,6 +61,7 @@ export default class UiList extends LitElement {
     this.selector = 'ui-list-item'
     this.addEventListener('keydown', this.handleKeydown.bind(this))
     this.addEventListener('click', this.handleClick.bind(this))
+    this.addEventListener('focus', this.handleFocusEvent.bind(this))
   }
 
   override connectedCallback(): void {
@@ -71,12 +72,7 @@ export default class UiList extends LitElement {
   }
 
   override focus(options?: FocusOptions): void {
-    const { activeListItem } = this
-    if (activeListItem) {
-      activeListItem.focus(options)
-      return
-    }
-    this.activateFirstItem()
+    this.handleFocus(options)
   }
 
   override firstUpdated(changedProperties: PropertyValues): void {
@@ -85,6 +81,21 @@ export default class UiList extends LitElement {
     this.updateItems()
   }
 
+  protected handleFocusEvent(event: FocusEvent): void {
+    if (event.target !== this) {
+      return
+    }
+    this.handleFocus()
+  }
+
+  protected handleFocus(options?: FocusOptions): void {
+    if (this.activeListItem) {
+      this.activeListItem.focus(options)
+    } else {
+      this.activateFirstItem()
+    }
+  }
+
   activateFirstItem(): void {
     this.activeListItem = this.getFirstItem()
     this.activeListItem?.activate()