@skdx/web-components 0.28.0 → 0.30.0

package/dist/scroll-area/ScrollArea.js

@@ -1,6 +1,6 @@
-var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(s,l,e,r)=>{for(var t=r>1?void 0:r?h(l,e):l,a=s.length-1,n;a>=0;a--)(n=s[a])&&(t=(r?n(l,e,t):n(t))||t);return r&&t&&d(l,e,t),t};import{css as p,html as v,LitElement as b}from"lit";import{property as c}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{fillScrollAreaAnatomy as m}from"./ScrollAreaAnatomy.js";var o=class extends b{constructor(){super(...arguments);this.type="hover";this.scrollHideDelay=600;this.scrollbars="both";this.hovering=!1;this.scrolling=!1;this.scrollbarXEnabled=!1;this.scrollbarYEnabled=!1;this.fillAnatomy=()=>m(this);this.handlePointerEnter=()=>{this.hovering=!0,this.broadcast()};this.handlePointerLeave=()=>{this.hovering=!1,this.broadcast()}}scrollTo(e,r){let t=this.querySelector("skdx-scroll-area-viewport")?.viewportEl;if(t){if(typeof e=="number"){t.scrollTo(e,r??0);return}t.scrollTo({behavior:"auto",...e})}}reportScrollPosition(e,r){this.setAttribute("data-overflow-x",r.x),this.setAttribute("data-overflow-y",r.y),this.dispatchEvent(new CustomEvent("scroll-position-change",{detail:e,bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this.hasAttribute("data-overflow-x")||this.setAttribute("data-overflow-x","none"),this.hasAttribute("data-overflow-y")||this.setAttribute("data-overflow-y","none"),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),clearTimeout(this.scrollingTimer),super.disconnectedCallback()}updated(e){e.has("scrollbars")&&this.fillAnatomy()}setScrollbarEnabled(e,r){e==="x"?this.scrollbarXEnabled=r:this.scrollbarYEnabled=r,this.broadcast()}notifyScrolled(){this.scrolling=!0,this.broadcast(),clearTimeout(this.scrollingTimer),this.scrollingTimer=setTimeout(()=>{this.scrolling=!1,this.broadcast()},this.scrollHideDelay)}broadcast(){this.dispatchEvent(new CustomEvent("skdx-scroll-area-update",{bubbles:!0,composed:!0}))}render(){return v`<slot @slotchange=${this.fillAnatomy}></slot>`}};o.styles=p`
+var x=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var v=t=>{throw TypeError(t)};var n=(t,o,e,r)=>{for(var i=r>1?void 0:r?A(o,e):o,p=t.length-1,h;p>=0;p--)(h=t[p])&&(i=(r?h(o,e,i):h(i))||i);return r&&i&&x(o,e,i),i};var k=(t,o,e)=>o.has(t)||v("Cannot "+e);var S=(t,o,e)=>o.has(t)?v("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(t):o.set(t,e);var a=(t,o,e)=>(k(t,o,"access private method"),e);import{css as T,html as g,LitElement as w}from"lit";import{property as d}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{fillScrollAreaAnatomy as P}from"./ScrollAreaAnatomy.js";var b=new WeakMap;function z(t){return b.get(t)}var l,f,m,y,c,s=class extends w{constructor(){super();S(this,l);this.type="hover";this.scrollHideDelay=600;this.scrollbars="both";this.hovering=!1;this.scrolling=!1;this.scrollbarXEnabled=!1;this.scrollbarYEnabled=!1;this.fillAnatomy=()=>P(this);this.handlePointerEnter=()=>{this.hovering=!0,a(this,l,c).call(this)};this.handlePointerLeave=()=>{this.hovering=!1,a(this,l,c).call(this)};b.set(this,{reportScrollPosition:(e,r)=>a(this,l,f).call(this,e,r),setScrollbarEnabled:(e,r)=>a(this,l,m).call(this,e,r),notifyScrolled:()=>a(this,l,y).call(this)})}scrollTo(e,r){let i=this.querySelector("skdx-scroll-area-viewport")?.viewportEl;if(i){if(typeof e=="number"){i.scrollTo(e,r??0);return}i.scrollTo({behavior:"auto",...e})}}connectedCallback(){super.connectedCallback(),this.hasAttribute("data-overflow-x")||this.setAttribute("data-overflow-x","none"),this.hasAttribute("data-overflow-y")||this.setAttribute("data-overflow-y","none"),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),clearTimeout(this.scrollingTimer),super.disconnectedCallback()}updated(e){e.has("scrollbars")&&this.fillAnatomy()}render(){return g`<slot @slotchange=${this.fillAnatomy}></slot>`}};l=new WeakSet,f=function(e,r){this.setAttribute("data-overflow-x",r.x),this.setAttribute("data-overflow-y",r.y),u(this,"scroll-position-change",e)},m=function(e,r){e==="x"?this.scrollbarXEnabled=r:this.scrollbarYEnabled=r,a(this,l,c).call(this)},y=function(){this.scrolling=!0,a(this,l,c).call(this),clearTimeout(this.scrollingTimer),this.scrollingTimer=setTimeout(()=>{this.scrolling=!1,a(this,l,c).call(this)},this.scrollHideDelay)},c=function(){u(this,"skdx-scroll-area-update")},s.styles=T`
     :host {
       display: block;
       position: relative;
     }
-  `,i([c({type:String,reflect:!0})],o.prototype,"type",2),i([c({type:Number,attribute:"scroll-hide-delay"})],o.prototype,"scrollHideDelay",2),i([c({type:String,reflect:!0})],o.prototype,"scrollbars",2),o=i([u("skdx-scroll-area","scroll-area","root")],o);export{o as SkdxScrollArea};
+  `,n([d({type:String,reflect:!0})],s.prototype,"type",2),n([d({type:Number,attribute:"scroll-hide-delay"})],s.prototype,"scrollHideDelay",2),n([d({type:String,reflect:!0})],s.prototype,"scrollbars",2),n([d({type:String,reflect:!0,attribute:"data-size"})],s.prototype,"size",2),s=n([E("skdx-scroll-area","scroll-area","root")],s);export{s as SkdxScrollArea,z as getScrollAreaInternals};

package/dist/scroll-area/ScrollAreaAnatomy.cjs

@@ -1 +1 @@
-"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var m=(e,r)=>{for(var t in r)n(e,t,{get:r[t],enumerable:!0})},A=(e,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of b(r))!u.call(e,a)&&a!==t&&n(e,a,{get:()=>r[a],enumerable:!(l=d(r,a))||l.enumerable});return e};var p=e=>A(n({},"__esModule",{value:!0}),e);var f={};m(f,{SCROLL_AREA_ANATOMY_GENERATED:()=>c,fillScrollAreaAnatomy:()=>S});module.exports=p(f);var o=require("../internal/derive.cjs"),y=require("./ScrollAreaCorner.cjs"),v=require("./ScrollAreaScrollbar.cjs"),N=require("./ScrollAreaThumb.cjs"),T=require("./ScrollAreaViewport.cjs"),c="data-skdx-scroll-area-generated",k=["skdx-scroll-area-viewport","skdx-scroll-area-scrollbar","skdx-scroll-area-thumb","skdx-scroll-area-corner"];function i(e,r){let t=c,l=e.querySelector(`:scope > skdx-scroll-area-scrollbar[${t}][orientation="${r}"]`)??document.createElement("skdx-scroll-area-scrollbar");l.setAttribute(t,""),l.setAttribute("orientation",r);let a=l.querySelector(`:scope > skdx-scroll-area-thumb[${t}]`)??document.createElement("skdx-scroll-area-thumb");return a.setAttribute(t,""),(0,o.applyChildren)(l,[a]),l}function x(e){let r=c,t=e.querySelector(`:scope > skdx-scroll-area-corner[${r}]`)??document.createElement("skdx-scroll-area-corner");return t.setAttribute(r,""),t}function E(e,r){let t=e.getAttribute("aria-label");t!==null&&(r.setAttribute("aria-label",t),e.removeAttribute("aria-label"));let l=e.getAttribute("aria-labelledby");l!==null&&(r.setAttribute("aria-labelledby",l),e.removeAttribute("aria-labelledby"))}function S(e){let r=c;if(k.some(s=>(0,o.hasAuthoredPart)(e,s,r)))return;let t=Array.from(e.childNodes).filter(s=>!(s.nodeType===Node.ELEMENT_NODE&&s.hasAttribute(r))),l=(0,o.generatedPart)(e,"skdx-scroll-area-viewport",r)??document.createElement("skdx-scroll-area-viewport");l.setAttribute(r,""),(0,o.applyChildren)(l,t),E(e,l);let a=[l];e.scrollbars!=="horizontal"&&a.push(i(e,"vertical")),e.scrollbars!=="vertical"&&a.push(i(e,"horizontal")),e.scrollbars==="both"&&a.push(x(e)),(0,o.applyChildren)(e,a)}0&&(module.exports={SCROLL_AREA_ANATOMY_GENERATED,fillScrollAreaAnatomy});
+"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var A=(e,r)=>{for(var t in r)n(e,t,{get:r[t],enumerable:!0})},p=(e,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of u(r))!m.call(e,a)&&a!==t&&n(e,a,{get:()=>r[a],enumerable:!(l=b(r,a))||l.enumerable});return e};var k=e=>p(n({},"__esModule",{value:!0}),e);var h={};A(h,{SCROLL_AREA_ANATOMY_GENERATED:()=>s,fillScrollAreaAnatomy:()=>S});module.exports=k(h);var o=require("../internal/derive.cjs"),v=require("./ScrollAreaCorner.cjs"),N=require("./ScrollAreaScrollbar.cjs"),w=require("./ScrollAreaThumb.cjs"),T=require("./ScrollAreaViewport.cjs"),s="data-skdx-scroll-area-generated",x=["skdx-scroll-area-viewport","skdx-scroll-area-scrollbar","skdx-scroll-area-thumb","skdx-scroll-area-corner"];function d(e,r){let t=s,l=e.querySelector(`:scope > skdx-scroll-area-scrollbar[${t}][orientation="${r}"]`)??document.createElement("skdx-scroll-area-scrollbar");l.setAttribute(t,""),l.setAttribute("orientation",r);let a=l.querySelector(`:scope > skdx-scroll-area-thumb[${t}]`)??document.createElement("skdx-scroll-area-thumb");return a.setAttribute(t,""),(0,o.applyChildren)(l,[a]),l}function f(e){let r=s,t=e.querySelector(`:scope > skdx-scroll-area-corner[${r}]`)??document.createElement("skdx-scroll-area-corner");return t.setAttribute(r,""),t}function E(e,r){let t=e.getAttribute("aria-label");t!==null&&(r.setAttribute("aria-label",t),e.removeAttribute("aria-label"));let l=e.getAttribute("aria-labelledby");l!==null&&(r.setAttribute("aria-labelledby",l),e.removeAttribute("aria-labelledby"))}function S(e){let r=s;if(x.some(c=>(0,o.hasAuthoredPart)(e,c,r)))return;let t=(0,o.generatedPart)(e,"skdx-scroll-area-viewport",r),l=t??document.createElement("skdx-scroll-area-viewport");if(l.setAttribute(r,""),!t){let c=Array.from(e.childNodes).filter(i=>!(i.nodeType===Node.ELEMENT_NODE&&i.hasAttribute(r)));(0,o.applyChildren)(l,c)}E(e,l);let a=[l];e.scrollbars!=="horizontal"&&a.push(d(e,"vertical")),e.scrollbars!=="vertical"&&a.push(d(e,"horizontal")),e.scrollbars==="both"&&a.push(f(e)),(0,o.applyChildren)(e,a)}0&&(module.exports={SCROLL_AREA_ANATOMY_GENERATED,fillScrollAreaAnatomy});

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

@@ -5,8 +5,5 @@ import './ScrollAreaThumb.cjs';
 import './ScrollAreaViewport.cjs';
 /** @internal Marks a direct child (of the root, or of a derived Scrollbar) this module generated. */
 export declare const SCROLL_AREA_ANATOMY_GENERATED = "data-skdx-scroll-area-generated";
-/**
- * Builds the canonical anatomy: a Viewport holding consumer content, Scrollbars per `scrollbars`, and a Corner when both axes show. Presence switch checks for authored parts, not just any children. Only called by `<skdx-scroll-area>`.
- * @internal
- */
+/** @internal Builds the canonical anatomy: a Viewport holding consumer content, Scrollbars per `scrollbars`, and a Corner when both axes show. */
 export declare function fillScrollAreaAnatomy(root: SkdxScrollArea): void;

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

@@ -5,8 +5,5 @@ import './ScrollAreaThumb.js';
 import './ScrollAreaViewport.js';
 /** @internal Marks a direct child (of the root, or of a derived Scrollbar) this module generated. */
 export declare const SCROLL_AREA_ANATOMY_GENERATED = "data-skdx-scroll-area-generated";
-/**
- * Builds the canonical anatomy: a Viewport holding consumer content, Scrollbars per `scrollbars`, and a Corner when both axes show. Presence switch checks for authored parts, not just any children. Only called by `<skdx-scroll-area>`.
- * @internal
- */
+/** @internal Builds the canonical anatomy: a Viewport holding consumer content, Scrollbars per `scrollbars`, and a Corner when both axes show. */
 export declare function fillScrollAreaAnatomy(root: SkdxScrollArea): void;

package/dist/scroll-area/ScrollAreaAnatomy.js

@@ -1 +1 @@
-import{applyChildren as s,generatedPart as i,hasAuthoredPart as d}from"../internal/derive.js";import"./ScrollAreaCorner.js";import"./ScrollAreaScrollbar.js";import"./ScrollAreaThumb.js";import"./ScrollAreaViewport.js";var c="data-skdx-scroll-area-generated",b=["skdx-scroll-area-viewport","skdx-scroll-area-scrollbar","skdx-scroll-area-thumb","skdx-scroll-area-corner"];function n(e,r){let l=c,t=e.querySelector(`:scope > skdx-scroll-area-scrollbar[${l}][orientation="${r}"]`)??document.createElement("skdx-scroll-area-scrollbar");t.setAttribute(l,""),t.setAttribute("orientation",r);let a=t.querySelector(`:scope > skdx-scroll-area-thumb[${l}]`)??document.createElement("skdx-scroll-area-thumb");return a.setAttribute(l,""),s(t,[a]),t}function u(e){let r=c,l=e.querySelector(`:scope > skdx-scroll-area-corner[${r}]`)??document.createElement("skdx-scroll-area-corner");return l.setAttribute(r,""),l}function m(e,r){let l=e.getAttribute("aria-label");l!==null&&(r.setAttribute("aria-label",l),e.removeAttribute("aria-label"));let t=e.getAttribute("aria-labelledby");t!==null&&(r.setAttribute("aria-labelledby",t),e.removeAttribute("aria-labelledby"))}function S(e){let r=c;if(b.some(o=>d(e,o,r)))return;let l=Array.from(e.childNodes).filter(o=>!(o.nodeType===Node.ELEMENT_NODE&&o.hasAttribute(r))),t=i(e,"skdx-scroll-area-viewport",r)??document.createElement("skdx-scroll-area-viewport");t.setAttribute(r,""),s(t,l),m(e,t);let a=[t];e.scrollbars!=="horizontal"&&a.push(n(e,"vertical")),e.scrollbars!=="vertical"&&a.push(n(e,"horizontal")),e.scrollbars==="both"&&a.push(u(e)),s(e,a)}export{c as SCROLL_AREA_ANATOMY_GENERATED,S as fillScrollAreaAnatomy};
+import{applyChildren as s,generatedPart as d,hasAuthoredPart as b}from"../internal/derive.js";import"./ScrollAreaCorner.js";import"./ScrollAreaScrollbar.js";import"./ScrollAreaThumb.js";import"./ScrollAreaViewport.js";var c="data-skdx-scroll-area-generated",u=["skdx-scroll-area-viewport","skdx-scroll-area-scrollbar","skdx-scroll-area-thumb","skdx-scroll-area-corner"];function i(e,r){let t=c,l=e.querySelector(`:scope > skdx-scroll-area-scrollbar[${t}][orientation="${r}"]`)??document.createElement("skdx-scroll-area-scrollbar");l.setAttribute(t,""),l.setAttribute("orientation",r);let a=l.querySelector(`:scope > skdx-scroll-area-thumb[${t}]`)??document.createElement("skdx-scroll-area-thumb");return a.setAttribute(t,""),s(l,[a]),l}function m(e){let r=c,t=e.querySelector(`:scope > skdx-scroll-area-corner[${r}]`)??document.createElement("skdx-scroll-area-corner");return t.setAttribute(r,""),t}function A(e,r){let t=e.getAttribute("aria-label");t!==null&&(r.setAttribute("aria-label",t),e.removeAttribute("aria-label"));let l=e.getAttribute("aria-labelledby");l!==null&&(r.setAttribute("aria-labelledby",l),e.removeAttribute("aria-labelledby"))}function S(e){let r=c;if(u.some(o=>b(e,o,r)))return;let t=d(e,"skdx-scroll-area-viewport",r),l=t??document.createElement("skdx-scroll-area-viewport");if(l.setAttribute(r,""),!t){let o=Array.from(e.childNodes).filter(n=>!(n.nodeType===Node.ELEMENT_NODE&&n.hasAttribute(r)));s(l,o)}A(e,l);let a=[l];e.scrollbars!=="horizontal"&&a.push(i(e,"vertical")),e.scrollbars!=="vertical"&&a.push(i(e,"horizontal")),e.scrollbars==="both"&&a.push(m(e)),s(e,a)}export{c as SCROLL_AREA_ANATOMY_GENERATED,S as fillScrollAreaAnatomy};

package/dist/scroll-area/ScrollAreaCorner.cjs

@@ -1,17 +1,10 @@
-"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var r in e)n(o,r,{get:e[r],enumerable:!0})},b=(o,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!m.call(o,t)&&t!==r&&n(o,t,{get:()=>e[t],enumerable:!(s=h(e,t))||s.enumerable});return o};var k=o=>b(n({},"__esModule",{value:!0}),o),c=(o,e,r,s)=>{for(var t=s>1?void 0:s?h(e,r):e,l=o.length-1,d;l>=0;l--)(d=o[l])&&(t=(s?d(e,r,t):d(t))||t);return s&&t&&n(e,r,t),t};var E={};y(E,{SkdxScrollAreaCorner:()=>a});module.exports=k(E);var i=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs");var a=class extends i.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.rootEl=null;this.onUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-corner> must be used inside <skdx-scroll-area>.");this.setAttribute("aria-hidden","true"),this.rootEl.addEventListener("skdx-scroll-area-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-scroll-area-update",this.onUpdate),super.disconnectedCallback()}sync(){this.hidden=!this.forceMount&&!(this.rootEl?.scrollbarXEnabled&&this.rootEl?.scrollbarYEnabled)}updated(){this.sync()}render(){return i.html`<div part="corner"><slot></slot></div>`}};a.styles=i.css`
+"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(o,e)=>{for(var s in e)i(o,s,{get:e[s],enumerable:!0})},y=(o,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!v.call(o,t)&&t!==s&&i(o,t,{get:()=>e[t],enumerable:!(r=p(e,t))||r.enumerable});return o};var b=o=>y(i({},"__esModule",{value:!0}),o),c=(o,e,s,r)=>{for(var t=r>1?void 0:r?p(e,s):e,d=o.length-1,n;d>=0;d--)(n=o[d])&&(t=(r?n(e,s,t):n(t))||t);return r&&t&&i(e,s,t),t};var k={};E(k,{SkdxScrollAreaCorner:()=>l});module.exports=b(k);var a=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs");var l=class extends a.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.rootEl=null;this.onUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-corner> must be used inside <skdx-scroll-area>.");this.setAttribute("aria-hidden","true"),this.rootEl.addEventListener("skdx-scroll-area-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-scroll-area-update",this.onUpdate),super.disconnectedCallback()}sync(){this.hidden=!this.forceMount&&!(this.rootEl?.scrollbarXEnabled&&this.rootEl?.scrollbarYEnabled)}updated(){this.sync()}render(){return a.html`<div part="corner"><slot></slot></div>`}};l.styles=a.css`
     :host {
       display: block;
     }
