@api-client/ui 0.4.3 → 0.4.5

package/build/src/lib/Dom.d.ts

@@ -1,5 +1,5 @@
 /**
  * Searches for an element with the given ID in parent shadow roots
  */
-export declare function findElementInShadowRoots(id: string, from: Element): HTMLElement | null;
+export declare function findElementInShadowRoots(id: string, from: HTMLElement): HTMLElement | null;
 //# sourceMappingURL=Dom.d.ts.map

package/build/src/lib/Dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,CAsBtF"}
+{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAqC1F"}

package/build/src/lib/Dom.js

@@ -9,15 +9,31 @@ export function findElementInShadowRoots(id, from) {
     }
     // If not found in document, search in parent shadow roots
     let current = from;
+    const queryId = `#${id}`;
     while (current) {
-        const shadowRoot = current.shadowRoot;
-        if (shadowRoot) {
-            const element = shadowRoot.getElementById(id);
+        // Check if current element has a shadow root and search within it
+        if (current.shadowRoot) {
+            const element = current.shadowRoot.querySelector(queryId);
             if (element) {
                 return element;
             }
         }
-        current = current.parentElement ?? current.shadowRoot?.host;
+        // Move up the DOM tree
+        if (current.parentNode) {
+            if (current.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+                // We're inside a shadow root, move to the shadow host
+                const shadowRoot = current.parentNode;
+                current = shadowRoot.host;
+            }
+            else {
+                // Regular DOM traversal
+                current = current.parentElement;
+            }
+        }
+        else {
+            // No more parents
+            current = null;
+        }
     }
     return null;
 }

package/build/src/lib/Dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,EAAU,EAAE,IAAa;IAChE,gCAAgC;IAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAC3C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,OAAO,CAAA;IAChB,CAAC;IACD,0DAA0D;IAC1D,IAAI,OAAO,GAA+B,IAAI,CAAA;IAE9C,OAAO,OAAO,EAAE,CAAC;QACf,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAA;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;YAC7C,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,OAAsB,CAAA;YAC/B,CAAC;QACH,CAAC;QAED,OAAO,GAAG,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,EAAE,IAAI,CAAA;IAC7D,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["/**\n * Searches for an element with the given ID in parent shadow roots\n */\nexport function findElementInShadowRoots(id: string, from: Element): HTMLElement | null {\n  // First try to find in document\n  const rootElm = document.getElementById(id)\n  if (rootElm) {\n    return rootElm\n  }\n  // If not found in document, search in parent shadow roots\n  let current: Element | null | undefined = from\n\n  while (current) {\n    const shadowRoot = current.shadowRoot\n    if (shadowRoot) {\n      const element = shadowRoot.getElementById(id)\n      if (element) {\n        return element as HTMLElement\n      }\n    }\n\n    current = current.parentElement ?? current.shadowRoot?.host\n  }\n\n  return null\n}\n"]}
+{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,EAAU,EAAE,IAAiB;IACpE,gCAAgC;IAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAC3C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,0DAA0D;IAC1D,IAAI,OAAO,GAAuB,IAAI,CAAA;IACtC,MAAM,OAAO,GAAG,IAAI,EAAE,EAAE,CAAA;IAExB,OAAO,OAAO,EAAE,CAAC;QACf,kEAAkE;QAClE,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACzD,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,OAAsB,CAAA;YAC/B,CAAC;QACH,CAAC;QAED,uBAAuB;QACvB,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,IAAI,OAAO,CAAC,UAAU,CAAC,QAAQ,KAAK,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAChE,sDAAsD;gBACtD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAwB,CAAA;gBACnD,OAAO,GAAG,UAAU,CAAC,IAAmB,CAAA;YAC1C,CAAC;iBAAM,CAAC;gBACN,wBAAwB;gBACxB,OAAO,GAAG,OAAO,CAAC,aAAa,CAAA;YACjC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,kBAAkB;YAClB,OAAO,GAAG,IAAI,CAAA;QAChB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["/**\n * Searches for an element with the given ID in parent shadow roots\n */\nexport function findElementInShadowRoots(id: string, from: HTMLElement): HTMLElement | null {\n  // First try to find in document\n  const rootElm = document.getElementById(id)\n  if (rootElm) {\n    return rootElm\n  }\n\n  // If not found in document, search in parent shadow roots\n  let current: HTMLElement | null = from\n  const queryId = `#${id}`\n\n  while (current) {\n    // Check if current element has a shadow root and search within it\n    if (current.shadowRoot) {\n      const element = current.shadowRoot.querySelector(queryId)\n      if (element) {\n        return element as HTMLElement\n      }\n    }\n\n    // Move up the DOM tree\n    if (current.parentNode) {\n      if (current.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n        // We're inside a shadow root, move to the shadow host\n        const shadowRoot = current.parentNode as ShadowRoot\n        current = shadowRoot.host as HTMLElement\n      } else {\n        // Regular DOM traversal\n        current = current.parentElement\n      }\n    } else {\n      // No more parents\n      current = null\n    }\n  }\n\n  return null\n}\n"]}

