@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

package/dist/internal/mixins/PopoverTargetMixin.d.ts

@@ -0,0 +1,23 @@
+import type { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class UUIPopoverTargetMixinInterface {
+    /**
+     * Set a popovertarget.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    popoverContainerElement?: string;
+    /**
+     * Toggle the popover.
+     */
+    protected _togglePopover(): void;
+}
+/**
+ * This mixin provides popover target functionality to other components.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export declare const PopoverTargetMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<UUIPopoverTargetMixinInterface> & T;
+export {};

package/dist/internal/mixins/PopoverTargetMixin.js

@@ -0,0 +1,49 @@
+import { property } from "lit/decorators.js";
+import { findAncestorByAttributeValue } from "../utils/findAncestorByAttributeValue.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const PopoverTargetMixin = (superClass) => {
+  class UUIPopoverTargetMixinClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.#popoverIsOpen = false;
+      this._togglePopover = () => {
+        if (!this.popoverContainerElement) return;
+        const popoverContainerElement = findAncestorByAttributeValue(
+          this,
+          "id",
+          this.popoverContainerElement
+        );
+        if (!popoverContainerElement) return;
+        if (this.#popoverIsOpen) {
+          popoverContainerElement.hidePopover();
+        } else {
+          popoverContainerElement.showPopover();
+        }
+      };
+      this.#popoverListener = (event) => {
+        requestAnimationFrame(() => {
+          this.#popoverIsOpen = event.detail.newState === "open";
+        });
+      };
+      this.addEventListener("uui-popover-before-toggle", this.#popoverListener);
+    }
+    #popoverIsOpen;
+    #popoverListener;
+  }
+  __decorateClass([
+    property({ type: String, attribute: "popovertarget" })
+  ], UUIPopoverTargetMixinClass.prototype, "popoverContainerElement");
+  return UUIPopoverTargetMixinClass;
+};
+export {
+  PopoverTargetMixin
+};
+//# sourceMappingURL=PopoverTargetMixin.js.map

package/dist/internal/mixins/PopoverTargetMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTargetMixin.js","sources":["../../../src/internal/mixins/PopoverTargetMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { findAncestorByAttributeValue } from '../utils/index.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUIPopoverTargetMixinInterface {\n  /**\n   * Set a popovertarget.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  public popoverContainerElement?: string;\n\n  /**\n   * Toggle the popover.\n   */\n  protected _togglePopover(): void;\n}\n\n/**\n * This mixin provides popover target functionality to other components.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const PopoverTargetMixin = <T extends Constructor<LitElement>>(\n  superClass: T,\n) => {\n  /**\n   * Popover target mixin class containing the popover target functionality.\n   */\n  class UUIPopoverTargetMixinClass extends superClass {\n    /**\n     * Set a popovertarget.\n     * @type {string}\n     * @attr\n     * @default undefined\n     */\n    @property({ type: String, attribute: 'popovertarget' })\n    public popoverContainerElement?: string;\n\n    #popoverIsOpen = false;\n\n    constructor(...args: any[]) {\n      super(...args);\n      this.addEventListener('uui-popover-before-toggle', this.#popoverListener);\n    }\n\n    protected _togglePopover = () => {\n      if (!this.popoverContainerElement) return;\n\n      const popoverContainerElement = findAncestorByAttributeValue(\n        this,\n        'id',\n        this.popoverContainerElement,\n      );\n      if (!popoverContainerElement) return;\n\n      if (this.#popoverIsOpen) {\n        popoverContainerElement.hidePopover();\n      } else {\n        popoverContainerElement.showPopover();\n      }\n    };\n\n    readonly #popoverListener = (event: any) => {\n      // Wait for the click event to finish before updating the popover state\n      requestAnimationFrame(() => {\n        this.#popoverIsOpen = event.detail.newState === 'open';\n      });\n    };\n  }\n  return UUIPopoverTargetMixinClass as unknown as Constructor<UUIPopoverTargetMixinInterface> &\n    T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO,MAAM,qBAAqB,CAChC,eACG;AAAA,EAIH,MAAM,mCAAmC,WAAW;AAAA,IAYlD,eAAe,MAAa;AAC1B,YAAM,GAAG,IAAI;AAHf,WAAA,iBAAiB;AAOjB,WAAU,iBAAiB,MAAM;AAC/B,YAAI,CAAC,KAAK,wBAAyB;AAEnC,cAAM,0BAA0B;AAAA,UAC9B;AAAA,UACA;AAAA,UACA,KAAK;AAAA,QAAA;AAEP,YAAI,CAAC,wBAAyB;AAE9B,YAAI,KAAK,gBAAgB;AACvB,kCAAwB,YAAA;AAAA,QAC1B,OAAO;AACL,kCAAwB,YAAA;AAAA,QAC1B;AAAA,MACF;AAEA,WAAS,mBAAmB,CAAC,UAAe;AAE1C,8BAAsB,MAAM;AAC1B,eAAK,iBAAiB,MAAM,OAAO,aAAa;AAAA,QAClD,CAAC;AAAA,MACH;AAzBE,WAAK,iBAAiB,6BAA6B,KAAK,gBAAgB;AAAA,IAC1E;AAAA,IALA;AAAA,IAwBS;AAAA,EAAA;AA1BF,kBAAA;AAAA,IADN,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,EAAA,GAPlD,2BAQG,WAAA,yBAAA;AAiCT,SAAO;AAET;"}

package/dist/internal/mixins/SelectOnlyMixin.d.ts

@@ -0,0 +1,14 @@
+import { UUISelectableMixinInterface } from './SelectableMixin.js';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class UUISelectOnlyMixinInterface extends UUISelectableMixinInterface {
+    selectOnly: boolean;
+}
+/**
+ * This mixin partly provides the select-only functionality.
+ * Each component still need to implement its own code for disabling interaction when select only is active.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export declare const SelectOnlyMixin: <T extends Constructor<UUISelectableMixinInterface>>(superClass: T) => Constructor<UUISelectOnlyMixinInterface> & T;
+export {};

package/dist/internal/mixins/SelectOnlyMixin.js

@@ -0,0 +1,35 @@
+import { property } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key);
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const SelectOnlyMixin = (superClass) => {
+  class UUISelectOnlyMixinClass extends superClass {
+    constructor() {
+      super(...arguments);
+      this._selectOnly = false;
+    }
+    get selectOnly() {
+      return this._selectOnly;
+    }
+    set selectOnly(newVal) {
+      const oldVal = this._selectOnly;
+      this._selectOnly = newVal;
+      this.requestUpdate("selectOnly", oldVal);
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true, attribute: "select-only" })
+  ], UUISelectOnlyMixinClass.prototype, "selectOnly");
+  return UUISelectOnlyMixinClass;
+};
+export {
+  SelectOnlyMixin
+};
+//# sourceMappingURL=SelectOnlyMixin.js.map

package/dist/internal/mixins/SelectOnlyMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOnlyMixin.js","sources":["../../../src/internal/mixins/SelectOnlyMixin.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { UUISelectableMixinInterface } from './SelectableMixin.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUISelectOnlyMixinInterface extends UUISelectableMixinInterface {\n  selectOnly: boolean;\n}\n\n/**\n * This mixin partly provides the select-only functionality.\n * Each component still need to implement its own code for disabling interaction when select only is active.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const SelectOnlyMixin = <\n  T extends Constructor<UUISelectableMixinInterface>,\n>(\n  superClass: T,\n) => {\n  class UUISelectOnlyMixinClass extends superClass {\n    private _selectOnly = false;\n\n    /**\n     * Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n     * @attr\n     * @type boolean\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'select-only' })\n    get selectOnly() {\n      return this._selectOnly;\n    }\n    set selectOnly(newVal) {\n      const oldVal = this._selectOnly;\n      this._selectOnly = newVal;\n      this.requestUpdate('selectOnly', oldVal);\n    }\n  }\n  // prettier-ignore\n  return (UUISelectOnlyMixinClass as unknown) as Constructor<UUISelectOnlyMixinInterface> & T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,MAAM,kBAAkB,CAG7B,eACG;AAAA,EACH,MAAM,gCAAgC,WAAW;AAAA,IAAjD,cAAA;AAAA,YAAA,GAAA,SAAA;AACE,WAAQ,cAAc;AAAA,IAAA;AAAA,IAQtB,IAAI,aAAa;AACf,aAAO,KAAK;AAAA,IACd;AAAA,IACA,IAAI,WAAW,QAAQ;AACrB,YAAM,SAAS,KAAK;AACpB,WAAK,cAAc;AACnB,WAAK,cAAc,cAAc,MAAM;AAAA,IACzC;AAAA,EAAA;AAPI,kBAAA;AAAA,IADH,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,eAAe;AAAA,EAAA,GARhE,wBASA,WAAA,YAAA;AAUN,SAAQ;AACV;"}

package/dist/internal/mixins/SelectableMixin.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class UUISelectableMixinInterface extends LitElement {
+    /**
+     * Enable the ability to select this element.
+     * @attr
+     * @prop
+     * @type boolean
+     */
+    selectable: boolean;
+    deselectable: boolean;
+    /**
+     * Attribute applied when the element is selected.
+     * @attr
+     * @prop
+     * @type boolean
+     */
+    selected: boolean;
+    selectableTarget: EventTarget;
+}
+/**
+ * This mixin provides select functionality.
+ * Consider if it makes sense to use the SelectOnlyMixin as well.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export declare const SelectableMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<UUISelectableMixinInterface> & T;
+export {};

package/dist/internal/mixins/SelectableMixin.js

@@ -0,0 +1,123 @@
+import { property } from "lit/decorators.js";
+import { UUISelectableEvent } from "../events/UUISelectableEvent.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const SelectableMixin = (superClass) => {
+  class UUISelectableMixinClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this._selectable = false;
+      this.deselectable = true;
+      this.selected = false;
+      this.#selectableTarget = this;
+      this.#onKeydown = (e) => {
+        if (e.code !== "Space" && e.code !== "Enter") return;
+        if (e.composedPath().indexOf(this.#selectableTarget) === 0) {
+          this.#onClick(e);
+        }
+      };
+      this.#onClick = (e) => {
+        const isSelectable = this._selectable || this.deselectable && this.selected;
+        if (isSelectable === false) return;
+        const composePath = e.composedPath();
+        if (this.#selectableTarget === this) {
+          const isActionTag = composePath.some((el) => {
+            const elementTagName = el.tagName;
+            return elementTagName === "A" || elementTagName === "BUTTON" || elementTagName === "INPUT" || elementTagName === "TEXTAREA" || elementTagName === "SELECT";
+          });
+          if (isActionTag) return;
+        }
+        if (composePath.includes(this.#selectableTarget)) {
+          if (e.type === "keydown") {
+            e.preventDefault();
+          }
+          this.#toggleSelect();
+        }
+      };
+      this.addEventListener("click", this.#onClick);
+      this.addEventListener("keydown", this.#onKeydown);
+    }
+    get selectable() {
+      return this._selectable;
+    }
+    set selectable(newVal) {
+      const oldVal = this._selectable;
+      if (oldVal === newVal) return;
+      this._selectable = newVal;
+      if (this.#selectableTarget === this) {
+        this.#selectableTarget.setAttribute(
+          "tabindex",
+          `${newVal ? "0" : "-1"}`
+        );
+      }
+      this.requestUpdate("selectable", oldVal);
+    }
+    #selectableTarget;
+    get selectableTarget() {
+      return this.#selectableTarget;
+    }
+    set selectableTarget(target) {
+      const oldTarget = this.#selectableTarget;
+      oldTarget.removeAttribute("tabindex");
+      oldTarget.removeEventListener("click", this.#onClick);
+      oldTarget.removeEventListener(
+        "keydown",
+        this.#onKeydown
+      );
+      this.#selectableTarget = target;
+      if (this.#selectableTarget === this) {
+        this.#selectableTarget.setAttribute(
+          "tabindex",
+          this._selectable ? "0" : "-1"
+        );
+      }
+      target.addEventListener("click", this.#onClick);
+      target.addEventListener("keydown", this.#onKeydown);
+    }
+    #onKeydown;
+    #onClick;
+    #toggleSelect() {
+      if (!this.selectable) return;
+      if (this.deselectable === false) {
+        this.#select();
+      } else if (this.selected) {
+        this.#deselect();
+      } else {
+        this.#select();
+      }
+    }
+    #select() {
+      if (!this.selectable) return;
+      const selectEvent = new UUISelectableEvent(UUISelectableEvent.SELECTED);
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) return;
+      this.selected = true;
+    }
+    #deselect() {
+      if (!this.deselectable) return;
+      const selectEvent = new UUISelectableEvent(UUISelectableEvent.DESELECTED);
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) return;
+      this.selected = false;
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], UUISelectableMixinClass.prototype, "selectable", 1);
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], UUISelectableMixinClass.prototype, "selected", 2);
+  return UUISelectableMixinClass;
+};
+export {
+  SelectableMixin
+};
+//# sourceMappingURL=SelectableMixin.js.map

package/dist/internal/mixins/SelectableMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableMixin.js","sources":["../../../src/internal/mixins/SelectableMixin.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUISelectableEvent } from '../events/UUISelectableEvent.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUISelectableMixinInterface extends LitElement {\n  /**\n   * Enable the ability to select this element.\n   * @attr\n   * @prop\n   * @type boolean\n   */\n  selectable: boolean;\n  deselectable: boolean;\n\n  /**\n   * Attribute applied when the element is selected.\n   * @attr\n   * @prop\n   * @type boolean\n   */\n  selected: boolean;\n  selectableTarget: EventTarget;\n}\n\n/**\n * This mixin provides select functionality.\n * Consider if it makes sense to use the SelectOnlyMixin as well.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const SelectableMixin = <T extends Constructor<LitElement>>(\n  superClass: T,\n) => {\n  /**\n   * @fires {UUISelectableEvent} selected - fires when the media card is selected\n   * @fires {UUISelectableEvent} deselected - fires when the media card is deselected\n   */\n  class UUISelectableMixinClass extends superClass {\n    private _selectable = false;\n    /**\n     * Enable the ability to select this element.\n     * @attr\n     * @type boolean\n     */\n    @property({ type: Boolean, reflect: true })\n    get selectable() {\n      return this._selectable;\n    }\n    set selectable(newVal) {\n      const oldVal = this._selectable;\n      if (oldVal === newVal) return;\n      this._selectable = newVal;\n\n      // Potentially problematic as a component might need focus for another feature when not selectable:\n      if (this.#selectableTarget === this) {\n        // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)\n        this.#selectableTarget.setAttribute(\n          'tabindex',\n          `${newVal ? '0' : '-1'}`,\n        );\n      }\n      this.requestUpdate('selectable', oldVal);\n    }\n\n    protected deselectable = true;\n\n    /**\n     * Attribute applied when the element is selected.\n     * @attr\n     * @type boolean\n     */\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    #selectableTarget: Element = this;\n    protected get selectableTarget(): EventTarget {\n      return this.#selectableTarget;\n    }\n    protected set selectableTarget(target: EventTarget) {\n      const oldTarget = this.#selectableTarget;\n\n      oldTarget.removeAttribute('tabindex');\n      oldTarget.removeEventListener('click', this.#onClick);\n      oldTarget.removeEventListener(\n        'keydown',\n        this.#onKeydown as EventListener,\n      );\n\n      this.#selectableTarget = target as Element;\n      if (this.#selectableTarget === this) {\n        // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)\n        this.#selectableTarget.setAttribute(\n          'tabindex',\n          this._selectable ? '0' : '-1',\n        );\n      }\n      target.addEventListener('click', this.#onClick);\n      target.addEventListener('keydown', this.#onKeydown as EventListener);\n    }\n\n    constructor(...args: any[]) {\n      super(...args);\n      this.addEventListener('click', this.#onClick);\n      this.addEventListener('keydown', this.#onKeydown);\n    }\n\n    readonly #onKeydown = (e: KeyboardEvent) => {\n      if (e.code !== 'Space' && e.code !== 'Enter') return;\n      if (e.composedPath().indexOf(this.#selectableTarget) === 0) {\n        this.#onClick(e);\n      }\n    };\n\n    readonly #onClick = (e: Event) => {\n      const isSelectable =\n        this._selectable || (this.deselectable && this.selected);\n\n      if (isSelectable === false) return;\n\n      const composePath = e.composedPath();\n\n      if (this.#selectableTarget === this) {\n        // the selectableTarget is not specified which means we need to be selective about what we accept events from.\n        const isActionTag = composePath.some(el => {\n          const elementTagName = (el as HTMLElement).tagName;\n          return (\n            elementTagName === 'A' ||\n            elementTagName === 'BUTTON' ||\n            elementTagName === 'INPUT' ||\n            elementTagName === 'TEXTAREA' ||\n            elementTagName === 'SELECT'\n          );\n        });\n\n        // never select when clicking on a link or button\n        if (isActionTag) return;\n      }\n\n      if (composePath.includes(this.#selectableTarget)) {\n        if (e.type === 'keydown') {\n          e.preventDefault(); // Do not want the space key to trigger a page scroll.\n        }\n        this.#toggleSelect();\n      }\n    };\n\n    #toggleSelect() {\n      // Only allow for select-interaction if selectable is true. Deselectable is ignored in this case, we do not want a DX where only deselection is a possibility..\n      if (!this.selectable) return;\n      if (this.deselectable === false) {\n        this.#select();\n      } else if (this.selected) {\n        this.#deselect();\n      } else {\n        this.#select();\n      }\n    }\n\n    #select() {\n      if (!this.selectable) return;\n      const selectEvent = new UUISelectableEvent(UUISelectableEvent.SELECTED);\n      this.dispatchEvent(selectEvent);\n      if (selectEvent.defaultPrevented) return;\n\n      this.selected = true;\n    }\n\n    #deselect() {\n      if (!this.deselectable) return;\n      const selectEvent = new UUISelectableEvent(UUISelectableEvent.DESELECTED);\n      this.dispatchEvent(selectEvent);\n      if (selectEvent.defaultPrevented) return;\n\n      this.selected = false;\n    }\n  }\n  // prettier-ignore\n  return (UUISelectableMixinClass as unknown) as Constructor<UUISelectableMixinInterface> & T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCO,MAAM,kBAAkB,CAC7B,eACG;AAAA,EAKH,MAAM,gCAAgC,WAAW;AAAA,IA+D/C,eAAe,MAAa;AAC1B,YAAM,GAAG,IAAI;AA/Df,WAAQ,cAAc;AA0BtB,WAAU,eAAe;AAQzB,WAAO,WAAW;AAElB,WAAA,oBAA6B;AAgC7B,WAAS,aAAa,CAAC,MAAqB;AAC1C,YAAI,EAAE,SAAS,WAAW,EAAE,SAAS,QAAS;AAC9C,YAAI,EAAE,eAAe,QAAQ,KAAK,iBAAiB,MAAM,GAAG;AAC1D,eAAK,SAAS,CAAC;AAAA,QACjB;AAAA,MACF;AAEA,WAAS,WAAW,CAAC,MAAa;AAChC,cAAM,eACJ,KAAK,eAAgB,KAAK,gBAAgB,KAAK;AAEjD,YAAI,iBAAiB,MAAO;AAE5B,cAAM,cAAc,EAAE,aAAA;AAEtB,YAAI,KAAK,sBAAsB,MAAM;AAEnC,gBAAM,cAAc,YAAY,KAAK,CAAA,OAAM;AACzC,kBAAM,iBAAkB,GAAmB;AAC3C,mBACE,mBAAmB,OACnB,mBAAmB,YACnB,mBAAmB,WACnB,mBAAmB,cACnB,mBAAmB;AAAA,UAEvB,CAAC;AAGD,cAAI,YAAa;AAAA,QACnB;AAEA,YAAI,YAAY,SAAS,KAAK,iBAAiB,GAAG;AAChD,cAAI,EAAE,SAAS,WAAW;AACxB,cAAE,eAAA;AAAA,UACJ;AACA,eAAK,cAAA;AAAA,QACP;AAAA,MACF;AA1CE,WAAK,iBAAiB,SAAS,KAAK,QAAQ;AAC5C,WAAK,iBAAiB,WAAW,KAAK,UAAU;AAAA,IAClD;AAAA,IA3DA,IAAI,aAAa;AACf,aAAO,KAAK;AAAA,IACd;AAAA,IACA,IAAI,WAAW,QAAQ;AACrB,YAAM,SAAS,KAAK;AACpB,UAAI,WAAW,OAAQ;AACvB,WAAK,cAAc;AAGnB,UAAI,KAAK,sBAAsB,MAAM;AAEnC,aAAK,kBAAkB;AAAA,UACrB;AAAA,UACA,GAAG,SAAS,MAAM,IAAI;AAAA,QAAA;AAAA,MAE1B;AACA,WAAK,cAAc,cAAc,MAAM;AAAA,IACzC;AAAA,IAYA;AAAA,IACA,IAAc,mBAAgC;AAC5C,aAAO,KAAK;AAAA,IACd;AAAA,IACA,IAAc,iBAAiB,QAAqB;AAClD,YAAM,YAAY,KAAK;AAEvB,gBAAU,gBAAgB,UAAU;AACpC,gBAAU,oBAAoB,SAAS,KAAK,QAAQ;AACpD,gBAAU;AAAA,QACR;AAAA,QACA,KAAK;AAAA,MAAA;AAGP,WAAK,oBAAoB;AACzB,UAAI,KAAK,sBAAsB,MAAM;AAEnC,aAAK,kBAAkB;AAAA,UACrB;AAAA,UACA,KAAK,cAAc,MAAM;AAAA,QAAA;AAAA,MAE7B;AACA,aAAO,iBAAiB,SAAS,KAAK,QAAQ;AAC9C,aAAO,iBAAiB,WAAW,KAAK,UAA2B;AAAA,IACrE;AAAA,IAQS;AAAA,IAOA;AAAA,IAiCT,gBAAgB;AAEd,UAAI,CAAC,KAAK,WAAY;AACtB,UAAI,KAAK,iBAAiB,OAAO;AAC/B,aAAK,QAAA;AAAA,MACP,WAAW,KAAK,UAAU;AACxB,aAAK,UAAA;AAAA,MACP,OAAO;AACL,aAAK,QAAA;AAAA,MACP;AAAA,IACF;AAAA,IAEA,UAAU;AACR,UAAI,CAAC,KAAK,WAAY;AACtB,YAAM,cAAc,IAAI,mBAAmB,mBAAmB,QAAQ;AACtE,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB;AAElC,WAAK,WAAW;AAAA,IAClB;AAAA,IAEA,YAAY;AACV,UAAI,CAAC,KAAK,aAAc;AACxB,YAAM,cAAc,IAAI,mBAAmB,mBAAmB,UAAU;AACxE,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB;AAElC,WAAK,WAAW;AAAA,IAClB;AAAA,EAAA;AAjII,kBAAA;AAAA,IADH,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAAA,GAPtC,wBAQA,WAAA,cAAA,CAAA;AA2BG,kBAAA;AAAA,IADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAAA,GAlCtC,wBAmCG,WAAA,YAAA,CAAA;AAyGT,SAAQ;AACV;"}

package/dist/internal/mixins/index.d.ts

@@ -0,0 +1,7 @@
+export * from './ActiveMixin.js';
+export * from './LabelMixin.js';
+export * from './SelectableMixin.js';
+export * from './SelectOnlyMixin.js';
+export * from './FormControlMixin.js';
+export * from './FormControlWithBasicsMixin.js';
+export * from './PopoverTargetMixin.js';

package/dist/internal/registration/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Defensive definition of a custom element. It only defines the element if it has a valid name and isn't already defined.
+ *
+ * Supports both decorator and direct call syntax:
+ * - Decorator: `@defineElement('uui-button')`
+ * - Direct call: `defineElement('uui-button', UUIButtonElement)`
+ */
+export declare function defineElement(name: string, options?: ElementDefinitionOptions): (constructor: CustomElementConstructor) => void;
+export declare function defineElement(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;

package/dist/internal/registration/index.js

@@ -0,0 +1,24 @@
+function defineElement(name, constructorOrOptions, options) {
+  if (typeof constructorOrOptions === "function") {
+    register(name, constructorOrOptions, options);
+    return;
+  }
+  return (constructor) => {
+    register(name, constructor, constructorOrOptions);
+  };
+}
+function register(name, constructor, options) {
+  if (name.indexOf("-") <= 0) {
+    console.error(
+      `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`
+    );
+    return;
+  }
+  if (!customElements.get(name)) {
+    customElements.define(name, constructor, options);
+  }
+}
+export {
+  defineElement
+};
+//# sourceMappingURL=index.js.map

package/dist/internal/registration/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/internal/registration/index.ts"],"sourcesContent":["/**\n * Defensive definition of a custom element. It only defines the element if it has a valid name and isn't already defined.\n *\n * Supports both decorator and direct call syntax:\n * - Decorator: `@defineElement('uui-button')`\n * - Direct call: `defineElement('uui-button', UUIButtonElement)`\n */\n\n// Overload: decorator usage — returns a class decorator\nexport function defineElement(\n  name: string,\n  options?: ElementDefinitionOptions,\n): (constructor: CustomElementConstructor) => void;\n\n// Overload: direct call — registers immediately, returns void\nexport function defineElement(\n  name: string,\n  constructor: CustomElementConstructor,\n  options?: ElementDefinitionOptions,\n): void;\n\n// Implementation\nexport function defineElement(\n  name: string,\n  constructorOrOptions?:\n    | CustomElementConstructor\n    | ElementDefinitionOptions\n    | undefined,\n  options?: ElementDefinitionOptions | undefined,\n): void | ((constructor: CustomElementConstructor) => void) {\n  if (typeof constructorOrOptions === 'function') {\n    register(name, constructorOrOptions, options);\n    return;\n  }\n  return (constructor: CustomElementConstructor) => {\n    register(name, constructor, constructorOrOptions);\n  };\n}\n\nfunction register(\n  name: string,\n  constructor: CustomElementConstructor,\n  options?: ElementDefinitionOptions,\n) {\n  if (name.indexOf('-') <= 0) {\n    console.error(\n      `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`,\n    );\n    return;\n  }\n\n  if (!customElements.get(name)) {\n    customElements.define(name, constructor, options);\n  }\n}\n"],"names":[],"mappings":"AAsBO,SAAS,cACd,MACA,sBAIA,SAC0D;AAC1D,MAAI,OAAO,yBAAyB,YAAY;AAC9C,aAAS,MAAM,sBAAsB,OAAO;AAC5C;AAAA,EACF;AACA,SAAO,CAAC,gBAA0C;AAChD,aAAS,MAAM,aAAa,oBAAoB;AAAA,EAClD;AACF;AAEA,SAAS,SACP,MACA,aACA,SACA;AACA,MAAI,KAAK,QAAQ,GAAG,KAAK,GAAG;AAC1B,YAAQ;AAAA,MACN,GAAG,IAAI;AAAA,IAAA;AAET;AAAA,EACF;AAEA,MAAI,CAAC,eAAe,IAAI,IAAI,GAAG;AAC7B,mBAAe,OAAO,MAAM,aAAa,OAAO;AAAA,EAClD;AACF;"}

package/dist/internal/test/a11y.d.ts

@@ -0,0 +1,6 @@
+import { type AxeResults } from 'axe-core';
+/**
+ * Run axe-core accessibility checks on an element.
+ * Handles ShadowRoot by using the host element (axe traverses shadow DOM automatically).
+ */
+export declare function axeRun(element: Element | ShadowRoot): Promise<AxeResults>;

package/dist/internal/test/index.d.ts

@@ -0,0 +1,5 @@
+export declare class UUITestMouse {
+    leftClick(targetElement: HTMLElement): Promise<void>;
+}
+/** One-shot event listener as a Promise. */
+export declare function oneEvent(el: EventTarget, event: string): Promise<Event>;

package/dist/internal/types/InterfaceColor.d.ts

@@ -0,0 +1,2 @@
+export declare const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]>;
+export type UUIInterfaceColor = '' | 'default' | 'positive' | 'warning' | 'danger' | 'invalid';

package/dist/internal/types/InterfaceColor.js

@@ -0,0 +1,11 @@
+const UUIInterfaceColorValues = [
+  "default",
+  "positive",
+  "warning",
+  "danger",
+  "invalid"
+];
+export {
+  UUIInterfaceColorValues
+};
+//# sourceMappingURL=InterfaceColor.js.map

package/dist/internal/types/InterfaceColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InterfaceColor.js","sources":["../../../src/internal/types/InterfaceColor.ts"],"sourcesContent":["export const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]> = [\n  'default',\n  'positive',\n  'warning',\n  'danger',\n  'invalid',\n] as const;\n\nexport type UUIInterfaceColor =\n  | ''\n  | 'default'\n  | 'positive'\n  | 'warning'\n  | 'danger'\n  | 'invalid';\n"],"names":[],"mappings":"AAAO,MAAM,0BAAyD;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/internal/types/InterfaceHeading.d.ts

@@ -0,0 +1,2 @@
+export declare const UUIInterfaceHeadingValues: Readonly<UUIInterfaceHeading[]>;
+export type UUIInterfaceHeading = '' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/internal/types/InterfaceHeading.js

@@ -0,0 +1,12 @@
+const UUIInterfaceHeadingValues = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6"
+];
+export {
+  UUIInterfaceHeadingValues
+};
+//# sourceMappingURL=InterfaceHeading.js.map

