@api-client/ui 0.3.3 → 0.3.5

package/src/md/chip/internals/ChipSet.ts

@@ -0,0 +1,142 @@
+import { html, LitElement } from 'lit'
+import { queryAssignedElements } from 'lit/decorators.js'
+
+import Chip from './Chip.js'
+
+/**
+ * A chip set component.
+ */
+export default class ChipSet extends LitElement {
+  get chips() {
+    return this.childElements.filter((child): child is Chip => child instanceof Chip)
+  }
+
+  @queryAssignedElements() private accessor childElements!: HTMLElement[]
+  private readonly internals = this.attachInternals()
+
+  constructor() {
+    super()
+    this.addEventListener('focusin', this.updateTabIndices.bind(this))
+    this.addEventListener('update-focus', this.updateTabIndices.bind(this))
+    this.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.internals.role = 'toolbar'
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'toolbar')
+    }
+  }
+
+  protected override render() {
+    return html`<slot @slotchange=${this.updateTabIndices}></slot>`
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    const isLeft = event.key === 'ArrowLeft'
+    const isRight = event.key === 'ArrowRight'
+    const isHome = event.key === 'Home'
+    const isEnd = event.key === 'End'
+    // Ignore non-navigation keys
+    if (!isLeft && !isRight && !isHome && !isEnd) {
+      return
+    }
+
+    const { chips } = this as { chips: MaybeMultiActionChip[] }
+    // Don't try to select another chip if there aren't any.
+    if (chips.length < 2) {
+      return
+    }
+
+    // Prevent default interactions, such as scrolling.
+    event.preventDefault()
+
+    if (isHome || isEnd) {
+      const index = isHome ? 0 : chips.length - 1
+      chips[index].focus({ trailing: isEnd })
+      this.updateTabIndices()
+      return
+    }
+
+    // Check if moving forwards or backwards
+    const isRtl = getComputedStyle(this).direction === 'rtl'
+    const forwards = isRtl ? isLeft : isRight
+    const focusedChip = chips.find((chip) => chip.matches(':focus-within'))
+    if (!focusedChip) {
+      // If there is not already a chip focused, select the first or last chip
+      // based on the direction we're traveling.
+      const nextChip = forwards ? chips[0] : chips[chips.length - 1]
+      nextChip.focus({ trailing: !forwards })
+      this.updateTabIndices()
+      return
+    }
+
+    const currentIndex = chips.indexOf(focusedChip)
+    let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1
+    // Search for the next sibling that is not disabled to select.
+    // If we return to the host index, there is nothing to select.
+    while (nextIndex !== currentIndex) {
+      if (nextIndex >= chips.length) {
+        // Return to start if moving past the last item.
+        nextIndex = 0
+      } else if (nextIndex < 0) {
+        // Go to end if moving before the first item.
+        nextIndex = chips.length - 1
+      }
+
+      // Check if the next sibling is disabled. If so,
+      // move the index and continue searching.
+      //
+      // Some toolbar items may be focusable when disabled for increased
+      // visibility.
+      const nextChip = chips[nextIndex]
+      if (nextChip.disabled) {
+        if (forwards) {
+          nextIndex++
+        } else {
+          nextIndex--
+        }
+
+        continue
+      }
+
+      nextChip.focus({ trailing: !forwards })
+      this.updateTabIndices()
+      break
+    }
+  }
+
+  private updateTabIndices() {
+    // The chip that should be focusable is either the chip that currently has
+    // focus or the first chip that can be focused.
+    const { chips } = this
+    let chipToFocus: Chip | undefined
+    for (const chip of chips) {
+      const isChipFocusable = !chip.disabled
+      const chipIsFocused = chip.matches(':focus-within')
+      if (chipIsFocused && isChipFocusable) {
+        // Found the first chip that is actively focused. This overrides the
+        // first focusable chip found.
+        chipToFocus = chip
+        continue
+      }
+
+      if (isChipFocusable && !chipToFocus) {
+        chipToFocus = chip
+      }
+
+      // Disable non-focused chips. If we disable all of them, we'll grant focus
+      // to the first focusable child that was found.
+      chip.tabIndex = -1
+    }
+
+    if (chipToFocus) {
+      chipToFocus.tabIndex = 0
+    }
+  }
+}
+
+interface MaybeMultiActionChip extends Chip {
+  focus(options?: FocusOptions & { trailing?: boolean }): void
+}

package/src/md/chip/ui-chip-set.ts

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

package/src/md/dialog/internals/Dialog.styles.ts

