@universal-material/web 3.0.140 → 3.0.142

package/radio/radio.styles.js

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);
+    --_width: var(--u-radio-size, 3rem);
+    --_height: var(--_width);
+  }
+
+  .indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);
+    border-radius: 50%;
+  }
+  .indicator::before {
+    content: "";
+    width: calc(var(--_indicator-size) / 2);
+    height: calc(var(--_indicator-size) / 2);
+    background: var(--_indicator-color);
+    border-radius: 50%;
+    transition: transform 250ms;
+    transform: scale3d(0, 0, 1);
+  }
+
+  input:checked ~ .indicator-container .indicator::before {
+    transform: scale3d(1, 1, 1);
+  }
+`;
+//# sourceMappingURL=radio.styles.js.map

package/radio/radio.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n    --_width: var(--u-radio-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .indicator {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n    border-radius: 50%;\n  }\n  .indicator::before {\n    content: \"\";\n    width: calc(var(--_indicator-size) / 2);\n    height: calc(var(--_indicator-size) / 2);\n    background: var(--_indicator-color);\n    border-radius: 50%;\n    transition: transform 250ms;\n    transform: scale3d(0, 0, 1);\n  }\n\n  input:checked ~ .indicator-container .indicator::before {\n    transform: scale3d(1, 1, 1);\n  }\n`;\n"]}

package/ripple/ripple.d.ts

@@ -0,0 +1,28 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class UmRipple extends LitElement {
+    static styles: import("lit").CSSResult;
+    private isTouching;
+    /**
+     * Disables the ripple.
+     */
+    disabled: boolean;
+    private readonly rippleContainer;
+    constructor();
+    render(): HTMLTemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private attachEvents;
+    private dettachEvents;
+    private handleMouseDown;
+    private handleTouchStart;
+    private canCreateRipple;
+    createRipple(targetX?: number | null, targetY?: number | null, releaseEventName?: string | null): (() => void) | null;
+    private createDismissEvent;
+    private static _setElementSquareSizeAndCenter;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-ripple': UmRipple;
+    }
+}
+//# sourceMappingURL=ripple.d.ts.map

package/ripple/ripple.d.ts.map

@@ -0,0 +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"}

package/ripple/ripple.js

