@universal-material/web 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Material web components",
   "type": "module",
   "keywords": [
@@ -17,6 +17,9 @@
   "module": "index.js",
   "types": "index.d.ts",
   "sass": "scss/universal-material.scss",
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "build": "run-s clean script:sass-to-ts build:esm build:bundle sass analyze copy && node remove-scripts-from-package.js",
     "build:watch": "gulp -f gulpfile.js scripts:watch",
@@ -27,12 +30,14 @@
     "sass": "gulp -f gulpfile.js sass",
     "sass:watch": "gulp -f gulpfile.js sass:watch",
     "clean": "rimraf ./dist/ rimraf ./src/**/*.d.ts rimraf ./src/**/*.styles.ts",
-    "copy": "copyfiles package.json README.md custom-elements.json vscode.html-custom-data.json dist/ && copyfiles -u 1 scss/**/*.scss dist/scss",
+    "copy": "copyfiles package.json README.md custom-elements.json vscode.html-custom-data.json dist/ && copyfiles -u 1 scss/**/*.scss dist/scss && copyfiles \".claude-plugin/**/*\" dist/ && copyfiles \"skills/**/*\" dist/",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint src/**/*.ts",
     "lint:eslint:fix": "eslint src/**/*.ts --fix",
     "lint:lit-analyzer": "lit-analyzer",
     "lint:prettier": "prettier . --check",
+    "test": "wtr --config web-test-runner.config.js",
+    "test:watch": "wtr --config web-test-runner.config.js --watch",
     "predocs": "run-p analyze docs:apis script:sass-to-ts",
     "docs": "run-p build:watch docs:serve",
     "docs:apis": "gulp -f gulpfile.js docs:apis",
@@ -43,7 +48,12 @@
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && node fix-html-custom-data-union-types.js",
     "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
     "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js",
-    "prettier": "prettier . --write"
+    "prettier": "prettier . --write",
+    "build:all": "npm run build && npm run build -w @universal-material/angular --if-present && npm run build -w @universal-material/react --if-present",
+    "test:all": "npm test && npm test -ws --if-present",
+    "lint:all": "npm run lint && npm run lint -ws --if-present",
+    "changeset": "changeset",
+    "dev": "npm run docs"
   },
   "author": "https://github.com/universal-material/universal-material/graphs/contributors",
   "repository": {
@@ -72,6 +82,7 @@
     "@angular/forms": "^20.0.0",
     "@angular/platform-browser": "^20.0.0",
     "@angular/router": "^20.0.0",
+    "@changesets/cli": "^2.27.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
@@ -80,11 +91,16 @@
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
+    "@stackblitz/sdk": "^1.11.0",
     "@stylistic/eslint-plugin": "^3.1.0",
     "@types/mocha": "^10.0.6",
     "@typescript-eslint/eslint-plugin": "8.35.0",
     "@typescript-eslint/parser": "8.35.0",
     "@wc-toolkit/type-parser": "^1.1.0",
+    "@web/dev-server-esbuild": "^1.0.5",
+    "@web/dev-server-legacy": "^2.1.1",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-playwright": "^0.11.1",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "angular-eslint": "^20.0.0",
     "copyfiles": "^2.4.1",

package/progress/circular-progress.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-export declare class UmCircularProgress extends LitElement {
+export declare class CircularProgress extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];
     /**
@@ -15,7 +15,7 @@ export declare class UmCircularProgress extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-circular-progress': UmCircularProgress;
+        'u-circular-progress': CircularProgress;
     }
 }
 //# sourceMappingURL=circular-progress.d.ts.map

package/progress/circular-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAQtD,qBACa,kBAAmB,SAAQ,UAAU;;IAChD,OAAgB,MAAM,4BAAY;IAElC;;;OAGG;IACyB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtD;;OAEG;IACyB,GAAG,SAAK;cAEjB,MAAM,IAAI,cAAc;CA6D5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"circular-progress.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAQtD,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,MAAM,4BAAY;IAElC;;;OAGG;IACyB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtD;;OAEG;IACyB,GAAG,SAAK;cAEjB,MAAM,IAAI,cAAc;CA6D5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/progress/circular-progress.js

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './circular-progress.styles.js';
 const basePercentage = 255;
 // https://codepen.io/ConAntonakos/pen/ryMaOX
-let UmCircularProgress = class UmCircularProgress extends LitElement {
+let CircularProgress = class CircularProgress extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -72,12 +72,12 @@ let UmCircularProgress = class UmCircularProgress extends LitElement {
 };
 __decorate([
     property({ type: Number })
-], UmCircularProgress.prototype, "value", void 0);
+], CircularProgress.prototype, "value", void 0);
 __decorate([
     property({ type: Number })
-], UmCircularProgress.prototype, "max", void 0);
-UmCircularProgress = __decorate([
+], CircularProgress.prototype, "max", void 0);
+CircularProgress = __decorate([
     customElement('u-circular-progress')
-], UmCircularProgress);
-export { UmCircularProgress };
+], CircularProgress);
+export { CircularProgress };
 //# sourceMappingURL=circular-progress.js.map

package/progress/circular-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,6CAA6C;AAEtC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QASL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;IA+DtC,CAAC;aA1EiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAaf,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChC,CAAC;IAED,aAAa,CAAC,SAAiB;QAC7B,OAAO,GAAG,CAAA;6BACe,SAAS;;;;;;;;;aASzB,CAAC;IACZ,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;IAED,kBAAkB;QAEhB,IAAI,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QACxC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;YACjD,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,OAAO,CAAC;QACZ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QAChD,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;QAChE,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAEpG,OAAO,GAAG,CAAA;;;;;;;;;;6BAUe,GAAG,cAAc,GAAG;8BACnB,GAAG,UAAU,GAAG;;;;;;;;;;;6BAWjB,GAAG,cAAc,GAAG;8BACnB,GAAG,eAAe,GAAG;;KAE9C,CAAC;IACJ,CAAC;;AAnE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA2B;AAK1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAS;AAZzB,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CA2E9B","sourcesContent":["import { LitElement, svg, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './circular-progress.styles.js';\n\nconst basePercentage = 255;\n\n// https://codepen.io/ConAntonakos/pen/ryMaOX\n@customElement('u-circular-progress')\nexport class UmCircularProgress extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * The current progress value. When `undefined`, the indicator is rendered\n   * in indeterminate mode.\n   */\n  @property({ type: Number }) value: number | undefined;\n\n  /**\n   * The maximum value of the progress indicator\n   */\n  @property({ type: Number }) max = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderCircle(className: string): TemplateResult {\n    return svg`\n      <svg class=\"circular ${className}\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\" />\n      </svg>`;\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return this.#renderCircle('indeterminate');\n  }\n\n  #renderDeterminate(): TemplateResult {\n\n    let proportion = this.value! / this.max;\n    const offset = proportion === 0 || proportion === 1\n      ? 0\n      : 0.10625;\n    proportion = Math.floor(proportion * 100) / 100;\n    const percentage = basePercentage - basePercentage * proportion;\n    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;\n\n    return svg`\n      <svg class=\"circular on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`} \n          stroke-dashoffset=${`${percentage}%`} />\n      </svg>\n      <svg class=\"circular track on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`}\n          stroke-dashoffset=${`${trackPercentage}%`}/>\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-circular-progress': UmCircularProgress;\n  }\n}\n"]}
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,6CAA6C;AAEtC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QASL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;IA+DtC,CAAC;aA1EiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAaf,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChC,CAAC;IAED,aAAa,CAAC,SAAiB;QAC7B,OAAO,GAAG,CAAA;6BACe,SAAS;;;;;;;;;aASzB,CAAC;IACZ,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;IAED,kBAAkB;QAEhB,IAAI,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QACxC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;YACjD,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,OAAO,CAAC;QACZ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QAChD,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;QAChE,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAEpG,OAAO,GAAG,CAAA;;;;;;;;;;6BAUe,GAAG,cAAc,GAAG;8BACnB,GAAG,UAAU,GAAG;;;;;;;;;;;6BAWjB,GAAG,cAAc,GAAG;8BACnB,GAAG,eAAe,GAAG;;KAE9C,CAAC;IACJ,CAAC;;AAnE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AAK1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAS;AAZzB,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA2E5B","sourcesContent":["import { LitElement, svg, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './circular-progress.styles.js';\n\nconst basePercentage = 255;\n\n// https://codepen.io/ConAntonakos/pen/ryMaOX\n@customElement('u-circular-progress')\nexport class CircularProgress extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * The current progress value. When `undefined`, the indicator is rendered\n   * in indeterminate mode.\n   */\n  @property({ type: Number }) value: number | undefined;\n\n  /**\n   * The maximum value of the progress indicator\n   */\n  @property({ type: Number }) max = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderCircle(className: string): TemplateResult {\n    return svg`\n      <svg class=\"circular ${className}\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\" />\n      </svg>`;\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return this.#renderCircle('indeterminate');\n  }\n\n  #renderDeterminate(): TemplateResult {\n\n    let proportion = this.value! / this.max;\n    const offset = proportion === 0 || proportion === 1\n      ? 0\n      : 0.10625;\n    proportion = Math.floor(proportion * 100) / 100;\n    const percentage = basePercentage - basePercentage * proportion;\n    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;\n\n    return svg`\n      <svg class=\"circular on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`} \n          stroke-dashoffset=${`${percentage}%`} />\n      </svg>\n      <svg class=\"circular track on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`}\n          stroke-dashoffset=${`${trackPercentage}%`}/>\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-circular-progress': CircularProgress;\n  }\n}\n"]}

package/progress/progress-bar.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-export declare class UmProgressBar extends LitElement {
+export declare class ProgressBar extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];
     /**
@@ -15,7 +15,7 @@ export declare class UmProgressBar extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-progress-bar': UmProgressBar;
+        'u-progress-bar': ProgressBar;
     }
 }
 //# sourceMappingURL=progress-bar.d.ts.map

package/progress/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,qBACa,aAAc,SAAQ,UAAU;;IAC3C,OAAgB,MAAM,4BAAY;IAElC;;;OAGG;IACyB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtD;;OAEG;IACyB,GAAG,SAAK;cAEjB,MAAM,IAAI,cAAc;CA+B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAY;IAElC;;;OAGG;IACyB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtD;;OAEG;IACyB,GAAG,SAAK;cAEjB,MAAM,IAAI,cAAc;CA+B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}

package/progress/progress-bar.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './progress-bar.styles.js';
-let UmProgressBar = class UmProgressBar extends LitElement {
+let ProgressBar = class ProgressBar extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -41,12 +41,12 @@ let UmProgressBar = class UmProgressBar extends LitElement {
 };
 __decorate([
     property({ type: Number })
-], UmProgressBar.prototype, "value", void 0);
+], ProgressBar.prototype, "value", void 0);
 __decorate([
     property({ type: Number })
-], UmProgressBar.prototype, "max", void 0);
-UmProgressBar = __decorate([
+], ProgressBar.prototype, "max", void 0);
+ProgressBar = __decorate([
     customElement('u-progress-bar')
-], UmProgressBar);
-export { UmProgressBar };
+], ProgressBar);
+export { ProgressBar };
 //# sourceMappingURL=progress-bar.js.map

package/progress/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QASL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;IAiCtC,CAAC;aA5CiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAaf,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChC,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QAE1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACtD,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,OAAO,IAAI,CAAA;;qDAEsC,UAAU;oDACX,eAAe;;KAE9D,CAAC;IACJ,CAAC;;AArC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2B;AAK1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAS;AAZzB,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA6CzB","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './progress-bar.styles.js';\n\n@customElement('u-progress-bar')\nexport class UmProgressBar extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * The current progress value. When `undefined`, the bar is rendered\n   * in indeterminate mode.\n   */\n  @property({ type: Number }) value: number | undefined;\n\n  /**\n   * The maximum value of the progress bar\n   */\n  @property({ type: Number }) max = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return html`\n      <div class=\"indeterminate\">\n        <div class=\"bar track first\"></div>\n        <div class=\"bar active fast\"></div>\n        <div class=\"bar track middle\"></div>\n        <div class=\"bar active slow\"></div>\n        <div class=\"bar track last\"></div>\n      </div>\n    `;\n  }\n\n  #renderDeterminate(): TemplateResult {\n    const proportion = this.value! / this.max;\n\n    const percentage = Math.floor(proportion * 1000) / 10;\n    const trackPercentage = 100 - percentage;\n\n    return html`\n      <div class=\"determinate\">\n        <div class=\"bar active\" style=\"flex-basis: ${percentage}%\"></div>\n        <div class=\"bar track\" style=\"flex-basis: ${trackPercentage}%\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-progress-bar': UmProgressBar;\n  }\n}\n"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QASL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;IAiCtC,CAAC;aA5CiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAaf,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChC,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QAE1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACtD,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,OAAO,IAAI,CAAA;;qDAEsC,UAAU;oDACX,eAAe;;KAE9D,CAAC;IACJ,CAAC;;AArC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA2B;AAK1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAS;AAZzB,WAAW;IADvB,aAAa,CAAC,gBAAgB,CAAC;GACnB,WAAW,CA6CvB","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './progress-bar.styles.js';\n\n@customElement('u-progress-bar')\nexport class ProgressBar extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * The current progress value. When `undefined`, the bar is rendered\n   * in indeterminate mode.\n   */\n  @property({ type: Number }) value: number | undefined;\n\n  /**\n   * The maximum value of the progress bar\n   */\n  @property({ type: Number }) max = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return html`\n      <div class=\"indeterminate\">\n        <div class=\"bar track first\"></div>\n        <div class=\"bar active fast\"></div>\n        <div class=\"bar track middle\"></div>\n        <div class=\"bar active slow\"></div>\n        <div class=\"bar track last\"></div>\n      </div>\n    `;\n  }\n\n  #renderDeterminate(): TemplateResult {\n    const proportion = this.value! / this.max;\n\n    const percentage = Math.floor(proportion * 1000) / 10;\n    const trackPercentage = 100 - percentage;\n\n    return html`\n      <div class=\"determinate\">\n        <div class=\"bar active\" style=\"flex-basis: ${percentage}%\"></div>\n        <div class=\"bar track\" style=\"flex-basis: ${trackPercentage}%\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-progress-bar': ProgressBar;\n  }\n}\n"]}

package/radio/radio-list-item.d.ts

@@ -1,10 +1,10 @@
-import { UmRadio } from './radio.js';
-declare const UmRadioListItem_base: import("../shared/mixin.js").MixinReturn<typeof UmRadio>;
-export declare class UmRadioListItem extends UmRadioListItem_base {
+import { Radio } from './radio.js';
+declare const RadioListItem_base: import("../shared/mixin.js").MixinReturn<typeof Radio>;
+export declare class RadioListItem extends RadioListItem_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-radio-list-item': UmRadioListItem;
+        'u-radio-list-item': RadioListItem;
     }
 }
 export {};

package/radio/radio-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-list-item.d.ts","sourceRoot":"","sources":["../../src/radio/radio-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;;AAErC,qBACa,eAAgB,SAAQ,oBAAsC;CAE1E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"radio-list-item.d.ts","sourceRoot":"","sources":["../../src/radio/radio-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;;AAEnC,qBACa,aAAc,SAAQ,kBAAoC;CAEtE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}

package/radio/radio-list-item.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';
-import { UmRadio } from './radio.js';
-let UmRadioListItem = class UmRadioListItem extends mixinSelectionControlListItem(UmRadio) {
+import { Radio } from './radio.js';
+let RadioListItem = class RadioListItem extends mixinSelectionControlListItem(Radio) {
 };
-UmRadioListItem = __decorate([
+RadioListItem = __decorate([
     customElement('u-radio-list-item')
-], UmRadioListItem);
-export { UmRadioListItem };
+], RadioListItem);
+export { RadioListItem };
 //# sourceMappingURL=radio-list-item.js.map

package/radio/radio-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-list-item.js","sourceRoot":"","sources":["../../src/radio/radio-list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAG9B,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,6BAA6B,CAAC,OAAO,CAAC;CAE1E,CAAA;AAFY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';\nimport { UmRadio } from './radio.js';\n\n@customElement('u-radio-list-item')\nexport class UmRadioListItem extends mixinSelectionControlListItem(UmRadio) {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio-list-item': UmRadioListItem;\n  }\n}\n"]}
+{"version":3,"file":"radio-list-item.js","sourceRoot":"","sources":["../../src/radio/radio-list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAG5B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,6BAA6B,CAAC,KAAK,CAAC;CAEtE,CAAA;AAFY,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CAEzB","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';\nimport { Radio } from './radio.js';\n\n@customElement('u-radio-list-item')\nexport class RadioListItem extends mixinSelectionControlListItem(Radio) {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio-list-item': RadioListItem;\n  }\n}\n"]}

package/radio/radio.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValues } from '@lit/reactive-element';
 import { HTMLTemplateResult } from 'lit';
