@skdx/web-components 0.26.0

package/dist/scroll-area/ScrollAreaScrollbar.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(n,l,t,e)=>{for(var r=e>1?void 0:e?h(l,t):l,o=n.length-1,a;o>=0;o--)(a=n[o])&&(r=(e?a(l,t,r):a(r))||r);return e&&r&&d(l,t,r),r};import{css as p,html as v,LitElement as u}from"lit";import{property as c}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";var i=class extends u{constructor(){super(...arguments);this.orientation="vertical";this.forceMount=!1;this.rootEl=null;this.onUpdate=()=>this.sync();this.handlePointerDown=t=>{if(t.target!==this)return;let e=this.rootEl?.querySelector("skdx-scroll-area-viewport")?.viewportEl,r=this.querySelector("skdx-scroll-area-thumb");if(!e||!r)return;let o=r.getBoundingClientRect();this.orientation==="vertical"?t.clientY<o.top?e.scrollTop-=e.clientHeight:t.clientY>o.bottom&&(e.scrollTop+=e.clientHeight):t.clientX<o.left?e.scrollLeft-=e.clientWidth:t.clientX>o.right&&(e.scrollLeft+=e.clientWidth)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-scrollbar> must be used inside <skdx-scroll-area>.");this.rootEl.addEventListener("skdx-scroll-area-update",this.onUpdate),this.addEventListener("pointerdown",this.handlePointerDown),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-scroll-area-update",this.onUpdate),this.removeEventListener("pointerdown",this.handlePointerDown),super.disconnectedCallback()}updated(){this.sync()}sync(){let t=this.rootEl;if(!t)return;let e=this.orientation==="vertical"?t.scrollbarYEnabled:t.scrollbarXEnabled,r=t.type==="hover"?t.hovering:t.type==="scroll"?t.hovering||t.scrolling:!0;this.setAttribute("data-orientation",this.orientation),this.setAttribute("data-state",r?"visible":"hidden"),this.hidden=!e}render(){return v`<div part="scrollbar"><slot></slot></div>`}};i.styles=p`
+    :host {
+      display: block;
+    }
+  `,s([c({type:String,reflect:!0})],i.prototype,"orientation",2),s([c({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=s([m("skdx-scroll-area-scrollbar","scroll-area","scrollbar")],i);export{i as SkdxScrollAreaScrollbar};

package/dist/scroll-area/ScrollAreaThumb.cjs

@@ -0,0 +1,7 @@
+"use strict";var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var z=(o,i)=>{for(var t in i)u(o,t,{get:i[t],enumerable:!0})},k=(o,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of g(i))!M.call(o,r)&&r!==t&&u(o,r,{get:()=>i[r],enumerable:!(e=b(i,r))||e.enumerable});return o};var x=o=>k(u({},"__esModule",{value:!0}),o),E=(o,i,t,e)=>{for(var r=e>1?void 0:e?b(i,t):i,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(e?l(i,t,r):l(r))||r);return e&&r&&u(i,t,r),r};var y={};z(y,{SkdxScrollAreaThumb:()=>n});module.exports=x(y);var a=require("lit"),f=require("../internal/define.cjs");var w=.1,n=class extends a.LitElement{constructor(){super(...arguments);this.scrollbarEl=null;this.viewportEl=null;this.dragState=null;this.updateMetrics=()=>{let t=this.viewportEl;if(!t)return;let[e,r,s]=this.orientation==="vertical"?[t.clientHeight,t.scrollHeight,t.scrollTop]:[t.clientWidth,t.scrollWidth,t.scrollLeft],l=r>0?e/r:1,c=Math.min(Math.max(l,w),1),h=r-e,d=h>0?s/h:0,p=`${c*100}%`,v=`${d*(100-c*100)}%`;this.orientation==="vertical"?Object.assign(this.style,{top:v,height:p,left:"0",right:"0"}):Object.assign(this.style,{left:v,width:p,top:"0",bottom:"0"})};this.handlePointerDown=t=>{let e=this.viewportEl;e&&(this.setPointerCapture?.(t.pointerId),this.dragState={startPointer:this.orientation==="vertical"?t.clientY:t.clientX,startScroll:this.orientation==="vertical"?e.scrollTop:e.scrollLeft})};this.handlePointerMove=t=>{let e=this.viewportEl,r=this.parentElement,s=this.dragState;if(!e||!r||!s)return;let l=this.orientation==="vertical"?r.clientHeight:r.clientWidth,c=this.orientation==="vertical"?e.clientHeight:e.clientWidth,h=this.orientation==="vertical"?e.scrollHeight:e.scrollWidth,d=h-c;if(d<=0)return;let p=Math.min(Math.max(c/h,w),1),v=l*p,S=Math.max(l-v,1),P=((this.orientation==="vertical"?t.clientY:t.clientX)-s.startPointer)/S*d,m=Math.min(Math.max(s.startScroll+P,0),d);this.orientation==="vertical"?e.scrollTop=m:e.scrollLeft=m};this.handlePointerUp=t=>{this.hasPointerCapture?.(t.pointerId)&&this.releasePointerCapture(t.pointerId),this.dragState=null}}connectedCallback(){super.connectedCallback(),this.scrollbarEl=this.closest("skdx-scroll-area-scrollbar");let t=this.closest("skdx-scroll-area");if(!this.scrollbarEl||!t)throw new Error("<skdx-scroll-area-thumb> must be used inside <skdx-scroll-area-scrollbar>.");this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.attachViewport(t)}async attachViewport(t){let e=t.querySelector("skdx-scroll-area-viewport");if(await e?.updateComplete,!!this.isConnected&&(this.viewportEl=e?.viewportEl??null,this.updateMetrics(),!!this.viewportEl&&(this.viewportEl.addEventListener("scroll",this.updateMetrics),typeof ResizeObserver<"u"))){this.resizeObserver=new ResizeObserver(this.updateMetrics),this.resizeObserver.observe(this.viewportEl);let r=this.viewportEl.firstElementChild;r&&this.resizeObserver.observe(r)}}disconnectedCallback(){this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.viewportEl?.removeEventListener("scroll",this.updateMetrics),this.resizeObserver?.disconnect(),super.disconnectedCallback()}get orientation(){return this.scrollbarEl?.orientation??"vertical"}firstUpdated(){this.setAttribute("data-orientation",this.orientation)}render(){return a.html`<div part="thumb" style="width: 100%; height: 100%;"><slot></slot></div>`}};n.styles=a.css`
+    :host {
+      position: absolute;
+      touch-action: none;
+      display: block;
+    }
+  `,n=E([(0,f.customElement)("skdx-scroll-area-thumb","scroll-area","thumb")],n);0&&(module.exports={SkdxScrollAreaThumb});

package/dist/scroll-area/ScrollAreaThumb.d.cts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-scroll-area-thumb>` — the draggable handle inside a
+ * `<skdx-scroll-area-scrollbar>`, sized and positioned as a percentage of its
+ * track to match the viewport's visible fraction and scroll offset. Dragging
+ * it (pointer-capture-based) scrolls the viewport proportionally along that
+ * axis. Must be used inside a `<skdx-scroll-area-scrollbar>`.
+ *
+ * @csspart thumb - The `<div>` inside the shadow root.
+ */
+export declare class SkdxScrollAreaThumb extends LitElement {
+    static styles: import("lit").CSSResult;
+    private scrollbarEl;
+    private viewportEl;
+    private resizeObserver?;
+    private dragState;
+    connectedCallback(): void;
+    /**
+     * Resolves the viewport's scroller and starts tracking it.
+     *
+     * **Why this is async.** `SkdxScrollAreaViewport.viewportEl` is a
+     * `querySelector` into that element's *shadow root*, and Lit renders a shadow
+     * root on a microtask after `connectedCallback`, not during it. A sibling's
+     * `connectedCallback` therefore always runs too early: the lookup returned
+     * `null`, this method's `if (this.viewportEl)` guard skipped the `scroll`
+     * listener and the `ResizeObserver`, and `updateMetrics()` returned at its own
+     * null check before assigning anything. The thumb ended up with no inline
+     * `top`/`height`/`left`/`right` at all — and an absolutely-positioned element
+     * with neither `left`/`right` nor a width shrink-wraps its empty content, so
+     * it measured 0px wide and never appeared. The track, sized by the skin and
+     * shown by `setScrollbarEnabled('y', …)`, was visible the whole time, which
+     * is why this read as "no thumb" rather than "no scrollbar".
+     *
+     * Awaiting the viewport's own `updateComplete` is what makes the ordering
+     * explicit rather than relying on the two elements' updates happening to flush
+     * in document order.
+     */
+    private attachViewport;
+    disconnectedCallback(): void;
+    private get orientation();
+    private readonly updateMetrics;
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    private readonly handlePointerUp;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-scroll-area-thumb': SkdxScrollAreaThumb;
+    }
+}

