@api-client/ui 0.5.20 → 0.5.22

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

@@ -1,12 +1,11 @@
-import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'
+import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
 import { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'
 import { type ClassInfo, classMap } from 'lit/directives/class-map.js'
 import { UiElement } from '../../UiElement.js'
 import { isDisabled, setDisabled } from '../../../lib/disabled.js'
 import type UiButton from '../../button/internals/button.js'
 import type { TypedEvents } from '../../../core/types.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'
+import type { ButtonType } from '../../button/internals/button.js'
 import '../../button/ui-button.js'
 import { bound } from '../../../decorators/bound.js'
 
@@ -28,8 +27,6 @@ interface DialogEventMap {
   close: CustomEvent<UiDialogClosingReason>
 }
 
-export type RenderFunction = () => TemplateResult
-
 /**
  * Styled dialog using a native `<dialog>` element under the hood.
  * Note, since native dialog renders in the top layer it is not necessary
@@ -42,8 +39,8 @@ export type RenderFunction = () => TemplateResult
  * closing reason detail.
  *
  * ```javascript
- * <ui-button color="text" value="dismiss">Cancel</ui-button>
- * <ui-button color="text" value="confirm">Take action</ui-button>
+ * <ui-button slot="button" color="text" value="dismiss">Cancel</ui-button>
+ * <ui-button slot="button" color="text" value="confirm">Take action</ui-button>
  * ```
  *
  * ```javascript
@@ -133,26 +130,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    */
   @property({ type: Boolean }) accessor destructive = false
 
-  /**
-   * Part of the imperative access to the element.
-   * When set, it wraps the content in a `<form>` element.
-   * When this is enabled the following will happen:
-   * - The `confirm` button will get `type="submit"`
-   * - The form `method` attribute is set to `dialog`
-   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
-   * - The dialog will dispatch the same `submit` event as the form.
-   * - When the `submit` event dispatched by the dialog gets cancelled, then:
-   *  - The original submit event also gets cancelled.
-   *  - The default confirm action is not invoked
-   *  - The dialog stays opened
-   * - When the submit event is not cancelled, then:
-   *  - The default confirm action is invoked.
-   *  - The dialog is closed.
-   *
-   * @deprecated Wrap the content in a `<form>` element instead.
-   */
-  @property({ type: Boolean }) accessor useForm: boolean | undefined
-
   /**
    * Only when `confirmLabel` is set.
    * Defines the value associated with the button's name when it's submitted with the form data.
@@ -160,6 +137,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * @attribute
    */
   @property({ type: String }) accessor confirmValue: string | undefined
+
+  /**
+   * The type of the confirm button.
+   * This is used to set the button's `type` attribute.
+   * If not set, the default is `button`.
+   * If set to `submit`, the dialog will trigger the form submission on the parent form.
+   * @attribute
+   */
+  @property({ type: String }) accessor confirmType: ButtonType | undefined
   /**
    * When the dialog is wrapped in a form, set this to `true` to close the dialog
    * when the form is submitted.
@@ -167,6 +153,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * Note that the dialog doesn't perform any validation of the form. It only closes
    * when the form is submitted, regardless of the application logic. The `submit` event
    * is dispatched by the dialog when the form is valid.
+   * @attribute
    */
   @property({ type: Boolean }) accessor submitClose: boolean | undefined
 
@@ -193,25 +180,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    */
   dialogValue?: unknown
 
-  #formId?: string
-
-  /**
-   * @deprecated Use `useForm` instead.
-   */
-  get formId(): string | undefined {
-    return this.#formId
-  }
-
-  /**
-   * @deprecated This will be removed in the future.
-   */
-  @state() accessor #inject: TemplateResult | RenderFunction | undefined
-
-  /**
-   * @deprecated This will be removed in the future.
-   */
-  #pendingStyles?: CSSResultOrNative[]
-
   /**
    * A reference to the parent form element.
    * When a form is found, the dialog will hook into the form's submit event
@@ -228,29 +196,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     this.addEventListener('keydown', this.handleKeyDown)
   }
 
-  /**
-   * Allows to inject a template into the internals of the element.
-   * This is helpful when working with imperative dialogs.
-   * @param content The content to inject into the body.
-   * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.
-   */
-  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {
-    this.#inject = content
-    if (styles) {
-      if (this.shadowRoot) {
-        adoptStyles(this.shadowRoot, styles)
-      } else {
-        if (!this.#pendingStyles) {
-          this.#pendingStyles = []
-        }
-        this.#pendingStyles.push(...styles)
-      }
-    }
-    if (this.shadowRoot && styles) {
-      adoptStyles(this.shadowRoot, styles)
-    }
-  }
-
   override connectedCallback(): void {
     super.connectedCallback()
     this.#form = this.closest('form')
@@ -267,22 +212,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     }
   }
 