@@ -11,7 +11,7 @@ export default css`
 
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large);
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--md-sys-color-surface-container-high);
     box-shadow: var(--md-sys-elevation-3);
     color: var(--md-sys-color-on-surface-variant);
     padding: 24px;
@@ -22,16 +22,6 @@ export default css`
     height: var(--ui-dialog-height, revert);
   }
 
-  dialog::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background-color: var(--md-sys-color-surface-tint);
-    opacity: 0.11;
-    pointer-events: none;
-  }
-
   dialog:open {
     animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
   }
@@ -107,6 +97,10 @@ export default css`
     margin-right: 12px;
   }
 
+  .content ::slotted(*) {
+    background-color: var(--md-sys-color-surface-container-high);
+  }
+
   @keyframes show-dialog {
     from {
       transform: translateY(-110%) scaleY(0);

package/src/md/switch/internals/Switch.styles.ts

@@ -35,7 +35,7 @@ export default css`
 
     border: 2px var(--md-sys-color-outline) solid;
     border-radius: var(--md-sys-shape-corner-extra-large);
-    background-color: var(--md-sys-color-surface-variant);
+    background-color: var(--md-sys-color-surface-container-highest);
 
     transition:
       opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),

package/src/md/text-field/internals/outlined.styles.ts

@@ -54,10 +54,10 @@ export default css`
   .labelActive .label {
     transform: translateY(calc(-100% - 2px)) scale(0.75);
     position: absolute;
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));
   }
 
   :host(:focus-within) .label {
-    color: var(--md-sys-color-primary);
+    color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));
   }
 `

package/test/ui/chip/UiChip.test.ts

@@ -26,15 +26,6 @@ describe('md', () => {
         )
       }
 
-      async function disableIconFixture(): Promise<UiChip> {
-        return fixture(
-          html`<ui-chip type="assist" disabled>
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            Disabled with icon
-          </ui-chip>`
-        )
-      }
-
       async function elevatedFixture(): Promise<UiChip> {
         return fixture(html`<ui-chip type="assist" elevated>Elevated</ui-chip>`)
       }