package/build/src/md/dialog/internals/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAe,MAAM,KAAK,CAAA;AAGlH,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGzD,OAAO,2BAA2B,CAAA;AAElC,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;CAC1C;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,cAAc,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAU,YAAW,WAAW,CAAC,cAAc,CAAC;;IACpF,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;;;;OAMG;IAC0B,QAAQ,CAAC,KAAK,UAAQ;IAEnD;;;;OAIG;IAC0B,QAAQ,CAAC,IAAI,UAAQ;IAElD;;;;OAIG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAErE;;;;OAIG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAErE;;;;;;;;;;;;;;;OAeG;IAC0B,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAElE;;;;;OAKG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAErE;;OAEG;IACc,QAAQ,CAAC,MAAM,EAAG,iBAAiB,CAAA;IAE3C,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAQ;IAEnC,SAAS,CAAC,QAAQ,CAAC,SAAS,UAAQ;IAEW,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,WAAW,EAAE,CAAA;IAE1C,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,WAAW,EAAE,CAAA;IAErC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAA;IAEpG;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAIrB,IAAI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;;IAaD;;;;OAIG;IACH,MAAM,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,cAAc,EAAE,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,IAAI;cAiBlE,YAAY,IAAI,IAAI;IAS9B,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO1C,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAmBhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOrC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8B/D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAmB/D,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,SAAS,CAAC,aAAa,IAAI,IAAI;IAsBtB,MAAM,IAAI,cAAc;IASjC,SAAS,CAAC,aAAa,IAAI,cAAc,EAAE,GAAG,cAAc;IAY5D,SAAS,CAAC,UAAU,IAAI,cAAc;IAYtC,SAAS,CAAC,WAAW,IAAI,cAAc;IAYvC,SAAS,CAAC,UAAU,IAAI,cAAc;IAStC,SAAS,CAAC,aAAa,IAAI,cAAc;CA0C1C"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}

package/build/src/md/dialog/internals/Dialog.js

