@skdx/web-components 0.26.0 → 0.28.0

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

@@ -1,10 +1,8 @@
 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>`.
+ * Draggable handle inside a `<skdx-scroll-area-scrollbar>`. Sized and
+ * positioned to match viewport scroll offset; pointer-capture-based dragging
+ * scrolls the viewport proportionally.
  *
  * @csspart thumb - The `<div>` inside the shadow root.
  */
@@ -16,24 +14,11 @@ export declare class SkdxScrollAreaThumb extends LitElement {
     private dragState;
     connectedCallback(): void;
     /**
-     * Resolves the viewport's scroller and starts tracking it.
+     * Resolve viewport's scroller and start 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.
+     * Async because Lit renders shadow roots on microtask, not during
+     * connectedCallback. Without awaiting the viewport's updateComplete, the
+     * host lookup returns null and tracking never starts.
      */
     private attachViewport;
     disconnectedCallback(): void;

package/dist/scroll-area/ScrollAreaThumb.js

@@ -1,7 +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`
+var P=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var m=(p,n,t,e)=>{for(var r=e>1?void 0:e?M(n,t):n,i=p.length-1,o;i>=0;i--)(o=p[i])&&(r=(e?o(n,t,r):o(r))||r);return e&&r&&P(n,t,r),r};import{css as g,html as z,LitElement as k}from"lit";import{customElement as x}from"../internal/define.js";import{resolveDirection as y}from"../internal/direction.js";var b=.1,c=class extends k{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,b),1),a=r-e,s=a>0?Math.abs(i)/a:0,h=`${l*100}%`,d=`${s*(100-l*100)}%`;this.orientation==="vertical"?Object.assign(this.style,{top:d,height:h,left:"0",right:"0"}):Object.assign(this.style,{insetInlineStart: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,a=this.orientation==="vertical"?e.scrollHeight:e.scrollWidth,s=a-l;if(s<=0)return;let h=Math.min(Math.max(l/a,b),1),d=o*h,w=Math.max(o-d,1),E=((this.orientation==="vertical"?t.clientY:t.clientX)-i.startPointer)/w*s,v=this.orientation==="horizontal"&&y(e)==="rtl",f=v?-s:0,S=v?0:s,u=Math.min(Math.max(i.startScroll+E,f),S);this.orientation==="vertical"?e.scrollTop=u:e.scrollLeft=u};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.setAttribute("aria-hidden","true"),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 z`<div part="thumb" style="width: 100%; height: 100%;"><slot></slot></div>`}};c.styles=g`
     :host {
       position: absolute;
       touch-action: none;
       display: block;
     }
-  `,c=u([M("skdx-scroll-area-thumb","scroll-area","thumb")],c);export{c as SkdxScrollAreaThumb};
+  `,c=m([x("skdx-scroll-area-thumb","scroll-area","thumb")],c);export{c as SkdxScrollAreaThumb};

package/dist/scroll-area/ScrollAreaViewport.cjs

@@ -1,8 +1,15 @@
-"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}>
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var m=(l,t)=>{for(var e in t)c(l,e,{get:t[e],enumerable:!0})},E=(l,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!w.call(l,r)&&r!==e&&c(l,r,{get:()=>t[r],enumerable:!(o=h(t,r))||o.enumerable});return l};var k=l=>E(c({},"__esModule",{value:!0}),l),v=(l,t,e,o)=>{for(var r=o>1?void 0:o?h(t,e):t,s=l.length-1,a;s>=0;s--)(a=l[s])&&(r=(o?a(t,e,r):a(r))||r);return o&&r&&c(t,e,r),r};var x={};m(x,{SkdxScrollAreaViewport:()=>n});module.exports=k(x);var i=require("lit"),p=require("../internal/aria-label.cjs"),u=require("../internal/define.cjs");var d=1;function b(l,t,e){let o=t-e;if(o<=d)return"none";let r=Math.abs(l),s=r>d,a=r<o-d;return s&&a?"both":s?"start":"end"}var n=class extends i.LitElement{constructor(){super(...arguments);this.rootEl=null;this.label=null;this.handleScroll=()=>{this.checkOverflow(),this.rootEl?.notifyScrolled()}}connectedCallback(){if(super.connectedCallback(),this.label=(0,p.takeHostAriaLabel)(this)??this.takeHostAriaLabelledbyText(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-viewport> must be used inside <skdx-scroll-area>.")}takeHostAriaLabelledbyText(){let e=this.getAttribute("aria-labelledby");if(e===null)return null;this.removeAttribute("aria-labelledby");let o=this.getRootNode();return e.split(/\s+/).filter(Boolean).map(s=>o.getElementById(s)?.textContent?.trim()??"").filter(Boolean).join(" ")||null}disconnectedCallback(){this.resizeObserver?.disconnect(),super.disconnectedCallback()}get viewportEl(){return this.shadowRoot?.querySelector(".viewport")}firstUpdated(){this.checkOverflow();let e=this.viewportEl,o=this.shadowRoot?.querySelector(".content");!e||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.checkOverflow()),this.resizeObserver.observe(e),o&&this.resizeObserver.observe(o))}checkOverflow(){let e=this.viewportEl;!e||!this.rootEl||(this.rootEl.setScrollbarEnabled("x",e.scrollWidth>e.clientWidth),this.rootEl.setScrollbarEnabled("y",e.scrollHeight>e.clientHeight),this.rootEl.reportScrollPosition({x:e.scrollLeft,y:e.scrollTop},{x:b(e.scrollLeft,e.scrollWidth,e.clientWidth),y:b(e.scrollTop,e.scrollHeight,e.clientHeight)}))}render(){return i.html`
+      <div
+        class="viewport"
+        part="viewport"
+        tabindex="0"
+        role=${this.label?"region":i.nothing}
+        aria-label=${this.label??i.nothing}
+        @scroll=${this.handleScroll}
+      >
         <div class="content"><slot></slot></div>
       </div>