-    /*
-     * The package's own base style, not the skin's. The :host display
-     * declaration above is an author declaration and outranks the UA's
-     * hidden { display: none } on cascade origin alone, so without this rule a
-     * headless consumer using @skdx/web-components *without* @skdx/skins got a
-     * reserved gutter on every non-overflowing axis — the very divergence
-     * the corner is about. The skin carries the equivalent rule for its
-     * own display: flex; each layer has to undo its own.
-     */
+    /* :host's display outranks the UA's hidden { display: none } on cascade origin,
+     * so a headless consumer without @skdx/skins needs this rule too. */
     :host([hidden]) {
       display: none;
     }
-  `,c([(0,p.property)({type:Boolean,attribute:"force-mount"})],a.prototype,"forceMount",2),a=c([(0,u.customElement)("skdx-scroll-area-corner","scroll-area","corner")],a);0&&(module.exports={SkdxScrollAreaCorner});
+  `,c([(0,h.property)({type:Boolean,attribute:"force-mount"})],l.prototype,"forceMount",2),l=c([(0,u.customElement)("skdx-scroll-area-corner","scroll-area","corner")],l);0&&(module.exports={SkdxScrollAreaCorner});

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

@@ -1,20 +1,13 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-scroll-area-corner>` — the small square filling the gap where a
- * vertical and horizontal `<skdx-scroll-area-scrollbar>` meet. Hidden (via the
- * native `hidden` property) unless both scrollbars are simultaneously
- * enabled, or `force-mount` is set. Must be used inside `<skdx-scroll-area>`.
+ * `<skdx-scroll-area-corner>` fills the gap where a vertical and horizontal scrollbar meet, hidden unless both are enabled or `force-mount` is set.
  *
  * @csspart corner - The `<div>` inside the shadow root.
  */
 export declare class SkdxScrollAreaCorner extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Keeps the corner filled when only one scrollbar is enabled, avoiding an
-     * empty notch with always-visible scrollbar pairs.
-     *
-     * A visibility switch (not a mount switch), since the part is an
-     * author-written element. Declared so it lands in `observedAttributes`.
+     * Keeps the corner filled when only one scrollbar is enabled, avoiding an empty notch.
      * @default false
      */
     forceMount: boolean;
@@ -24,7 +17,7 @@ export declare class SkdxScrollAreaCorner extends LitElement {
     disconnectedCallback(): void;
     private sync;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,20 +1,13 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-scroll-area-corner>` — the small square filling the gap where a