@@ -356,7 +356,7 @@ let UiDialog = (() => {
         render() {
             const { useForm } = this;
             return html `
-      <dialog @close="${this.handleDialogClose}">
+      <dialog @close="${this.handleDialogClose}" part="dialog">
         <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
       </dialog>
     `;
@@ -366,7 +366,7 @@ let UiDialog = (() => {
         }
         #renderFormContent() {
             return html `
-      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}">
+      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
         ${this.renderContent()}
       </form>
     `;
@@ -399,7 +399,7 @@ let UiDialog = (() => {
                 content = content();
             }
             const injected = content || nothing;
-            return html ` <div class="content"><slot></slot>${injected}</div> `;
+            return html ` <div class="content" part="body"><slot></slot>${injected}</div> `;
         }
         renderButtons() {
             const classes = {
@@ -419,7 +419,12 @@ let UiDialog = (() => {
                 return nothing;
             }
             return html `
-      <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
+      <ui-button
+        color="text"
+        value="dismiss"
+        class="internal-button"
+        @click="${this.handleDismiss}"
+        part="negative-action"
         >${dismissLabel}</ui-button
       >
     `;
@@ -437,6 +442,7 @@ let UiDialog = (() => {
         value="${confirmValue}"
         class="internal-button"
         @click="${this.handleConfirm}"
+        part="positive-action"
         >${confirmLabel}</ui-button
       >
     `;

package/build/src/md/dialog/internals/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'\nimport '../../button/ui-button.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown\n}\n\ninterface DialogEventMap {\n  close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n *\n *  <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n *  buttons to automatically close the dialog.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   *\n   * Setting this value after the dialog was opened has no effect.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor modal = false\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor dismissLabel: string | undefined\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmLabel: string | undefined\n\n  /**\n   * Part of the imperative access to the element.\n   * When set, it wraps the content in a `<form>` element.\n   * When this is enabled the following will happen:\n   * - The `confirm` button will get `type=\"submit\"`\n   * - The form `method` attribute is set to `dialog`\n   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.\n   * - The dialog will dispatch the same `submit` event as the form.\n   * - When the `submit` event dispatched by the dialog gets cancelled, then:\n   *  - The original submit event also gets cancelled.\n   *  - The default confirm action is not invoked\n   *  - The dialog stays opened\n   * - When the submit event is not cancelled, then:\n   *  - The default confirm action is invoked.\n   *  - The dialog is closed.\n   */\n  @property({ type: Boolean }) accessor useForm: boolean | undefined\n\n  /**\n   * Only when `confirmLabel` is set.\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmValue: string | undefined\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') accessor dialog!: HTMLDialogElement\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor hasTitle = false\n\n  @state() protected accessor hasButton = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown\n\n  #formId?: string\n\n  get formId(): string | undefined {\n    return this.#formId\n  }\n\n  @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n  #pendingStyles?: CSSResultOrNative[]\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  /**\n   * Allows to inject a template into the internals of the element.\n   * This is helpful when working with imperative dialogs.\n   * @param content The content to inject into the body.\n   */\n  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {\n    this.#inject = content\n    if (styles) {\n      if (this.shadowRoot) {\n        adoptStyles(this.shadowRoot, styles)\n      } else {\n        if (!this.#pendingStyles) {\n          this.#pendingStyles = []\n        }\n        this.#pendingStyles.push(...styles)\n      }\n    }\n    if (this.shadowRoot && styles) {\n      adoptStyles(this.shadowRoot, styles)\n    }\n  }\n\n  protected override firstUpdated(): void {\n    const styles = this.#pendingStyles\n    if (styles) {\n      const root = this.shadowRoot as ShadowRoot\n      const all = [...root.adoptedStyleSheets, ...styles]\n      adoptStyles(this.shadowRoot as ShadowRoot, all)\n    }\n  }\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('useForm') && this.useForm && !this.#formId) {\n      const r = (Math.random() + 1).toString(36).substring(7)\n      this.#formId = `form-${r}`\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    const path = e.composedPath()\n    const { buttons } = this\n    const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n    if (!button) {\n      return\n    }\n    if (button.type === 'submit') {\n      // Adds support for forms.\n      // When a form's submit button is clicked we yield the flow control to the form.\n      // This way the form can handle the submit event.\n      e.preventDefault()\n      return\n    }\n    const { value = '' } = button\n    this.handleInteraction(value as 'dismiss' | 'confirm')\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e)\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss')\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.#controlVisibility()\n    }\n    super.updated(changedProperties)\n  }\n\n  #controlVisibility(): void {\n    const { dialog, modal, open } = this\n    if (!dialog) {\n      return\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal()\n      } else {\n        dialog.show()\n      }\n    } else {\n      dialog.close()\n    }\n  }\n\n  #handleSlotChange(): void {\n    const { icons, titles, buttons } = this\n    this.hasIcon = !!icons && !!icons.length\n    this.hasTitle = !!titles && !!titles.length\n    this.hasButton = !!buttons && !!buttons.length\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return\n    }\n    this.open = false\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return\n    }\n    this.open = false\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleConfirm(): void {\n    if (!this.useForm) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  #handleSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement\n    const copy = new SyntheticSubmitEvent(event.type, form, {\n      submitter: event.submitter,\n      cancelable: true,\n      bubbles: false,\n      composed: false,\n    })\n    const dispatched = this.dispatchEvent(copy)\n    if (dispatched) {\n      this.handleInteraction('confirm')\n    } else {\n      event.preventDefault()\n    }\n  }\n\n  override render(): TemplateResult {\n    const { useForm } = this\n    return html`\n      <dialog @close=\"${this.handleDialogClose}\">\n        <div class=\"container\">${useForm ? this.#renderFormContent() : this.renderContent()}</div>\n      </dialog>\n    `\n  }\n\n  protected renderContent(): TemplateResult[] | TemplateResult {\n    return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n  }\n\n  #renderFormContent(): TemplateResult {\n    return html`\n      <form id=\"${ifDefined(this.formId)}\" method=\"dialog\" @submit=\"${this.#handleSubmit}\">\n        ${this.renderContent()}\n      </form>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      'icon': true,\n      'with-icon': this.hasIcon,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      'title': true,\n      'with-title': this.hasTitle,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"title\">\n        <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderBody(): TemplateResult {\n    let content = this.#inject\n    if (typeof content === 'function') {\n      content = content()\n    }\n    const injected = content || nothing\n    return html` <div class=\"content\"><slot></slot>${injected}</div> `\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      'buttons': true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"button\">\n        <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n        ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n      </div>\n    `\n  }\n\n  #renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this\n    if (!dismissLabel) {\n      return nothing\n    }\n    return html`\n      <ui-button color=\"text\" value=\"dismiss\" class=\"internal-button\" @click=\"${this.handleDismiss}\"\n        >${dismissLabel}</ui-button\n      >\n    `\n  }\n\n  #renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel, confirmValue = 'confirm', useForm } = this\n    if (!confirmLabel) {\n      return nothing\n    }\n    const type = useForm ? 'submit' : 'button'\n    return html`\n      <ui-button\n        color=\"text\"\n        type=\"${type}\"\n        value=\"${confirmValue}\"\n        class=\"internal-button\"\n        @click=\"${this.handleConfirm}\"\n        >${confirmLabel}</ui-button\n      >\n    `\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'\nimport '../../button/ui-button.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown\n}\n\ninterface DialogEventMap {\n  close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n *\n *  <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n *  buttons to automatically close the dialog.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   *\n   * Setting this value after the dialog was opened has no effect.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor modal = false\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor dismissLabel: string | undefined\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmLabel: string | undefined\n\n  /**\n   * Part of the imperative access to the element.\n   * When set, it wraps the content in a `<form>` element.\n   * When this is enabled the following will happen:\n   * - The `confirm` button will get `type=\"submit\"`\n   * - The form `method` attribute is set to `dialog`\n   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.\n   * - The dialog will dispatch the same `submit` event as the form.\n   * - When the `submit` event dispatched by the dialog gets cancelled, then:\n   *  - The original submit event also gets cancelled.\n   *  - The default confirm action is not invoked\n   *  - The dialog stays opened\n   * - When the submit event is not cancelled, then:\n   *  - The default confirm action is invoked.\n   *  - The dialog is closed.\n   */\n  @property({ type: Boolean }) accessor useForm: boolean | undefined\n\n  /**\n   * Only when `confirmLabel` is set.\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmValue: string | undefined\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') accessor dialog!: HTMLDialogElement\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor hasTitle = false\n\n  @state() protected accessor hasButton = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown\n\n  #formId?: string\n\n  get formId(): string | undefined {\n    return this.#formId\n  }\n\n  @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n  #pendingStyles?: CSSResultOrNative[]\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  /**\n   * Allows to inject a template into the internals of the element.\n   * This is helpful when working with imperative dialogs.\n   * @param content The content to inject into the body.\n   */\n  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {\n    this.#inject = content\n    if (styles) {\n      if (this.shadowRoot) {\n        adoptStyles(this.shadowRoot, styles)\n      } else {\n        if (!this.#pendingStyles) {\n          this.#pendingStyles = []\n        }\n        this.#pendingStyles.push(...styles)\n      }\n    }\n    if (this.shadowRoot && styles) {\n      adoptStyles(this.shadowRoot, styles)\n    }\n  }\n\n  protected override firstUpdated(): void {\n    const styles = this.#pendingStyles\n    if (styles) {\n      const root = this.shadowRoot as ShadowRoot\n      const all = [...root.adoptedStyleSheets, ...styles]\n      adoptStyles(this.shadowRoot as ShadowRoot, all)\n    }\n  }\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('useForm') && this.useForm && !this.#formId) {\n      const r = (Math.random() + 1).toString(36).substring(7)\n      this.#formId = `form-${r}`\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    const path = e.composedPath()\n    const { buttons } = this\n    const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n    if (!button) {\n      return\n    }\n    if (button.type === 'submit') {\n      // Adds support for forms.\n      // When a form's submit button is clicked we yield the flow control to the form.\n      // This way the form can handle the submit event.\n      e.preventDefault()\n      return\n    }\n    const { value = '' } = button\n    this.handleInteraction(value as 'dismiss' | 'confirm')\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e)\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss')\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.#controlVisibility()\n    }\n    super.updated(changedProperties)\n  }\n\n  #controlVisibility(): void {\n    const { dialog, modal, open } = this\n    if (!dialog) {\n      return\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal()\n      } else {\n        dialog.show()\n      }\n    } else {\n      dialog.close()\n    }\n  }\n\n  #handleSlotChange(): void {\n    const { icons, titles, buttons } = this\n    this.hasIcon = !!icons && !!icons.length\n    this.hasTitle = !!titles && !!titles.length\n    this.hasButton = !!buttons && !!buttons.length\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return\n    }\n    this.open = false\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return\n    }\n    this.open = false\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleConfirm(): void {\n    if (!this.useForm) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  #handleSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement\n    const copy = new SyntheticSubmitEvent(event.type, form, {\n      submitter: event.submitter,\n      cancelable: true,\n      bubbles: false,\n      composed: false,\n    })\n    const dispatched = this.dispatchEvent(copy)\n    if (dispatched) {\n      this.handleInteraction('confirm')\n    } else {\n      event.preventDefault()\n    }\n  }\n\n  override render(): TemplateResult {\n    const { useForm } = this\n    return html`\n      <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\">\n        <div class=\"container\">${useForm ? this.#renderFormContent() : this.renderContent()}</div>\n      </dialog>\n    `\n  }\n\n  protected renderContent(): TemplateResult[] | TemplateResult {\n    return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n  }\n\n  #renderFormContent(): TemplateResult {\n    return html`\n      <form id=\"${ifDefined(this.formId)}\" method=\"dialog\" @submit=\"${this.#handleSubmit}\" part=\"form\">\n        ${this.renderContent()}\n      </form>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      'icon': true,\n      'with-icon': this.hasIcon,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      'title': true,\n      'with-title': this.hasTitle,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"title\">\n        <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderBody(): TemplateResult {\n    let content = this.#inject\n    if (typeof content === 'function') {\n      content = content()\n    }\n    const injected = content || nothing\n    return html` <div class=\"content\" part=\"body\"><slot></slot>${injected}</div> `\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      'buttons': true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"button\">\n        <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n        ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n      </div>\n    `\n  }\n\n  #renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this\n    if (!dismissLabel) {\n      return nothing\n    }\n    return html`\n      <ui-button\n        color=\"text\"\n        value=\"dismiss\"\n        class=\"internal-button\"\n        @click=\"${this.handleDismiss}\"\n        part=\"negative-action\"\n        >${dismissLabel}</ui-button\n      >\n    `\n  }\n\n  #renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel, confirmValue = 'confirm', useForm } = this\n    if (!confirmLabel) {\n      return nothing\n    }\n    const type = useForm ? 'submit' : 'button'\n    return html`\n      <ui-button\n        color=\"text\"\n        type=\"${type}\"\n        value=\"${confirmValue}\"\n        class=\"internal-button\"\n        @click=\"${this.handleConfirm}\"\n        part=\"positive-action\"\n        >${confirmLabel}</ui-button\n      >\n    `\n  }\n}\n"]}

package/build/src/md/dialog/internals/Dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAsHC"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBA0HC"}

package/build/src/md/dialog/internals/Dialog.styles.js

@@ -15,14 +15,16 @@ export default css `
     color: var(--md-sys-color-on-surface-variant);
     padding: 24px;
 
-    max-width: var(--ui-dialog-max-width, revert);
-    max-height: var(--ui-dialog-max-height, revert);
+    max-width: var(--ui-dialog-max-width, 90vw);
+    max-height: var(--ui-dialog-max-height, 90vh);
     width: var(--ui-dialog-width, revert);
     height: var(--ui-dialog-height, revert);
   }
 
   dialog:open {
     animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
+    display: flex;
+    flex-direction: column;
   }
 
   dialog:open::backdrop {
@@ -32,6 +34,8 @@ export default css `
   .container {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    flex: 1;
   }
 
   .icon {

package/build/src/md/dialog/internals/Dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    overflow: hidden;\n    /* Do not override the display value here. It will render the dialog even when hidden */\n\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-high);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    max-width: var(--ui-dialog-max-width, revert);\n    max-height: var(--ui-dialog-max-height, revert);\n    width: var(--ui-dialog-width, revert);\n    height: var(--ui-dialog-height, revert);\n  }\n\n  dialog:open {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n  }\n\n  dialog:open::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .icon {\n    display: none;\n  }\n\n  .icon.with-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n    fill: var(--md-sys-color-secondary);\n    width: 24px;\n    height: 24px;\n  }\n\n  .title {\n    display: none;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin: 0;\n    padding: 0;\n    text-align: center;\n  }\n\n  .title.with-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .content {\n    overflow: auto;\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  .buttons {\n    display: none;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  .buttons.with-buttons {\n    margin-top: 24px;\n  }\n\n  .buttons ::slotted(:not(:last-child)) {\n    margin-right: 12px;\n  }\n\n  .content ::slotted(*) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`\n"]}
+{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    overflow: hidden;\n    /* Do not override the display value here. It will render the dialog even when hidden */\n\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-high);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    max-width: var(--ui-dialog-max-width, 90vw);\n    max-height: var(--ui-dialog-max-height, 90vh);\n    width: var(--ui-dialog-width, revert);\n    height: var(--ui-dialog-height, revert);\n  }\n\n  dialog:open {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n    display: flex;\n    flex-direction: column;\n  }\n\n  dialog:open::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    flex: 1;\n  }\n\n  .icon {\n    display: none;\n  }\n\n  .icon.with-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n    fill: var(--md-sys-color-secondary);\n    width: 24px;\n    height: 24px;\n  }\n\n  .title {\n    display: none;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin: 0;\n    padding: 0;\n    text-align: center;\n  }\n\n  .title.with-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .content {\n    overflow: auto;\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  .buttons {\n    display: none;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  .buttons.with-buttons {\n    margin-top: 24px;\n  }\n\n  .buttons ::slotted(:not(:last-child)) {\n    margin-right: 12px;\n  }\n\n  .content ::slotted(*) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`\n"]}

package/demo/md/dialog/dialog.ts

@@ -16,6 +16,8 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor fullOpened = false
 
+  @reactive() accessor overflowOpened = false
+
   protected openSimple(): void {
     this.simpleOpened = true
   }
@@ -34,6 +36,15 @@ class ComponentDemoPage extends DemoPage {
     this.reportClosingReason(e.detail)
   }
 
+  protected openOverflow(): void {
+    this.overflowOpened = true
+  }
+
+  protected overflowClosed(e: CustomEvent<UiDialogClosingReason>): void {
+    this.overflowOpened = false
+    this.reportClosingReason(e.detail)
+  }
+
   imperativeDialog: UiDialog | null = null
 
   protected openImperative(): void {
@@ -70,7 +81,7 @@ class ComponentDemoPage extends DemoPage {
   contentTemplate(): TemplateResult {
     return html`
       <a href="../">Back</a>
-      ${this.simpleDialog()} ${this.fullDialog()} ${this.renderImperativeDialog()}
+      ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.renderImperativeDialog()}
     `
   }
 
@@ -113,6 +124,126 @@ class ComponentDemoPage extends DemoPage {
     `
   }
 
+  overflowDialog(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Overflow dialog</h2>
+        <p>This dialog contains a lot of content that will overflow the container.</p>
+        <ui-button color="filled" @click="${this.openOverflow}">Open</ui-button>
+        <ui-dialog
+          ?open="${this.overflowOpened}"
+          @close="${this.overflowClosed}"
+          modal
+          style="--ui-dialog-max-width: 400px; --ui-dialog-max-height: 500px;"
+        >
+          <ui-icon slot="icon" icon="info"></ui-icon>
+          <span slot="title">Terms and Conditions</span>
+          <div style="overflow-y: auto; max-height: 300px;">
+            <h3>1. Introduction</h3>
+            <p>
+              Welcome to our application. These terms and conditions outline the rules and regulations for the use of
+              our software.
+            </p>
+
+            <h3>2. User Agreement</h3>
+            <p>
+              By accessing this application, we assume you accept these terms and conditions. Do not continue to use our
+              application if you do not agree to take all of the terms and conditions stated on this page.
+            </p>
+
+            <h3>3. Privacy Policy</h3>
+            <p>
+              Your privacy is important to us. Our Privacy Policy explains how we collect, use, and protect your
+              information when you use our service. By using our service, you agree to the collection and use of
+              information in accordance with our Privacy Policy.
+            </p>
+
+            <h3>4. Data Collection</h3>
+            <p>
+              We collect several different types of information for various purposes to provide and improve our service
+              to you. This includes:
+            </p>
+            <ul>
+              <li>
+                Personal Data: While using our service, we may ask you to provide us with certain personally
+                identifiable information.
+              </li>
+              <li>Usage Data: We may also collect information on how the service is accessed and used.</li>
+              <li>Tracking & Cookies Data: We use cookies and similar tracking technologies to track activity.</li>
+            </ul>
+
+            <h3>5. User Responsibilities</h3>
+            <p>
+              Users are responsible for maintaining the confidentiality of their account information and for all
+              activities that occur under their account. You agree to:
+            </p>
+            <ul>
+              <li>Provide accurate and complete information</li>
+              <li>Maintain the security of your password</li>
+              <li>Notify us immediately of any unauthorized use</li>
+              <li>Use the service in compliance with applicable laws</li>
+            </ul>
+
+            <h3>6. Prohibited Uses</h3>
+            <p>You may not use our service:</p>
+            <ul>
+              <li>For any unlawful purpose or to solicit others to perform acts</li>
+              <li>
+                To violate any international, federal, provincial, or state regulations, rules, laws, or local
+                ordinances
+              </li>
+              <li>
+                To infringe upon or violate our intellectual property rights or the intellectual property rights of
+                others
+              </li>
+              <li>To harass, abuse, insult, harm, defame, slander, disparage, intimidate, or discriminate</li>
+              <li>To submit false or misleading information</li>
+            </ul>
+
+            <h3>7. Intellectual Property</h3>
+            <p>
+              The service and its original content, features, and functionality are and will remain the exclusive
+              property of our company and its licensors. The service is protected by copyright, trademark, and other
+              laws.
+            </p>
+
+            <h3>8. Termination</h3>
+            <p>
+              We may terminate or suspend your account and bar access to the service immediately, without prior notice
+              or liability, under our sole discretion, for any reason whatsoever and without limitation.
+            </p>
+
+            <h3>9. Disclaimer</h3>
+            <p>
+              The information on this application is provided on an "as is" basis. To the fullest extent permitted by
+              law, this company excludes all representations, warranties, conditions and terms.
+            </p>
+
+            <h3>10. Limitation of Liability</h3>
+            <p>
+              In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates,
+              be liable for any indirect, incidental, special, consequential, or punitive damages.
+            </p>
+
+            <h3>11. Changes to Terms</h3>
+            <p>
+              We reserve the right, at our sole discretion, to modify or replace these terms at any time. If a revision
+              is material, we will provide at least 30 days notice prior to any new terms taking effect.
+            </p>
+
+            <h3>12. Contact Information</h3>
+            <p>
+              If you have any questions about these Terms and Conditions, please contact us at support@example.com or
+              through our contact form.
+            </p>
+          </div>
+          <ui-button color="text" slot="button" value="dismiss">Decline</ui-button>
+          <ui-button color="filled" slot="button" value="confirm">Accept</ui-button>
+        </ui-dialog>
+      </section>
+    `
+  }
+
   renderImperativeDialog(): TemplateResult {
     return html`
       <section class="demo-section">

package/package.json

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

package/src/lib/Dom.ts

@@ -1,25 +1,40 @@
 /**
  * Searches for an element with the given ID in parent shadow roots
  */
-export function findElementInShadowRoots(id: string, from: Element): HTMLElement | null {
+export function findElementInShadowRoots(id: string, from: HTMLElement): HTMLElement | null {
   // First try to find in document
   const rootElm = document.getElementById(id)
   if (rootElm) {
     return rootElm
   }
+
   // If not found in document, search in parent shadow roots
-  let current: Element | null | undefined = from
+  let current: HTMLElement | null = from
+  const queryId = `#${id}`
 
   while (current) {
-    const shadowRoot = current.shadowRoot
-    if (shadowRoot) {
-      const element = shadowRoot.getElementById(id)
+    // Check if current element has a shadow root and search within it
+    if (current.shadowRoot) {
+      const element = current.shadowRoot.querySelector(queryId)
       if (element) {
         return element as HTMLElement
       }
     }
 
-    current = current.parentElement ?? current.shadowRoot?.host
+    // Move up the DOM tree
+    if (current.parentNode) {
+      if (current.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        // We're inside a shadow root, move to the shadow host
+        const shadowRoot = current.parentNode as ShadowRoot
+        current = shadowRoot.host as HTMLElement
+      } else {
+        // Regular DOM traversal
+        current = current.parentElement
+      }
+    } else {
+      // No more parents
+      current = null
+    }
   }
 
   return null

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

@@ -16,14 +16,16 @@ export default css`
     color: var(--md-sys-color-on-surface-variant);
     padding: 24px;
 
-    max-width: var(--ui-dialog-max-width, revert);
-    max-height: var(--ui-dialog-max-height, revert);
+    max-width: var(--ui-dialog-max-width, 90vw);
+    max-height: var(--ui-dialog-max-height, 90vh);
     width: var(--ui-dialog-width, revert);
     height: var(--ui-dialog-height, revert);
   }
 
   dialog:open {
     animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
+    display: flex;
+    flex-direction: column;
   }
 
   dialog:open::backdrop {
@@ -33,6 +35,8 @@ export default css`
   .container {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    flex: 1;
   }
 
   .icon {

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

@@ -338,7 +338,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   override render(): TemplateResult {
     const { useForm } = this
     return html`
-      <dialog @close="${this.handleDialogClose}">
+      <dialog @close="${this.handleDialogClose}" part="dialog">
         <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
       </dialog>
     `
@@ -350,7 +350,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
 
   #renderFormContent(): TemplateResult {
     return html`
-      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}">
+      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
         ${this.renderContent()}
       </form>
     `
@@ -386,7 +386,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
       content = content()
     }
     const injected = content || nothing
-    return html` <div class="content"><slot></slot>${injected}</div> `
+    return html` <div class="content" part="body"><slot></slot>${injected}</div> `
   }
 
   protected renderButtons(): TemplateResult {
@@ -408,7 +408,12 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
       return nothing
     }
     return html`
-      <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
+      <ui-button
+        color="text"
+        value="dismiss"
+        class="internal-button"
+        @click="${this.handleDismiss}"
+        part="negative-action"
         >${dismissLabel}</ui-button
       >
     `
@@ -427,6 +432,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
         value="${confirmValue}"
         class="internal-button"
         @click="${this.handleConfirm}"
+        part="positive-action"
         >${confirmLabel}</ui-button
       >
     `

package/test/lib/Dom.test.ts

@@ -0,0 +1,231 @@
+import { assert } from '@open-wc/testing'
+import { findElementInShadowRoots } from '../../src/lib/Dom.js'
+
+describe('lib', () => {
+  describe('Dom', () => {
+    describe('findElementInShadowRoots', () => {
+      let container: HTMLDivElement
+
+      beforeEach(() => {
+        container = document.createElement('div')
+        container.id = 'test-container'
+        document.body.appendChild(container)
+      })
+
+      afterEach(() => {
+        document.body.removeChild(container)
+      })
+
+      it('finds element in document root', () => {
+        const element = document.createElement('div')
+        element.id = 'test-element'
+        container.appendChild(element)
+
+        const fromElement = document.createElement('div')
+        container.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('test-element', fromElement)
+        assert.equal(result, element)
+      })
+
+      it('returns null when element is not found', () => {
+        const fromElement = document.createElement('div')
+        container.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('non-existent', fromElement)
+        assert.isNull(result)
+      })
+
+      it('finds element in parent shadow root', () => {
+        // Create a custom element with shadow root
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+        // Add target element to shadow root
+        const targetElement = document.createElement('div')
+        targetElement.id = 'shadow-element'
+        shadowRoot.appendChild(targetElement)
+
+        // Add shadow host to container
+        container.appendChild(shadowHost)
+
+        // Create a child element inside the shadow root to search from
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+        const result = findElementInShadowRoots('shadow-element', fromElement)
+        assert.ok(result)
+        assert.equal(result.id, 'shadow-element')
+      })
+
+      it('finds element in nested shadow roots', () => {
+        // Create outer shadow host
+        const outerShadowHost = document.createElement('div')
+        outerShadowHost.id = 'outer-shadow-host'
+        const outerShadowRoot = outerShadowHost.attachShadow({ mode: 'open' })
+
+        // Create inner shadow host inside outer shadow root
+        const innerShadowHost = document.createElement('div')
+        innerShadowHost.id = 'inner-shadow-host'
+        const innerShadowRoot = innerShadowHost.attachShadow({ mode: 'open' })
+        outerShadowRoot.appendChild(innerShadowHost)
+
+        // Add target element to outer shadow root
+        const targetElement = document.createElement('div')
+        targetElement.id = 'nested-element'
+        outerShadowRoot.appendChild(targetElement)
+
+        // Add container to document
+        container.appendChild(outerShadowHost)
+
+        // Search from element in inner shadow root
+        const fromElement = document.createElement('div')
+        fromElement.id = 'search-from'
+        innerShadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('nested-element', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('searches through multiple shadow root levels', () => {
+        // Create a deeply nested shadow structure
+        const level1Host = document.createElement('div')
+        const level1Shadow = level1Host.attachShadow({ mode: 'open' })
+
+        const level2Host = document.createElement('div')
+        const level2Shadow = level2Host.attachShadow({ mode: 'open' })
+        level1Shadow.appendChild(level2Host)
+
+        const level3Host = document.createElement('div')
+        const level3Shadow = level3Host.attachShadow({ mode: 'open' })
+        level2Shadow.appendChild(level3Host)
+
+        // Add target element at level 1
+        const targetElement = document.createElement('div')
+        targetElement.id = 'deep-element'
+        level1Shadow.appendChild(targetElement)
+
+        container.appendChild(level1Host)
+
+        // Search from deepest level
+        const fromElement = document.createElement('div')
+        level3Shadow.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('deep-element', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('prefers document element over shadow root element', () => {
+        // Create element in document
+        const documentElement = document.createElement('div')
+        documentElement.id = 'duplicate-id'
+        documentElement.textContent = 'document'
+        container.appendChild(documentElement)
+
+        // Create shadow host with element with same ID
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+
+        const shadowElement = document.createElement('div')
+        shadowElement.id = 'duplicate-id'
+        shadowElement.textContent = 'shadow'
+        shadowRoot.appendChild(shadowElement)
+
+        container.appendChild(shadowHost)
+
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('duplicate-id', fromElement)
+        assert.equal(result, documentElement)
+        assert.isNotNull(result)
+        assert.equal(result.textContent, 'document')
+      })
+
+      it('handles elements without parent', () => {
+        const isolatedElement = document.createElement('div')
+
+        const result = findElementInShadowRoots('test-id', isolatedElement)
+        assert.isNull(result)
+      })
+
+      it('handles shadow root host traversal', () => {
+        // Create a shadow host
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+        container.appendChild(shadowHost)
+
+        // Add target element to container (outside shadow)
+        const targetElement = document.createElement('div')
+        targetElement.id = 'outside-shadow'
+        container.appendChild(targetElement)
+
+        // Search from inside shadow root
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('outside-shadow', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('handles elements in current shadow root', () => {
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+        container.appendChild(shadowHost)
+
+        // Add target element to same shadow root
+        const targetElement = document.createElement('div')
+        targetElement.id = 'same-shadow'
+        shadowRoot.appendChild(targetElement)
+
+        // Add search element to same shadow root
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('same-shadow', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('handles complex shadow DOM structure with mixed content', () => {
+        // Create complex structure: document -> shadow1 -> regular div -> shadow2
+        const shadow1Host = document.createElement('div')
+        const shadow1Root = shadow1Host.attachShadow({ mode: 'open' })
+        container.appendChild(shadow1Host)
+
+        const regularDiv = document.createElement('div')
+        shadow1Root.appendChild(regularDiv)
+
+        const shadow2Host = document.createElement('div')
+        const shadow2Root = shadow2Host.attachShadow({ mode: 'open' })
+        regularDiv.appendChild(shadow2Host)
+
+        // Add target to shadow1
+        const targetElement = document.createElement('div')
+        targetElement.id = 'complex-target'
+        shadow1Root.appendChild(targetElement)
+
+        // Search from shadow2
+        const fromElement = document.createElement('div')
+        shadow2Root.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('complex-target', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('returns null for invalid ID characters', () => {
+        const element = document.createElement('div')
+        element.id = 'valid-id'
+        container.appendChild(element)
+
+        const fromElement = document.createElement('div')
+        container.appendChild(fromElement)
+
+        // Test with empty string
+        const result1 = findElementInShadowRoots('', fromElement)
+        assert.isNull(result1)
+
+        // Test with whitespace
+        const result2 = findElementInShadowRoots('   ', fromElement)
+        assert.isNull(result2)
+      })
+    })
+  })
+})

package/web-test-runner.config.js

@@ -81,7 +81,7 @@ export default /** @type TestRunnerConfig */ ({
   },
   browserStartTimeout: 20000,
   testsStartTimeout: 20000,
-  testsFinishTimeout: 60000,
+  testsFinishTimeout: 30000,
 
   coverageConfig: {
     report: true,