-  protected override firstUpdated(): void {
-    const styles = this.#pendingStyles
-    if (styles) {
-      const root = this.shadowRoot as ShadowRoot
-      const all = [...root.adoptedStyleSheets, ...styles]
-      adoptStyles(this.shadowRoot as ShadowRoot, all)
-    }
-  }
-
-  override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('useForm') && this.useForm && !this.#formId) {
-      const r = (Math.random() + 1).toString(36).substring(7)
-      this.#formId = `form-${r}`
-    }
-  }
-
   @bound
   protected handleFormSubmit(): void {
     if (this.submitClose) {
@@ -425,33 +354,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   protected handleConfirm(): void {
-    if (!this.useForm) {
-      this.handleInteraction('confirm')
-    }
-  }
-
-  #handleSubmit(event: SubmitEvent): void {
-    const form = event.target as HTMLFormElement
-    const copy = new SyntheticSubmitEvent(event.type, form, {
-      submitter: event.submitter,
-      cancelable: true,
-      bubbles: false,
-      composed: false,
-    })
-    const dispatched = this.dispatchEvent(copy)
-    if (dispatched) {
-      this.handleInteraction('confirm')
-    } else {
-      event.preventDefault()
-    }
+    this.handleInteraction('confirm')
   }
 
   override render(): TemplateResult {
-    const { useForm, modal } = this
+    const { modal } = this
     const dialogClass = modal ? 'modal' : 'non-modal'
     return html`
       <dialog @close="${this.handleDialogClose}" part="dialog" class="${dialogClass}">
-        <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
+        <div class="container">${this.renderContent()}</div>
       </dialog>
     `
   }
@@ -460,14 +371,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]
   }
 
-  #renderFormContent(): TemplateResult {
-    return html`
-      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
-        ${this.renderContent()}
-      </form>
-    `
-  }
-
   protected renderIcon(): TemplateResult {
     const classes: ClassInfo = {
       'icon': true,
@@ -494,12 +397,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   protected renderBody(): TemplateResult {
-    let content = this.#inject
-    if (typeof content === 'function') {
-      content = content()
-    }
-    const injected = content || nothing
-    return html` <div class="content" part="body"><slot></slot>${injected}</div> `
+    return html` <div class="content" part="body"><slot></slot></div> `
   }
 
   protected renderButtons(): TemplateResult {
@@ -533,11 +431,11 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   #renderConfirmButton(): TemplateResult | typeof nothing {
-    const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this
+    const { confirmLabel, confirmValue = 'confirm', destructive } = this
     if (!confirmLabel) {
       return nothing
     }
-    const type = useForm ? 'submit' : 'button'
+    const type = this.confirmType ?? 'button'
     const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'
     return html`
       <ui-button

package/src/md/dialog/ui-dialog.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-dialog': UiDialogElement
   }
 }
+
+export type { UiDialogClosingReason } from './internals/Dialog.js'

package/src/md/divider/ui-divider.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-divider': UiDividerElement
   }
 }
+
+export { DividerType } from './internals/Divider.element.js'

package/src/md/dropdown-list/ui-dropdown-list.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-dropdown-list': Element
   }
 }
+
+export type { UiDropdownListSelection } from './internals/UiDropdownList.js'

package/src/md/icon-button/ui-icon-button.ts

@@ -13,3 +13,6 @@ declare global {
     'ui-icon-button': UiIconButtonElement
   }
 }
+
+export type { MdIconButtonColor, MdIconButtonWidth } from './internals/IconButton.js'
+export type { ButtonType, MdButtonShape, MdButtonSize } from '../button/internals/base.js'

package/src/md/list/internals/ListItem.styles.ts

@@ -123,6 +123,13 @@ export default css`
     line-height: var(--md-sys-typescale-body-small-height);
   }
 
+  .start {
+    align-self: stretch;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   :host slot[name='end']::slotted(*) {
     color: var(--md-sys-color-on-surface-variant);
     fill: var(--md-sys-color-on-surface-variant);

package/src/md/list/ui-list-item.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-list-item': UiListItemElement
   }
 }
+
+export { ListItemImage, ListItemLines } from './internals/ListItem.js'

package/src/md/list/ui-list.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-list': Element
   }
 }
+
+export type { UiListItemsChange, UiListSelection } from './internals/List.js'

package/src/md/menu/internal/Menu.ts

@@ -15,6 +15,7 @@ import { bound } from '../../../decorators/bound.js'
  *
  * @fires select - Dispatched when a menu item is selected
  * @fires close - Dispatched when the menu is closed