- * vertical and horizontal `<skdx-scroll-area-scrollbar>` meet. Hidden (via the
- * native `hidden` property) unless both scrollbars are simultaneously
- * enabled, or `force-mount` is set. Must be used inside `<skdx-scroll-area>`.
+ * `<skdx-scroll-area-corner>` fills the gap where a vertical and horizontal scrollbar meet, hidden unless both are enabled or `force-mount` is set.
  *
  * @csspart corner - The `<div>` inside the shadow root.
  */
 export declare class SkdxScrollAreaCorner extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Keeps the corner filled when only one scrollbar is enabled, avoiding an
-     * empty notch with always-visible scrollbar pairs.
-     *
-     * A visibility switch (not a mount switch), since the part is an
-     * author-written element. Declared so it lands in `observedAttributes`.
+     * Keeps the corner filled when only one scrollbar is enabled, avoiding an empty notch.
      * @default false
      */
     forceMount: boolean;
@@ -24,7 +17,7 @@ export declare class SkdxScrollAreaCorner extends LitElement {
     disconnectedCallback(): void;
     private sync;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/scroll-area/ScrollAreaCorner.js

@@ -1,17 +1,10 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(s,o,a,r)=>{for(var e=r>1?void 0:r?c(o,a):o,i=s.length-1,n;i>=0;i--)(n=s[i])&&(e=(r?n(o,a,e):n(e))||e);return r&&e&&d(o,a,e),e};import{css as h,html as p,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";var t=class extends u{constructor(){super(...arguments);this.forceMount=!1;this.rootEl=null;this.onUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-corner> must be used inside <skdx-scroll-area>.");this.setAttribute("aria-hidden","true"),this.rootEl.addEventListener("skdx-scroll-area-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-scroll-area-update",this.onUpdate),super.disconnectedCallback()}sync(){this.hidden=!this.forceMount&&!(this.rootEl?.scrollbarXEnabled&&this.rootEl?.scrollbarYEnabled)}updated(){this.sync()}render(){return p`<div part="corner"><slot></slot></div>`}};t.styles=h`
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(r,o,l,s)=>{for(var e=s>1?void 0:s?c(o,l):o,a=r.length-1,i;a>=0;a--)(i=r[a])&&(e=(s?i(o,l,e):i(e))||e);return s&&e&&n(o,l,e),e};import{css as p,html as h,LitElement as u}from"lit";import{property as m}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var t=class extends u{constructor(){super(...arguments);this.forceMount=!1;this.rootEl=null;this.onUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-scroll-area"),!this.rootEl)throw new Error("<skdx-scroll-area-corner> must be used inside <skdx-scroll-area>.");this.setAttribute("aria-hidden","true"),this.rootEl.addEventListener("skdx-scroll-area-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-scroll-area-update",this.onUpdate),super.disconnectedCallback()}sync(){this.hidden=!this.forceMount&&!(this.rootEl?.scrollbarXEnabled&&this.rootEl?.scrollbarYEnabled)}updated(){this.sync()}render(){return h`<div part="corner"><slot></slot></div>`}};t.styles=p`
     :host {
       display: block;
     }