@@ -0,0 +1,120 @@
+var UmRipple_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; }
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        this.isTouching = false;
+        /**
+         * Disables the ripple.
+         */
+        this.disabled = false;
+    }
+    render() {
+        return html `<div class="ripple-container"></div><slot></slot>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.attachEvents();
+        this.ariaHidden = 'true';
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.dettachEvents();
+    }
+    attachEvents() {
+        this.addEventListener('mousedown', this.handleMouseDown);
+        this.addEventListener('touchstart', this.handleTouchStart);
+    }
+    dettachEvents() {
+        this.removeEventListener('mousedown', this.handleMouseDown);
+        this.removeEventListener('touchstart', this.handleTouchStart);
+    }
+    handleMouseDown(e) {
+        if (this.isTouching || !this.canCreateRipple()) {
+            return;
+        }
+        this.createRipple(e.clientX, e.clientY, 'mouseup');
+    }
+    handleTouchStart(e) {
+        if (!this.canCreateRipple()) {
+            return;
+        }
+        this.isTouching = true;
+        const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend');
+        this.addEventListener('touchmove', dismiss);
+    }
+    canCreateRipple() {
+        return !this.disabled;
+    }
+    createRipple(targetX = null, targetY = null, releaseEventName = null) {
+        const preClientRect = this.rippleContainer.getBoundingClientRect();
+        targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;
+        targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;
+        const ripple = document.createElement('DIV');
+        ripple.classList.add('ripple');
+        this.rippleContainer.appendChild(ripple);
+        requestAnimationFrame(() => {
+            const clientRect = this.getBoundingClientRect();
+            const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);
+            const rippleSize = largestDimensionSize * 2;
+            UmRipple_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);
+            ripple.style.transformOrigin = `${x}px ${y}px`;
+            ripple.classList.add(releaseEventName ? 'show' : 'show-forced');
+        });
+        const interval = setInterval(() => {
+            if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {
+                return;
+            }
+            const animations = ripple.getAnimations();
+            if (animations.length) {
+                return;
+            }
+            clearInterval(interval);
+            ripple.remove();
+        }, 1000);
+        if (!releaseEventName) {
+            return null;
+        }
+        return this.createDismissEvent(ripple, releaseEventName);
+    }
+    createDismissEvent(ripple, releaseEventName) {
+        const dismiss = () => {
+            ripple.classList.add('dismiss');
+            this.isTouching = false;
+            this.removeEventListener('dragover', dismiss);
+            this.removeEventListener('mouseleave', dismiss);
+            window.removeEventListener(releaseEventName, dismiss);
+        };
+        this.addEventListener('dragover', dismiss);
+        this.addEventListener('mouseleave', dismiss);
+        window.addEventListener(releaseEventName, dismiss);
+        return dismiss;
+    }
+    static _setElementSquareSizeAndCenter(element, size) {
+        element.style.top = '50%';
+        element.style.left = '50%';
+        element.style.width = `${size}px`;
+        element.style.height = `${size}px`;
+        element.style.marginLeft = `${-size / 2}px`;
+        element.style.marginTop = `${-size / 2}px`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmRipple.prototype, "disabled", void 0);
+__decorate([
+    query('.ripple-container')
+], UmRipple.prototype, "rippleContainer", void 0);
+UmRipple = UmRipple_1 = __decorate([
+    customElement('u-ripple')
+], UmRipple);
+export { UmRipple };
+//# sourceMappingURL=ripple.js.map

package/ripple/ripple.js.map

@@ -0,0 +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"]}

package/ripple/ripple.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ripple.styles.d.ts.map

package/ripple/ripple.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.styles.d.ts","sourceRoot":"","sources":["../../src/ripple/ripple.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAuElB,CAAC"}

package/ripple/ripple.styles.js

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+export const styles = css `
+  :host,
+  .ripple-container::before {
+    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
+    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
+    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));
+    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);
+    display: block;
+    inset: 0;
+    isolation: isolate;
+  }
+
+  .ripple-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--u-ripple-border-radius, inherit);
+  }
+
+  .ripple-container::before {
+    content: "";
+    background: var(--_ripple-hover-color);
+    opacity: 0;
+    transition: opacity 200ms;
+  }
+
+  @media (hover: hover) {
+    :host(:not([disabled]):hover) .ripple-container::before {
+      content: "";
+      background: var(--_ripple-hover-color);
+      opacity: var(--_ripple-hover-opacity);
+    }
+  }
+  :host,
+  .ripple-container::before,
+  .ripple {
+    position: absolute;
+    border-radius: inherit;
+  }
+
+  .ripple {
+    top: 50%;
+    left: 50%;
+    background: var(--_ripple-pressed-color);
+    border-radius: 50%;
+    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);
+    opacity: var(--_ripple-pressed-opacity);
+    transform: scale3d(0, 0, 1);
+    pointer-events: none;
+    will-change: transform;
+  }
+  .ripple.show {
+    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));
+    transform: scale3d(1, 1, 1);
+  }
+  .ripple.show-forced {
+    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;
+    transform: scale3d(2, 2, 1);
+    opacity: 0;
+  }
+  .ripple.dismiss {
+    opacity: 0;
+    transform: scale3d(2, 2, 1);
+  }
+
+  ::slotted(*) {
+    position: absolute !important;
+    inset: 0;
+    border-radius: inherit;
+  }
+`;
+//# sourceMappingURL=ripple.styles.js.map

package/ripple/ripple.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../src/ripple/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: var(--u-ripple-border-radius, inherit);\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`;\n"]}

package/select/extended-option.d.ts

@@ -0,0 +1,5 @@
+import { UmOption } from './option.js';
+export type ExtendedOption = HTMLOptionElement & {
+    _parent: UmOption;
+};
+//# sourceMappingURL=extended-option.d.ts.map

package/select/extended-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-option.d.ts","sourceRoot":"","sources":["../../src/select/extended-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC"}

package/select/extended-option.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=extended-option.js.map

package/select/extended-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-option.js","sourceRoot":"","sources":["../../src/select/extended-option.ts"],"names":[],"mappings":"","sourcesContent":["import { UmOption } from './option.js';\n\nexport type ExtendedOption = HTMLOptionElement & { _parent: UmOption };\n"]}

package/select/extended-select.d.ts

@@ -0,0 +1,6 @@
+import { ExtendedOption } from './extended-option.js';
+export type ExtendedSelect = HTMLSelectElement & {
+    options: ExtendedOption[];
+    selectedOptions: ExtendedOption[];
+};
+//# sourceMappingURL=extended-select.d.ts.map

package/select/extended-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-select.d.ts","sourceRoot":"","sources":["../../src/select/extended-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,CAAC"}

package/select/extended-select.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=extended-select.js.map

package/select/extended-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-select.js","sourceRoot":"","sources":["../../src/select/extended-select.ts"],"names":[],"mappings":"","sourcesContent":["import { ExtendedOption } from './extended-option.js';\n\nexport type ExtendedSelect = HTMLSelectElement & {\n  options: ExtendedOption[];\n  selectedOptions: ExtendedOption[];\n};\n"]}

package/select/option.d.ts