package/dist/internal/types/InterfaceHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InterfaceHeading.js","sources":["../../../src/internal/types/InterfaceHeading.ts"],"sourcesContent":["export const UUIInterfaceHeadingValues: Readonly<UUIInterfaceHeading[]> = [\n  'h1',\n  'h2',\n  'h3',\n  'h4',\n  'h5',\n  'h6',\n] as const;\n\nexport type UUIInterfaceHeading = '' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n"],"names":[],"mappings":"AAAO,MAAM,4BAA6D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/internal/types/InterfaceLook.d.ts

@@ -0,0 +1,2 @@
+export declare const UUIInterfaceLookValues: Readonly<UUIInterfaceLook[]>;
+export type UUIInterfaceLook = '' | 'default' | 'primary' | 'secondary' | 'outline' | 'placeholder';

package/dist/internal/types/InterfaceLook.js

@@ -0,0 +1,11 @@
+const UUIInterfaceLookValues = [
+  "default",
+  "primary",
+  "secondary",
+  "outline",
+  "placeholder"
+];
+export {
+  UUIInterfaceLookValues
+};
+//# sourceMappingURL=InterfaceLook.js.map

package/dist/internal/types/InterfaceLook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InterfaceLook.js","sources":["../../../src/internal/types/InterfaceLook.ts"],"sourcesContent":["export const UUIInterfaceLookValues: Readonly<UUIInterfaceLook[]> = [\n  'default',\n  'primary',\n  'secondary',\n  'outline',\n  'placeholder',\n] as const;\n\nexport type UUIInterfaceLook =\n  | ''\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'placeholder';\n"],"names":[],"mappings":"AAAO,MAAM,yBAAuD;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/internal/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './InterfaceLook.js';
+export * from './InterfaceColor.js';
+export * from './InterfaceHeading.js';