-    /*
-     * The package's own base style, not the skin's. The :host display
-     * declaration above is an author declaration and outranks the UA's
-     * hidden { display: none } on cascade origin alone, so without this rule a
-     * headless consumer using @skdx/web-components *without* @skdx/skins got a
-     * reserved gutter on every non-overflowing axis — the very divergence
-     * the corner is about. The skin carries the equivalent rule for its
-     * own display: flex; each layer has to undo its own.
-     */
+    /* :host's display outranks the UA's hidden { display: none } on cascade origin,
+     * so a headless consumer without @skdx/skins needs this rule too. */
     :host([hidden]) {
       display: none;
     }
-  `,l([v({type:Boolean,attribute:"force-mount"})],t.prototype,"forceMount",2),t=l([m("skdx-scroll-area-corner","scroll-area","corner")],t);export{t as SkdxScrollAreaCorner};
+  `,d([m({type:Boolean,attribute:"force-mount"})],t.prototype,"forceMount",2),t=d([v("skdx-scroll-area-corner","scroll-area","corner")],t);export{t as SkdxScrollAreaCorner};

package/dist/scroll-area/ScrollAreaScrollbar.cjs

@@ -1,4 +1,4 @@
-"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(i,o)=>{for(var t in o)a(i,t,{get:o[t],enumerable:!0})},b=(i,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of u(o))!m.call(i,r)&&r!==t&&a(i,r,{get:()=>o[r],enumerable:!(e=p(o,r))||e.enumerable});return i};var y=i=>b(a({},"__esModule",{value:!0}),i),c=(i,o,t,e)=>{for(var r=e>1?void 0:e?p(o,t):o,s=i.length-1,d;s>=0;s--)(d=i[s])&&(r=(e?d(o,t,r):d(r))||r);return e&&r&&a(o,t,r),r};var E={};f(E,{SkdxScrollAreaScrollbar:()=>l});module.exports=y(E);var n=require("lit"),h=require("lit/decorators.js"),v=require("../internal/define.cjs");var l=class extends n.LitElement{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 s=r.getBoundingClientRect();this.orientation==="vertical"?t.clientY<s.top?e.scrollTop-=e.clientHeight:t.clientY>s.bottom&&(e.scrollTop+=e.clientHeight):t.clientX<s.left?e.scrollLeft-=e.clientWidth:t.clientX>s.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.setAttribute("aria-hidden","true"),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=!(this.forceMount||t.type==="always"||e)}render(){return n.html`<div part="scrollbar"><slot></slot></div>`}};l.styles=n.css`
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(i,o)=>{for(var e in o)a(i,e,{get:o[e],enumerable:!0})},b=(i,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of v(o))!m.call(i,r)&&r!==e&&a(i,r,{get:()=>o[r],enumerable:!(t=p(o,r))||t.enumerable});return i};var y=i=>b(a({},"__esModule",{value:!0}),i),d=(i,o,e,t)=>{for(var r=t>1?void 0:t?p(o,e):o,l=i.length-1,c;l>=0;l--)(c=i[l])&&(r=(t?c(o,e,r):c(r))||r);return t&&r&&a(o,e,r),r};var E={};f(E,{SkdxScrollAreaScrollbar:()=>s});module.exports=y(E);var n=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs");var s=class extends n.LitElement{constructor(){super(...arguments);this.orientation="vertical";this.forceMount=!1;this.rootEl=null;this.onUpdate=()=>this.sync();this.handlePointerDown=e=>{if(e.target!==this)return;let t=this.rootEl?.querySelector("skdx-scroll-area-viewport")?.viewportEl,r=this.querySelector("skdx-scroll-area-thumb");if(!t||!r)return;let l=r.getBoundingClientRect();this.orientation==="vertical"?e.clientY<l.top?t.scrollTop-=t.clientHeight:e.clientY>l.bottom&&(t.scrollTop+=t.clientHeight):e.clientX<l.left?t.scrollLeft-=t.clientWidth:e.clientX>l.right&&(t.scrollLeft+=t.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.setAttribute("aria-hidden","true"),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 e=this.rootEl;if(!e)return;let t=this.orientation==="vertical"?e.scrollbarYEnabled:e.scrollbarXEnabled,r=t;t&&e.type==="hover"?r=e.hovering:t&&e.type==="scroll"&&(r=e.hovering||e.scrolling),this.setAttribute("data-orientation",this.orientation),this.setAttribute("data-state",r?"visible":"hidden"),this.hidden=!(this.forceMount||e.type==="always"||t)}render(){return n.html`<div part="scrollbar"><slot></slot></div>`}};s.styles=n.css`
     :host {
       display: block;
     }
