@api-client/ui 0.5.26 → 0.5.28

package/src/md/progress/internals/UiProgress.ts

@@ -30,12 +30,6 @@ export default class UiProgress extends UiRange {
    */
   @property({ type: Number, converter: floatConverter }) accessor secondaryProgress: number | undefined
 
-  /**
-   * Use an indeterminate progress indicator.
-   * @attr
-   */
-  @property({ reflect: true, type: Boolean }) accessor indeterminate: boolean | undefined
-
   /**
    * @returns The ratio of the secondary progress.
    */
@@ -43,36 +37,13 @@ export default class UiProgress extends UiRange {
     return this.secondaryRatioInternal || 0
   }
 
-  override connectedCallback(): void {
-    super.connectedCallback()
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'progressbar')
-    }
-  }
-
   protected override willUpdate(cp: PropertyValues<this>): void {
     super.willUpdate(cp)
-    if (cp.has('secondaryProgress') || cp.has('indeterminate')) {
+    if (cp.has('secondaryProgress')) {
       this.rangeChanged()
     }
   }
 
-  protected override updated(cp: PropertyValues<this>): void {
-    if (cp.has('min')) {
-      this.setAttribute('aria-valuemin', String(this.min))
-    }
-    if (cp.has('max')) {
-      this.setAttribute('aria-valuemax', String(this.max))
-    }
-    if (cp.has('indeterminate') || cp.has('value')) {
-      if (this.indeterminate) {
-        this.removeAttribute('aria-valuenow')
-      } else {
-        this.setAttribute('aria-valuenow', String(this.value))
-      }
-    }
-  }
-
   protected override rangeChanged(): void {
     super.rangeChanged()
     const { secondaryProgress: sp } = this

package/src/md/progress/ui-circular-progress.ts

@@ -0,0 +1,15 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/CircularProgress.js'
+import styles from './internals/CircularProgress.styles.js'
+
+@customElement('ui-circular-progress')
+export class UiCircularProgressElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-circular-progress': UiCircularProgressElement
+  }
+}

package/src/md/select/internals/Option.styles.ts

@@ -1,139 +1,12 @@
 import { css } from 'lit'
 
 export default css`
-  :host {
-    display: block;
-    height: 56px;
-    outline: none;
-    cursor: default;
-    position: relative;
-
-    --md-focus-ring-shape-end-end: 0px;
-    --md-focus-ring-shape-end-start: 0px;
-    --md-focus-ring-shape-start-end: 0px;
-    --md-focus-ring-shape-start-start: 0px;
-
-    color: var(--md-sys-color-on-surface);
-  }
-
-  :host([disabled]) {
-    cursor: not-allowed;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  .surface {
-    height: inherit;
-    box-sizing: border-box;
-
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    padding: 8px 16px 8px 16px;
-    gap: 12px;
-  }
-
   .surface.selected {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
   }
 
-  .ripple {
-    z-index: 3;
-  }
-
-  .headline {
-    font-family: var(--md-sys-typescale-body-large-font);
-    font-weight: var(--md-sys-typescale-body-large-weight);
-    font-size: var(--md-sys-typescale-body-large-size);
-    letter-spacing: var(--md-sys-typescale-body-large-tracking);
-    line-height: var(--md-sys-typescale-body-large-height);
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    display: flex;
-    align-items: center;
-  }
-
-  .supporting-text {
-    color: var(--md-sys-color-on-surface-variant);
-
-    font-family: var(--md-sys-typescale-body-medium-font);
-    font-weight: var(--md-sys-typescale-body-medium-weight);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-    line-height: var(--md-sys-typescale-body-medium-height);
-
-    overflow: hidden;
-  }
-
-  .supporting-text ::slotted(*),
-  slot[name='end-text']::slotted(*) {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-  }
-
-  slot[name='end-text']::slotted(*) {
-    margin-right: 8px;
-    margin-left: 16px;
-  }
-
-  :host slot[name='end']::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-    margin-left: 16px;
-  }
-
-  :host slot[name='start']::slotted(*) {
-    display: block;
-    margin-right: 16px;
-  }
-
-  :host([image='icon']) slot[name='start']::slotted(*) {
-    width: 24px;
-    height: 24px;
-  }
-
-  :host([image='avatar']) slot[name='start']::slotted(*) {
-    width: 40px;
-    height: 40px;
-  }
-
-  :host([image='image']) slot[name='start']::slotted(*) {
-    width: 56px;
-    height: 56px;
-  }
-
-  :host([image='video']) slot[name='start']::slotted(*) {
-    width: 114px;
-    height: 64px;
-  }
-
-  .body {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .end {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
   .selection-icon {
     color: var(--md-sys-color-on-surface);
   }
-
-  :host(.highlight) .surface {
-    background-color: var(--md-sys-color-tertiary-container);
-    color: var(--md-sys-color-on-tertiary-container);
-  }
 `

