@skdx/web-components 0.26.0

package/dist/popover/PopoverClose.cjs

@@ -0,0 +1,9 @@
+"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(e,o)=>{for(var r in o)a(e,r,{get:o[r],enumerable:!0})},k=(e,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of u(o))!b.call(e,t)&&t!==r&&a(e,t,{get:()=>o[t],enumerable:!(l=d(o,t))||l.enumerable});return e};var y=e=>k(a({},"__esModule",{value:!0}),e),m=(e,o,r,l)=>{for(var t=l>1?void 0:l?d(o,r):o,c=e.length-1,p;c>=0;c--)(p=e[c])&&(t=(l?p(o,r,t):p(t))||t);return l&&t&&a(o,r,t),t};var g={};f(g,{SkdxPopoverClose:()=>s});module.exports=y(g);var i=require("lit"),h=require("../internal/closest.cjs"),v=require("../internal/define.cjs"),n=require("../internal/styles.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.root=(0,h.closestThroughPortal)(this,"skdx-popover")}render(){return i.html`
+      <button part="close" type="button" @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=n.delegatesFocusShadowRootOptions,s.styles=[n.resetNativeControl,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,n.controlBoxOnHost],s=m([(0,v.customElement)("skdx-popover-close","popover","close")],s);0&&(module.exports={SkdxPopoverClose});

package/dist/popover/PopoverClose.d.cts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-popover-close>` — button that closes the closest ancestor
+ * `<skdx-popover>` when clicked. Renders inside `<skdx-popover-content>`
+ * anywhere you like.
+ */
+export declare class SkdxPopoverClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-close': SkdxPopoverClose;
+    }
+}

package/dist/popover/PopoverClose.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-popover-close>` — button that closes the closest ancestor
+ * `<skdx-popover>` when clicked. Renders inside `<skdx-popover-content>`
+ * anywhere you like.
+ */
+export declare class SkdxPopoverClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-close': SkdxPopoverClose;
+    }
+}

package/dist/popover/PopoverClose.js

@@ -0,0 +1,9 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(l,e,s,r)=>{for(var o=r>1?void 0:r?p(e,s):e,i=l.length-1,n;i>=0;i--)(n=l[i])&&(o=(r?n(e,s,o):n(o))||o);return r&&o&&c(e,s,o),o};import{css as d,html as m,LitElement as h}from"lit";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as u}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as f,resetNativeControl as k}from"../internal/styles.js";var t=class extends h{constructor(){super(...arguments);this.root=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.root=v(this,"skdx-popover")}render(){return m`
+      <button part="close" type="button" @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};t.shadowRootOptions=f,t.styles=[k,d`
+      :host {
+        display: inline-block;
+      }
+    `,b],t=a([u("skdx-popover-close","popover","close")],t);export{t as SkdxPopoverClose};