@@ -6,4 +6,4 @@
     :host([hidden]) {
       display: none;
     }
-  `,c([(0,h.property)({type:String,reflect:!0})],l.prototype,"orientation",2),c([(0,h.property)({type:Boolean,attribute:"force-mount"})],l.prototype,"forceMount",2),l=c([(0,v.customElement)("skdx-scroll-area-scrollbar","scroll-area","scrollbar")],l);0&&(module.exports={SkdxScrollAreaScrollbar});
+  `,d([(0,h.property)({type:String,reflect:!0})],s.prototype,"orientation",2),d([(0,h.property)({type:Boolean,attribute:"force-mount"})],s.prototype,"forceMount",2),s=d([(0,u.customElement)("skdx-scroll-area-scrollbar","scroll-area","scrollbar")],s);0&&(module.exports={SkdxScrollAreaScrollbar});

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

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Scrollbar track for one axis. Sets `data-orientation`/`data-state`, hides when
- * non-overflowing. `force-mount` controls visibility, not DOM (always present).
- * Clicking track pages viewport by one client height/width. Must be inside `<skdx-scroll-area>`.
+ * Scrollbar track for one axis, hidden via `hidden` when non-overflowing; clicking the track pages the viewport.
  *
  * @csspart scrollbar - The `<div>` inside the shadow root.
  */