package/dist/scroll-area/ScrollAreaThumb.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-scroll-area-thumb>` — the draggable handle inside a
+ * `<skdx-scroll-area-scrollbar>`, sized and positioned as a percentage of its
+ * track to match the viewport's visible fraction and scroll offset. Dragging
+ * it (pointer-capture-based) scrolls the viewport proportionally along that
+ * axis. Must be used inside a `<skdx-scroll-area-scrollbar>`.
+ *
+ * @csspart thumb - The `<div>` inside the shadow root.
+ */
+export declare class SkdxScrollAreaThumb extends LitElement {
+    static styles: import("lit").CSSResult;
+    private scrollbarEl;
+    private viewportEl;
+    private resizeObserver?;
+    private dragState;
+    connectedCallback(): void;
+    /**
+     * Resolves the viewport's scroller and starts tracking it.
+     *
+     * **Why this is async.** `SkdxScrollAreaViewport.viewportEl` is a
+     * `querySelector` into that element's *shadow root*, and Lit renders a shadow
+     * root on a microtask after `connectedCallback`, not during it. A sibling's
+     * `connectedCallback` therefore always runs too early: the lookup returned
+     * `null`, this method's `if (this.viewportEl)` guard skipped the `scroll`
+     * listener and the `ResizeObserver`, and `updateMetrics()` returned at its own
+     * null check before assigning anything. The thumb ended up with no inline
+     * `top`/`height`/`left`/`right` at all — and an absolutely-positioned element
+     * with neither `left`/`right` nor a width shrink-wraps its empty content, so
+     * it measured 0px wide and never appeared. The track, sized by the skin and
+     * shown by `setScrollbarEnabled('y', …)`, was visible the whole time, which
+     * is why this read as "no thumb" rather than "no scrollbar".
+     *
+     * Awaiting the viewport's own `updateComplete` is what makes the ordering
+     * explicit rather than relying on the two elements' updates happening to flush
+     * in document order.
+     */
+    private attachViewport;
+    disconnectedCallback(): void;
+    private get orientation();
+    private readonly updateMetrics;
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    private readonly handlePointerUp;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-scroll-area-thumb': SkdxScrollAreaThumb;
+    }
+}

package/dist/scroll-area/ScrollAreaThumb.js

@@ -0,0 +1,7 @@
+var w=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=(p,s,t,e)=>{for(var r=e>1?void 0:e?f(s,t):s,i=p.length-1,o;i>=0;i--)(o=p[i])&&(r=(e?o(s,t,r):o(r))||r);return e&&r&&w(s,t,r),r};import{css as S,html as P,LitElement as g}from"lit";import{customElement as M}from"../internal/define.js";var m=.1,c=class extends g{constructor(){super(...arguments);this.scrollbarEl=null;this.viewportEl=null;this.dragState=null;this.updateMetrics=()=>{let t=this.viewportEl;if(!t)return;let[e,r,i]=this.orientation==="vertical"?[t.clientHeight,t.scrollHeight,t.scrollTop]:[t.clientWidth,t.scrollWidth,t.scrollLeft],o=r>0?e/r:1,l=Math.min(Math.max(o,m),1),n=r-e,a=n>0?i/n:0,h=`${l*100}%`,d=`${a*(100-l*100)}%`;this.orientation==="vertical"?Object.assign(this.style,{top:d,height:h,left:"0",right:"0"}):Object.assign(this.style,{left:d,width:h,top:"0",bottom:"0"})};this.handlePointerDown=t=>{let e=this.viewportEl;e&&(this.setPointerCapture?.(t.pointerId),this.dragState={startPointer:this.orientation==="vertical"?t.clientY:t.clientX,startScroll:this.orientation==="vertical"?e.scrollTop:e.scrollLeft})};this.handlePointerMove=t=>{let e=this.viewportEl,r=this.parentElement,i=this.dragState;if(!e||!r||!i)return;let o=this.orientation==="vertical"?r.clientHeight:r.clientWidth,l=this.orientation==="vertical"?e.clientHeight:e.clientWidth,n=this.orientation==="vertical"?e.scrollHeight:e.scrollWidth,a=n-l;if(a<=0)return;let h=Math.min(Math.max(l/n,m),1),d=o*h,b=Math.max(o-d,1),E=((this.orientation==="vertical"?t.clientY:t.clientX)-i.startPointer)/b*a,v=Math.min(Math.max(i.startScroll+E,0),a);this.orientation==="vertical"?e.scrollTop=v:e.scrollLeft=v};this.handlePointerUp=t=>{this.hasPointerCapture?.(t.pointerId)&&this.releasePointerCapture(t.pointerId),this.dragState=null}}connectedCallback(){super.connectedCallback(),this.scrollbarEl=this.closest("skdx-scroll-area-scrollbar");let t=this.closest("skdx-scroll-area");if(!this.scrollbarEl||!t)throw new Error("<skdx-scroll-area-thumb> must be used inside <skdx-scroll-area-scrollbar>.");this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.attachViewport(t)}async attachViewport(t){let e=t.querySelector("skdx-scroll-area-viewport");if(await e?.updateComplete,!!this.isConnected&&(this.viewportEl=e?.viewportEl??null,this.updateMetrics(),!!this.viewportEl&&(this.viewportEl.addEventListener("scroll",this.updateMetrics),typeof ResizeObserver<"u"))){this.resizeObserver=new ResizeObserver(this.updateMetrics),this.resizeObserver.observe(this.viewportEl);let r=this.viewportEl.firstElementChild;r&&this.resizeObserver.observe(r)}}disconnectedCallback(){this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.viewportEl?.removeEventListener("scroll",this.updateMetrics),this.resizeObserver?.disconnect(),super.disconnectedCallback()}get orientation(){return this.scrollbarEl?.orientation??"vertical"}firstUpdated(){this.setAttribute("data-orientation",this.orientation)}render(){return P`<div part="thumb" style="width: 100%; height: 100%;"><slot></slot></div>`}};c.styles=S`
+    :host {
+      position: absolute;
+      touch-action: none;
+      display: block;
+    }
+  `,c=u([M("skdx-scroll-area-thumb","scroll-area","thumb")],c);export{c as SkdxScrollAreaThumb};

package/dist/scroll-area/ScrollAreaViewport.cjs

@@ -0,0 +1,19 @@
+"use strict";var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var w=(o,r)=>{for(var e in r)c(o,e,{get:r[e],enumerable:!0})},f=(o,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of p(r))!b.call(o,t)&&t!==e&&c(o,t,{get:()=>r[t],enumerable:!(i=a(r,t))||i.enumerable});return o};var u=o=>f(c({},"__esModule",{value:!0}),o),v=(o,r,e,i)=>{for(var t=i>1?void 0:i?a(r,e):r,d=o.length-1,n;d>=0;d--)(n=o[d])&&(t=(i?n(r,e,t):n(t))||t);return i&&t&&c(r,e,t),t};var E={};w(E,{SkdxScrollAreaViewport:()=>s});module.exports=u(E);var l=require("lit"),h=require("../internal/define.cjs");var s=class extends l.LitElement{constructor(){super(...arguments);this.rootEl=null;this.handleScroll=()=>{this.checkOverflow(),this.rootEl?.notifyScrolled()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-viewport> must be used inside <skdx-scroll-area>.")}disconnectedCallback(){this.resizeObserver?.disconnect(),super.disconnectedCallback()}get viewportEl(){return this.shadowRoot?.querySelector(".viewport")}firstUpdated(){this.checkOverflow();let e=this.viewportEl,i=this.shadowRoot?.querySelector(".content");!e||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.checkOverflow()),this.resizeObserver.observe(e),i&&this.resizeObserver.observe(i))}checkOverflow(){let e=this.viewportEl;!e||!this.rootEl||(this.rootEl.setScrollbarEnabled("x",e.scrollWidth>e.clientWidth),this.rootEl.setScrollbarEnabled("y",e.scrollHeight>e.clientHeight))}render(){return l.html`
+      <div class="viewport" part="viewport" tabindex="0" @scroll=${this.handleScroll}>
+        <div class="content"><slot></slot></div>
+      </div>
+    `}};s.styles=l.css`
+    :host {
+      display: block;
+      overflow: hidden;
+    }
+    .viewport {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+    .content {
+      min-width: 100%;
+      display: table;
+    }
+  `,s=v([(0,h.customElement)("skdx-scroll-area-viewport","scroll-area","viewport")],s);0&&(module.exports={SkdxScrollAreaViewport});

package/dist/scroll-area/ScrollAreaViewport.d.cts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-scroll-area-viewport>` — the natively-scrollable region (shadow-DOM
+ * `overflow: auto` div, `part="viewport"`) that renders slotted content. A
+ * `ResizeObserver` on the viewport and its inner content wrapper keeps the
+ * ancestor `<skdx-scroll-area>`'s per-axis overflow-enabled flags current, and
+ * scroll events mark it "scrolling" for the root's `scroll-hide-delay`
+ * (600ms by default) (used by `type="scroll"`
+ * visibility). Must be used inside `<skdx-scroll-area>`.
+ *
+ * @csspart viewport - The scrollable `<div>` inside the shadow root.
+ */
+export declare class SkdxScrollAreaViewport extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The actual scrollable shadow-DOM element. @internal */
+    get viewportEl(): HTMLElement | null | undefined;
+    protected firstUpdated(): void;
+    private checkOverflow;
+    private readonly handleScroll;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-scroll-area-viewport': SkdxScrollAreaViewport;
+    }
+}

