@api-client/ui 0.0.2 → 0.0.4

package/dist/ui/dialog/UiDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiDialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport UiButton from \"../button/UiButton.js\";\nimport '../../define/ui/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\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 value=\"dismiss\">Cancel</ui-button> \n * <ui-button 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 slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button 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` 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 {\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   * @attribute\n   */\n  @property({ type: Boolean }) 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 }) 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 }) dismissLabel?: string;\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 }) confirmLabel?: string;\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') readonly dialog!: HTMLDialogElement;\n\n  @state() protected hasIcon = false;\n\n  @state() protected hasTitle = false;\n\n  @state() protected hasButton = false;\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected readonly icons!: HTMLElement[];\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected readonly titles!: HTMLElement[];\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected readonly 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  protected dialogValue?: unknown;\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\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    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  protected override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.controlVisibility();\n    }\n    super.updated(changedProperties);\n  }\n\n  protected 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  protected handleSlotChange(): void {\n    this.hasIcon = !!this.icons.length;\n    this.hasTitle = !!this.titles.length;\n    this.hasButton = !!this.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(new CustomEvent<UiDialogClosingReason>('close', {\n      composed: true,\n      detail,\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    this.handleInteraction('confirm');\n  }\n\n  override render(): TemplateResult {\n    return html`\n    <dialog @close=\"${this.handleDialogClose}\">\n      ${this.renderIcon()}\n      ${this.renderTitle()}\n      ${this.renderBody()}\n      ${this.renderButtons()}\n    </dialog>\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\"><slot name=\"icon\" @slotchange=\"${this.handleSlotChange}\"></slot></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\"><slot name=\"title\" @slotchange=\"${this.handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderBody(): TemplateResult {\n    return html`\n    <div class=\"content\"><slot></slot></div>\n    `;\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()}\n    </div>\n    `;\n  }\n\n  protected renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this;\n    if (!dismissLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"dismiss\" type=\"text\" class=\"internal-button\" @click=\"${this.handleDismiss}\">${dismissLabel}</ui-button>\n    `;\n  }\n\n  protected renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel } = this;\n    if (!confirmLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"confirm\" type=\"text\" class=\"internal-button\" @click=\"${this.handleConfirm}\">${confirmLabel}</ui-button>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"UiDialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport UiButton from \"../button/UiButton.js\";\nimport '../../define/ui/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\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 value=\"dismiss\">Cancel</ui-button> \n * <ui-button 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 slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button 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` 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 {\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   * @attribute\n   */\n  @property({ type: Boolean }) 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 }) 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 }) dismissLabel?: string;\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 }) confirmLabel?: string;\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') readonly dialog!: HTMLDialogElement;\n\n  @state() protected hasIcon = false;\n\n  @state() protected hasTitle = false;\n\n  @state() protected hasButton = false;\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected readonly icons!: HTMLElement[];\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected readonly titles!: HTMLElement[];\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected readonly 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  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\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    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  protected override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.controlVisibility();\n    }\n    super.updated(changedProperties);\n  }\n\n  protected 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  protected 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(new CustomEvent<UiDialogClosingReason>('close', {\n      composed: true,\n      detail,\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    this.handleInteraction('confirm');\n  }\n\n  override render(): TemplateResult {\n    return html`\n    <dialog @close=\"${this.handleDialogClose}\">\n      ${this.renderIcon()}\n      ${this.renderTitle()}\n      ${this.renderBody()}\n      ${this.renderButtons()}\n    </dialog>\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\"><slot name=\"icon\" @slotchange=\"${this.handleSlotChange}\"></slot></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\"><slot name=\"title\" @slotchange=\"${this.handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderBody(): TemplateResult {\n    return html`\n    <div class=\"content\"><slot></slot></div>\n    `;\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()}\n      ${this.renderConfirmButton()}\n    </div>\n    `;\n  }\n\n  protected renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this;\n    if (!dismissLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"dismiss\" type=\"text\" class=\"internal-button\" @click=\"${this.handleDismiss}\">${dismissLabel}</ui-button>\n    `;\n  }\n\n  protected renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel } = this;\n    if (!confirmLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"confirm\" type=\"text\" class=\"internal-button\" @click=\"${this.handleConfirm}\">${confirmLabel}</ui-button>\n    `;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",