@@ -0,0 +1,27 @@
+import { TemplateResult } from 'lit';
+import { UmMenuItem } from '../menu/menu-item.js';
+import { ExtendedOption } from './extended-option.js';
+import { UmSelect } from './select.js';
+import './select.js';
+export declare class UmOption extends UmMenuItem {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    _nativeOption: ExtendedOption;
+    get value(): string;
+    set value(value: string);
+    get selected(): boolean;
+    set selected(selected: boolean);
+    protected renderDefaultTrailingIcon(): TemplateResult;
+    private get _selectedAttribute();
+    private set _selectedAttribute(value);
+    _select: UmSelect | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    setSelectedByUser(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-option': UmOption;
+    }
+}
+//# sourceMappingURL=option.d.ts.map

package/select/option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,+DAA+B;IAErD,aAAa,EAAE,cAAc,CAWxB;IAEL,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAmB7B;cAEkB,yBAAyB,IAAI,cAAc;IAS9D,OAAO,KAAK,kBAAkB,GAE7B;IAGD,OAAO,KAAK,kBAAkB,QAO7B;IAED,OAAO,EAAG,QAAQ,GAAG,IAAI,CAAC;IAEjB,iBAAiB;IAQjB,oBAAoB;IAsC7B,iBAAiB;CAyBlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/select/option.js

@@ -0,0 +1,132 @@
+import { __decorate } from "tslib";
+import { svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { UmMenuItem } from '../menu/menu-item.js';
+import { styles } from './option.styles.js';
+import { UmSelect } from './select.js';
+import './select.js';
+let UmOption = class UmOption extends UmMenuItem {
+    constructor() {
+        super(...arguments);
+        this._nativeOption = (() => {
+            const option = document.createElement('option');
+            option._parent = this;
+            if (this.hasAttribute('selected')) {
+                option.setAttribute('selected', '');
+            }
+            option.textContent = this.textContent;
+            return option;
+        })();
+    }
+    static { this.styles = [UmMenuItem.styles, styles]; }
+    get value() {
+        return this._nativeOption.value;
+    }
+    set value(value) {
+        this._nativeOption.value = value;
+    }
+    get selected() {
+        return this._nativeOption.selected;
+    }
+    set selected(selected) {
+        if (this.selected === selected) {
+            return;
+        }
+        this._nativeOption.selected = selected;
+        if (selected) {
+            this.classList.add('selected');
+        }
+        else {
+            this.classList.remove('selected');
+        }
+        if (!this._select) {
+            return;
+        }
+        // this._select._button.setAttribute('aria-labelledby', this._listItem.id);
+        this._select.empty = !this._nativeOption.textContent?.trim();
+    }
+    renderDefaultTrailingIcon() {
+        return svg `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
+      </svg>`;
+    }
+    get _selectedAttribute() {
+        return this._nativeOption.hasAttribute('selected');
+    }
+    // @ts-ignore
+    set _selectedAttribute(selected) {
+        if (selected) {
+            this._nativeOption.setAttribute('selected', '');
+            return;
+        }
+        this._nativeOption.removeAttribute('selected');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.#handleClick);
+        this.setAttribute('tabindex', '-1');
+        this.#attach();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.#handleClick);
+        if (this._select === this.parentElement) {
+            return;
+        }
+        this._nativeOption.remove();
+        if (!this._select) {
+            return;
+        }
+        this._select.value = this._select.value;
+        this._select = null;
+    }
+    async #attach() {
+        if (this._select === this.parentElement) {
+            return;
+        }
+        this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;
+        await this.#setNativeOption();
+    }
+    #handleClick(e) {
+        if (!this._select) {
+            return;
+        }
+        e.stopPropagation();
+        this.setSelectedByUser();
+    }
+    setSelectedByUser() {
+        if (!this._select) {
+            return;
+        }
+        this._select.selectedOptions[0]?.classList.remove('selected');
+        this.selected = true;
+        this._select.value = this._select.value;
+        this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        this._select.dispatchEvent(new Event('change', { bubbles: true }));
+        this._select._menu?.close();
+    }
+    #updateContent() {
+        this._nativeOption.textContent = this.textContent;
+    }
+    async #setNativeOption() {
+        await this.updateComplete;
+        this.#updateContent();
+        this._select?._updateOptions();
+    }
+};
+__decorate([
+    property({ reflect: true })
+], UmOption.prototype, "value", null);
+__decorate([
+    state()
+], UmOption.prototype, "selected", null);
+__decorate([
+    property({ type: Boolean, attribute: 'selected' })
+    // @ts-ignore
+], UmOption.prototype, "_selectedAttribute", null);
+UmOption = __decorate([
+    customElement('u-option')
+], UmOption);
+export { UmOption };
+//# sourceMappingURL=option.js.map