-import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
-export declare class UmRadio extends UmSelectionControl {
+import { SelectionControl } from '../shared/selection-control/selection-control.js';
+export declare class Radio extends SelectionControl {
     #private;
     static styles: import("lit").CSSResult[];
     /**
@@ -21,7 +21,7 @@ export declare class UmRadio extends UmSelectionControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-radio': UmRadio;
+        'u-radio': Radio;
     }
 }
 //# sourceMappingURL=radio.d.ts.map

package/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAGtF,qBACa,OAAQ,SAAQ,kBAAkB;;IAC7C,OAAgB,MAAM,4BAAwB;IAE9C;;OAEG;IACwE,cAAc,UAAS;IAElG,UAAmB,SAAS,EAAE,OAAO,GAAG,UAAU,CAAW;cAE1C,eAAe,IAAI,kBAAkB;IAMxD,IAAa,OAAO,IAIQ,OAAO,CAFlC;IAED,IAAa,OAAO,CAAC,KAAK,EAAE,OAAO,EAYlC;;IAcQ,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAKjB,oBAAoB;IAkE7B,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,eAAe;CAaxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AAGpF,qBACa,KAAM,SAAQ,gBAAgB;;IACzC,OAAgB,MAAM,4BAAwB;IAE9C;;OAEG;IACwE,cAAc,UAAS;IAElG,UAAmB,SAAS,EAAE,OAAO,GAAG,UAAU,CAAW;cAE1C,eAAe,IAAI,kBAAkB;IAMxD,IAAa,OAAO,IAIQ,OAAO,CAFlC;IAED,IAAa,OAAO,CAAC,KAAK,EAAE,OAAO,EAYlC;;IAcQ,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAKjB,oBAAoB;IAkE7B,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,eAAe;CAaxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,KAAK,CAAC;KAClB;CACF"}

package/radio/radio.js

@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
-import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+import { SelectionControl } from '../shared/selection-control/selection-control.js';
 import { styles } from './radio.styles.js';
-let UmRadio = class UmRadio extends UmSelectionControl {
+let Radio = class Radio extends SelectionControl {
     static { this.styles = [baseStyles, styles]; }
     renderIndicator() {
         return html `
@@ -121,9 +121,9 @@ let UmRadio = class UmRadio extends UmSelectionControl {
 };
 __decorate([
     property({ type: Boolean, attribute: 'hide-state-layer', reflect: true })
-], UmRadio.prototype, "hideStateLayer", void 0);
-UmRadio = __decorate([
+], Radio.prototype, "hideStateLayer", void 0);
+Radio = __decorate([
     customElement('u-radio')
-], UmRadio);
-export { UmRadio };
+], Radio);
+export { Radio };
 //# sourceMappingURL=radio.js.map

package/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './radio.styles.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n  static override styles = [baseStyles, styles];\n\n  /**\n   * Whether to hide the hover/focus state layer behind the radio indicator\n   */\n  @property({ type: Boolean, attribute: 'hide-state-layer', reflect: true }) hideStateLayer = false;\n\n  protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`\n      <div class=\"indicator\"></div>\n    `;\n  }\n\n  override get checked() {\n    return super.checked;\n  }\n\n  override set checked(value: boolean) {\n    super.checked = value;\n\n    if (!value) {\n      return;\n    }\n\n    this.uncheckSiblings();\n\n    if (this.input) {\n      this.input.tabIndex = 0;\n    }\n  }\n\n  get #siblings(): UmRadio[] {\n    if (!this.name) {\n      return [this];\n    }\n\n    return Array.from((this.getRootNode() as Element).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.ensureOnlyOneChecked();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.#handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#handleKeyDown);\n  }\n\n  #handleKeyDown(event: KeyboardEvent) {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.#siblings;\n\n    if (!siblings.length) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n    const factor = forwards ? 1 : -1;\n\n    const thisIndex = siblings.indexOf(this);\n    let nextIndex = thisIndex + factor;\n\n    while (nextIndex !== thisIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      const nextSibling = siblings[nextIndex];\n\n      if (nextSibling.disabled) {\n        nextIndex += factor;\n        continue;\n      }\n\n      const clickCanceled = !nextSibling.dispatchEvent(\n        new Event('click', {\n          bubbles: true,\n          cancelable: true,\n        }),\n      );\n\n      nextSibling.input.focus();\n\n      if (clickCanceled) {\n        break;\n      }\n\n      nextSibling.checked = true;\n      nextSibling.dispatchEvent(new Event('change', { bubbles: true }));\n      break;\n    }\n  }\n\n  private ensureOnlyOneChecked() {\n    if (!this.name) {\n      return;\n    }\n\n    const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n    const lastChecked = radios.reverse().find(r => r.checked);\n\n    if (!lastChecked) {\n      return;\n    }\n\n    lastChecked.checked = true;\n  }\n\n  private uncheckSiblings() {\n    for (const radio of this.#siblings) {\n      if (radio === this) {\n        continue;\n      }\n\n      if (radio.input) {\n        radio.input.tabIndex = -1;\n      }\n\n      radio.checked = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio': UmRadio;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { SelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './radio.styles.js';\n\n@customElement('u-radio')\nexport class Radio extends SelectionControl {\n  static override styles = [baseStyles, styles];\n\n  /**\n   * Whether to hide the hover/focus state layer behind the radio indicator\n   */\n  @property({ type: Boolean, attribute: 'hide-state-layer', reflect: true }) hideStateLayer = false;\n\n  protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`\n      <div class=\"indicator\"></div>\n    `;\n  }\n\n  override get checked() {\n    return super.checked;\n  }\n\n  override set checked(value: boolean) {\n    super.checked = value;\n\n    if (!value) {\n      return;\n    }\n\n    this.uncheckSiblings();\n\n    if (this.input) {\n      this.input.tabIndex = 0;\n    }\n  }\n\n  get #siblings(): Radio[] {\n    if (!this.name) {\n      return [this];\n    }\n\n    return Array.from((this.getRootNode() as Element).querySelectorAll<Radio>(`${this.tagName}[name=\"${this.name}\"]`));\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.ensureOnlyOneChecked();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.#handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#handleKeyDown);\n  }\n\n  #handleKeyDown(event: KeyboardEvent) {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.#siblings;\n\n    if (!siblings.length) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n    const factor = forwards ? 1 : -1;\n\n    const thisIndex = siblings.indexOf(this);\n    let nextIndex = thisIndex + factor;\n\n    while (nextIndex !== thisIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      const nextSibling = siblings[nextIndex];\n\n      if (nextSibling.disabled) {\n        nextIndex += factor;\n        continue;\n      }\n\n      const clickCanceled = !nextSibling.dispatchEvent(\n        new Event('click', {\n          bubbles: true,\n          cancelable: true,\n        }),\n      );\n\n      nextSibling.input.focus();\n\n      if (clickCanceled) {\n        break;\n      }\n\n      nextSibling.checked = true;\n      nextSibling.dispatchEvent(new Event('change', { bubbles: true }));\n      break;\n    }\n  }\n\n  private ensureOnlyOneChecked() {\n    if (!this.name) {\n      return;\n    }\n\n    const radios = Array.from(document.querySelectorAll<Radio>(`${this.tagName}[name=\"${this.name}\"]`));\n    const lastChecked = radios.reverse().find(r => r.checked);\n\n    if (!lastChecked) {\n      return;\n    }\n\n    lastChecked.checked = true;\n  }\n\n  private uncheckSiblings() {\n    for (const radio of this.#siblings) {\n      if (radio === this) {\n        continue;\n      }\n\n      if (radio.input) {\n        radio.input.tabIndex = -1;\n      }\n\n      radio.checked = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio': Radio;\n  }\n}\n"]}

package/ripple/ripple.d.ts

@@ -1,5 +1,5 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
-export declare class UmRipple extends LitElement {
+export declare class Ripple extends LitElement {
     static styles: import("lit").CSSResult;
     private isTouching;
     /**
@@ -22,7 +22,7 @@ export declare class UmRipple extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-ripple': UmRipple;
+        'u-ripple': Ripple;
     }
 }
 //# sourceMappingURL=ripple.d.ts.map

package/ripple/ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,qBACa,QAAS,SAAQ,UAAU;IAEtC,OAAgB,MAAM,0BAAU;IAEhC,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACyC,QAAQ,UAAS;IAEjC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAe;;IAMlE,MAAM,IAAI,kBAAkB;IAI5B,iBAAiB;IAOjB,oBAAoB;IAM7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,eAAe;IAIvB,YAAY,CAAC,OAAO,GAAE,MAAM,GAAG,IAAW,EAAE,OAAO,GAAE,MAAM,GAAG,IAAW,EAAE,gBAAgB,GAAE,MAAM,GAAG,IAAW,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IA+CvI,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,MAAM,CAAC,8BAA8B;CAQ9C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAgB,MAAM,0BAAU;IAEhC,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACyC,QAAQ,UAAS;IAEjC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAe;;IAMlE,MAAM,IAAI,kBAAkB;IAI5B,iBAAiB;IAOjB,oBAAoB;IAM7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,eAAe;IAIvB,YAAY,CAAC,OAAO,GAAE,MAAM,GAAG,IAAW,EAAE,OAAO,GAAE,MAAM,GAAG,IAAW,EAAE,gBAAgB,GAAE,MAAM,GAAG,IAAW,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IA+CvI,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,MAAM,CAAC,8BAA8B;CAQ9C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/ripple/ripple.js

@@ -1,10 +1,10 @@
-var UmRipple_1;
+var Ripple_1;
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { styles } from './ripple.styles.js';
-let UmRipple = class UmRipple extends LitElement {
-    static { UmRipple_1 = this; }
+let Ripple = class Ripple extends LitElement {
+    static { Ripple_1 = this; }
     static { this.styles = styles; }
     constructor() {
         super();
@@ -62,7 +62,7 @@ let UmRipple = class UmRipple extends LitElement {
             const clientRect = this.getBoundingClientRect();
             const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);
             const rippleSize = largestDimensionSize * 2;
-            UmRipple_1._setElementSquareSizeAndCenter(ripple, rippleSize);
+            Ripple_1._setElementSquareSizeAndCenter(ripple, rippleSize);
             ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);
             const x = (targetX - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);
             const y = (targetY - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);
@@ -109,12 +109,12 @@ let UmRipple = class UmRipple extends LitElement {
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmRipple.prototype, "disabled", void 0);
+], Ripple.prototype, "disabled", void 0);
 __decorate([
     query('.ripple-container')
-], UmRipple.prototype, "rippleContainer", void 0);
-UmRipple = UmRipple_1 = __decorate([
+], Ripple.prototype, "rippleContainer", void 0);
+Ripple = Ripple_1 = __decorate([
     customElement('u-ripple')
-], UmRipple);
-export { UmRipple };
+], Ripple);
+export { Ripple };
 //# sourceMappingURL=ripple.js.map

package/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles } from './ripple.styles.js';\n\n@customElement('u-ripple')\nexport class UmRipple extends LitElement {\n\n  static override styles = styles;\n\n  private isTouching = false;\n\n  /**\n   * Disables the ripple.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @query('.ripple-container') private readonly rippleContainer!: HTMLElement;\n\n  constructor() {\n    super();\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`<div class=\"ripple-container\"></div><slot></slot>`;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.attachEvents();\n    this.ariaHidden = 'true';\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.dettachEvents();\n  }\n\n  private attachEvents(): void {\n\n    this.addEventListener('mousedown', this.handleMouseDown);\n    this.addEventListener('touchstart', this.handleTouchStart);\n  }\n\n  private dettachEvents(): void {\n\n    this.removeEventListener('mousedown', this.handleMouseDown);\n    this.removeEventListener('touchstart', this.handleTouchStart);\n  }\n\n  private handleMouseDown(e: MouseEvent): void {\n\n    if (this.isTouching || !this.canCreateRipple()) {\n      return;\n    }\n\n    this.createRipple(e.clientX, e.clientY, 'mouseup');\n  }\n\n  private handleTouchStart(e: TouchEvent): void {\n\n    if (!this.canCreateRipple()) {\n      return;\n    }\n\n    this.isTouching = true;\n\n    const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;\n\n    this.addEventListener('touchmove', dismiss);\n  }\n\n  private canCreateRipple(): boolean {\n    return !this.disabled;\n  }\n\n  createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {\n    const preClientRect = this.rippleContainer.getBoundingClientRect();\n    targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;\n    targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;\n\n    const ripple = document.createElement('DIV');\n    ripple.classList.add('ripple');\n    this.rippleContainer.appendChild(ripple);\n\n    requestAnimationFrame(() => {\n      const clientRect = this.getBoundingClientRect();\n      const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);\n      const rippleSize = largestDimensionSize * 2;\n\n      UmRipple._setElementSquareSizeAndCenter(ripple, rippleSize);\n      ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);\n\n      const x = (targetX - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);\n      const y = (targetY - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);\n\n      ripple.style.transformOrigin = `${x}px ${y}px`;\n      ripple.classList.add(releaseEventName ? 'show' : 'show-forced');\n    });\n\n    const interval = setInterval(() => {\n\n      if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {\n        return;\n      }\n\n      const animations = ripple.getAnimations();\n\n      if (animations.length) {\n        return;\n      }\n\n      clearInterval(interval);\n      ripple.remove();\n    }, 1000);\n\n    if (!releaseEventName) {\n      return null;\n    }\n\n    return this.createDismissEvent(ripple, releaseEventName);\n  }\n\n  private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {\n    const dismiss = () => {\n      ripple.classList.add('dismiss');\n\n      this.isTouching = false;\n\n      this.removeEventListener('dragover', dismiss);\n      this.removeEventListener('mouseleave', dismiss);\n      window.removeEventListener(releaseEventName, dismiss);\n    };\n\n    this.addEventListener('dragover', dismiss);\n    this.addEventListener('mouseleave', dismiss);\n    window.addEventListener(releaseEventName, dismiss);\n\n    return dismiss;\n  }\n\n  private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {\n    element.style.top = '50%';\n    element.style.left = '50%';\n    element.style.width = `${size}px`;\n    element.style.height = `${size}px`;\n    element.style.marginLeft = `${-size / 2}px`;\n    element.style.marginTop = `${-size / 2}px`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-ripple': UmRipple;\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles } from './ripple.styles.js';\n\n@customElement('u-ripple')\nexport class Ripple extends LitElement {\n\n  static override styles = styles;\n\n  private isTouching = false;\n\n  /**\n   * Disables the ripple.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @query('.ripple-container') private readonly rippleContainer!: HTMLElement;\n\n  constructor() {\n    super();\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`<div class=\"ripple-container\"></div><slot></slot>`;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.attachEvents();\n    this.ariaHidden = 'true';\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.dettachEvents();\n  }\n\n  private attachEvents(): void {\n\n    this.addEventListener('mousedown', this.handleMouseDown);\n    this.addEventListener('touchstart', this.handleTouchStart);\n  }\n\n  private dettachEvents(): void {\n\n    this.removeEventListener('mousedown', this.handleMouseDown);\n    this.removeEventListener('touchstart', this.handleTouchStart);\n  }\n\n  private handleMouseDown(e: MouseEvent): void {\n\n    if (this.isTouching || !this.canCreateRipple()) {\n      return;\n    }\n\n    this.createRipple(e.clientX, e.clientY, 'mouseup');\n  }\n\n  private handleTouchStart(e: TouchEvent): void {\n\n    if (!this.canCreateRipple()) {\n      return;\n    }\n\n    this.isTouching = true;\n\n    const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;\n\n    this.addEventListener('touchmove', dismiss);\n  }\n\n  private canCreateRipple(): boolean {\n    return !this.disabled;\n  }\n\n  createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {\n    const preClientRect = this.rippleContainer.getBoundingClientRect();\n    targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;\n    targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;\n\n    const ripple = document.createElement('DIV');\n    ripple.classList.add('ripple');\n    this.rippleContainer.appendChild(ripple);\n\n    requestAnimationFrame(() => {\n      const clientRect = this.getBoundingClientRect();\n      const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);\n      const rippleSize = largestDimensionSize * 2;\n\n      Ripple._setElementSquareSizeAndCenter(ripple, rippleSize);\n      ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);\n\n      const x = (targetX - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);\n      const y = (targetY - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);\n\n      ripple.style.transformOrigin = `${x}px ${y}px`;\n      ripple.classList.add(releaseEventName ? 'show' : 'show-forced');\n    });\n\n    const interval = setInterval(() => {\n\n      if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {\n        return;\n      }\n\n      const animations = ripple.getAnimations();\n\n      if (animations.length) {\n        return;\n      }\n\n      clearInterval(interval);\n      ripple.remove();\n    }, 1000);\n\n    if (!releaseEventName) {\n      return null;\n    }\n\n    return this.createDismissEvent(ripple, releaseEventName);\n  }\n\n  private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {\n    const dismiss = () => {\n      ripple.classList.add('dismiss');\n\n      this.isTouching = false;\n\n      this.removeEventListener('dragover', dismiss);\n      this.removeEventListener('mouseleave', dismiss);\n      window.removeEventListener(releaseEventName, dismiss);\n    };\n\n    this.addEventListener('dragover', dismiss);\n    this.addEventListener('mouseleave', dismiss);\n    window.addEventListener(releaseEventName, dismiss);\n\n    return dismiss;\n  }\n\n  private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {\n    element.style.top = '50%';\n    element.style.left = '50%';\n    element.style.width = `${size}px`;\n    element.style.height = `${size}px`;\n    element.style.marginLeft = `${-size / 2}px`;\n    element.style.marginTop = `${-size / 2}px`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-ripple': Ripple;\n  }\n}\n"]}

package/scaffold/pane.d.ts

@@ -0,0 +1,127 @@
+import { HTMLTemplateResult, LitElement, PropertyValues } from 'lit';
+export type PaneMode = 'fixed' | 'collapsible' | 'sidebar' | 'fullscreen';
+export type PaneVariant = 'transparent' | 'filled';
+export type PaneQueryContext = 'media' | 'container';
+export type PaneAnimation = 'none' | 'exit' | 'exit-start' | 'exit-end' | 'fade';
+/**
+ * A region declared as a light-DOM child of `u-scaffold`. The pane is a
+ * flex item in the scaffold's body row; its behaviour is driven by `mode`:
+ *
+ * - `fixed` (default): always visible as a flex item. `open` is ignored.
+ * - `collapsible`: a flex item while `open=true`; removed from the flow
+ *   when `open=false` (animated via `transition-behavior: allow-discrete`).
+ * - `sidebar`: a modal drawer overlay anchored to the scaffold. Slides in
+ *   from the leading or trailing edge (the scaffold tags each pane with
+ *   `data-align="start|end"` based on its DOM position relative to the
+ *   body content) and shows a scrim. Closed by default.
+ * - `fullscreen`: same overlay semantics as `sidebar` but full-width,
+ *   sits above the top app bar, no scrim. Closed by default.
+ *
+ * Modes can vary per Material 3 breakpoint via the `mode-sm`, `mode-md`,
+ * `mode-lg` and `mode-xl` attributes — the larger breakpoint wins via
+ * source order in the stylesheet. The `query-context` attribute switches
+ * the breakpoint source between the viewport (`media`, default) and the
+ * scaffold's container (`container`). All breakpoint handling is CSS —
+ * the pane does not subscribe to any `matchMedia`/`ResizeObserver`.
+ *
+ * The `open` property defaults to `true` for `fixed` / `collapsible`
+ * panes and `false` for `sidebar` / `fullscreen` panes. The default is
+ * recomputed whenever `mode` changes — until the consumer writes to
+ * `open` explicitly, the default tracks the active `mode`.
+ *
+ * @slot header - Title row / actions. Sticks to the top of the pane.
+ * @slot - The pane content. Scrolls if it overflows.
+ *
+ * @csspart container - The visual surface.
+ * @csspart header
+ * @csspart content
+ * @csspart scrim - The modal scrim (sidebar mode only).
+ *
+ * @fires open - When the pane opens. Bubbles, composed.
+ * @fires close - When the pane closes. Bubbles, composed.
+ */
+export declare class Pane extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Background treatment. `filled` gives the pane its own card chrome
+     * (`surface-container-low` + `--u-pane-filled-shape-corner`, default
+     * `medium` / 12dp). `transparent` blends with the scaffold background.
+     * Override the surface tone via `--u-pane-filled-bg-color`.
+     */
+    variant: PaneVariant;
+    /**
+     * Behaviour at the base (no-breakpoint-qualifier) level. `fixed` keeps
+     * the pane in the scaffold flex row at all times; `collapsible` makes
+     * it disappear from the row when `open=false`; `sidebar` and
+     * `fullscreen` render the pane as a modal overlay against the
+     * scaffold when `open=true`.
+     */
+    mode: PaneMode;
+    /**
+     * Mode override applied from the `sm` breakpoint (≥ 600px) upward.
+     * Falls back to `mode` when unset. Resolved purely in CSS.
+     */
+    modeSm?: PaneMode;
+    /** Mode override applied from `md` (≥ 840px) upward. */
+    modeMd?: PaneMode;
+    /** Mode override applied from `lg` (≥ 1200px) upward. */
+    modeLg?: PaneMode;
+    /** Mode override applied from `xl` (≥ 1600px) upward. */
+    modeXl?: PaneMode;
+    /**
+     * Whether the breakpoint overrides query the viewport (`media`,
+     * default) or the nearest container with `container-type` set
+     * (`container`). Switching to `container` lets the pane react to its
+     * scaffold's own size when the scaffold lives in a constrained layout
+     * — see `u-scaffold` which sets `container-type: inline-size`.
+     */
+    queryContext: PaneQueryContext;
+    /**
+     * How the pane animates in/out when `open` toggles (modal modes) or
+     * when it enters/leaves the flex flow (`collapsible`). `none` disables
+     * the transition entirely; `exit` (default) slides the modal off-screen
+     * and infers the direction from the scaffold-assigned `data-align`
+     * (`start` → leading edge, `end` → trailing edge); `exit-start` and
+     * `exit-end` force a side regardless of `data-align`; `fade` swaps
+     * the slide for an opacity transition (modal stays in place and fades
+     * through).
+     */
+    animation: PaneAnimation;
+    /**
+     * Animation override applied from the `sm` breakpoint (≥ 600px) upward.
+     * Falls back to `animation` when unset. Resolved purely in CSS.
+     */
+    animationSm?: PaneAnimation;
+    /** Animation override applied from `md` (≥ 840px) upward. */
+    animationMd?: PaneAnimation;
+    /** Animation override applied from `lg` (≥ 1200px) upward. */
+    animationLg?: PaneAnimation;
+    /** Animation override applied from `xl` (≥ 1600px) upward. */
+    animationXl?: PaneAnimation;
+    /**
+     * Programmatic open state. Default is computed from `mode`:
+     * `true` for `fixed` / `collapsible`, `false` for `sidebar` /
+     * `fullscreen`. Once the consumer sets this explicitly (attribute,
+     * property or `show()` / `close()`), the explicit value sticks.
+     *
+     * In `fixed` mode the pane is visible regardless of `open`.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /** Opens the pane. Equivalent to `open = true`. */
+    show(): void;
+    /** Closes the pane. Equivalent to `open = false`. */
+    close(): void;
+    /** Toggles `open`. */
+    toggle(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-pane': Pane;
+    }
+}
+//# sourceMappingURL=pane.d.ts.map

package/scaffold/pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.d.ts","sourceRoot":"","sources":["../../src/scaffold/pane.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM3E,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,YAAY,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,QAAQ,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,WAAW,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAIjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,IAAK,SAAQ,UAAU;;IAClC,OAAgB,MAAM,4BAAwB;IAE9C;;;;;OAKG;IAEH,OAAO,EAAE,WAAW,CAAiB;IAErC;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,CAAW;IAEzB;;;OAGG;IAEH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,wDAAwD;IAExD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,yDAAyD;IAEzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,yDAAyD;IAEzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB;;;;;;OAMG;IAEH,YAAY,EAAE,gBAAgB,CAAW;IAEzC;;;;;;;;;OASG;IAEH,SAAS,EAAE,aAAa,CAAU;IAElC;;;OAGG;IAEH,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B,6DAA6D;IAE7D,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B,8DAA8D;IAE9D,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B,8DAA8D;IAE9D,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B;;;;;;;OAOG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAWtB;IAMD,mDAAmD;IACnD,IAAI,IAAI,IAAI;IAIZ,qDAAqD;IACrD,KAAK,IAAI,IAAI;IAIb,sBAAsB;IACtB,MAAM,IAAI,IAAI;IAIL,oBAAoB,IAAI,IAAI;cAQlB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAyB5C,MAAM,IAAI,kBAAkB;CAuBhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}