@@ -22,7 +20,7 @@ export declare class SkdxScrollAreaScrollbar extends LitElement {
     protected updated(): void;
     private sync;
     private readonly handlePointerDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Scrollbar track for one axis. Sets `data-orientation`/`data-state`, hides when
- * non-overflowing. `force-mount` controls visibility, not DOM (always present).
- * Clicking track pages viewport by one client height/width. Must be inside `<skdx-scroll-area>`.
+ * Scrollbar track for one axis, hidden via `hidden` when non-overflowing; clicking the track pages the viewport.
  *
  * @csspart scrollbar - The `<div>` inside the shadow root.
  */
@@ -22,7 +20,7 @@ export declare class SkdxScrollAreaScrollbar extends LitElement {
     protected updated(): void;
     private sync;
     private readonly handlePointerDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/scroll-area/ScrollAreaScrollbar.js

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

@@ -1,7 +1,12 @@
-"use strict";var u=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var L=(o,i)=>{for(var t in i)u(o,t,{get:i[t],enumerable:!0})},O=(o,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of x(i))!y.call(o,r)&&r!==t&&u(o,r,{get:()=>i[r],enumerable:!(e=w(i,r))||e.enumerable});return o};var C=o=>O(u({},"__esModule",{value:!0}),o),E=(o,i,t,e)=>{for(var r=e>1?void 0:e?w(i,t):i,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(e?n(i,t,r):n(r))||r);return e&&r&&u(i,t,r),r};var H={};L(H,{SkdxScrollAreaThumb:()=>a});module.exports=C(H);var c=require("lit"),S=require("../internal/define.cjs"),P=require("../internal/direction.cjs");var f=.1,a=class extends c.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],n=r>0?e/r:1,h=Math.min(Math.max(n,f),1),d=r-e,l=d>0?Math.abs(s)/d:0,p=`${h*100}%`,v=`${l*(100-h*100)}%`;this.orientation==="vertical"?Object.assign(this.style,{top:v,height:p,left:"0",right:"0"}):Object.assign(this.style,{insetInlineStart: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 n=this.orientation==="vertical"?r.clientHeight:r.clientWidth,h=this.orientation==="vertical"?e.clientHeight:e.clientWidth,d=this.orientation==="vertical"?e.scrollHeight:e.scrollWidth,l=d-h;if(l<=0)return;let p=Math.min(Math.max(h/d,f),1),v=n*p,M=Math.max(n-v,1),g=((this.orientation==="vertical"?t.clientY:t.clientX)-s.startPointer)/M*l,m=this.orientation==="horizontal"&&(0,P.resolveDirection)(e)==="rtl",z=m?-l:0,k=m?0:l,b=Math.min(Math.max(s.startScroll+g,z),k);this.orientation==="vertical"?e.scrollTop=b:e.scrollLeft=b};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 c.html`<div part="thumb" style="width: 100%; height: 100%;"><slot></slot></div>`}};a.styles=c.css`
+"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var L=(o,i)=>{for(var t in i)u(o,t,{get:i[t],enumerable:!0})},O=(o,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of x(i))!y.call(o,r)&&r!==t&&u(o,r,{get:()=>i[r],enumerable:!(e=E(i,r))||e.enumerable});return o};var C=o=>O(u({},"__esModule",{value:!0}),o),w=(o,i,t,e)=>{for(var r=e>1?void 0:e?E(i,t):i,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(e?n(i,t,r):n(r))||r);return e&&r&&u(i,t,r),r};var R={};L(R,{SkdxScrollAreaThumb:()=>a});module.exports=C(R);var c=require("lit"),S=require("../internal/define.cjs"),P=require("../internal/direction.cjs");var f=.1,a=class extends c.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],n=r>0?e/r:1,h=Math.min(Math.max(n,f),1),d=r-e,l=d>0?Math.abs(s)/d:0,p=`${h*100}%`,v=`${l*(100-h*100)}%`;this.orientation==="vertical"?Object.assign(this.style,{top:v,height:p,left:"0",right:"0"}):Object.assign(this.style,{insetInlineStart: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 n=this.orientation==="vertical"?r.clientHeight:r.clientWidth,h=this.orientation==="vertical"?e.clientHeight:e.clientWidth,d=this.orientation==="vertical"?e.scrollHeight:e.scrollWidth,l=d-h;if(l<=0)return;let p=Math.min(Math.max(h/d,f),1),v=n*p,M=Math.max(n-v,1),g=((this.orientation==="vertical"?t.clientY:t.clientX)-s.startPointer)/M*l,m=this.orientation==="horizontal"&&(0,P.resolveDirection)(e)==="rtl",z=m?-l:0,k=m?0:l,b=Math.min(Math.max(s.startScroll+g,z),k);this.orientation==="vertical"?e.scrollTop=b:e.scrollLeft=b};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,{passive:!0}),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,{passive:!0}),this.resizeObserver?.disconnect(),super.disconnectedCallback()}get orientation(){return this.scrollbarEl?.orientation??"vertical"}updated(){this.setAttribute("data-orientation",this.orientation)}render(){return c.html`<div
+      part="thumb"
+      style="width: 100%; height: 100%;"
+    >
+      <slot></slot>
+    </div>`}};a.styles=c.css`
     :host {
       position: absolute;
       touch-action: none;
       display: block;
     }