-    `}};s.styles=l.css`
+    `}};n.styles=i.css`
     :host {
       display: block;
       overflow: hidden;
@@ -16,4 +23,4 @@
       min-width: 100%;
       display: table;
     }
-  `,s=v([(0,h.customElement)("skdx-scroll-area-viewport","scroll-area","viewport")],s);0&&(module.exports={SkdxScrollAreaViewport});
+  `,n=v([(0,u.customElement)("skdx-scroll-area-viewport","scroll-area","viewport")],n);0&&(module.exports={SkdxScrollAreaViewport});

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

@@ -1,20 +1,24 @@
 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>`.
- *
+ * `<skdx-scroll-area-viewport>` — natively-scrollable `overflow: auto` region.
+ * `tabindex="0"` for arrow-key scrolling; add `aria-label` / `aria-labelledby` to become `role="region"`.
+ * @example
+ * ```html
+ * <skdx-scroll-area>
+ *   <skdx-scroll-area-viewport aria-label="Release notes">…</skdx-scroll-area-viewport>
+ * </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?;
+    /** Accessible name for the shadow viewport, taken off this host at connect. */
+    private label;
     connectedCallback(): void;
+    /** Flattens `aria-labelledby` to text for the shadow viewport, since IDREFs cannot cross shadow boundaries. */
+    private takeHostAriaLabelledbyText;
     disconnectedCallback(): void;
     /** The actual scrollable shadow-DOM element. @internal */
     get viewportEl(): HTMLElement | null | undefined;

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

@@ -1,20 +1,24 @@
 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>`.
- *
+ * `<skdx-scroll-area-viewport>` — natively-scrollable `overflow: auto` region.
+ * `tabindex="0"` for arrow-key scrolling; add `aria-label` / `aria-labelledby` to become `role="region"`.
+ * @example
+ * ```html
+ * <skdx-scroll-area>
+ *   <skdx-scroll-area-viewport aria-label="Release notes">…</skdx-scroll-area-viewport>
+ * </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?;
+    /** Accessible name for the shadow viewport, taken off this host at connect. */
+    private label;
     connectedCallback(): void;
+    /** Flattens `aria-labelledby` to text for the shadow viewport, since IDREFs cannot cross shadow boundaries. */
+    private takeHostAriaLabelledbyText;
     disconnectedCallback(): void;
     /** The actual scrollable shadow-DOM element. @internal */
     get viewportEl(): HTMLElement | null | undefined;

package/dist/scroll-area/ScrollAreaViewport.js