package/src/pages/ApplicationScreen.ts

@@ -116,11 +116,6 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
    */
   systemTheme: 'light' | 'dark' = 'light';
 
-  /**
-   * The root location where theme files are located.
-   */
-  themesRoot = '/src/styles/m3';
-
   /**
    * The theme to use as selected by the user.
    * Default to system default.
@@ -201,21 +196,19 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
   }
 
   protected activateTheme(type: 'light' | 'dark'): void {
-    const file = `theme.${type}.css`;
-    const existing = document.head.querySelector('[data-theme]') as HTMLLinkElement | null;
-    if (existing) {
-      if (existing.href.includes(file)) {
-        return;
-      }
-      existing.parentElement?.removeChild(existing);
+    const root = document.querySelector('html');
+    if (!root) {
+      return;
     }
-    const link = document.createElement('link');
-    const url = new URL(`${this.themesRoot}/${file}`, window.location.href);
-    link.rel = 'stylesheet';
-    link.type = 'text/css';
-    link.href = url.toString();
-    link.dataset.theme = 'true';
-    document.head.appendChild(link);
+    const { classList } = root;
+    // clear all themes
+    classList.forEach((value) => {
+      if (value.startsWith('theme-')) {
+        classList.remove(value);
+      }
+    });
+    const name = `theme-${type}`;
+    classList.add(name);
   }
 
   async isPlatformSupported(): Promise<boolean> {

package/src/pages/demo/DemoPage.ts

@@ -76,18 +76,19 @@ export abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget))
   }
 
   protected activateTheme(type: 'light' | 'dark'): void {
-    const file = `theme.${type}.css`;
-    const existing = document.head.querySelector('[data-theme]');
-    if (existing) {
-      existing.parentElement?.removeChild(existing);
+    const root = document.querySelector('html');
+    if (!root) {
+      return;
     }
-    const link = document.createElement('link');
-    const url = new URL(`/src/styles/m3/${file}`, window.location.href);
-    link.rel = 'stylesheet';
-    link.type = 'text/css';
-    link.href = url.toString();
-    link.dataset.theme = 'true';
-    document.head.appendChild(link);
+    const { classList } = root;
+    // clear all themes
+    classList.forEach((value) => {
+      if (value.startsWith('theme-')) {
+        classList.remove(value);
+      }
+    });
+    const name = `theme-${type}`;
+    classList.add(name);
   }
 
   /**

package/src/styles/m3/theme.css

@@ -0,0 +1,81 @@
+html.theme-light {
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+ 
+  /* CUSTOM */
+  --md-sys-elevation-0: none;
+  --md-sys-elevation-1: var(--md-sys-elevation-1-light);
+  --md-sys-elevation-2: var(--md-sys-elevation-2-light);
+  --md-sys-elevation-3: var(--md-sys-elevation-3-light);
+  --md-sys-elevation-4: var(--md-sys-elevation-4-light);
+  --md-sys-elevation-5: var(--md-sys-elevation-5-light);
+}
+
+html.theme-dark {
+  --md-sys-color-primary: var(--md-sys-color-primary-dark);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+  --md-sys-color-error: var(--md-sys-color-error-dark);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+  --md-sys-color-outline: var(--md-sys-color-outline-dark);
+  --md-sys-color-background: var(--md-sys-color-background-dark);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+  --md-sys-color-surface: var(--md-sys-color-surface-dark);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+
+  /* CUSTOM */
+  --md-sys-elevation-0: none;
+  --md-sys-elevation-1: var(--md-sys-elevation-1-dark);
+  --md-sys-elevation-2: var(--md-sys-elevation-2-dark);
+  --md-sys-elevation-3: var(--md-sys-elevation-3-dark);
+  --md-sys-elevation-4: var(--md-sys-elevation-4-dark);
+  --md-sys-elevation-5: var(--md-sys-elevation-5-dark);
+}

package/src/ui/dialog/UiDialog.ts