package/dist/internal/utils/Timer.d.ts

@@ -0,0 +1,17 @@
+export declare class UUITimer {
+    private readonly _callback;
+    private _timerId;
+    private _startTime;
+    private _duration;
+    private _remaining;
+    constructor(_callback: (...args: unknown[]) => void, duration: number);
+    setDuration(duration: number): void;
+    /** starts the timer */
+    start(): void;
+    /** restarts the timer by setting remaining time to duration. */
+    restart(): void;
+    pause(): void;
+    resume(): void;
+    private readonly _onComplete;
+    destroy(): void;
+}

package/dist/internal/utils/Timer.js

@@ -0,0 +1,62 @@
+class UUITimer {
+  constructor(_callback, duration) {
+    this._callback = _callback;
+    this._timerId = null;
+    this._remaining = null;
+    this._onComplete = () => {
+      this._timerId = null;
+      this._remaining = null;
+      this._callback();
+    };
+    this.setDuration(duration);
+  }
+  setDuration(duration) {
+    const oldDuration = this._duration;
+    this._duration = duration;
+    if (this._timerId !== null) {
+      const elapsed = Date.now() - this._startTime;
+      const oldRemaining = (this._remaining ?? oldDuration) - elapsed;
+      const ratio = oldDuration > 0 ? oldRemaining / oldDuration : 1;
+      this._remaining = Math.max(0, ratio * duration);
+      this.resume();
+    } else if (this._remaining !== null) {
+      const ratio = oldDuration > 0 ? this._remaining / oldDuration : 1;
+      this._remaining = Math.max(0, ratio * duration);
+    }
+  }
+  /** starts the timer */
+  start() {
+    if (this._timerId === null) {
+      this.resume();
+    }
+  }
+  /** restarts the timer by setting remaining time to duration. */
+  restart() {
+    this._remaining = this._duration;
+    this.resume();
+  }
+  pause() {
+    if (this._timerId !== null) {
+      globalThis.clearTimeout(this._timerId);
+      this._timerId = null;
+      if (this._remaining !== null) {
+        this._remaining -= Date.now() - this._startTime;
+      }
+    }
+  }
+  resume() {
+    if (this._timerId !== null) {
+      globalThis.clearTimeout(this._timerId);
+    }
+    this._remaining ??= this._duration;
+    this._startTime = Date.now();
+    this._timerId = globalThis.setTimeout(this._onComplete, this._remaining);
+  }
+  destroy() {
+    this.pause();
+  }
+}
+export {
+  UUITimer
+};
+//# sourceMappingURL=Timer.js.map