@@ -45,9 +36,8 @@ describe('md', () => {
 
       it('renders border around a regular assist chip', async () => {
         const element = await basicFixture()
-        const container = element.shadowRoot?.querySelector('.container') as HTMLDivElement
-        const styles = getComputedStyle(container)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline')
+        const styles = getComputedStyle(element)
+        const m3Color = styles.getPropertyValue('--md-sys-color-outline-variant')
         const borderColor = ColorConverter.normalizeColor(styles.borderColor)
         const compareColor = ColorConverter.normalizeColor(m3Color)
         assert.equal(borderColor, compareColor, 'has the m3 color')
@@ -89,43 +79,28 @@ describe('md', () => {
 
       it('renders suffix icon', async () => {
         const element = await iconFixture()
-        const surface = element.shadowRoot!.querySelector('.surface') as HTMLDivElement
-        assert.isTrue(surface.classList.contains('withIcon'), 'the surface has the withIcon class')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        assert.isTrue(surface.classList.contains('has-icon'), 'the surface has the has-icon class')
+        const contentStyles = getComputedStyle(surface)
         assert.equal(contentStyles.paddingLeft.trim(), '8px', 'the container has the padding')
         const icon = element.querySelector('ui-icon')!
         const iconStyles = getComputedStyle(icon)
         assert.equal(iconStyles.marginRight.trim(), '8px', 'the icon has the margin')
       })
 
-      it('has disabled styles when disabled', async () => {
-        const element = await disableIconFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
-        assert.equal(containerStyles.opacity, '0.12', 'container has the opacity')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
-        assert.equal(contentStyles.opacity, '0.68', 'content has the opacity')
-      })
-
       it('has elevated styles', async () => {
         const element = await elevatedFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        const containerStyles = getComputedStyle(surface)
         assert.equal(containerStyles.borderWidth, '0px', 'has no border')
         assert.isNotEmpty(containerStyles.boxShadow, 'has a box shadow')
       })
 
       it('has no elevated styles when disabled', async () => {
         const element = await disabledElevatedFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        const containerStyles = getComputedStyle(surface)
         assert.equal(containerStyles.boxShadow, 'none', 'has no box shadow')
-        assert.equal(containerStyles.opacity, '0.12', 'container has the opacity')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
-        assert.equal(contentStyles.opacity, '0.68', 'content has the opacity')
       })
     })
 
@@ -138,19 +113,18 @@ describe('md', () => {
         return fixture(html`<ui-chip type="filter" disabled>Disabled</ui-chip>`)
       }
 
-      async function closableFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" closable>Closable</ui-chip>`)
+      async function removableFixture(): Promise<UiChip> {
+        return fixture(html`<ui-chip type="filter" removable>removable</ui-chip>`)
       }
 
       async function listFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" list="abc">List</ui-chip>`)
+        return fixture(html`<ui-chip type="filter" list>List</ui-chip>`)
       }
 
-      it('renders a border around the chip', async () => {
+      it('renders border around the chip', async () => {
         const element = await basicFixture()
-        const container = element.shadowRoot?.querySelector('.container') as HTMLDivElement
-        const styles = getComputedStyle(container)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline')
+        const styles = getComputedStyle(element)
+        const m3Color = styles.getPropertyValue('--md-sys-color-outline-variant')
         const borderColor = ColorConverter.normalizeColor(styles.borderColor)
         const compareColor = ColorConverter.normalizeColor(m3Color)
         assert.equal(borderColor, compareColor, 'has the m3 color')
@@ -208,7 +182,7 @@ describe('md', () => {
       })
 
       it('does not render the close icon', async () => {
-        const element = await closableFixture()
+        const element = await removableFixture()
         const node = element.shadowRoot!.querySelector('.trailing-icon')
         assert.notOk(node)
       })
@@ -219,36 +193,13 @@ describe('md', () => {
         assert.ok(node, 'has the icon')
       })
 
-      it('dispatches the list event', async () => {
-        const element = await listFixture()
-        const spy = sinon.spy()
-        element.addEventListener('list', spy)
-        const node = element.shadowRoot!.querySelector('.trailing-icon') as HTMLElement
-        node.click()
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('prevents the "click" event when dispatching the "list" event', async () => {
-        const element = await listFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        const node = element.shadowRoot!.querySelector('.trailing-icon') as HTMLElement
-        node.click()
-        assert.isFalse(spy.called)
-      })
-
       it('is accessible in a regular state', async () => {
         const element = await basicFixture()
         await assert.isAccessible(element)
       })
 
-      it('is accessible in a disabled state', async () => {
-        const element = await disabledFixture()
-        await assert.isAccessible(element)
-      })
-
-      it('is accessible when closable', async () => {
-        const element = await closableFixture()
+      it('is accessible when removable', async () => {
+        const element = await removableFixture()
         await assert.isAccessible(element)
       })
 

package/build/src/events/BroadcastUiEvents.d.ts

@@ -1,18 +0,0 @@
-import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js';
-import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js';
-/**
- * @deprecated
- */
-export interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {
-    project: string;
-    kind: typeof RequestUiMetaKind;
-    data: IRequestUiMeta;
-}
-/**
- * @deprecated
- */
-export interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {
-    project: string;
-    kind: typeof RequestUiMetaKind;
-}
-//# sourceMappingURL=BroadcastUiEvents.d.ts.map

package/build/src/events/BroadcastUiEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BroadcastUiEvents.d.ts","sourceRoot":"","sources":["../../../src/events/BroadcastUiEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AACvG,OAAO,EAAE,KAAK,cAAc,EAAE,IAAI,IAAI,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAEzG;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,qBAAqB;IAC3E,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,iBAAiB,CAAA;IAC9B,IAAI,EAAE,cAAc,CAAA;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,qBAAqB;IAC3E,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,iBAAiB,CAAA;CAC/B"}

package/build/src/events/BroadcastUiEvents.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=BroadcastUiEvents.js.map

package/build/src/events/BroadcastUiEvents.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BroadcastUiEvents.js","sourceRoot":"","sources":["../../../src/events/BroadcastUiEvents.ts"],"names":[],"mappings":"","sourcesContent":["import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'\nimport { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'\n\n/**\n * @deprecated\n */\nexport interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {\n  project: string\n  kind: typeof RequestUiMetaKind\n  data: IRequestUiMeta\n}\n\n/**\n * @deprecated\n */\nexport interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {\n  project: string\n  kind: typeof RequestUiMetaKind\n}\n"]}

package/src/events/BroadcastUiEvents.ts

@@ -1,19 +0,0 @@
-import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'
-import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'
-
-/**
- * @deprecated
- */
-export interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {
-  project: string
-  kind: typeof RequestUiMetaKind
-  data: IRequestUiMeta
-}
-
-/**
- * @deprecated
- */
-export interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {
-  project: string
-  kind: typeof RequestUiMetaKind
-}