package/select/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"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","sourcesContent":["import { svg, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { ExtendedOption } from './extended-option.js';\nimport { styles } from './option.styles.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n  static override styles = [UmMenuItem.styles, styles];\n\n  _nativeOption: ExtendedOption = (() => {\n    const option = document.createElement('option') as ExtendedOption;\n    option._parent = this;\n\n    if (this.hasAttribute('selected')) {\n      option.setAttribute('selected', '');\n    }\n\n    option.textContent = this.textContent;\n\n    return option;\n  })();\n\n  @property({ reflect: true })\n  get value(): string {\n    return this._nativeOption.value;\n  }\n\n  set value(value: string) {\n    this._nativeOption.value = value;\n  }\n\n  @state()\n  get selected(): boolean {\n    return this._nativeOption.selected;\n  }\n\n  set selected(selected: boolean) {\n    if (this.selected === selected) {\n      return;\n    }\n\n    this._nativeOption.selected = selected;\n\n    if (selected) {\n      this.classList.add('selected');\n    } else {\n      this.classList.remove('selected');\n    }\n\n    if (!this._select) {\n      return;\n    }\n\n    // this._select._button.setAttribute('aria-labelledby', this._listItem.id);\n    this._select.empty = !this._nativeOption.textContent?.trim();\n  }\n\n  protected override renderDefaultTrailingIcon(): TemplateResult {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\"/>\n      </svg>`;\n  }\n\n  @property({ type: Boolean, attribute: 'selected' })\n  // @ts-ignore\n  private get _selectedAttribute(): boolean {\n    return this._nativeOption.hasAttribute('selected');\n  }\n\n  // @ts-ignore\n  private set _selectedAttribute(selected: boolean) {\n    if (selected) {\n      this._nativeOption.setAttribute('selected', '');\n      return;\n    }\n\n    this._nativeOption.removeAttribute('selected');\n  }\n\n  _select!: UmSelect | null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n    this.setAttribute('tabindex', '-1');\n\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick);\n\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._nativeOption.remove();\n\n    if (!this._select) {\n      return;\n    }\n\n    this._select.value = this._select.value;\n    this._select = null;\n  }\n\n  async #attach(): Promise<void> {\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;\n\n    await this.#setNativeOption();\n  }\n\n  #handleClick(e: Event) {\n    if (!this._select) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    this.setSelectedByUser();\n  }\n\n  setSelectedByUser() {\n    if (!this._select) {\n      return;\n    }\n\n    this._select.selectedOptions[0]?.classList.remove('selected');\n    this.selected = true;\n\n    this._select.value = this._select.value;\n    this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this._select.dispatchEvent(new Event('change', { bubbles: true }));\n\n    this._select._menu?.close();\n  }\n\n  #updateContent() {\n    this._nativeOption.textContent = this.textContent;\n  }\n\n  async #setNativeOption(): Promise<void> {\n    await this.updateComplete;\n    this.#updateContent();\n\n    this._select?._updateOptions();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-option': UmOption;\n  }\n}\n"]}

package/select/option.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=option.styles.d.ts.map

package/select/option.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.styles.d.ts","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAYlB,CAAC"}

package/select/option.styles.js

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+export const styles = css `
+  :host(.selected) {
+    background-color: var(--u-select-option-selected-bg-color, color-mix(in srgb, var(--u-color-primary, rgb(103, 80, 164)) 12%, transparent));
+  }
+  :host(.selected) .icon,
+  :host(.selected) .content {
+    color: var(--u-select-option-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+
+  :host(:not(.selected):not([has-trailing-icon])) .trailing {
+    display: none;
+  }
+`;
+//# sourceMappingURL=option.styles.js.map

package/select/option.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host(.selected) {\n    background-color: var(--u-select-option-selected-bg-color, color-mix(in srgb, var(--u-color-primary, rgb(103, 80, 164)) 12%, transparent));\n  }\n  :host(.selected) .icon,\n  :host(.selected) .content {\n    color: var(--u-select-option-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host(:not(.selected):not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n`;\n"]}

package/select/select-navigation-controller.d.ts

@@ -0,0 +1,14 @@
+import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
+import { UmOption } from './option.js';
+import { UmSelect } from './select.js';
+export declare class SelectNavigationController extends MenuFieldNavigationController<UmSelect, UmOption> {
+    #private;
+    protected handleKeyDown(event: KeyboardEvent): boolean;
+    attach(element: HTMLElement): void;
+    detach(): void;
+    protected afterFocus(_: UmOption, index: number): void;
+    protected afterBlur(): void;
+    private handleType;
+    private findNextElementByTerm;
+}
+//# sourceMappingURL=select-navigation-controller.d.ts.map

package/select/select-navigation-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-navigation-controller.d.ts","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC;AACzG,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,qBAAa,0BAA2B,SAAQ,6BAA6B,CAAC,QAAQ,EAAE,QAAQ,CAAC;;cAG5E,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA0BtD,MAAM,CAAC,OAAO,EAAE,WAAW;IAK3B,MAAM;cAWI,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM;cAIrC,SAAS;IAI5B,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,qBAAqB;CAyB9B"}