package/dist/internal/utils/Timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.js","sources":["../../../src/internal/utils/Timer.ts"],"sourcesContent":["export class UUITimer {\n  private _timerId: number | null = null;\n  private _startTime!: number;\n  private _duration!: number;\n  private _remaining: number | null = null;\n\n  constructor(\n    private readonly _callback: (...args: unknown[]) => void,\n    duration: number,\n  ) {\n    this.setDuration(duration);\n  }\n\n  public setDuration(duration: number) {\n    const oldDuration = this._duration;\n    this._duration = duration;\n\n    if (this._timerId !== null) {\n      // Adjust remaining proportionally: if 40% elapsed at old duration,\n      // keep 60% remaining at new duration\n      const elapsed = Date.now() - this._startTime;\n      const oldRemaining = (this._remaining ?? oldDuration) - elapsed;\n      const ratio = oldDuration > 0 ? oldRemaining / oldDuration : 1;\n      this._remaining = Math.max(0, ratio * duration);\n      this.resume();\n    } else if (this._remaining !== null) {\n      // Paused: adjust remaining proportionally\n      const ratio = oldDuration > 0 ? this._remaining / oldDuration : 1;\n      this._remaining = Math.max(0, ratio * duration);\n    }\n  }\n\n  /** starts the timer */\n  public start() {\n    if (this._timerId === null) {\n      this.resume();\n    }\n  }\n\n  /** restarts the timer by setting remaining time to duration. */\n  public restart() {\n    this._remaining = this._duration;\n    this.resume();\n  }\n\n  public pause() {\n    if (this._timerId !== null) {\n      globalThis.clearTimeout(this._timerId);\n      this._timerId = null;\n      if (this._remaining !== null) {\n        this._remaining -= Date.now() - this._startTime;\n      }\n    }\n  }\n\n  public resume() {\n    if (this._timerId !== null) {\n      globalThis.clearTimeout(this._timerId);\n    }\n    this._remaining ??= this._duration;\n\n    this._startTime = Date.now();\n    this._timerId = globalThis.setTimeout(this._onComplete, this._remaining);\n  }\n\n  private readonly _onComplete = () => {\n    this._timerId = null;\n    this._remaining = null;\n    this._callback();\n  };\n\n  public destroy() {\n    this.pause();\n  }\n}\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EAMpB,YACmB,WACjB,UACA;AAFiB,SAAA,YAAA;AANnB,SAAQ,WAA0B;AAGlC,SAAQ,aAA4B;AA6DpC,SAAiB,cAAc,MAAM;AACnC,WAAK,WAAW;AAChB,WAAK,aAAa;AAClB,WAAK,UAAA;AAAA,IACP;AA3DE,SAAK,YAAY,QAAQ;AAAA,EAC3B;AAAA,EAEO,YAAY,UAAkB;AACnC,UAAM,cAAc,KAAK;AACzB,SAAK,YAAY;AAEjB,QAAI,KAAK,aAAa,MAAM;AAG1B,YAAM,UAAU,KAAK,IAAA,IAAQ,KAAK;AAClC,YAAM,gBAAgB,KAAK,cAAc,eAAe;AACxD,YAAM,QAAQ,cAAc,IAAI,eAAe,cAAc;AAC7D,WAAK,aAAa,KAAK,IAAI,GAAG,QAAQ,QAAQ;AAC9C,WAAK,OAAA;AAAA,IACP,WAAW,KAAK,eAAe,MAAM;AAEnC,YAAM,QAAQ,cAAc,IAAI,KAAK,aAAa,cAAc;AAChE,WAAK,aAAa,KAAK,IAAI,GAAG,QAAQ,QAAQ;AAAA,IAChD;AAAA,EACF;AAAA;AAAA,EAGO,QAAQ;AACb,QAAI,KAAK,aAAa,MAAM;AAC1B,WAAK,OAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA,EAGO,UAAU;AACf,SAAK,aAAa,KAAK;AACvB,SAAK,OAAA;AAAA,EACP;AAAA,EAEO,QAAQ;AACb,QAAI,KAAK,aAAa,MAAM;AAC1B,iBAAW,aAAa,KAAK,QAAQ;AACrC,WAAK,WAAW;AAChB,UAAI,KAAK,eAAe,MAAM;AAC5B,aAAK,cAAc,KAAK,IAAA,IAAQ,KAAK;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAAA,EAEO,SAAS;AACd,QAAI,KAAK,aAAa,MAAM;AAC1B,iBAAW,aAAa,KAAK,QAAQ;AAAA,IACvC;AACA,SAAK,eAAe,KAAK;AAEzB,SAAK,aAAa,KAAK,IAAA;AACvB,SAAK,WAAW,WAAW,WAAW,KAAK,aAAa,KAAK,UAAU;AAAA,EACzE;AAAA,EAQO,UAAU;AACf,SAAK,MAAA;AAAA,EACP;AACF;"}

package/dist/internal/utils/color.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Color expressed as hue (0–360), saturation (0–100), lightness (0–100),
+ * alpha (0–1). Matches the convention used throughout the UUI color components.
+ */
+export type HslaColor = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+/**
+ * Parse any supported color value into an HslaColor.
+ *
+ * Accepts: hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb(), rgba(), hsl(), hsla(),
+ * hsv(h, s%, v%) / hsva(h, s%, v%, a) (comma-separated), all CSS named colors
+ * (including 'transparent'), and HslaColor objects (passed through unchanged).
+ *
+ * Returns null for unrecognised input.
+ */
+export declare function parseColor(input: string | HslaColor): HslaColor | null;
+/**
+ * Convert HSL (h: 0–360, s: 0–100, l: 0–100) to RGB (r, g, b: 0–255).
+ */
+export declare function hslaToRgb(h: number, s: number, l: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Convert HSL (h: 0–360, s: 0–100, l: 0–100) to HSV.
+ * Returns h (0–360), s (0–100), v (0–100).
+ */
+export declare function hslaToHsv(h: number, s: number, l: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+/**
+ * Generate a hex string from HSLA values.
+ * Hue: 0–360, saturation/lightness: 0–100, alpha: 0–100 (default 100).
+ * Note: alpha uses 0–100 scale (matching the component's `alpha` property)
+ * unlike `hslaToRgbString` which uses 0–1.
+ * Returns 6-digit hex when fully opaque, 8-digit when alpha < 100.
+ * Returns empty string on invalid input.
+ */
+export declare function hslaToHex(hue: number, saturation: number, lightness: number, alpha?: number): string;
+/**
+ * Format HSLA as a CSS rgb() string (modern space-separated syntax).
+ */
+export declare function hslaToRgbString(h: number, s: number, l: number, a: number): string;
+/** Converts HSL lightness to HSB brightness given a saturation value. */
+export declare function brightnessFromLightness(saturation: number, lightness: number): number;
+/** Converts HSB brightness to HSL lightness given a saturation value. */
+export declare function lightnessFromBrightness(saturation: number, brightness: number): number;