@@ -130,7 +130,7 @@ export default class UiDialog extends UiElement {
    * To be set by a child class when closing the dialog.
    * This is passed to the close event.
    */
-  protected dialogValue?: unknown;
+  dialogValue?: unknown;
 
   constructor() {
     super();
@@ -182,9 +182,10 @@ export default class UiDialog extends UiElement {
   }
 
   protected handleSlotChange(): void {
-    this.hasIcon = !!this.icons.length;
-    this.hasTitle = !!this.titles.length;
-    this.hasButton = !!this.buttons.length;
+    const { icons, titles, buttons } = this;
+    this.hasIcon = !!icons && !!icons.length;
+    this.hasTitle = !!titles && !!titles.length;
+    this.hasButton = !!buttons && !!buttons.length;
   }
 
   protected handleInteraction(value: 'dismiss' | 'confirm'): void {
@@ -266,6 +267,7 @@ export default class UiDialog extends UiElement {
     <div class="${classMap(classes)}" part="button">
       <slot name="button" @slotchange="${this.handleSlotChange}"></slot>
       ${this.renderDismissButton()}
+      ${this.renderConfirmButton()}
     </div>
     `;
   }

package/test/ui/dialog/UiDialog.test.ts

@@ -0,0 +1,236 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import UiDialog, { UiDialogClosingReason } from '../../../src/ui/dialog/UiDialog.js';
+import { UiMock } from '../../helpers/UiMock.js';
+import UiButton from '../../../src/ui/button/UiButton.js';
+import '../../../src/define/ui/ui-dialog.js';
+import '../../../src/define/ui/ui-icon.js';
+
+describe('UI', () => {
+  describe('Dialog', () => {
+    async function basicFixture(): Promise<UiDialog> {
+      return fixture(html`
+        <ui-dialog>
+          Content
+        </ui-dialog>`
+      );
+    }
+
+    async function modalFixture(): Promise<UiDialog> {
+      return fixture(html`
+      <ui-dialog modal>
+        Content
+      </ui-dialog>`);
+    }
+
+    async function iconFixture(): Promise<UiDialog> {
+      return fixture(html`
+      <ui-dialog>
+        <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
+        Content
+      </ui-dialog>`);
+    }
+
+    async function titleFixture(): Promise<UiDialog> {
+      return fixture(html`
+      <ui-dialog>
+        <span slot="title">The title</span>
+        Content
+      </ui-dialog>`);
+    }
+
+    async function buttonFixture(): Promise<UiDialog> {
+      return fixture(html`
+      <ui-dialog>
+        Content
+        <ui-button slot="button" type="text">Learn more</ui-button>
+        <ui-button slot="button" value="dismiss" type="text">Cancel</ui-button>
+        <ui-button slot="button" value="confirm" type="text">Accept</ui-button>
+      </ui-dialog>`);
+    }
+
+    describe('open/close', () => {
+      it('opens the native dialog via the "open" attribute', async () => {
+        const element = await basicFixture();
+        assert.isFalse(element.dialog.open, 'native dialog is closed initially');
+
+        element.open = true;
+        await element.updateComplete;
+        assert.isTrue(element.dialog.open, 'native dialog is opened');
+
+        element.open = false;
+        await element.updateComplete;
+        assert.isFalse(element.dialog.open, 'native dialog is closed again');
+      });
+
+      it('closes the dialog via the Escape button', async () => {
+        const element = await buttonFixture();
+        // the dialog requires a focusable element
+        const button = element.querySelector('ui-button')!;
+        button.focus();
+        await UiMock.keyPress(element, 'Escape', { key: 'Escape' });
+        assert.equal(element.open, false);
+      });
+
+      it('closes the dialog via the dismiss slotted button', async () => {
+        const element = await buttonFixture();
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton;
+        button.click();
+        assert.equal(element.open, false);
+      });
+
+      it('closes the dialog via the confirm slotted button', async () => {
+        const element = await buttonFixture();
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton;
+        button.click();
+        assert.equal(element.open, false);
+      });
+
+      it('closes the dialog via the dismissLabel button', async () => {
+        const element = await basicFixture();
+        element.dismissLabel = 'Close';
+        await element.updateComplete;
+        const button = element.shadowRoot!.querySelector('.internal-button[value="dismiss"]') as UiButton;
+        button.click();
+        assert.equal(element.open, false);
+      });
+
+      it('closes the dialog via the confirmLabel button', async () => {
+        const element = await basicFixture();
+        element.confirmLabel = 'Close';
+        await element.updateComplete;
+        const button = element.shadowRoot!.querySelector('.internal-button[value="confirm"]') as UiButton;
+        button.click();
+        assert.equal(element.open, false);
+      });
+
+      it('dispatches the close event with cancelled = true', async () => {
+        const element = await buttonFixture();
+        const spy = sinon.spy();
+        element.addEventListener('close', spy);
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton;
+        button.click();
+        assert.isTrue(spy.calledOnce, 'the event was dispatched');
+        const event = spy.args[0][0] as CustomEvent<UiDialogClosingReason>;
+        assert.isTrue(event.detail.cancelled, 'the cancelled flag is set');
+      });
+
+      it('dispatches the close event with cancelled = true', async () => {
+        const element = await buttonFixture();
+        const spy = sinon.spy();
+        element.addEventListener('close', spy);
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton;
+        button.click();
+        assert.isTrue(spy.calledOnce, 'the event was dispatched');
+        const event = spy.args[0][0] as CustomEvent<UiDialogClosingReason>;
+        assert.isFalse(event.detail.cancelled, 'the cancelled flag is not set');
+      });
+
+      it('dispatches the dialogValue', async () => {
+        const element = await buttonFixture();
+        element.dialogValue = 'test';
+        const spy = sinon.spy();
+        element.addEventListener('close', spy);
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton;
+        button.click();
+        assert.isTrue(spy.calledOnce, 'the event was dispatched');
+        const event = spy.args[0][0] as CustomEvent<UiDialogClosingReason>;
+        assert.equal(event.detail.value, 'test', 'has the value');
+      });
+    });
+
+    describe('modal dialog', () => {
+      it('opens the dialog as modal', async () => {
+        const element = await modalFixture();
+        const spy = sinon.spy(element.dialog, 'showModal');
+        element.open = true;
+        await element.updateComplete;
+        assert.isTrue(spy.calledOnce);
+      });
+    });
+
+    describe('icon', () => {
+      it('renders the icon slot', async () => {
+        const element = await basicFixture();
+        const slot = element.shadowRoot!.querySelector('slot[name="icon"]') as HTMLSlotElement;
+        assert.ok(slot, 'has the slot');
+      });
+
+      it('does not render padding around the icon slot', async () => {
+        const element = await basicFixture();
+        const container = element.shadowRoot!.querySelector('.icon') as HTMLElement;
+        assert.isFalse(container.classList.contains('with-icon'), 'has no with-icon class');
+      });
+
+      it('renders padding around the icon slot with an icon', async () => {
+        const element = await iconFixture();
+        const container = element.shadowRoot!.querySelector('.icon') as HTMLElement;
+        assert.isTrue(container.classList.contains('with-icon'), 'has the with-icon class');
+      });
+    });
+
+    describe('title', () => {
+      it('renders the title slot', async () => {
+        const element = await basicFixture();
+        const slot = element.shadowRoot!.querySelector('slot[name="title"]') as HTMLSlotElement;
+        assert.ok(slot, 'has the slot');
+      });
+
+      it('does not render padding around the title slot', async () => {
+        const element = await basicFixture();
+        const container = element.shadowRoot!.querySelector('.title') as HTMLElement;
+        assert.isFalse(container.classList.contains('with-title'), 'has no with-title class');
+      });
+
+      it('renders padding around the title slot with a title', async () => {
+        const element = await titleFixture();
+        const container = element.shadowRoot!.querySelector('.title') as HTMLElement;
+        assert.isTrue(container.classList.contains('with-title'), 'has the with-title class');
+      });
+    });
+
+    describe('buttons', () => {
+      it('renders the button slot', async () => {
+        const element = await basicFixture();
+        const slot = element.shadowRoot!.querySelector('slot[name="button"]') as HTMLSlotElement;
+        assert.ok(slot, 'has the slot');
+      });
+
+      it('does not render padding around the buttons slot', async () => {
+        const element = await basicFixture();
+        const container = element.shadowRoot!.querySelector('.buttons') as HTMLElement;
+        assert.isFalse(container.classList.contains('with-buttons'), 'has no with-buttons class');
+      });
+
+      it('renders the confirm button', async () => {
+        const element = await basicFixture();
+        element.confirmLabel = 'OK label';
+        await element.updateComplete;
+        const container = element.shadowRoot!.querySelector('.buttons') as HTMLElement;
+        assert.isTrue(container.classList.contains('with-buttons'), 'has the with-buttons class');
+        const button = element.shadowRoot!.querySelector('.internal-button') as UiButton;
+        assert.ok(button, 'has the button');
+        assert.equal(button.value, 'confirm');
+        assert.equal(button.textContent!.trim(), 'OK label');
+      });
+
+      it('renders the dismiss button', async () => {
+        const element = await basicFixture();
+        element.dismissLabel = 'Cancel label';
+        await element.updateComplete;
+        const container = element.shadowRoot!.querySelector('.buttons') as HTMLElement;
+        assert.isTrue(container.classList.contains('with-buttons'), 'has the with-buttons class');
+        const button = element.shadowRoot!.querySelector('.internal-button') as UiButton;
+        assert.ok(button, 'has the button');
+        assert.equal(button.value, 'dismiss');
+        assert.equal(button.textContent!.trim(), 'Cancel label');
+      });
+
+      it('renders the slotted buttons', async () => {
+        const element = await buttonFixture();
+        const container = element.shadowRoot!.querySelector('.buttons') as HTMLElement;
+        assert.isTrue(container.classList.contains('with-buttons'), 'has the with-buttons class');
+      });
+    });
+  });
+});

package/web-test-runner.config.mjs

@@ -11,9 +11,7 @@ const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
-  files: [
-    "test/**/**/*.test.ts",
-  ],
+  files: ["test/**/**/*.test.ts"],
 
   /** Resolve bare module imports */
   nodeResolve: {
@@ -88,12 +86,12 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   // See documentation for all available options
 
   testRunnerHtml: (testFramework) =>
-    `<html>
+    `<html class="theme-light">
     <head>
       <link rel="stylesheet" href="/test/visualization/lib/test-styles.css" />
       <!-- m3 styles -->
       <link rel="stylesheet" href="/src/styles/m3/tokens.css" data-theme="tokens" />
-      <link rel="stylesheet" href="/src/styles/m3/theme.light.css" data-theme="light" />
+      <link rel="stylesheet" href="/src/styles/m3/theme.css" data-theme="light" />
     </head>
     <body>
       <script type="module" src="${testFramework}"></script>

package/demo/themes/m3/theme.dark.css

@@ -1,40 +0,0 @@
-:root {
-  --md-sys-color-primary: var(--md-sys-color-primary-dark);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
-  --md-sys-color-error: var(--md-sys-color-error-dark);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
-  --md-sys-color-outline: var(--md-sys-color-outline-dark);
-  --md-sys-color-background: var(--md-sys-color-background-dark);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
-  --md-sys-color-surface: var(--md-sys-color-surface-dark);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
-
-  /* CUSTOM */
-  --md-sys-elevation-0: none;
-  --md-sys-elevation-1: var(--md-sys-elevation-1-dark);
-  --md-sys-elevation-2: var(--md-sys-elevation-2-dark);
-  --md-sys-elevation-3: var(--md-sys-elevation-3-dark);
-  --md-sys-elevation-4: var(--md-sys-elevation-4-dark);
-  --md-sys-elevation-5: var(--md-sys-elevation-5-dark);
- }

package/demo/themes/m3/theme.light.css

@@ -1,40 +0,0 @@
-:root {
-  --md-sys-color-primary: var(--md-sys-color-primary-light);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
-  --md-sys-color-error: var(--md-sys-color-error-light);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
-  --md-sys-color-outline: var(--md-sys-color-outline-light);
-  --md-sys-color-background: var(--md-sys-color-background-light);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
-  --md-sys-color-surface: var(--md-sys-color-surface-light);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
- 
-  /* CUSTOM */
-  --md-sys-elevation-0: none;
-  --md-sys-elevation-1: var(--md-sys-elevation-1-light);
-  --md-sys-elevation-2: var(--md-sys-elevation-2-light);
-  --md-sys-elevation-3: var(--md-sys-elevation-3-light);
-  --md-sys-elevation-4: var(--md-sys-elevation-4-light);
-  --md-sys-elevation-5: var(--md-sys-elevation-5-light);
- }