-  `,a=E([(0,S.customElement)("skdx-scroll-area-thumb","scroll-area","thumb")],a);0&&(module.exports={SkdxScrollAreaThumb});
+  `,a=w([(0,S.customElement)("skdx-scroll-area-thumb","scroll-area","thumb")],a);0&&(module.exports={SkdxScrollAreaThumb});

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

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Draggable handle inside a `<skdx-scroll-area-scrollbar>`. Sized and
- * positioned to match viewport scroll offset; pointer-capture-based dragging
- * scrolls the viewport proportionally.
+ * Draggable handle inside a `<skdx-scroll-area-scrollbar>`, sized and positioned to match the viewport's scroll offset.
  *
  * @csspart thumb - The `<div>` inside the shadow root.
  */
@@ -13,13 +11,6 @@ export declare class SkdxScrollAreaThumb extends LitElement {
     private resizeObserver?;
     private dragState;
     connectedCallback(): void;
-    /**
-     * Resolve viewport's scroller and start tracking it.
-     *
-     * 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;
     private get orientation();
@@ -27,8 +18,8 @@ export declare class SkdxScrollAreaThumb extends LitElement {
     private readonly handlePointerDown;
     private readonly handlePointerMove;
     private readonly handlePointerUp;
-    protected firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    protected updated(): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Draggable handle inside a `<skdx-scroll-area-scrollbar>`. Sized and
- * positioned to match viewport scroll offset; pointer-capture-based dragging
- * scrolls the viewport proportionally.
+ * Draggable handle inside a `<skdx-scroll-area-scrollbar>`, sized and positioned to match the viewport's scroll offset.
  *
  * @csspart thumb - The `<div>` inside the shadow root.
  */
@@ -13,13 +11,6 @@ export declare class SkdxScrollAreaThumb extends LitElement {
     private resizeObserver?;
     private dragState;
     connectedCallback(): void;
-    /**
-     * Resolve viewport's scroller and start tracking it.
-     *
-     * 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;
     private get orientation();
@@ -27,8 +18,8 @@ export declare class SkdxScrollAreaThumb extends LitElement {
     private readonly handlePointerDown;
     private readonly handlePointerMove;
     private readonly handlePointerUp;
-    protected firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    protected updated(): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/scroll-area/ScrollAreaThumb.js

@@ -1,4 +1,9 @@
-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`
+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,E=Math.max(o-d,1),w=((this.orientation==="vertical"?t.clientY:t.clientX)-i.startPointer)/E*s,v=this.orientation==="horizontal"&&y(e)==="rtl",f=v?-s:0,S=v?0:s,u=Math.min(Math.max(i.startScroll+w,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,{passive:!0}),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,{passive:!0}),this.resizeObserver?.disconnect(),super.disconnectedCallback()}get orientation(){return this.scrollbarEl?.orientation??"vertical"}updated(){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;

package/dist/scroll-area/ScrollAreaViewport.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var E=(l,r)=>{for(var e in r)c(l,e,{get:r[e],enumerable:!0})},y=(l,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of m(r))!w.call(l,o)&&o!==e&&c(l,o,{get:()=>r[o],enumerable:!(t=v(r,o))||t.enumerable});return l};var k=l=>y(c({},"__esModule",{value:!0}),l),b=(l,r,e,t)=>{for(var o=t>1?void 0:t?v(r,e):r,s=l.length-1,a;s>=0;s--)(a=l[s])&&(o=(t?a(r,e,o):a(o))||o);return t&&o&&c(r,e,o),o};var x={};E(x,{SkdxScrollAreaViewport:()=>n});module.exports=k(x);var i=require("lit"),u=require("../internal/aria-label.cjs"),f=require("../internal/define.cjs"),h=require("./ScrollArea.cjs");var d=1;function p(l,r,e){let t=r-e;if(t<=d)return"none";let o=Math.abs(l),s=o>d,a=o<t-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&&(0,h.getScrollAreaInternals)(this.rootEl)?.notifyScrolled()}}connectedCallback(){if(super.connectedCallback(),this.label=(0,u.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 t=this.getRootNode();return e.split(/\s+/).filter(Boolean).map(s=>t.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,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;if(!e||!this.rootEl)return;let t=(0,h.getScrollAreaInternals)(this.rootEl);t&&(t.setScrollbarEnabled("x",e.scrollWidth>e.clientWidth),t.setScrollbarEnabled("y",e.scrollHeight>e.clientHeight),t.reportScrollPosition({x:e.scrollLeft,y:e.scrollTop},{x:p(e.scrollLeft,e.scrollWidth,e.clientWidth),y:p(e.scrollTop,e.scrollHeight,e.clientHeight)}))}render(){return i.html`
       <div
         class="viewport"
         part="viewport"
@@ -23,4 +23,4 @@
       min-width: 100%;
       display: table;
     }
-  `,n=v([(0,u.customElement)("skdx-scroll-area-viewport","scroll-area","viewport")],n);0&&(module.exports={SkdxScrollAreaViewport});
+  `,n=b([(0,f.customElement)("skdx-scroll-area-viewport","scroll-area","viewport")],n);0&&(module.exports={SkdxScrollAreaViewport});

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

@@ -1,7 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-scroll-area-viewport>` — natively-scrollable `overflow: auto` region.
- * `tabindex="0"` for arrow-key scrolling; add `aria-label` / `aria-labelledby` to become `role="region"`.
+ * `<skdx-scroll-area-viewport>` is a natively-scrollable `overflow: auto` region, becoming `role="region"` when named.
  * @example
  * ```html
  * <skdx-scroll-area>
@@ -14,10 +13,8 @@ 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 */
@@ -25,7 +22,7 @@ export declare class SkdxScrollAreaViewport extends LitElement {
     protected firstUpdated(): void;
     private checkOverflow;
     private readonly handleScroll;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,7 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-scroll-area-viewport>` — natively-scrollable `overflow: auto` region.
- * `tabindex="0"` for arrow-key scrolling; add `aria-label` / `aria-labelledby` to become `role="region"`.
+ * `<skdx-scroll-area-viewport>` is a natively-scrollable `overflow: auto` region, becoming `role="region"` when named.
  * @example
  * ```html
  * <skdx-scroll-area>
@@ -14,10 +13,8 @@ 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 */
@@ -25,7 +22,7 @@ export declare class SkdxScrollAreaViewport extends LitElement {
     protected firstUpdated(): void;
     private checkOverflow;
     private readonly handleScroll;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/scroll-area/ScrollAreaViewport.js

@@ -1,4 +1,4 @@
-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`
+var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=(i,l,e,t)=>{for(var r=t>1?void 0:t?p(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&&b(l,e,r),r};import{css as u,html as f,LitElement as m,nothing as d}from"lit";import{takeHostAriaLabel as w}from"../internal/aria-label.js";import{customElement as E}from"../internal/define.js";import{getScrollAreaInternals as h}from"./ScrollArea.js";var a=1;function v(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 m{constructor(){super(...arguments);this.rootEl=null;this.label=null;this.handleScroll=()=>{this.checkOverflow(),this.rootEl&&h(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;if(!e||!this.rootEl)return;let t=h(this.rootEl);t&&(t.setScrollbarEnabled("x",e.scrollWidth>e.clientWidth),t.setScrollbarEnabled("y",e.scrollHeight>e.clientHeight),t.reportScrollPosition({x:e.scrollLeft,y:e.scrollTop},{x:v(e.scrollLeft,e.scrollWidth,e.clientWidth),y:v(e.scrollTop,e.scrollHeight,e.clientHeight)}))}render(){return f`
       <div
         class="viewport"
         part="viewport"
@@ -9,7 +9,7 @@ var v=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=(i,l,e,t
       >
         <div class="content"><slot></slot></div>
       </div>
-    `}};n.styles=p`
+    `}};n.styles=u`
     :host {
       display: block;
       overflow: hidden;
@@ -23,4 +23,4 @@ var v=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=(i,l,e,t
       min-width: 100%;
       display: table;
     }
-  `,n=c([m("skdx-scroll-area-viewport","scroll-area","viewport")],n);export{n as SkdxScrollAreaViewport};
+  `,n=c([E("skdx-scroll-area-viewport","scroll-area","viewport")],n);export{n as SkdxScrollAreaViewport};

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

@@ -1,9 +1,6 @@
 /**
  * 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';

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

@@ -1,9 +1,6 @@
 /**
  * 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';