+ * @fires open - Dispatched when the menu is opened
  */
 export default class Menu extends UiList {
   /**
@@ -213,10 +214,42 @@ export default class Menu extends UiList {
   }
 
   override notifySelect(item: UiListItem, index?: number): boolean {
+    // Handle single selection
+    if (item instanceof UiMenuItem) {
+      this.clearSelection()
+      item.selected = true
+    }
+
     this.hide()
     return super.notifySelect(item, index)
   }
 
+  /**
+   * Clears selection from all menu items
+   */
+  protected clearSelection(): void {
+    this.assignedMenuItems.forEach((menuItem) => {
+      menuItem.selected = false
+    })
+  }
+
+  /**
+   * Gets the currently selected menu item
+   */
+  get selectedItem(): UiMenuItem | null {
+    return this.assignedMenuItems.find((item) => item.selected) || null
+  }
+
+  /**
+   * Sets the selected menu item
+   */
+  setSelectedItem(item: UiMenuItem | null): void {
+    this.clearSelection()
+    if (item) {
+      item.selected = true
+    }
+  }
+
   /**
    * Handles sub-menu opening
    */

package/src/md/menu/internal/MenuItem.styles.ts

@@ -54,6 +54,7 @@ export default css`
   md-focus-ring {
     --md-focus-ring-color: var(--md-sys-color-primary);
     --md-focus-ring-width: 2px;
+    z-index: 2;
   }
 
   /* Ripple Effect */
@@ -61,4 +62,26 @@ export default css`
     --md-ripple-color: var(--md-sys-color-primary);
     --md-ripple-opacity: 0.12;
   }
+
+  /* Selected state */
+  :host(.select) .menu-item,
+  :host([selected]) .menu-item {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host(.select) .menu-item:hover,
+  :host([selected]) .menu-item:hover {
+    background-color: var(--md-sys-color-secondary-container);
+    opacity: 0.92;
+  }
+
+  /* Selection check icon */
+  .selection-check {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
 `

package/src/md/menu/internal/MenuItem.ts

@@ -8,6 +8,7 @@ import { nanoid } from 'nanoid'
 
 import '@material/web/focus/md-focus-ring.js'
 import '../../ripple/ui-ripple.js'
+import '../../icons/ui-icon.js'
 
 /**
  * Material Design 3 Menu Item component.
@@ -23,6 +24,25 @@ export default class UiMenuItem extends UiListItem {
    */
   @property({ type: String }) accessor submenu: string | undefined
 
+  /**
+   * Whether this menu item is selected
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor selected = false
+
+  /**
+   * The value associated with this menu item. Use it to identify value associated with the menu item,
+   * when selected.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor value: string | undefined
+
+  /**
+   * Whether to automatically show a check icon when selected
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor showSelectionIcon = false
+
   /**
    * Whether the menu item has a sub-menu
    */
@@ -58,6 +78,9 @@ export default class UiMenuItem extends UiListItem {
     if (!this.id) {
       this.id = nanoid(6)
     }
+
+    // Initialize selection state
+    this.updateSelectionState()
   }
 
   protected override updated(changedProperties: PropertyValues<this>): void {
@@ -67,6 +90,10 @@ export default class UiMenuItem extends UiListItem {
       this.updateAccessibility()
       this.setupSubmenuConnection()
     }
+
+    if (changedProperties.has('selected')) {
+      this.updateSelectionState()
+    }
   }
 
   /**
@@ -97,6 +124,19 @@ export default class UiMenuItem extends UiListItem {
     }
   }
 
+  /**
+   * Updates the selection state styling
+   */
+  protected updateSelectionState(): void {
+    if (this.selected) {
+      this.classList.add('select')
+      this.setAttribute('aria-selected', 'true')
+    } else {
+      this.classList.remove('select')
+      this.setAttribute('aria-selected', 'false')
+    }
+  }
+
   /**
    * Handles mouse enter events
    */
@@ -214,4 +254,13 @@ export default class UiMenuItem extends UiListItem {
       ${this.hasSubMenu ? html`<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
     </div>`
   }
+
+  protected override renderStart(): TemplateResult {
+    const showCheckIcon = this.showSelectionIcon && this.selected
+
+    return html`<div class="start">
+      ${showCheckIcon ? html`<ui-icon class="selection-check">check</ui-icon>` : ''}
+      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
+    </div>`
+  }
 }

package/src/md/menu/ui-menu-item.ts

@@ -8,10 +8,6 @@ import listStyles from '../list/internals/ListItem.styles.js'
  * Material Design 3 Menu Item component.
  *
  * @element ui-menu-item
- * @attribute {Object} data - The menu item data object
- * @attribute {boolean} disabled - Whether the menu item is disabled
- * @fires select - Dispatched when the menu item is selected
- * @fires submenu-open - Dispatched when a sub-menu is opened
  */
 @customElement('ui-menu-item')
 export class UiMenuItemElement extends Element {
@@ -23,3 +19,5 @@ declare global {
     'ui-menu-item': UiMenuItemElement
   }
 }
+
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js'

package/src/md/menu/ui-menu.ts

@@ -24,3 +24,5 @@ declare global {
     'ui-menu': UiMenuElement
   }
 }
+
+export type { UiListItemsChange, UiListSelection } from '../list/internals/List.js'

package/src/md/tabs/ui-tabs.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-tabs': UiTabsElement
   }
 }
+
+export { TabsPriority, type TabSelectionDetail } from './internals/Tabs.js'