package/dist/popover/PopoverContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var w=(n,e)=>{for(var t in e)u(n,t,{get:e[t],enumerable:!0})},L=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!O.call(n,o)&&o!==t&&u(n,o,{get:()=>e[o],enumerable:!(i=f(e,o))||i.enumerable});return n};var P=n=>L(u({},"__esModule",{value:!0}),n),a=(n,e,t,i)=>{for(var o=i>1?void 0:i?f(e,t):e,l=n.length-1,p;l>=0;l--)(p=n[l])&&(o=(i?p(e,t,o):p(o))||o);return i&&o&&u(e,t,o),o};var F={};w(F,{SkdxPopoverContent:()=>r});module.exports=P(F);var c=require("lit"),d=require("lit/decorators.js"),g=require("../internal/closest.cjs"),y=require("../internal/define.cjs"),s=require("../internal/dismiss.cjs"),h=require("../internal/positioning.cjs"),b=require("../internal/styles.cjs");var m='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function v(n){return Array.from(n.querySelectorAll("*")).filter(e=>e.matches(m)||!!e.shadowRoot?.querySelector(m))}var r=class extends c.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let i=t.target;this.contains(i)||(0,s.triggerContains)(this.root.triggerEl,i)||(0,s.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let i=(0,s.focusOutsideTarget)(t);!i||this.contains(i)||(0,s.triggerContains)(this.root.triggerEl,i)||(0,s.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{if(t.key==="Escape"){t.preventDefault(),(0,s.dispatchEscapeKeyDown)(this,t)&&(this.root?.setOpen(!1),(0,s.dispatchAutoFocus)(this,"close-auto-focus")&&this.root?.focusTrigger());return}t.key==="Tab"&&this.root?.modal&&this.trapFocus(t)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.tabIndex=-1,this.root=(0,g.closestThroughPortal)(this,"skdx-popover"),this.root?.addEventListener("skdx-popover-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-popover-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"center"),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,h.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"popover",arrow:()=>this.querySelector("skdx-popover-arrow")}),this.root.modal&&requestAnimationFrame(()=>(0,s.focusOnOpen)(()=>{if(!(0,s.dispatchAutoFocus)(this,"open-auto-focus"))return;(v(this)[0]??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}trapFocus(t){let i=v(this);if(i.length===0)return;let o=i[0],l=i[i.length-1];t.shiftKey&&document.activeElement===o?(t.preventDefault(),l.focus()):!t.shiftKey&&document.activeElement===l&&(t.preventDefault(),o.focus())}render(){return c.html`<slot></slot>`}};r.styles=[b.hiddenHostStyles,c.css`
+      :host {
+        display: block;
+      }
+    `],a([(0,d.property)({type:String})],r.prototype,"side",2),a([(0,d.property)({type:String})],r.prototype,"align",2),a([(0,d.property)({type:Number,attribute:"side-offset"})],r.prototype,"sideOffset",2),a([(0,d.property)({type:Number,attribute:"align-offset"})],r.prototype,"alignOffset",2),a([(0,d.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],r.prototype,"avoidCollisions",2),a([(0,d.property)({type:Number,attribute:"collision-padding"})],r.prototype,"collisionPadding",2),a([(0,d.property)({attribute:!1})],r.prototype,"collisionBoundary",2),r=a([(0,y.customElement)("skdx-popover-content","popover","content")],r);0&&(module.exports={SkdxPopoverContent});

package/dist/popover/PopoverContent.d.cts

@@ -0,0 +1,88 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.cjs';
+/**
+ * `<skdx-popover-content>` — the popover's floating panel for the closest
+ * ancestor `<skdx-popover>`, positioned relative to the trigger via
+ * `@floating-ui/dom` (`strategy: 'fixed'`, so no portal is needed — unlike
+ * React's `PopoverPortal`, this content renders in normal document flow).
+ * `role`, `id`, and `data-state` are set directly on this host element (not
+ * inside shadow DOM) so `aria-controls` on the trigger can target this
+ * element's id and arbitrary light-DOM content can be slotted in.
+ *
+ * Closes on Escape or on an outside interaction — pointer-down outside, or
+ * focus moving outside — each announced first as `interact-outside` and then
+ * as the specific event, so one `preventDefault()` vetoes either path.
+ * Escape returns focus to the trigger, announced as `close-auto-focus`.
+ * Traps Tab/Shift+Tab within its own focusable descendants while the
+ * ancestor popover is `modal`, and announces the initial focus move it makes
+ * on open as `open-auto-focus`.
+ *
+ * `data-side`/`data-align` start out as the *configured* `side`/`align` and
+ * are rewritten by `positioning.ts`'s `positionFloating` with floating-ui's
+ * resolved (post-flip/shift) placement on every reposition, as React's
+ * `PopperContent` does. The same layer writes the measurement custom
+ * properties `--skdx-popover-available-width` / `-available-height` /
+ * `-trigger-width` / `-transform-origin` onto this element, so the panel can
+ * be sized and animated from CSS without measuring anything by hand.
+ *
+ * @fires escape-key-down - Escape was pressed while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside this content while open. Preventable.
+ * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ * @fires open-auto-focus - Fired before focus is moved into the content on open. Preventing it leaves focus where it is.
+ * @fires close-auto-focus - Fired before focus is returned to the trigger on Escape. Preventing it suppresses the return.
+ */
+export declare class SkdxPopoverContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the trigger to place the panel against. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the trigger. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the panel and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * panel's clipping ancestors — keeps it inside a scroll container or one
+     * pane of a split layout rather than the whole viewport. Property-only: an
+     * `Element` cannot come from an attribute string.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The trigger registers the element to anchor against in its own
+     * `firstUpdated()`, which has not run yet when this panel's
+     * `connectedCallback` does — so a panel that mounts already open finds no
+     * anchor and, with no open-state change to follow, never positions itself at
+     * all. This is the first tick where the anchor exists; `activate()` is
+     * guarded, so an already-positioned panel is untouched.
+     */
+    protected firstUpdated(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    private trapFocus;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-content': SkdxPopoverContent;
+    }
+}

package/dist/popover/PopoverContent.d.ts

@@ -0,0 +1,88 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.js';
+/**
+ * `<skdx-popover-content>` — the popover's floating panel for the closest
+ * ancestor `<skdx-popover>`, positioned relative to the trigger via
+ * `@floating-ui/dom` (`strategy: 'fixed'`, so no portal is needed — unlike
+ * React's `PopoverPortal`, this content renders in normal document flow).
+ * `role`, `id`, and `data-state` are set directly on this host element (not
+ * inside shadow DOM) so `aria-controls` on the trigger can target this
+ * element's id and arbitrary light-DOM content can be slotted in.
+ *
+ * Closes on Escape or on an outside interaction — pointer-down outside, or
+ * focus moving outside — each announced first as `interact-outside` and then
+ * as the specific event, so one `preventDefault()` vetoes either path.
+ * Escape returns focus to the trigger, announced as `close-auto-focus`.
+ * Traps Tab/Shift+Tab within its own focusable descendants while the
+ * ancestor popover is `modal`, and announces the initial focus move it makes
+ * on open as `open-auto-focus`.
+ *
+ * `data-side`/`data-align` start out as the *configured* `side`/`align` and
+ * are rewritten by `positioning.ts`'s `positionFloating` with floating-ui's
+ * resolved (post-flip/shift) placement on every reposition, as React's
+ * `PopperContent` does. The same layer writes the measurement custom
+ * properties `--skdx-popover-available-width` / `-available-height` /
+ * `-trigger-width` / `-transform-origin` onto this element, so the panel can
+ * be sized and animated from CSS without measuring anything by hand.
+ *
+ * @fires escape-key-down - Escape was pressed while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside this content while open. Preventable.
+ * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ * @fires open-auto-focus - Fired before focus is moved into the content on open. Preventing it leaves focus where it is.
+ * @fires close-auto-focus - Fired before focus is returned to the trigger on Escape. Preventing it suppresses the return.
+ */
+export declare class SkdxPopoverContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the trigger to place the panel against. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the trigger. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the panel and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * panel's clipping ancestors — keeps it inside a scroll container or one
+     * pane of a split layout rather than the whole viewport. Property-only: an
+     * `Element` cannot come from an attribute string.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The trigger registers the element to anchor against in its own
+     * `firstUpdated()`, which has not run yet when this panel's
+     * `connectedCallback` does — so a panel that mounts already open finds no
+     * anchor and, with no open-state change to follow, never positions itself at
+     * all. This is the first tick where the anchor exists; `activate()` is
+     * guarded, so an already-positioned panel is untouched.
+     */
+    protected firstUpdated(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    private trapFocus;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-content': SkdxPopoverContent;
+    }
+}

package/dist/popover/PopoverContent.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var s=(d,n,t,i)=>{for(var o=i>1?void 0:i?v(n,t):n,a=d.length-1,l;a>=0;a--)(l=d[a])&&(o=(i?l(n,t,o):l(o))||o);return i&&o&&m(n,t,o),o};import{css as g,html as y,LitElement as b}from"lit";import{property as r}from"lit/decorators.js";import{closestThroughPortal as E}from"../internal/closest.js";import{customElement as O}from"../internal/define.js";import{dispatchAutoFocus as c,dispatchEscapeKeyDown as w,dispatchOutside as u,focusOnOpen as L,focusOutsideTarget as P,triggerContains as h}from"../internal/dismiss.js";import{optOutBoolean as F,positionFloating as A}from"../internal/positioning.js";import{hiddenHostStyles as D}from"../internal/styles.js";var p='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function f(d){return Array.from(d.querySelectorAll("*")).filter(n=>n.matches(p)||!!n.shadowRoot?.querySelector(p))}var e=class extends b{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let i=t.target;this.contains(i)||h(this.root.triggerEl,i)||u(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let i=P(t);!i||this.contains(i)||h(this.root.triggerEl,i)||u(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{if(t.key==="Escape"){t.preventDefault(),w(this,t)&&(this.root?.setOpen(!1),c(this,"close-auto-focus")&&this.root?.focusTrigger());return}t.key==="Tab"&&this.root?.modal&&this.trapFocus(t)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.tabIndex=-1,this.root=E(this,"skdx-popover"),this.root?.addEventListener("skdx-popover-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-popover-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"center"),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=A(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"popover",arrow:()=>this.querySelector("skdx-popover-arrow")}),this.root.modal&&requestAnimationFrame(()=>L(()=>{if(!c(this,"open-auto-focus"))return;(f(this)[0]??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}trapFocus(t){let i=f(this);if(i.length===0)return;let o=i[0],a=i[i.length-1];t.shiftKey&&document.activeElement===o?(t.preventDefault(),a.focus()):!t.shiftKey&&document.activeElement===a&&(t.preventDefault(),o.focus())}render(){return y`<slot></slot>`}};e.styles=[D,g`
+      :host {
+        display: block;
+      }
+    `],s([r({type:String})],e.prototype,"side",2),s([r({type:String})],e.prototype,"align",2),s([r({type:Number,attribute:"side-offset"})],e.prototype,"sideOffset",2),s([r({type:Number,attribute:"align-offset"})],e.prototype,"alignOffset",2),s([r({converter:F,attribute:"avoid-collisions"})],e.prototype,"avoidCollisions",2),s([r({type:Number,attribute:"collision-padding"})],e.prototype,"collisionPadding",2),s([r({attribute:!1})],e.prototype,"collisionBoundary",2),e=s([O("skdx-popover-content","popover","content")],e);export{e as SkdxPopoverContent};

package/dist/popover/PopoverPortal.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var m in e)r(a,m,{get:e[m],enumerable:!0})},E=(a,e,m,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of i(e))!x.call(a,t)&&t!==m&&r(a,t,{get:()=>e[t],enumerable:!(o=c(e,t))||o.enumerable});return a};var M=a=>E(r({},"__esModule",{value:!0}),a),n=(a,e,m,o)=>{for(var t=o>1?void 0:o?c(e,m):e,l=a.length-1,s;l>=0;l--)(s=a[l])&&(t=(o?s(e,m,t):s(t))||t);return o&&t&&r(e,m,t),t};var T={};g(T,{SkdxPopoverPortal:()=>p});module.exports=M(T);var d=require("../internal/define.cjs"),f=require("../utils/portal.cjs");var p=class extends f.SkdxPortal{};p=n([(0,d.customElement)("skdx-popover-portal")],p);0&&(module.exports={SkdxPopoverPortal});

package/dist/popover/PopoverPortal.d.cts

@@ -0,0 +1,33 @@
+import { SkdxPortal } from '../utils/portal.cjs';
+/**
+ * `<skdx-popover-portal>` — teleports `<skdx-popover-content>` to
+ * `document.body` (or a custom `container`), so the popover escapes any
+ * clipping or `overflow` ancestor of its trigger.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `PopoverPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-popover>
+ *   <skdx-popover-trigger>Open</skdx-popover-trigger>
+ *   <skdx-popover-portal>
+ *     <skdx-popover-content>…</skdx-popover-content>
+ *   </skdx-popover-portal>
+ * </skdx-popover>
+ * ```
+ */
+export declare class SkdxPopoverPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-portal': SkdxPopoverPortal;
+    }
+}

package/dist/popover/PopoverPortal.d.ts

@@ -0,0 +1,33 @@
+import { SkdxPortal } from '../utils/portal.js';
+/**
+ * `<skdx-popover-portal>` — teleports `<skdx-popover-content>` to
+ * `document.body` (or a custom `container`), so the popover escapes any
+ * clipping or `overflow` ancestor of its trigger.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `PopoverPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-popover>
+ *   <skdx-popover-trigger>Open</skdx-popover-trigger>
+ *   <skdx-popover-portal>
+ *     <skdx-popover-content>…</skdx-popover-content>
+ *   </skdx-popover-portal>
+ * </skdx-popover>
+ * ```
+ */
+export declare class SkdxPopoverPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-portal': SkdxPopoverPortal;
+    }
+}

package/dist/popover/PopoverPortal.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=(o,t,p,a)=>{for(var e=a>1?void 0:a?n(t,p):t,r=o.length-1,l;r>=0;r--)(l=o[r])&&(e=(a?l(t,p,e):l(e))||e);return a&&e&&c(t,p,e),e};import{customElement as d}from"../internal/define.js";import{SkdxPortal as f}from"../utils/portal.js";var m=class extends f{};m=s([d("skdx-popover-portal")],m);export{m as SkdxPopoverPortal};

package/dist/popover/PopoverTrigger.cjs

@@ -0,0 +1,17 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var b=(r,o)=>{for(var t in o)d(r,t,{get:o[t],enumerable:!0})},k=(r,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of u(o))!m.call(r,e)&&e!==t&&d(r,e,{get:()=>o[e],enumerable:!(n=c(o,e))||n.enumerable});return r};var f=r=>k(d({},"__esModule",{value:!0}),r),h=(r,o,t,n)=>{for(var e=n>1?void 0:n?c(o,t):o,l=r.length-1,p;l>=0;l--)(p=r[l])&&(e=(n?p(o,t,e):p(e))||e);return n&&e&&d(o,t,e),e};var g={};b(g,{SkdxPopoverTrigger:()=>s});module.exports=f(g);var i=require("lit"),v=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open)}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-popover"),this.root?.addEventListener("skdx-popover-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-popover-internal-update",this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}render(){let t=this.root;return t?i.html`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${t.open}
+        aria-controls=${t.contentId}
+        data-state=${t.open?"open":"closed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `:i.nothing}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],s=h([(0,v.customElement)("skdx-popover-trigger","popover","trigger")],s);0&&(module.exports={SkdxPopoverTrigger});

package/dist/popover/PopoverTrigger.d.cts

@@ -0,0 +1,26 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-popover-trigger>` — opens the closest ancestor `<skdx-popover>` when
+ * clicked and doubles as the default positioning anchor for
+ * `<skdx-popover-content>`. Renders `<button type="button" role="button">`
+ * in shadow DOM with `aria-haspopup="dialog"`, `aria-expanded`,
+ * `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxPopoverTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-trigger': SkdxPopoverTrigger;
+    }
+}