@@ -1,8 +1,15 @@
-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}>
+var v=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=(i,l,e,t)=>{for(var r=t>1?void 0:t?b(l,e):l,o=i.length-1,s;o>=0;o--)(s=i[o])&&(r=(t?s(l,e,r):s(r))||r);return t&&r&&v(l,e,r),r};import{css as p,html as u,LitElement as f,nothing as d}from"lit";import{takeHostAriaLabel as w}from"../internal/aria-label.js";import{customElement as m}from"../internal/define.js";var a=1;function h(i,l,e){let t=l-e;if(t<=a)return"none";let r=Math.abs(i),o=r>a,s=r<t-a;return o&&s?"both":o?"start":"end"}var n=class extends f{constructor(){super(...arguments);this.rootEl=null;this.label=null;this.handleScroll=()=>{this.checkOverflow(),this.rootEl?.notifyScrolled()}}connectedCallback(){if(super.connectedCallback(),this.label=w(this)??this.takeHostAriaLabelledbyText(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-viewport> must be used inside <skdx-scroll-area>.")}takeHostAriaLabelledbyText(){let e=this.getAttribute("aria-labelledby");if(e===null)return null;this.removeAttribute("aria-labelledby");let t=this.getRootNode();return e.split(/\s+/).filter(Boolean).map(o=>t.getElementById(o)?.textContent?.trim()??"").filter(Boolean).join(" ")||null}disconnectedCallback(){this.resizeObserver?.disconnect(),super.disconnectedCallback()}get viewportEl(){return this.shadowRoot?.querySelector(".viewport")}firstUpdated(){this.checkOverflow();let e=this.viewportEl,t=this.shadowRoot?.querySelector(".content");!e||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.checkOverflow()),this.resizeObserver.observe(e),t&&this.resizeObserver.observe(t))}checkOverflow(){let e=this.viewportEl;!e||!this.rootEl||(this.rootEl.setScrollbarEnabled("x",e.scrollWidth>e.clientWidth),this.rootEl.setScrollbarEnabled("y",e.scrollHeight>e.clientHeight),this.rootEl.reportScrollPosition({x:e.scrollLeft,y:e.scrollTop},{x:h(e.scrollLeft,e.scrollWidth,e.clientWidth),y:h(e.scrollTop,e.scrollHeight,e.clientHeight)}))}render(){return u`
+      <div
+        class="viewport"
+        part="viewport"
+        tabindex="0"
+        role=${this.label?"region":d}
+        aria-label=${this.label??d}
+        @scroll=${this.handleScroll}
+      >
         <div class="content"><slot></slot></div>
       </div>
-    `}};i.styles=v`
+    `}};n.styles=p`
     :host {
       display: block;
       overflow: hidden;
@@ -16,4 +23,4 @@ var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=(s,o,e,r
       min-width: 100%;
       display: table;
     }
-  `,i=d([b("skdx-scroll-area-viewport","scroll-area","viewport")],i);export{i as SkdxScrollAreaViewport};
+  `,n=c([m("skdx-scroll-area-viewport","scroll-area","viewport")],n);export{n as SkdxScrollAreaViewport};

package/dist/scroll-area/index.cjs

@@ -1 +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});
+"use strict";var e=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var p=(l,r)=>{for(var S in r)e(l,S,{get:r[S],enumerable:!0})},t=(l,r,S,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of d(r))!k.call(l,o)&&o!==S&&e(l,o,{get:()=>r[o],enumerable:!(a=x(r,o))||a.enumerable});return l};var A=l=>t(e({},"__esModule",{value:!0}),l);var b={};p(b,{SkdxScrollArea:()=>c.SkdxScrollArea});module.exports=A(b);var c=require("./ScrollArea.cjs");0&&(module.exports={SkdxScrollArea});

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

@@ -1,5 +1 @@
-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';
+export { SkdxScrollArea, type SkdxScrollAreaScrollbars } from './ScrollArea.cjs';

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

@@ -1,5 +1 @@
-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';
+export { SkdxScrollArea, type SkdxScrollAreaScrollbars } from './ScrollArea.js';

package/dist/scroll-area/index.js

@@ -1 +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};
+import{SkdxScrollArea as o}from"./ScrollArea.js";export{o as SkdxScrollArea};

package/dist/scroll-area/primitives.cjs

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

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

@@ -0,0 +1,15 @@
+/**
+ * Advanced primitives for `<skdx-scroll-area>` — the parts the recipe derives.
+ *
+ * Authored parts are the presence switch; omit them and they are derived.
+ * A custom element's tag is global, so this replaces a headless `Root` export.
+ *
+ * @example
+ * ```ts
+ * import * as ScrollArea from '@skdx/web-components/primitives/scroll-area';
+ * ```
+ */
+export { SkdxScrollAreaViewport } from './ScrollAreaViewport.cjs';
+export { SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.cjs';
+export { SkdxScrollAreaThumb } from './ScrollAreaThumb.cjs';
+export { SkdxScrollAreaCorner } from './ScrollAreaCorner.cjs';

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

@@ -0,0 +1,15 @@
+/**
+ * Advanced primitives for `<skdx-scroll-area>` — the parts the recipe derives.
+ *
+ * Authored parts are the presence switch; omit them and they are derived.
+ * A custom element's tag is global, so this replaces a headless `Root` export.
+ *
+ * @example
+ * ```ts
+ * import * as ScrollArea from '@skdx/web-components/primitives/scroll-area';
+ * ```
+ */
+export { SkdxScrollAreaViewport } from './ScrollAreaViewport.js';
+export { SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.js';
+export { SkdxScrollAreaThumb } from './ScrollAreaThumb.js';
+export { SkdxScrollAreaCorner } from './ScrollAreaCorner.js';

package/dist/scroll-area/primitives.js

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

package/dist/segmented-control/SegmentedControl.cjs

@@ -1,5 +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`
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var O=(n,a)=>{for(var e in a)c(n,e,{get:a[e],enumerable:!0})},T=(n,a,e,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of V(a))!E.call(n,i)&&i!==e&&c(n,i,{get:()=>a[i],enumerable:!(t=m(a,i))||t.enumerable});return n};var w=n=>T(c({},"__esModule",{value:!0}),n),s=(n,a,e,t)=>{for(var i=t>1?void 0:t?m(a,e):a,u=n.length-1,h;u>=0;u--)(h=n[u])&&(i=(t?h(a,e,i):h(i))||i);return t&&i&&c(a,e,i),i};var L={};O(L,{ITEM_SELECTOR:()=>p,SkdxSegmentedControl:()=>r});module.exports=w(L);var d=require("lit"),o=require("lit/decorators.js"),v=require("../internal/authored.cjs"),y=require("../internal/define.cjs"),b=require("../internal/direction.cjs"),A=require("../internal/form-associated.cjs"),g=require("../internal/positioning.cjs"),f=require("./SegmentedControlAnatomy.cjs");var p="[data-skdx-segmented-control-item]",r=class extends(0,A.FormAssociated)(d.LitElement){constructor(){super(...arguments);this.orientation="horizontal";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.selectOnFocus=!0;this.loop=!1;this.fillAnatomy=()=>{(0,v.hasAuthoredParts)(this,f.SEGMENTED_CONTROL_ANATOMY_GENERATED)||((0,f.fillSegmentedControlAnatomy)(this),this._refresh())};this._handleKeydown=e=>{if(this.disabled)return;let t=Array.from(this.querySelectorAll(p));if(t.length===0)return;let i=t.indexOf(e.target),u=(0,b.directionalKey)(e.key,this),h=this.orientation==="vertical"?"ArrowDown":"ArrowRight",_=this.orientation==="vertical"?"ArrowUp":"ArrowLeft",l;u===h?(l=i+1,l>=t.length&&(l=this.loop?0:t.length-1)):u===_?(l=i-1,l<0&&(l=this.loop?t.length-1:0)):u==="Home"?l=0:u==="End"&&(l=t.length-1),l!==void 0&&(e.preventDefault(),t[l]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this._initialValue??(this._initialValue=this.value??this.defaultValue),this.setAttribute("role","radiogroup"),this.addEventListener("keydown",this._handleKeydown),this._syncHostAttributes(),this._syncFormState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(e){e.has("options")&&this.fillAnatomy(),this._syncHostAttributes(),(e.has("value")||e.has("required")||e.has("name"))&&this._syncFormState(),this._refresh()}_syncFormState(){let e=this.getSelectedValue();this.setFormValue(e??null),this.setValueMissing(this.required&&e===void 0,"Please select an option.")}formResetCallback(){this._uncontrolledValue=this._initialValue,this.value!==void 0&&(this.value=this._initialValue),this._syncFormState(),this._refresh()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this.querySelector(`${p}:not([data-disabled])`)?.getAttribute("data-value")??null}setValue(e,t="programmatic"){if(this.disabled||this.readOnly)return;let i=this.getSelectedValue()??null;e!==i&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,previousValue:i,reason:t},bubbles:!0,composed:!0})),this._syncFormState(),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")),this.readOnly?(this.setAttribute("aria-readonly","true"),this.setAttribute("data-readonly","")):(this.removeAttribute("aria-readonly"),this.removeAttribute("data-readonly")),this.invalid?(this.setAttribute("aria-invalid","true"),this.setAttribute("data-invalid","")):(this.removeAttribute("aria-invalid"),this.removeAttribute("data-invalid")),this.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required")}_refresh(){for(let e of["skdx-segmented-control-item","skdx-segmented-control-indicator"])for(let t of this.querySelectorAll(e))t.refresh?.()}render(){return d.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=d.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});
+  `,s([(0,o.property)({type:String})],r.prototype,"value",2),s([(0,o.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),s([(0,o.property)({type:String,reflect:!0})],r.prototype,"orientation",2),s([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),s([(0,o.property)({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),s([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"invalid",2),s([(0,o.property)({type:String,reflect:!0})],r.prototype,"name",2),s([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),s([(0,o.property)({converter:g.optOutBoolean,attribute:"select-on-focus"})],r.prototype,"selectOnFocus",2),s([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"loop",2),s([(0,o.property)({attribute:!1})],r.prototype,"options",2),s([(0,o.state)()],r.prototype,"_uncontrolledValue",2),r=s([(0,y.customElement)("skdx-segmented-control","segmented-control","root")],r);0&&(module.exports={ITEM_SELECTOR,SkdxSegmentedControl});

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

@@ -1,76 +1,83 @@
-import { LitElement } from 'lit';
-/** @internal Marks a segment for the root's arrow-key navigation and for the indicator's measurement query. */
+import { LitElement, type PropertyValues } from 'lit';
+import type { SkdxOptionItemDescriptor } from '../internal/options.cjs';
+/** @internal Marks a segment for navigation and indicator measurement. */
 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. */
+/** @internal A part that can re-sync from the root's 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. */
+/** Layout axis: always single, no `'both'` like roving-focus components. */
 export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/** Why the value changed: keyboard navigation, pointer click, or programmatic call. */
+export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/** Detail for the `value-change` event: the new value, previous value, and change reason. */
+export interface SegmentedControlValueChangeDetail {
+    /** The segment that is now selected. */
+    value: string;
+    /** The value selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /** Why the change occurred: `'pointer'`, `'keyboard'`, or `'programmatic'`. */
+    reason: SegmentedControlChangeReason;
+}
+declare const SkdxSegmentedControl_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
 /**
- * `<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>`).
+ * A radio group of mutually exclusive segments with a movable indicator. The
+ * host is `role="radiogroup"`; arrow keys move focus and select in one action;
+ * exactly one segment is a tab stop. Unlike `<skdx-toggle-group type="single">`
+ * which models buttons, this is for mutually exclusive choices.
+ *
+ * Arrow keys do not loop by default: reaching the last segment and pressing
+ * again stays put since focus selects (unlike `<skdx-radio-group>` which loops).
+ * Home/End jump to the ends.
  *
- * 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.
+ * Form-associated through `ElementInternals` with a `name`; respects form
+ * reset and `<fieldset disabled>`. The `required` attribute fails validation
+ * with `valueMissing` until a segment is picked.
  *
- * 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.
+ * `select-on-focus="false"` decouples focus and selection (toolbar variant):
+ * arrows move focus only, Space or Enter checks the focused segment.
  *
- * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
- * `internal/direction`'s `directionalKey`.
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the next segment.
+ * The host must be named with `aria-label` or `aria-labelledby`.
  *
- * 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.
+ * The `options` prop derives the whole anatomy including the Indicator; write
+ * any part as a child to override the derivation.
  *
  * @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>
+ * <skdx-segmented-control default-value="week" aria-label="Date range"></skdx-segmented-control>
+ * ```
+ * ```ts
+ * control.options = [
+ *   { value: 'day', label: 'Day' },
+ *   { value: 'week', label: 'Week' },
+ *   { value: 'month', label: 'Month' },
+ * ];
  * ```
  *
- * @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.
+ * @fires value-change - Emits {@link SegmentedControlValueChangeDetail} when
+ * the selection changes (from pointer, keyboard, or `setValue()`). Re-selecting
+ * the current segment fires nothing.
  */
-export declare class SkdxSegmentedControl extends LitElement {
+export declare class SkdxSegmentedControl extends SkdxSegmentedControl_base {
     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`.
+     * Selected segment's value for controlled usage. Pair with `value-change`.
+     * @default undefined — element tracks 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.
+     * Initially selected segment's value for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment carries the tab stop.
      */
     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.
+     * Layout axis; affects arrow-key navigation and which CSS custom properties
+     * the indicator publishes (`--skdx-segmented-control-x` / `width` for horizontal,
+     * `y` / `height` for vertical).
+     * @default 'horizontal'
      * @example
      * ```html
      * <skdx-segmented-control orientation="vertical" aria-label="View"></skdx-segmented-control>
@@ -78,45 +85,107 @@ export declare class SkdxSegmentedControl extends LitElement {
      */
     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.
+     * Disables every segment, blocking selection and removing the control from the tab order.
+     * @default false
      * @example
      * ```html
      * <skdx-segmented-control disabled aria-label="View"></skdx-segmented-control>
      * ```
      */
     disabled: boolean;
+    /**
+     * Displays a committed choice; segments stay focusable and navigable but
+     * neither clicks nor keys change the value. Distinct from `disabled`,
+     * which removes the control from the tab order.
+     * @default false
+     * @example
+     * ```html
+     * <skdx-segmented-control read-only value="week" aria-label="View"></skdx-segmented-control>
+     * ```
+     */
+    readOnly: boolean;
+    /**
+     * Marks the control invalid for the skin. Presentational only;
+     * validation belongs to the surrounding `<skdx-field>`.
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Form field name for the selection; published through `ElementInternals`.
+     * @default undefined — nothing is submitted; validation skipped.
+     * @example
+     * ```html
+     * <skdx-segmented-control name="range" aria-label="Date range"></skdx-segmented-control>
+     * ```
+     */
+    name?: string;
+    /**
+     * Marks the control required; reports `valueMissing` while nothing is
+     * selected. Only meaningful alongside `name`.
+     * @default false
+     * @example
+     * ```html
+     * <skdx-segmented-control name="range" required aria-label="Date range"></skdx-segmented-control>
+     * ```
+     */
+    required: boolean;
+    /**
+     * Whether focus also selects a segment. `false` uses the toolbar variant:
+     * arrows move focus only, Space or Enter checks.
+     * @default true
+     * @example
+     * ```html
+     * <skdx-segmented-control select-on-focus="false" aria-label="Align"></skdx-segmented-control>
+     * ```
+     */
+    selectOnFocus: boolean;
+    /**
+     * Whether arrow keys wrap from the last segment back to the first. Unlike
+     * `<skdx-radio-group>`, wrapping changes the selection since focus selects.
+     * @default false — arrows stop at each end; Home/End still jump there.
+     * @example
+     * ```html
+     * <skdx-segmented-control loop aria-label="View"></skdx-segmented-control>
+     * ```
+     */
+    loop: boolean;
+    /**
+     * The segments, in order — one `<skdx-segmented-control-item>` is derived per
+     * entry, behind a derived Indicator. Property only: an array of objects has
+     * no attribute form.
+     * @default undefined — nothing is derived, and hand-composed children stand.
+     */
+    options?: readonly SkdxOptionItemDescriptor[];
     private _uncontrolledValue?;
+    /** The initial value at connect, restored by form reset. */
+    private _initialValue?;
     connectedCallback(): void;
+    private readonly fillAnatomy;
     disconnectedCallback(): void;
-    protected updated(): void;
-    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    protected updated(changed: PropertyValues): void;
+    /** Publishes the selection and validity through `ElementInternals`. */
+    private _syncFormState;
+    /** Restores the authored selection when the form is reset. */
+    formResetCallback(): void;
+    /**
+     * The currently selected value, resolving controlled vs. uncontrolled.
+     * @internal Called by item and indicator parts; not consumer API.
+     */
     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
+     * The first non-disabled segment's value, the fallback tab stop while
+     * nothing is selected.
+     * @internal Called by item parts; not consumer API.
      */
     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.
+     * Selects `value`, updating state and firing `value-change`. Re-selecting
+     * the current segment is a no-op: this is a radio group, not a toggle.
+     * @internal Called by item parts; not consumer API. Set `value` property instead.
      */
-    setValue(value: string): void;
+    setValue(value: string, reason?: SegmentedControlChangeReason): 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.
-     */
+    /** Refresh items then indicator; indicator measures checked segment. */
     private _refresh;
     private readonly _handleKeydown;
     render(): import("lit").TemplateResult<1>;
@@ -126,3 +195,4 @@ declare global {
         'skdx-segmented-control': SkdxSegmentedControl;
     }
 }
+export {};