package/dist/scroll-area/ScrollAreaViewport.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-scroll-area-viewport>` — the natively-scrollable region (shadow-DOM
+ * `overflow: auto` div, `part="viewport"`) that renders slotted content. A
+ * `ResizeObserver` on the viewport and its inner content wrapper keeps the
+ * ancestor `<skdx-scroll-area>`'s per-axis overflow-enabled flags current, and
+ * scroll events mark it "scrolling" for the root's `scroll-hide-delay`
+ * (600ms by default) (used by `type="scroll"`
+ * visibility). Must be used inside `<skdx-scroll-area>`.
+ *
+ * @csspart viewport - The scrollable `<div>` inside the shadow root.
+ */
+export declare class SkdxScrollAreaViewport extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The actual scrollable shadow-DOM element. @internal */
+    get viewportEl(): HTMLElement | null | undefined;
+    protected firstUpdated(): void;
+    private checkOverflow;
+    private readonly handleScroll;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-scroll-area-viewport': SkdxScrollAreaViewport;
+    }
+}

package/dist/scroll-area/ScrollAreaViewport.js

@@ -0,0 +1,19 @@
+var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=(s,o,e,r)=>{for(var t=r>1?void 0:r?a(o,e):o,l=s.length-1,c;l>=0;l--)(c=s[l])&&(t=(r?c(o,e,t):c(t))||t);return r&&t&&n(o,e,t),t};import{css as v,html as h,LitElement as p}from"lit";import{customElement as b}from"../internal/define.js";var i=class extends p{constructor(){super(...arguments);this.rootEl=null;this.handleScroll=()=>{this.checkOverflow(),this.rootEl?.notifyScrolled()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-viewport> must be used inside <skdx-scroll-area>.")}disconnectedCallback(){this.resizeObserver?.disconnect(),super.disconnectedCallback()}get viewportEl(){return this.shadowRoot?.querySelector(".viewport")}firstUpdated(){this.checkOverflow();let e=this.viewportEl,r=this.shadowRoot?.querySelector(".content");!e||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.checkOverflow()),this.resizeObserver.observe(e),r&&this.resizeObserver.observe(r))}checkOverflow(){let e=this.viewportEl;!e||!this.rootEl||(this.rootEl.setScrollbarEnabled("x",e.scrollWidth>e.clientWidth),this.rootEl.setScrollbarEnabled("y",e.scrollHeight>e.clientHeight))}render(){return h`
+      <div class="viewport" part="viewport" tabindex="0" @scroll=${this.handleScroll}>
+        <div class="content"><slot></slot></div>
+      </div>
+    `}};i.styles=v`
+    :host {
+      display: block;
+      overflow: hidden;
+    }
+    .viewport {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+    .content {
+      min-width: 100%;
+      display: table;
+    }
+  `,i=d([b("skdx-scroll-area-viewport","scroll-area","viewport")],i);export{i as SkdxScrollAreaViewport};

package/dist/scroll-area/index.cjs

@@ -0,0 +1 @@
+"use strict";var S=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var A=(o,r)=>{for(var l in r)S(o,l,{get:r[l],enumerable:!0})},b=(o,r,l,x)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of f(r))!k.call(o,e)&&e!==l&&S(o,e,{get:()=>r[e],enumerable:!(x=d(r,e))||x.enumerable});return o};var h=o=>b(S({},"__esModule",{value:!0}),o);var i={};A(i,{SkdxScrollArea:()=>a.SkdxScrollArea,SkdxScrollAreaCorner:()=>t.SkdxScrollAreaCorner,SkdxScrollAreaScrollbar:()=>m.SkdxScrollAreaScrollbar,SkdxScrollAreaThumb:()=>p.SkdxScrollAreaThumb,SkdxScrollAreaViewport:()=>c.SkdxScrollAreaViewport});module.exports=h(i);var a=require("./ScrollArea.cjs"),c=require("./ScrollAreaViewport.cjs"),m=require("./ScrollAreaScrollbar.cjs"),p=require("./ScrollAreaThumb.cjs"),t=require("./ScrollAreaCorner.cjs");0&&(module.exports={SkdxScrollArea,SkdxScrollAreaCorner,SkdxScrollAreaScrollbar,SkdxScrollAreaThumb,SkdxScrollAreaViewport});

package/dist/scroll-area/index.d.cts

@@ -0,0 +1,5 @@
+export { SkdxScrollArea } from './ScrollArea.cjs';
+export { SkdxScrollAreaViewport } from './ScrollAreaViewport.cjs';
+export { SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.cjs';
+export { SkdxScrollAreaThumb } from './ScrollAreaThumb.cjs';
+export { SkdxScrollAreaCorner } from './ScrollAreaCorner.cjs';

package/dist/scroll-area/index.d.ts

@@ -0,0 +1,5 @@
+export { SkdxScrollArea } from './ScrollArea.js';
+export { SkdxScrollAreaViewport } from './ScrollAreaViewport.js';
+export { SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.js';
+export { SkdxScrollAreaThumb } from './ScrollAreaThumb.js';
+export { SkdxScrollAreaCorner } from './ScrollAreaCorner.js';

package/dist/scroll-area/index.js

@@ -0,0 +1 @@
+import{SkdxScrollArea as e}from"./ScrollArea.js";import{SkdxScrollAreaViewport as S}from"./ScrollAreaViewport.js";import{SkdxScrollAreaScrollbar as a}from"./ScrollAreaScrollbar.js";import{SkdxScrollAreaThumb as m}from"./ScrollAreaThumb.js";import{SkdxScrollAreaCorner as t}from"./ScrollAreaCorner.js";export{e as SkdxScrollArea,t as SkdxScrollAreaCorner,a as SkdxScrollAreaScrollbar,m as SkdxScrollAreaThumb,S as SkdxScrollAreaViewport};

package/dist/segmented-control/SegmentedControl.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var E=(n,i)=>{for(var e in i)h(n,e,{get:i[e],enumerable:!0})},_=(n,i,e,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of g(i))!A.call(n,t)&&t!==e&&h(n,t,{get:()=>i[t],enumerable:!(r=m(i,t))||r.enumerable});return n};var w=n=>_(h({},"__esModule",{value:!0}),n),a=(n,i,e,r)=>{for(var t=r>1?void 0:r?m(i,e):i,o=n.length-1,c;o>=0;o--)(c=n[o])&&(t=(r?c(i,e,t):c(t))||t);return r&&t&&h(i,e,t),t};var V={};E(V,{ITEM_SELECTOR:()=>f,SkdxSegmentedControl:()=>s});module.exports=w(V);var u=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),p=require("../internal/direction.cjs");var f="[data-skdx-segmented-control-item]",s=class extends u.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.disabled=!1;this._handleKeydown=e=>{if(this.disabled)return;let r=Array.from(this.querySelectorAll(f)).filter(b=>!b.hasAttribute("disabled")&&b.getAttribute("data-disabled")===null);if(r.length===0)return;let t=r.indexOf(e.target),o=(0,p.directionalKey)(e.key,this),c=this.orientation==="vertical"?"ArrowDown":"ArrowRight",y=this.orientation==="vertical"?"ArrowUp":"ArrowLeft",d;o===c?d=Math.min(r.length-1,t+1):o===y?d=Math.max(0,t-1):o==="Home"?d=0:o==="End"&&(d=r.length-1),d!==void 0&&(e.preventDefault(),r[d]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this.setAttribute("role","radiogroup"),this.addEventListener("keydown",this._handleKeydown),this._syncHostAttributes()}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(){this._syncHostAttributes(),this._refresh()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this.querySelector(`${f}:not([disabled])`)?.getAttribute("data-value")??null}setValue(e){this.disabled||e!==this.getSelectedValue()&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refresh())}_syncHostAttributes(){this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"))}_refresh(){for(let e of["skdx-segmented-control-item","skdx-segmented-control-indicator"])for(let r of this.querySelectorAll(e))r.refresh?.()}render(){return u.html`<slot></slot>`}};s.styles=u.css`
+    :host {
+      display: inline-block;
+    }
+  `,a([(0,l.property)({type:String})],s.prototype,"value",2),a([(0,l.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),a([(0,l.property)({type:String,reflect:!0})],s.prototype,"orientation",2),a([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),a([(0,l.state)()],s.prototype,"_uncontrolledValue",2),s=a([(0,v.customElement)("skdx-segmented-control","segmented-control","root")],s);0&&(module.exports={ITEM_SELECTOR,SkdxSegmentedControl});

package/dist/segmented-control/SegmentedControl.d.cts

@@ -0,0 +1,128 @@
+import { LitElement } from 'lit';
+/** @internal Marks a segment for the root's arrow-key navigation and for the indicator's measurement query. */
+export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
+/** @internal A part that can be told to re-sync itself from the root's current state. */
+export interface RefreshableSegmentedControlPart {
+    refresh(): void;
+}
+/** Layout axis of a segmented control. Unlike a roving-focus orientation there is no `'both'`: a strip has one axis. */
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/**
+ * `<skdx-segmented-control>` — the Web Components implementation of the shared
+ * SegmentedControl contract (see `@skdx/shared`'s `segmentedControlContract`).
+ * A strip of mutually exclusive segments with a movable indicator. Owns the
+ * selected value and hands it to descendant `<skdx-segmented-control-item>`s and
+ * `<skdx-segmented-control-indicator>`s, which look it up via
+ * `closest('skdx-segmented-control')` (the same root/descendant pattern as
+ * `<skdx-radio-group>`).
+ *
+ * It is a **radio group, not a toggle group**. The host is a
+ * `role="radiogroup"` with `aria-orientation`, every segment is a
+ * `role="radio"` with `aria-checked`, exactly one segment is a tab stop, and
+ * arrow keys *move focus and select in the same keystroke* — the WAI-ARIA radio
+ * pattern, where focus and selection are not separable. `<skdx-toggle-group
+ * type="single">` models pressed *buttons* (`aria-pressed`, selection decoupled
+ * from focus) and is the right choice when a segment is an action, e.g. a
+ * text-alignment strip. When the segments are mutually exclusive *choices* — a
+ * view switcher, a plan picker, a date-range selector — they are radios, and
+ * this is the component.
+ *
+ * Arrow keys **do not loop**: reaching the last segment and pressing again
+ * stays put. Because focus selects here, wrapping would silently re-select the
+ * segment at the other end for a user who pressed one time too many. Home/End
+ * jump to the ends.
+ *
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
+ * `internal/direction`'s `directionalKey`.
+ *
+ * The host must be named — `aria-label` or `aria-labelledby` — since a
+ * radiogroup announced without a name leaves the user hearing options and no
+ * question.
+ *
+ * @example
+ * ```html
+ * <skdx-segmented-control default-value="week" aria-label="Date range">
+ *   <skdx-segmented-control-indicator aria-hidden="true"></skdx-segmented-control-indicator>
+ *   <skdx-segmented-control-item value="day">Day</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="week">Week</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="month">Month</skdx-segmented-control-item>
+ * </skdx-segmented-control>
+ * ```
+ *
+ * @fires value-change - Fires with the new value (string) whenever the selected segment changes, controlled or not — including when an arrow key moves focus, since focus selects here. Re-selecting the current segment fires nothing.
+ */
+export declare class SkdxSegmentedControl extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected segment's value, for controlled usage. Pair with `value-change`.
+     * @default undefined — uncontrolled, so the element tracks its own selection
+     * internally, seeded from `default-value`.
+     */
+    value?: string;
+    /**
+     * Initially selected segment's value, for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment
+     * carries the tab stop and the indicator publishes no geometry.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
+     * axis arrow keys navigate along. `'vertical'` also makes the indicator
+     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
+     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
+     * only the x/width pair.
+     * @example
+     * ```html
+     * <skdx-segmented-control orientation="vertical" aria-label="View"></skdx-segmented-control>
+     * ```
+     */
+    orientation: SegmentedControlOrientation;
+    /**
+     * Disables every segment, blocking selection and taking the whole control out
+     * of the tab order.
+     * @default false — segments are selectable and the strip holds one tab stop.
+     * @example
+     * ```html
+     * <skdx-segmented-control disabled aria-label="View"></skdx-segmented-control>
+     * ```
+     */
+    disabled: boolean;
+    private _uncontrolledValue?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    getSelectedValue(): string | undefined;
+    /**
+     * The first non-disabled segment's value — the fallback tab stop while
+     * nothing is selected. A disabled first segment must not swallow the group's
+     * only entry point.
+     *
+     * A call the group's item elements make on their root to work out which one owns the roving tab stop, not consumer API. It stays `public` to the compiler because the items are instances of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getFirstEnabledValue(): string | null;
+    /**
+     * Selects `value`, updating internal state (when uncontrolled) and firing
+     * `value-change`. Re-selecting the current segment is a no-op: this is a
+     * radio group, not a toggle, so there is no "deselect" and no redundant
+     * event.
+     */
+    setValue(value: string): void;
+    private _syncHostAttributes;
+    /**
+     * Items first, indicator second: the indicator measures the segment carrying
+     * `data-state="checked"`, so the segments have to have written it before it
+     * looks. A shared broadcast event would fire in listener-registration order,
+     * which is DOM order — and the indicator is usually the *first* child.
+     */
+    private _refresh;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-segmented-control': SkdxSegmentedControl;
+    }
+}

package/dist/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,128 @@
+import { LitElement } from 'lit';
+/** @internal Marks a segment for the root's arrow-key navigation and for the indicator's measurement query. */
+export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
+/** @internal A part that can be told to re-sync itself from the root's current state. */
+export interface RefreshableSegmentedControlPart {
+    refresh(): void;
+}
+/** Layout axis of a segmented control. Unlike a roving-focus orientation there is no `'both'`: a strip has one axis. */
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/**
+ * `<skdx-segmented-control>` — the Web Components implementation of the shared
+ * SegmentedControl contract (see `@skdx/shared`'s `segmentedControlContract`).
+ * A strip of mutually exclusive segments with a movable indicator. Owns the
+ * selected value and hands it to descendant `<skdx-segmented-control-item>`s and
+ * `<skdx-segmented-control-indicator>`s, which look it up via
+ * `closest('skdx-segmented-control')` (the same root/descendant pattern as
+ * `<skdx-radio-group>`).
+ *
+ * It is a **radio group, not a toggle group**. The host is a
+ * `role="radiogroup"` with `aria-orientation`, every segment is a
+ * `role="radio"` with `aria-checked`, exactly one segment is a tab stop, and
+ * arrow keys *move focus and select in the same keystroke* — the WAI-ARIA radio
+ * pattern, where focus and selection are not separable. `<skdx-toggle-group
+ * type="single">` models pressed *buttons* (`aria-pressed`, selection decoupled
+ * from focus) and is the right choice when a segment is an action, e.g. a
+ * text-alignment strip. When the segments are mutually exclusive *choices* — a
+ * view switcher, a plan picker, a date-range selector — they are radios, and
+ * this is the component.
+ *
+ * Arrow keys **do not loop**: reaching the last segment and pressing again
+ * stays put. Because focus selects here, wrapping would silently re-select the
+ * segment at the other end for a user who pressed one time too many. Home/End
+ * jump to the ends.
+ *
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
+ * `internal/direction`'s `directionalKey`.
+ *
+ * The host must be named — `aria-label` or `aria-labelledby` — since a
+ * radiogroup announced without a name leaves the user hearing options and no
+ * question.
+ *
+ * @example
+ * ```html
+ * <skdx-segmented-control default-value="week" aria-label="Date range">
+ *   <skdx-segmented-control-indicator aria-hidden="true"></skdx-segmented-control-indicator>
+ *   <skdx-segmented-control-item value="day">Day</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="week">Week</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="month">Month</skdx-segmented-control-item>
+ * </skdx-segmented-control>
+ * ```
+ *
+ * @fires value-change - Fires with the new value (string) whenever the selected segment changes, controlled or not — including when an arrow key moves focus, since focus selects here. Re-selecting the current segment fires nothing.
+ */
+export declare class SkdxSegmentedControl extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected segment's value, for controlled usage. Pair with `value-change`.
+     * @default undefined — uncontrolled, so the element tracks its own selection
+     * internally, seeded from `default-value`.
+     */
+    value?: string;
+    /**
+     * Initially selected segment's value, for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment
+     * carries the tab stop and the indicator publishes no geometry.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
+     * axis arrow keys navigate along. `'vertical'` also makes the indicator
+     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
+     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
+     * only the x/width pair.
+     * @example
+     * ```html
+     * <skdx-segmented-control orientation="vertical" aria-label="View"></skdx-segmented-control>
+     * ```
+     */
+    orientation: SegmentedControlOrientation;
+    /**
+     * Disables every segment, blocking selection and taking the whole control out
+     * of the tab order.
+     * @default false — segments are selectable and the strip holds one tab stop.
+     * @example
+     * ```html
+     * <skdx-segmented-control disabled aria-label="View"></skdx-segmented-control>
+     * ```
+     */
+    disabled: boolean;
+    private _uncontrolledValue?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    getSelectedValue(): string | undefined;
+    /**
+     * The first non-disabled segment's value — the fallback tab stop while
+     * nothing is selected. A disabled first segment must not swallow the group's
+     * only entry point.
+     *
+     * A call the group's item elements make on their root to work out which one owns the roving tab stop, not consumer API. It stays `public` to the compiler because the items are instances of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getFirstEnabledValue(): string | null;
+    /**
+     * Selects `value`, updating internal state (when uncontrolled) and firing
+     * `value-change`. Re-selecting the current segment is a no-op: this is a
+     * radio group, not a toggle, so there is no "deselect" and no redundant
+     * event.
+     */
+    setValue(value: string): void;
+    private _syncHostAttributes;
+    /**
+     * Items first, indicator second: the indicator measures the segment carrying
+     * `data-state="checked"`, so the segments have to have written it before it
+     * looks. A shared broadcast event would fire in listener-registration order,
+     * which is DOM order — and the indicator is usually the *first* child.
+     */
+    private _refresh;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-segmented-control': SkdxSegmentedControl;
+    }
+}

package/dist/segmented-control/SegmentedControl.js

@@ -0,0 +1,5 @@
+var b=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(u,a,e,t)=>{for(var i=t>1?void 0:t?m(a,e):a,n=u.length-1,l;n>=0;n--)(l=u[n])&&(i=(t?l(a,e,i):l(i))||i);return t&&i&&b(a,e,i),i};import{css as v,html as p,LitElement as y}from"lit";import{property as d,state as g}from"lit/decorators.js";import{customElement as A}from"../internal/define.js";import{directionalKey as E}from"../internal/direction.js";var h="[data-skdx-segmented-control-item]",r=class extends y{constructor(){super(...arguments);this.orientation="horizontal";this.disabled=!1;this._handleKeydown=e=>{if(this.disabled)return;let t=Array.from(this.querySelectorAll(h)).filter(c=>!c.hasAttribute("disabled")&&c.getAttribute("data-disabled")===null);if(t.length===0)return;let i=t.indexOf(e.target),n=E(e.key,this),l=this.orientation==="vertical"?"ArrowDown":"ArrowRight",f=this.orientation==="vertical"?"ArrowUp":"ArrowLeft",o;n===l?o=Math.min(t.length-1,i+1):n===f?o=Math.max(0,i-1):n==="Home"?o=0:n==="End"&&(o=t.length-1),o!==void 0&&(e.preventDefault(),t[o]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this.setAttribute("role","radiogroup"),this.addEventListener("keydown",this._handleKeydown),this._syncHostAttributes()}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(){this._syncHostAttributes(),this._refresh()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this.querySelector(`${h}:not([disabled])`)?.getAttribute("data-value")??null}setValue(e){this.disabled||e!==this.getSelectedValue()&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refresh())}_syncHostAttributes(){this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"))}_refresh(){for(let e of["skdx-segmented-control-item","skdx-segmented-control-indicator"])for(let t of this.querySelectorAll(e))t.refresh?.()}render(){return p`<slot></slot>`}};r.styles=v`
+    :host {
+      display: inline-block;
+    }
+  `,s([d({type:String})],r.prototype,"value",2),s([d({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),s([d({type:String,reflect:!0})],r.prototype,"orientation",2),s([d({type:Boolean,reflect:!0})],r.prototype,"disabled",2),s([g()],r.prototype,"_uncontrolledValue",2),r=s([A("skdx-segmented-control","segmented-control","root")],r);export{h as ITEM_SELECTOR,r as SkdxSegmentedControl};

package/dist/segmented-control/SegmentedControlIndicator.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(o,r)=>{for(var t in r)h(o,t,{get:r[t],enumerable:!0})},k=(o,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of g(r))!y.call(o,e)&&e!==t&&h(o,e,{get:()=>r[e],enumerable:!(s=m(r,e))||s.enumerable});return o};var f=o=>k(h({},"__esModule",{value:!0}),o),u=(o,r,t,s)=>{for(var e=s>1?void 0:s?m(r,t):r,i=o.length-1,n;i>=0;i--)(n=o[i])&&(e=(s?n(r,t,e):n(e))||e);return s&&e&&h(r,t,e),e};var O={};x(O,{SkdxSegmentedControlIndicator:()=>l});module.exports=f(O);var d=require("lit"),b=require("../internal/define.cjs"),p=require("./SegmentedControl.cjs");var E=["--skdx-segmented-control-x","--skdx-segmented-control-y","--skdx-segmented-control-width","--skdx-segmented-control-height"],l=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.observer=null;this.observedItem=null;this.lastKey=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-segmented-control"),!this.root)throw new Error("<skdx-segmented-control-indicator> must be used inside <skdx-segmented-control>.");this.setAttribute("aria-hidden","true"),this.measure()}disconnectedCallback(){this.detachObserver(),super.disconnectedCallback()}refresh(){this.measure()}detachObserver(){this.observer?.disconnect(),this.observer=null,this.observedItem=null}measure(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation);let s=t.querySelector(`${p.ITEM_SELECTOR}[data-state="checked"]`);if(!s){this.detachObserver(),this.lastKey=null,this.setAttribute("data-state","hidden");for(let e of E)this.style.removeProperty(e);return}this.observe(t,s),this.publish(t,s)}observe(t,s){this.observer&&this.observedItem===s||(this.detachObserver(),!(typeof ResizeObserver>"u")&&(this.observer=new ResizeObserver(()=>this.measure()),this.observer.observe(t),this.observer.observe(s),this.observedItem=s))}publish(t,s){let e=s.getBoundingClientRect(),i=t.getBoundingClientRect(),n=e.left-i.left,c=e.top-i.top,a=t.orientation==="vertical",v=`${a}:${n},${c},${e.width},${e.height}`;this.lastKey!==v&&(this.lastKey=v,this.setAttribute("data-state","visible"),this.style.setProperty("--skdx-segmented-control-x",`${n}px`),this.style.setProperty("--skdx-segmented-control-width",`${e.width}px`),a?(this.style.setProperty("--skdx-segmented-control-y",`${c}px`),this.style.setProperty("--skdx-segmented-control-height",`${e.height}px`)):(this.style.removeProperty("--skdx-segmented-control-y"),this.style.removeProperty("--skdx-segmented-control-height")))}render(){return d.html`<slot></slot>`}};l.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,l=u([(0,b.customElement)("skdx-segmented-control-indicator","segmented-control","indicator")],l);0&&(module.exports={SkdxSegmentedControlIndicator});