package/dist/popover/PopoverTrigger.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-popover-trigger>` — opens the closest ancestor `<skdx-popover>` when
+ * clicked and doubles as the default positioning anchor for
+ * `<skdx-popover-content>`. Renders `<button type="button" role="button">`
+ * in shadow DOM with `aria-haspopup="dialog"`, `aria-expanded`,
+ * `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxPopoverTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-trigger': SkdxPopoverTrigger;
+    }
+}

package/dist/popover/PopoverTrigger.js

@@ -0,0 +1,17 @@
+var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(n,r,t,i)=>{for(var o=i>1?void 0:i?p(r,t):r,s=n.length-1,a;s>=0;s--)(a=n[s])&&(o=(i?a(r,t,o):a(o))||o);return i&&o&&l(r,t,o),o};import{css as c,html as h,LitElement as v,nothing as u}from"lit";import{customElement as m}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as k,resetNativeControl as f}from"../internal/styles.js";var e=class extends v{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open)}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-popover"),this.root?.addEventListener("skdx-popover-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-popover-internal-update",this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}render(){let t=this.root;return t?h`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${t.open}
+        aria-controls=${t.contentId}
+        data-state=${t.open?"open":"closed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `:u}};e.shadowRootOptions=k,e.styles=[f,c`
+      :host {
+        display: inline-block;
+      }
+    `,b],e=d([m("skdx-popover-trigger","popover","trigger")],e);export{e as SkdxPopoverTrigger};

package/dist/popover/index.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var n=(r,o)=>{for(var p in o)x(r,p,{get:o[p],enumerable:!0})},C=(r,o,p,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of g(o))!l.call(r,e)&&e!==p&&x(r,e,{get:()=>o[e],enumerable:!(t=S(o,e))||t.enumerable});return r};var a=r=>C(x({},"__esModule",{value:!0}),r);var i={};n(i,{SkdxPopover:()=>P.SkdxPopover,SkdxPopoverArrow:()=>m.SkdxPopoverArrow,SkdxPopoverClose:()=>v.SkdxPopoverClose,SkdxPopoverContent:()=>k.SkdxPopoverContent,SkdxPopoverPortal:()=>f.SkdxPopoverPortal,SkdxPopoverTrigger:()=>d.SkdxPopoverTrigger});module.exports=a(i);var P=require("./Popover.cjs"),d=require("./PopoverTrigger.cjs"),f=require("./PopoverPortal.cjs"),k=require("./PopoverContent.cjs"),m=require("./PopoverArrow.cjs"),v=require("./PopoverClose.cjs");0&&(module.exports={SkdxPopover,SkdxPopoverArrow,SkdxPopoverClose,SkdxPopoverContent,SkdxPopoverPortal,SkdxPopoverTrigger});

package/dist/popover/index.d.cts

@@ -0,0 +1,6 @@
+export { SkdxPopover } from './Popover.cjs';
+export { SkdxPopoverTrigger } from './PopoverTrigger.cjs';
+export { SkdxPopoverPortal } from './PopoverPortal.cjs';
+export { SkdxPopoverContent } from './PopoverContent.cjs';
+export { SkdxPopoverArrow } from './PopoverArrow.cjs';
+export { SkdxPopoverClose } from './PopoverClose.cjs';

package/dist/popover/index.d.ts

@@ -0,0 +1,6 @@
+export { SkdxPopover } from './Popover.js';
+export { SkdxPopoverTrigger } from './PopoverTrigger.js';
+export { SkdxPopoverPortal } from './PopoverPortal.js';
+export { SkdxPopoverContent } from './PopoverContent.js';
+export { SkdxPopoverArrow } from './PopoverArrow.js';
+export { SkdxPopoverClose } from './PopoverClose.js';

package/dist/popover/index.js

@@ -0,0 +1 @@
+import{SkdxPopover as e}from"./Popover.js";import{SkdxPopoverTrigger as x}from"./PopoverTrigger.js";import{SkdxPopoverPortal as P}from"./PopoverPortal.js";import{SkdxPopoverContent as f}from"./PopoverContent.js";import{SkdxPopoverArrow as m}from"./PopoverArrow.js";import{SkdxPopoverClose as S}from"./PopoverClose.js";export{e as SkdxPopover,m as SkdxPopoverArrow,S as SkdxPopoverClose,f as SkdxPopoverContent,P as SkdxPopoverPortal,x as SkdxPopoverTrigger};

package/dist/progress/Progress.cjs

@@ -0,0 +1,5 @@
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var A=(a,t)=>{for(var e in t)n(a,e,{get:t[e],enumerable:!0})},f=(a,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of c(t))!d.call(a,r)&&r!==e&&n(a,r,{get:()=>t[r],enumerable:!(l=h(t,r))||l.enumerable});return a};var g=a=>f(n({},"__esModule",{value:!0}),a),s=(a,t,e,l)=>{for(var r=l>1?void 0:l?h(t,e):t,o=a.length-1,b;o>=0;o--)(b=a[o])&&(r=(l?b(t,e,r):b(r))||r);return l&&r&&n(t,e,r),r};var y={};A(y,{SkdxProgress:()=>i,getState:()=>v});module.exports=g(y);var u=require("lit"),m=require("lit/decorators.js"),p=require("../internal/define.cjs");function v(a,t){return a==null?"indeterminate":a>=t?"complete":"loading"}function x(a,t){return`${Math.round(a/t*100)}%`}var i=class extends u.LitElement{constructor(){super(...arguments);this.value=null;this.max=100;this.getValueLabel=x}get clampedValue(){return this.value==null?null:Math.min(Math.max(this.value,0),this.max)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.syncHostAttributes()}updated(e){(e.has("value")||e.has("max")||e.has("getValueLabel"))&&this.syncHostAttributes()}syncHostAttributes(){let e=this.clampedValue;this.setAttribute("aria-valuemax",String(this.max)),e==null?(this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext"),this.removeAttribute("data-value")):(this.setAttribute("aria-valuenow",String(e)),this.setAttribute("aria-valuetext",this.getValueLabel(e,this.max)),this.setAttribute("data-value",String(e))),this.setAttribute("data-state",v(e,this.max)),this.setAttribute("data-max",String(this.max))}render(){return u.html`<slot></slot>`}};i.styles=u.css`
+    :host {
+      display: block;
+    }
+  `,s([(0,m.property)({type:Number,reflect:!0})],i.prototype,"value",2),s([(0,m.property)({type:Number,reflect:!0})],i.prototype,"max",2),s([(0,m.property)({attribute:!1})],i.prototype,"getValueLabel",2),i=s([(0,p.customElement)("skdx-progress","progress","root")],i);0&&(module.exports={SkdxProgress,getState});

package/dist/progress/Progress.d.cts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/** @internal Maps a progress `value`/`max` to the `data-state` string. */
+export declare function getState(value: number | null, max: number): 'indeterminate' | 'loading' | 'complete';
+/**
+ * `<skdx-progress>` — the Web Components implementation of the shared
+ * Progress contract (see `@skdx/shared`'s `progressContract`). Clamps
+ * `value` between `0` and `max`, renders `role="progressbar"` with the
+ * matching `aria-value*` attributes on this host element, and exposes
+ * `data-state` (`indeterminate`/`loading`/`complete`), `data-value`, and
+ * `data-max` for styling. A descendant `<skdx-progress-indicator>` mirrors
+ * this state (found via `closest('skdx-progress')`, re-synced on every
+ * `value`/`max` attribute change via `MutationObserver` — the same pattern
+ * `<skdx-dialog-content>` uses to track `<skdx-dialog>`).
+ *
+ * @example
+ * ```html
+ * <skdx-progress value="66">
+ *   <skdx-progress-indicator></skdx-progress-indicator>
+ * </skdx-progress>
+ * ```
+ */
+export declare class SkdxProgress extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current value. `null` renders an indeterminate progress bar. */
+    value: number | null;
+    /** Maximum value that `value` is measured against. */
+    max: number;
+    /** Formats `aria-valuetext`. Defaults to a rounded percentage, e.g. `"66%"`. */
+    getValueLabel: (value: number, max: number) => string;
+    private get clampedValue();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostAttributes;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-progress': SkdxProgress;
+    }
+}

package/dist/progress/Progress.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/** @internal Maps a progress `value`/`max` to the `data-state` string. */
+export declare function getState(value: number | null, max: number): 'indeterminate' | 'loading' | 'complete';
+/**
+ * `<skdx-progress>` — the Web Components implementation of the shared
+ * Progress contract (see `@skdx/shared`'s `progressContract`). Clamps
+ * `value` between `0` and `max`, renders `role="progressbar"` with the
+ * matching `aria-value*` attributes on this host element, and exposes
+ * `data-state` (`indeterminate`/`loading`/`complete`), `data-value`, and
+ * `data-max` for styling. A descendant `<skdx-progress-indicator>` mirrors
+ * this state (found via `closest('skdx-progress')`, re-synced on every
+ * `value`/`max` attribute change via `MutationObserver` — the same pattern
+ * `<skdx-dialog-content>` uses to track `<skdx-dialog>`).
+ *
+ * @example
+ * ```html
+ * <skdx-progress value="66">
+ *   <skdx-progress-indicator></skdx-progress-indicator>
+ * </skdx-progress>
+ * ```
+ */
+export declare class SkdxProgress extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current value. `null` renders an indeterminate progress bar. */
+    value: number | null;
+    /** Maximum value that `value` is measured against. */
+    max: number;
+    /** Formats `aria-valuetext`. Defaults to a rounded percentage, e.g. `"66%"`. */
+    getValueLabel: (value: number, max: number) => string;
+    private get clampedValue();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostAttributes;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-progress': SkdxProgress;
+    }
+}

package/dist/progress/Progress.js

@@ -0,0 +1,5 @@
+var o=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var l=(a,e,t,u)=>{for(var i=u>1?void 0:u?b(e,t):e,s=a.length-1,n;s>=0;s--)(n=a[s])&&(i=(u?n(e,t,i):n(i))||i);return u&&i&&o(e,t,i),i};import{css as h,html as p,LitElement as v}from"lit";import{property as m}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";function d(a,e){return a==null?"indeterminate":a>=e?"complete":"loading"}function A(a,e){return`${Math.round(a/e*100)}%`}var r=class extends v{constructor(){super(...arguments);this.value=null;this.max=100;this.getValueLabel=A}get clampedValue(){return this.value==null?null:Math.min(Math.max(this.value,0),this.max)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.syncHostAttributes()}updated(t){(t.has("value")||t.has("max")||t.has("getValueLabel"))&&this.syncHostAttributes()}syncHostAttributes(){let t=this.clampedValue;this.setAttribute("aria-valuemax",String(this.max)),t==null?(this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext"),this.removeAttribute("data-value")):(this.setAttribute("aria-valuenow",String(t)),this.setAttribute("aria-valuetext",this.getValueLabel(t,this.max)),this.setAttribute("data-value",String(t))),this.setAttribute("data-state",d(t,this.max)),this.setAttribute("data-max",String(this.max))}render(){return p`<slot></slot>`}};r.styles=h`
+    :host {
+      display: block;
+    }
+  `,l([m({type:Number,reflect:!0})],r.prototype,"value",2),l([m({type:Number,reflect:!0})],r.prototype,"max",2),l([m({attribute:!1})],r.prototype,"getValueLabel",2),r=l([c("skdx-progress","progress","root")],r);export{r as SkdxProgress,d as getState};

package/dist/progress/ProgressCircle.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var r in t)a(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of k(t))!x.call(e,s)&&s!==r&&a(e,s,{get:()=>t[s],enumerable:!(i=m(t,s))||i.enumerable});return e};var P=e=>M(a({},"__esModule",{value:!0}),e),l=(e,t,r,i)=>{for(var s=i>1?void 0:i?m(t,r):t,u=e.length-1,d;u>=0;u--)(d=e[u])&&(s=(i?d(t,r,s):d(s))||s);return i&&s&&a(t,r,s),s};var S={};f(S,{SkdxProgressCircle:()=>o,applyCircleVars:()=>v,applyProgressDataAttributes:()=>g,clampProgressValue:()=>y});module.exports=P(S);var n=require("lit"),p=require("lit/decorators.js"),h=require("../internal/define.cjs"),b=require("./Progress.cjs");var c=e=>Math.round(e*1e4)/1e4;function y(e){return e.value==null?null:Math.min(Math.max(e.value,0),e.max)}function g(e,t,r){e.setAttribute("data-state",(0,b.getState)(t,r)),e.setAttribute("data-max",String(r)),t==null?e.removeAttribute("data-value"):e.setAttribute("data-value",String(t))}function v(e,t,r,i){e.style.setProperty("--skdx-progress-circle-circumference",String(c(t))),e.style.setProperty("--skdx-progress-dasharray",String(c(t))),r==null?e.style.removeProperty("--skdx-progress-circle-offset"):e.style.setProperty("--skdx-progress-circle-offset",String(c(t*(1-r/i))))}var o=class extends n.LitElement{constructor(){super(...arguments);this.size=48;this.thickness=4;this.root=null;this.observer=new MutationObserver(()=>this.sync())}get radius(){return Math.max((this.size-this.thickness)/2,0)}get circumference(){return 2*Math.PI*this.radius}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-circle> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","max"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(r){(r.has("size")||r.has("thickness"))&&this.sync()}sync(){let r=this.root;if(!r)return;let i=y(r);g(this,i,r.max),this.style.setProperty("--skdx-progress-circle-size",String(this.size)),this.style.setProperty("--skdx-progress-circle-thickness",String(this.thickness)),this.style.setProperty("--skdx-progress-circle-radius",String(c(this.radius))),v(this,this.circumference,i,r.max)}render(){return n.html`<slot></slot>`}};o.styles=n.css`
+    :host {
+      display: block;
+    }
+  `,l([(0,p.property)({type:Number,reflect:!0})],o.prototype,"size",2),l([(0,p.property)({type:Number,reflect:!0})],o.prototype,"thickness",2),o=l([(0,h.customElement)("skdx-progress-circle","progress","circle")],o);0&&(module.exports={SkdxProgressCircle,applyCircleVars,applyProgressDataAttributes,clampProgressValue});