package/src/md/select/internals/Option.ts

@@ -169,7 +169,7 @@ export default class UiOption extends UiListItem {
           item: this,
           value: this.value,
         },
-        bubbles: true,
+        bubbles: false,
         composed: true,
       })
     )
@@ -202,7 +202,7 @@ export default class UiOption extends UiListItem {
     return html`
       <div class="end">
         ${this.selected ? html`<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
-        <slot name="end" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
         <slot name="end-text" class="trailing-supporting-text"></slot>
       </div>
     `

package/src/md/select/internals/Select.ts

@@ -37,6 +37,7 @@ export default class UiSelect extends LitElement {
    * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.
    * When set programmatically, it will update the selected option if a matching option exists.
    *
+   * @attribute
    * @example
    * ```html
    * <ui-select value="apple">
@@ -61,6 +62,7 @@ export default class UiSelect extends LitElement {
    * The name attribute for form submission. This value will be used as the key
    * when the form is submitted.
    *
+   * @attribute
    * @example
    * ```html
    * <ui-select name="country" value="us">
@@ -74,6 +76,7 @@ export default class UiSelect extends LitElement {
    * The label text displayed in the select field. Provides accessible labeling
    * and is shown as the floating label in the outlined text field.
    *
+   * @attribute
    * @example
    * ```html
    * <ui-select label="Select a country">
@@ -87,7 +90,7 @@ export default class UiSelect extends LitElement {
    * Whether the select is required for form validation. When true, the select
    * must have a value selected for the form to be valid.
    *
-   * @default false
+   * @attribute
    * @example
    * ```html
    * <ui-select required label="Required field">
@@ -101,6 +104,7 @@ export default class UiSelect extends LitElement {
    * Whether the select is in an invalid state. This is typically set automatically
    * during validation, but can be set manually to indicate validation errors.
    *
+   * @attribute
    * @example
    * ```html
    * <ui-select invalid invalidText="Please select a valid option">
@@ -114,6 +118,7 @@ export default class UiSelect extends LitElement {
    * The error message to display when the select is invalid. This text is shown
    * below the select field when `invalid` is true.
    *
+   * @attribute
    * @example
    * ```html
    * <ui-select invalid invalidText="This field is required">
@@ -123,11 +128,17 @@ export default class UiSelect extends LitElement {
    */
   @property({ type: String }) accessor invalidText: string | undefined
 
+  /**
+   * @attribute
+   */
+  @property({ type: String }) accessor supportingText: string | undefined
+
   /**
    * Whether the select is disabled. When disabled, the select cannot be interacted
    * with and will not receive focus or respond to user input.
    *
    * @default false
+   * @attribute
    * @example
    * ```html
    * <ui-select disabled label="Disabled select">
@@ -508,6 +519,7 @@ export default class UiSelect extends LitElement {
       aria-hidden="true"
       .invalid=${this.invalid}
       .invalidText=${this.invalidText || ''}
+      .supportingText=${this.supportingText || ''}
       class="input"
     >
       <ui-icon slot="suffix">arrow_drop_down</ui-icon>

package/test/elements/currency/CurrencyPicker.accessibility.test.ts

@@ -51,7 +51,7 @@ describe('CurrencyPicker - Accessibility', () => {
       picker.clearSelection()
       await picker.updateComplete
 
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
       assert.equal(select?.getAttribute('aria-invalid'), 'true')
     })
 
@@ -59,7 +59,7 @@ describe('CurrencyPicker - Accessibility', () => {
       picker.supportingText = 'Choose your preferred currency'
       await picker.updateComplete
 
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
       assert.exists(select?.getAttribute('aria-describedby'))
     })
   })
@@ -140,7 +140,7 @@ describe('CurrencyPicker - Accessibility', () => {
     })
 
     it('should be focusable', async () => {
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       select.focus()
 
       // Check if the picker or its select element has focus
@@ -149,7 +149,7 @@ describe('CurrencyPicker - Accessibility', () => {
     })
 
     it('should support keyboard selection', async () => {
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       select.focus()
 
       // Simulate opening dropdown and selecting
@@ -165,7 +165,7 @@ describe('CurrencyPicker - Accessibility', () => {
         press: 'Enter',
       })
 
-      // Should have some interaction (exact behavior depends on md-outlined-select)
+      // Should have some interaction (exact behavior depends on ui-select)
       assert.exists(select)
     })
 
@@ -196,7 +196,7 @@ describe('CurrencyPicker - Accessibility', () => {
     })
 
     it('should have visible focus indicators', async () => {
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       select.focus()
 
       // Check that focus styles are applied (this may require checking computed styles)
@@ -208,7 +208,7 @@ describe('CurrencyPicker - Accessibility', () => {
       picker.selected = ['USD']
       await picker.updateComplete
 
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       select.focus()
 
       // Simulate adding another currency
@@ -229,11 +229,11 @@ describe('CurrencyPicker - Accessibility', () => {
 
     it('should render with proper contrast for text', async () => {
       // This test would ideally check computed styles for contrast ratios
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
       assert.exists(select)
 
       // Basic check that text content is rendered
-      const options = picker.shadowRoot?.querySelectorAll('md-select-option')
+      const options = picker.shadowRoot?.querySelectorAll('ui-option')
       assert.isAtLeast(options?.length || 0, 1)
     })
 
@@ -244,7 +244,7 @@ describe('CurrencyPicker - Accessibility', () => {
       await picker.updateComplete
 
       const errorElement = picker.shadowRoot?.querySelector('.error')
-      const selectElement = picker.shadowRoot?.querySelector('md-outlined-select')
+      const selectElement = picker.shadowRoot?.querySelector('ui-select')
       const isInvalid = !picker.validity.valid
       const hasAriaInvalid = selectElement?.getAttribute('aria-invalid') === 'true'
 
@@ -264,7 +264,7 @@ describe('CurrencyPicker - Accessibility', () => {
     it('should have proper semantic structure', async () => {
       // Check that component has accessible structure
       const container = picker.shadowRoot?.querySelector('.currency-picker')
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
 
       assert.exists(container)
       assert.equal(container?.getAttribute('role'), 'group')
@@ -293,7 +293,7 @@ describe('CurrencyPicker - Accessibility', () => {
 
     it('should have sufficient touch targets', async () => {
       // Check that interactive elements are large enough for touch
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
       assert.exists(select)
 
       // Material Design select should have proper touch targets
@@ -302,8 +302,8 @@ describe('CurrencyPicker - Accessibility', () => {
 
     it('should work without JavaScript enhancements', async () => {
       // Basic HTML structure should be accessible
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
-      const options = picker.shadowRoot?.querySelectorAll('md-select-option')
+      const select = picker.shadowRoot?.querySelector('ui-select')
+      const options = picker.shadowRoot?.querySelectorAll('ui-option')
 
       assert.exists(select)
       assert.isAtLeast(options?.length || 0, 1)

package/test/elements/currency/CurrencyPicker.core.test.ts

@@ -41,14 +41,14 @@ describe('CurrencyPicker - Core Tests', () => {
     })
 
     it('should render currency selector', () => {
-      const selector = picker.shadowRoot?.querySelector('md-outlined-select')
+      const selector = picker.shadowRoot?.querySelector('ui-select')
       assert.exists(selector)
       assert.equal(selector?.getAttribute('label'), 'Add Currency')
     })
 
     it('should populate currency options', async () => {
       await picker.updateComplete
-      const options = picker.shadowRoot?.querySelectorAll('md-select-option')
+      const options = picker.shadowRoot?.querySelectorAll('ui-option')
       assert.exists(options)
       assert.isAtLeast(options?.length || 0, 25) // Should have popular currencies
     })
@@ -137,7 +137,7 @@ describe('CurrencyPicker - Core Tests', () => {
     it('should filter options based on allowed currencies', async () => {
       await picker.updateComplete
 
-      const options = picker.shadowRoot?.querySelectorAll('md-select-option[value]')
+      const options = picker.shadowRoot?.querySelectorAll('ui-option[value]')
       const optionValues = Array.from(options || [])
         .map((option) => option.getAttribute('value'))
         .filter(Boolean)
@@ -168,7 +168,7 @@ describe('CurrencyPicker - Core Tests', () => {
       await picker.updateComplete
 
       const errorElement = picker.shadowRoot?.querySelector('.error')
-      const selectElement = picker.shadowRoot?.querySelector('md-outlined-select')
+      const selectElement = picker.shadowRoot?.querySelector('ui-select')
       const isInvalid = !picker.validity.valid
       const hasAriaInvalid = selectElement?.getAttribute('aria-invalid') === 'true'
 
@@ -250,7 +250,7 @@ describe('CurrencyPicker - Core Tests', () => {
       await picker.updateComplete
 
       const container = picker.shadowRoot?.querySelector('.currency-picker')
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
 
       assert.equal(container?.getAttribute('role'), 'group')
       assert.exists(container?.getAttribute('aria-label'))
@@ -299,7 +299,7 @@ describe('CurrencyPicker - Core Tests', () => {
       picker.disabled = true
       await picker.updateComplete
 
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
       assert.isTrue(select?.hasAttribute('disabled'))
     })
 

package/test/elements/currency/CurrencyPicker.integration.test.ts

@@ -115,7 +115,7 @@ describe('CurrencyPicker - Integration', () => {
 
       // Check that error state is set (indicating validation failed)
       const isInvalid = !picker.validity.valid
-      const selectElement = picker.shadowRoot?.querySelector('md-outlined-select')
+      const selectElement = picker.shadowRoot?.querySelector('ui-select')
       const hasAriaInvalid = selectElement?.getAttribute('aria-invalid') === 'true'
 
       assert.isTrue(isInvalid, 'Component should be in invalid state when validation fails')
@@ -468,7 +468,7 @@ describe('CurrencyPicker - Integration', () => {
     it('should maintain focus appropriately during interactions', async () => {
       const { picker } = await accessibilityFixture()
 
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       select.focus()
 
       // Simulate selection

package/test/elements/currency/CurrencyPicker.test.ts

@@ -52,14 +52,14 @@ describe('CurrencyPicker', () => {
     })
 
     it('should render currency selector', () => {
-      const selector = picker.shadowRoot?.querySelector('md-outlined-select')
+      const selector = picker.shadowRoot?.querySelector('ui-select')
       assert.exists(selector)
       assert.equal(selector?.getAttribute('label'), 'Add Currency')
     })
 
     it('should populate currency options', async () => {
       await nextFrame()
-      const options = picker.shadowRoot?.querySelectorAll('md-select-option')
+      const options = picker.shadowRoot?.querySelectorAll('ui-option')
       assert.exists(options)
       assert.isAtLeast(options?.length || 0, 25) // Should have popular currencies
     })
@@ -73,7 +73,7 @@ describe('CurrencyPicker', () => {
     })
 
     it('should select a currency', async () => {
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       assert.exists(select)
 
       // Simulate selecting USD
@@ -95,7 +95,7 @@ describe('CurrencyPicker', () => {
       const changePromise = oneEvent(picker, 'change')
 
       // Simulate user selecting a currency through the select element
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       assert.exists(select)
 
       const changeEvent = new CustomEvent('change', {
@@ -197,7 +197,7 @@ describe('CurrencyPicker', () => {
       picker.selected = ['USD']
       await nextFrame()
 
-      const selectableCurrencies = picker.shadowRoot?.querySelectorAll('md-select-option[value="USD"]')
+      const selectableCurrencies = picker.shadowRoot?.querySelectorAll('ui-option[value="USD"]')
       assert.equal(selectableCurrencies?.length, 0) // USD should not be in options
     })
   })
@@ -212,7 +212,7 @@ describe('CurrencyPicker', () => {
     it('should filter options based on allowed currencies', async () => {
       await nextFrame()
 
-      const options = picker.shadowRoot?.querySelectorAll('md-select-option[value]')
+      const options = picker.shadowRoot?.querySelectorAll('ui-option[value]')
       const optionValues = Array.from(options || [])
         .map((option) => option.getAttribute('value'))
         .filter(Boolean)
@@ -260,7 +260,7 @@ describe('CurrencyPicker', () => {
       picker.clearSelection() // This should trigger required validation error
       await picker.updateComplete
       const errorElement = picker.shadowRoot?.querySelector('.error')
-      const selectElement = picker.shadowRoot?.querySelector('md-outlined-select')
+      const selectElement = picker.shadowRoot?.querySelector('ui-select')
       const isInvalid = !picker.validity.valid
       const hasAriaInvalid = selectElement?.getAttribute('aria-invalid') === 'true'
 
@@ -357,7 +357,7 @@ describe('CurrencyPicker', () => {
       await nextFrame()
 
       const container = picker.shadowRoot?.querySelector('.currency-picker')
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
 
       assert.equal(container?.getAttribute('role'), 'group')
       assert.exists(container?.getAttribute('aria-label'))
@@ -386,7 +386,7 @@ describe('CurrencyPicker', () => {
     })
 
     it('should be keyboard navigable', async () => {
-      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      const select = picker.shadowRoot?.querySelector('ui-select') as HTMLElement
       assert.exists(select)
 
       // Focus should work
@@ -479,7 +479,7 @@ describe('CurrencyPicker', () => {
       picker.disabled = true
       await nextFrame()
 
-      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const select = picker.shadowRoot?.querySelector('ui-select')
       assert.isTrue(select?.hasAttribute('disabled'))
     })
   })

package/test/elements/data-table/DataTable.browser.test.ts

@@ -210,13 +210,13 @@ describe('DataTable', () => {
 
       const sortedColumn = `<div class="cell-content">
         C1
-        <md-icon
+        <ui-icon
           aria-hidden="true"
           class="sort-icon"
           role="presentation"
         >
           arrow_downward
-        </md-icon>`
+        </ui-icon>`
 
       assert.dom.equal(headerCells[0].querySelector('.cell-content'), sortedColumn)
       assert.equal(headerCells[0].dataset.sort, 'name')

package/test/md/menu/MenuItem.test.ts

@@ -155,7 +155,7 @@ describe('md', () => {
         const event = (await oneEvent(menuItem, 'submenu-open')) as CustomEvent<{ subMenu: UiSubMenu }>
 
         assert.instanceOf(event, CustomEvent)
-        assert.isTrue(event.bubbles)
+        assert.isFalse(event.bubbles)
         assert.isTrue(event.composed)
         assert.isNotNull(event.detail.subMenu)
       })
@@ -558,14 +558,13 @@ describe('md', () => {
           composed: true,
         })
 
-        // Access the protected method through type assertion
         element['handleSubMenuSelect'](subMenuEvent)
 
         assert.isTrue(selectSpy.calledOnce)
         const dispatchedEvent = selectSpy.args[0][0] as CustomEvent
         assert.equal(dispatchedEvent.detail.item, element)
         assert.equal(dispatchedEvent.detail.index, 0)
-        assert.isTrue(dispatchedEvent.bubbles)
+        assert.isFalse(dispatchedEvent.bubbles)
         assert.isTrue(dispatchedEvent.composed)
       })
     })