@api-client/ui 0.0.3 → 0.0.5

package/dist/visualization/plugin/positioning/WorkspaceLayout.js

@@ -21,46 +21,29 @@ export var LayoutWeight;
  * in the visualization workspace.
  */
 export class WorkspaceLayout {
-    workspace;
-    readPositions = {};
-    /**
-     * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.
-     */
-    rankDir;
-    /**
-     * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.
-     */
-    align;
-    /**
-     * Type of algorithm to assign a rank to each node in the input graph.
-     */
-    ranker;
-    /**
-     * If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic.
-     */
-    acyclicer;
-    /**
-     * Number of pixels that separate edges horizontally in the layout.
-     */
-    edgeSeparation = 20;
-    /**
-     * Number of pixels between each rank in the layout.
-     */
-    rankSeparation = 60; // 80
-    /**
-     * Number of pixels that separate nodes horizontally in the layout.
-     */
-    nodeSeparation = 60; // 80
-    /**
-     * Graph margin LR
-     */
-    marginX = 40;
-    /**
-     * Graph margin TB
-     */
-    marginY = 40;
     constructor(workspace) {
         this.workspace = workspace;
+        this.readPositions = {};
+        /**
+         * Number of pixels that separate edges horizontally in the layout.
+         */
+        this.edgeSeparation = 20;
+        /**
+         * Number of pixels between each rank in the layout.
+         */
+        this.rankSeparation = 60; // 80
+        /**
+         * Number of pixels that separate nodes horizontally in the layout.
+         */
+        this.nodeSeparation = 60; // 80
+        /**
+         * Graph margin LR
+         */
+        this.marginX = 40;
+        /**
+         * Graph margin TB
+         */
+        this.marginY = 40;
     }
     /**
      * Reads workspace object dimensions

package/dist/visualization/plugin/positioning/WorkspaceLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceLayout.js","sourceRoot":"","sources":["../../../../src/visualization/plugin/positioning/WorkspaceLayout.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,gCAAgC;AAChC,gCAAgC;AAChC,sCAAsC;AAEtC,OAAO,EAAE,KAAK,EAAkB,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAmCzE,4BAA4B;AAC5B,8BAA8B;AAC9B,0BAA0B;AAC1B,wBAAwB;AACxB,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,wDAAa,CAAA;IACb,oDAAW,CAAA;IACX,gDAAS,CAAA;AACX,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAAA,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,eAAe;IAgDP;IA/CnB,aAAa,GAA4B,EAAE,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAkB;IAEzB;;OAEG;IACH,KAAK,CAAgB;IAErB;;OAEG;IACH,MAAM,CAAiB;IAEvB;;OAEG;IACH,SAAS,CAAoB;IAE7B;;OAEG;IACH,cAAc,GAAW,EAAE,CAAC;IAE5B;;OAEG;IACH,cAAc,GAAW,EAAE,CAAC,CAAC,KAAK;IAElC;;OAEG;IACH,cAAc,GAAW,EAAE,CAAC,CAAC,KAAK;IAElC;;OAEG;IACH,OAAO,GAAW,EAAE,CAAC;IAErB;;OAEG;IACH,OAAO,GAAW,EAAE,CAAC;IAErB,YAAmB,SAA8B;QAA9B,cAAS,GAAT,SAAS,CAAqB;IAAG,CAAC;IAErD;;;;OAIG;IACH,cAAc,CAAC,EAAU;QACvB,IAAI,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE;YAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAC/B;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,SAAS,CAAC;SAClB;QACD,MAAM,IAAI,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,SAAS;QACP,MAAM,CAAC,GAAG,IAAI,KAAK,EAAsC,CAAC;QAC1D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACrH,CAAC,CAAC,QAAQ,CAAC;YACT,cAAc;YACd,cAAc;YACd,cAAc;YACd,OAAO;YACP,KAAK;YACL,MAAM;YACN,SAAS;YACT,OAAO;YACP,OAAO;SACR,CAAC,CAAC;QACH,4CAA4C;QAC5C,+CAA+C;QAC/C,OAAO,CAAC,CAAC;IACX,CAAC;CACF","sourcesContent":["/* eslint-disable class-methods-use-this */\n/* eslint-disable no-plusplus */\n/* eslint-disable no-continue */\n/* eslint-disable no-param-reassign */\n\nimport { Graph, NodeIdentifier } from '@api-client/graph';\nimport { EdgeConfig, NodeConfig, GraphLabel, RankDirOptions, AlignOptions, RankerOptions, AcyclicerOptions } from '@api-client/graph/src/layout/types';\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';\nimport { getObjectBoundingClientRect } from '../../lib/PositionUtils.js';\n\nexport interface PositionedEdge {\n  /**\n   * The width of the label\n   */\n  width?: number;\n  /**\n   * The height of the label\n   */\n  height?: number;\n  /**\n   * The Id of the originating node\n   */\n  id: string;\n  /**\n   * The id of the target node\n   */\n  target: string;\n  /**\n   * Edge's weight, if possible to determine\n   */\n  weight?: number;\n}\n\nexport interface PositionResult {\n  id: NodeIdentifier;\n  node: NodeConfig;\n}\n\nexport interface PositioningResult {\n  graph: Graph<GraphLabel, NodeConfig, EdgeConfig>;\n  nodes: PositionResult[];\n}\n\n// 01 - external association\n// 10 - association (internal)\n// 20 - parent association\n// 40 - self association\nexport enum LayoutWeight {\n  External = 1,\n  Internal = 10,\n  Parent = 40,\n  Self = 80,\n};\n\n/**\n * A helper library that computes positioning of a data model\n * in the visualization workspace.\n */\nexport class WorkspaceLayout {\n  readPositions: Record<string, DOMRect> = {};\n\n  /**\n   * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n   */\n  rankDir?: RankDirOptions;\n\n  /**\n   * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n   */\n  align?: AlignOptions;\n\n  /**\n   * Type of algorithm to assign a rank to each node in the input graph.\n   */\n  ranker?: RankerOptions;\n\n  /**\n   * If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n   */\n  acyclicer?: AcyclicerOptions;\n\n  /**\n   * Number of pixels that separate edges horizontally in the layout.\n   */\n  edgeSeparation: number = 20;\n\n  /**\n   * Number of pixels between each rank in the layout.\n   */\n  rankSeparation: number = 60; // 80\n\n  /**\n   * Number of pixels that separate nodes horizontally in the layout.\n   */\n  nodeSeparation: number = 60; // 80\n\n  /**\n   * Graph margin LR\n   */\n  marginX: number = 40;\n\n  /**\n   * Graph margin TB\n   */\n  marginY: number = 40;\n\n  constructor(public workspace: VizWorkspaceElement) {}\n\n  /**\n   * Reads workspace object dimensions\n   * @param {string} id Domain id of the object\n   * @returns {DOMRect}\n   */\n  readDimensions(id: string): DOMRect | undefined {\n    if (this.readPositions[id]) {\n      return this.readPositions[id];\n    }\n    const element = this.workspace.querySelector(`[data-key=\"${id}\"]`);\n    if (!element) {\n      return undefined;\n    }\n    const rect = getObjectBoundingClientRect(element, this.workspace);\n    this.readPositions[id] = rect;\n    return rect;\n  }\n\n  initGraph(): Graph<GraphLabel, NodeConfig, EdgeConfig> {\n    const g = new Graph<GraphLabel, NodeConfig, EdgeConfig>();\n    const { rankDir, align, ranker, acyclicer, edgeSeparation, rankSeparation, nodeSeparation, marginX, marginY } = this;\n    g.setGraph({\n      edgeSeparation,\n      rankSeparation,\n      nodeSeparation,\n      rankDir,\n      align,\n      ranker,\n      acyclicer,\n      marginX,\n      marginY,\n    });\n    // eslint-disable-next-line arrow-body-style\n    // g.setDefaultEdgeLabel(() => { return {}; });\n    return g;\n  }\n}\n"]}
+{"version":3,"file":"WorkspaceLayout.js","sourceRoot":"","sources":["../../../../src/visualization/plugin/positioning/WorkspaceLayout.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,gCAAgC;AAChC,gCAAgC;AAChC,sCAAsC;AAEtC,OAAO,EAAE,KAAK,EAAkB,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAmCzE,4BAA4B;AAC5B,8BAA8B;AAC9B,0BAA0B;AAC1B,wBAAwB;AACxB,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,wDAAa,CAAA;IACb,oDAAW,CAAA;IACX,gDAAS,CAAA;AACX,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAAA,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,eAAe;IAgD1B,YAAmB,SAA8B;QAA9B,cAAS,GAAT,SAAS,CAAqB;QA/CjD,kBAAa,GAA4B,EAAE,CAAC;QAsB5C;;WAEG;QACH,mBAAc,GAAW,EAAE,CAAC;QAE5B;;WAEG;QACH,mBAAc,GAAW,EAAE,CAAC,CAAC,KAAK;QAElC;;WAEG;QACH,mBAAc,GAAW,EAAE,CAAC,CAAC,KAAK;QAElC;;WAEG;QACH,YAAO,GAAW,EAAE,CAAC;QAErB;;WAEG;QACH,YAAO,GAAW,EAAE,CAAC;IAE+B,CAAC;IAErD;;;;OAIG;IACH,cAAc,CAAC,EAAU;QACvB,IAAI,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE;YAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAC/B;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,SAAS,CAAC;SAClB;QACD,MAAM,IAAI,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,SAAS;QACP,MAAM,CAAC,GAAG,IAAI,KAAK,EAAsC,CAAC;QAC1D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACrH,CAAC,CAAC,QAAQ,CAAC;YACT,cAAc;YACd,cAAc;YACd,cAAc;YACd,OAAO;YACP,KAAK;YACL,MAAM;YACN,SAAS;YACT,OAAO;YACP,OAAO;SACR,CAAC,CAAC;QACH,4CAA4C;QAC5C,+CAA+C;QAC/C,OAAO,CAAC,CAAC;IACX,CAAC;CACF","sourcesContent":["/* eslint-disable class-methods-use-this */\n/* eslint-disable no-plusplus */\n/* eslint-disable no-continue */\n/* eslint-disable no-param-reassign */\n\nimport { Graph, NodeIdentifier } from '@api-client/graph';\nimport { EdgeConfig, NodeConfig, GraphLabel, RankDirOptions, AlignOptions, RankerOptions, AcyclicerOptions } from '@api-client/graph/src/layout/types';\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';\nimport { getObjectBoundingClientRect } from '../../lib/PositionUtils.js';\n\nexport interface PositionedEdge {\n  /**\n   * The width of the label\n   */\n  width?: number;\n  /**\n   * The height of the label\n   */\n  height?: number;\n  /**\n   * The Id of the originating node\n   */\n  id: string;\n  /**\n   * The id of the target node\n   */\n  target: string;\n  /**\n   * Edge's weight, if possible to determine\n   */\n  weight?: number;\n}\n\nexport interface PositionResult {\n  id: NodeIdentifier;\n  node: NodeConfig;\n}\n\nexport interface PositioningResult {\n  graph: Graph<GraphLabel, NodeConfig, EdgeConfig>;\n  nodes: PositionResult[];\n}\n\n// 01 - external association\n// 10 - association (internal)\n// 20 - parent association\n// 40 - self association\nexport enum LayoutWeight {\n  External = 1,\n  Internal = 10,\n  Parent = 40,\n  Self = 80,\n};\n\n/**\n * A helper library that computes positioning of a data model\n * in the visualization workspace.\n */\nexport class WorkspaceLayout {\n  readPositions: Record<string, DOMRect> = {};\n\n  /**\n   * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n   */\n  rankDir?: RankDirOptions;\n\n  /**\n   * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n   */\n  align?: AlignOptions;\n\n  /**\n   * Type of algorithm to assign a rank to each node in the input graph.\n   */\n  ranker?: RankerOptions;\n\n  /**\n   * If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n   */\n  acyclicer?: AcyclicerOptions;\n\n  /**\n   * Number of pixels that separate edges horizontally in the layout.\n   */\n  edgeSeparation: number = 20;\n\n  /**\n   * Number of pixels between each rank in the layout.\n   */\n  rankSeparation: number = 60; // 80\n\n  /**\n   * Number of pixels that separate nodes horizontally in the layout.\n   */\n  nodeSeparation: number = 60; // 80\n\n  /**\n   * Graph margin LR\n   */\n  marginX: number = 40;\n\n  /**\n   * Graph margin TB\n   */\n  marginY: number = 40;\n\n  constructor(public workspace: VizWorkspaceElement) {}\n\n  /**\n   * Reads workspace object dimensions\n   * @param {string} id Domain id of the object\n   * @returns {DOMRect}\n   */\n  readDimensions(id: string): DOMRect | undefined {\n    if (this.readPositions[id]) {\n      return this.readPositions[id];\n    }\n    const element = this.workspace.querySelector(`[data-key=\"${id}\"]`);\n    if (!element) {\n      return undefined;\n    }\n    const rect = getObjectBoundingClientRect(element, this.workspace);\n    this.readPositions[id] = rect;\n    return rect;\n  }\n\n  initGraph(): Graph<GraphLabel, NodeConfig, EdgeConfig> {\n    const g = new Graph<GraphLabel, NodeConfig, EdgeConfig>();\n    const { rankDir, align, ranker, acyclicer, edgeSeparation, rankSeparation, nodeSeparation, marginX, marginY } = this;\n    g.setGraph({\n      edgeSeparation,\n      rankSeparation,\n      nodeSeparation,\n      rankDir,\n      align,\n      ranker,\n      acyclicer,\n      marginX,\n      marginY,\n    });\n    // eslint-disable-next-line arrow-body-style\n    // g.setDefaultEdgeLabel(() => { return {}; });\n    return g;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "email": "arc@mulesoft.com"
   },
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "cem analyze --litelement --exclude \"dev\" --exclude \"demo\" --exclude \"dist\" --exclude \"test\" --exclude \"_old\"",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
@@ -33,6 +33,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch --playwright --browsers chromium\"",
     "prepare": "husky install && npm run gen:apis",
     "tsc:watch": "tsc --watch",
+    "tsc": "tsc",
     "gen:apis": "node demo/model.js"
   },
   "dependencies": {

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/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/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "noImplicitOverride": true,
     "outDir": "./dist",
@@ -16,7 +17,6 @@
     "sourceMap": true,
     "inlineSources": true,
     "declaration": true,
-    "incremental": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
     "declarationMap": true,
@@ -24,6 +24,6 @@
     "skipLibCheck": true,
     "checkJs": true
   },
-  "include": ["src/**/*.ts", "_old/ApiFilesElement.ts", "_old/ApiFilesElement.styles.ts", "_old/FileMaps.ts", "_old/AppSettingsMenuElement.ts"],
+  "include": ["src/**/*.ts"],
   "exclude": ["_old"]
 }

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);
- }