@skdx/web-components 0.28.0 → 0.29.0

package/dist/angle-slider/AngleSlider.d.cts

@@ -1,8 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
-/**
- * Tick data that `marks` derives into `<skdx-angle-slider-mark>` elements.
- * Named separately to avoid colliding with the part class name.
- */
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+/** Tick data that `marks` derives into `<skdx-angle-slider-mark>` elements. */
 export interface AngleSliderMarkData {
     /** The angle in degrees this tick occupies. */
     value: number;
@@ -10,11 +7,7 @@ export interface AngleSliderMarkData {
     label?: string;
 }
 /**
- * Detail of a `value-change` event. `reason` distinguishes consumers that
- * need to save only on `value-commit` (drag end) from those that save per
- * interaction: for a drag, `reason` is `'pointer'` per frame and
- * `value-commit` fires once; for a key, `reason` is `'keyboard'` and no
- * `value-commit` fires.
+ * Detail of a `value-change` event; `reason` tells drag frames (`'pointer'`) apart from a single `value-commit`.
  */
 export interface SkdxAngleSliderValueChangeDetail {
     /** The new angle in degrees, folded into `[0, 360)`. */
@@ -26,27 +19,15 @@ export interface SkdxAngleSliderValueChangeDetail {
 }
 /** @internal Folds any number of degrees into `[0, 360)`, so 450 and -270 both read as 90. */
 export declare function normalizeAngle(angle: number): number;
-/**
- * @internal All marks in the DOM, normalized, deduped, sorted. No registry
- * plumbing needed — dynamic marks just work.
- */
+/** @internal All marks in the DOM, normalized, deduped, and sorted. */
 export declare function readMarks(root: HTMLElement): number[];
-/**
- * @internal The mark closest to `angle` measured *around the circle*, so 350°
- * lands on a 0° mark rather than travelling the long way to a 340° one.
- */
+/** @internal The mark closest to `angle`, measured around the circle rather than numerically. */
 export declare function nearestMark(marks: number[], angle: number): number;
-declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * Dial slider for directional values (gradient angle, bearing, rotation).
- * Value in `[0, 360)` degrees: 0° is 12 o'clock, increasing clockwise.
- * Publishes `--skdx-angle-slider-angle` for CSS rotation; arrows step by
- * `step`, Shift+arrow by 10°, PageUp/PageDown by 45°; arrows wrap and are
- * not mirrored under `dir="rtl"`. Parts synced from root state. Form-associated
- * with `ElementInternals`. Requires accessible name via `aria-label` or
- * `aria-labelledby`.
+ * Dial slider for directional values (gradient angle, bearing, rotation), with a value in `[0, 360)` degrees where 0° is 12 o'clock.
  *
  * @example
  * ```html
@@ -59,70 +40,56 @@ declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) =>
 export declare class SkdxAngleSlider extends SkdxAngleSlider_base {
     static styles: import("lit").CSSResult;
     /**
-     * Current angle in degrees. The property is the single source of truth, like
-     * a native `<input>`'s `value`: a consumer that wants controlled behaviour
-     * listens for `value-change` and writes it back. Values outside `[0, 360)`
-     * are folded in on the next change, so handing back 450 still shows 90.
+     * Current angle in degrees, folded into `[0, 360)` on the next change.
      * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     * @min 0
+     * @max 360
      */
     value: number;
     /**
-     * Initial angle in degrees, for uncontrolled usage. Applied once, on connect,
-     * and only if the `value` attribute wasn't already set.
+     * Initial angle in degrees for uncontrolled usage, applied once on connect if `value` wasn't already set.
      * @default 0 — the dial starts pointing straight up.
+     * @min 0
+     * @max 360
      */
     defaultValue: number;
     /**
-     * Rounding increment in degrees for both pointer and keyboard. Shift+arrow
-     * always moves 10° and PageUp/PageDown always 45°, regardless of this value.
-     * @default 1 — every whole degree reachable. `0` makes pointer continuous;
-     * keyboard always snaps to 1° so every angle stays reachable.
+     * Rounding increment in degrees for both pointer and keyboard; Shift+arrow and PageUp/PageDown ignore it.
+     * @default 1 — every degree reachable; `0` makes pointer continuous, keyboard still snaps to 1°.
      */
     step: number;
     /**
-     * Blocks pointer and keyboard interaction and takes the host out of the tab
-     * order (it stays programmatically focusable, at `tabindex="-1"`, so focus
-     * already inside is not thrown to the top of the document).
+     * Blocks pointer and keyboard interaction and takes the host out of the tab order, though it stays programmatically focusable.
      * @default false — the dial is interactive and in the tab order.
      */
     disabled: boolean;
     /**
-     * Displays the current angle but blocks changes, while staying focusable and
-     * in the tab order — unlike `disabled`, a read-only dial can still be reached
-     * and read by a keyboard user.
+     * Displays the current angle but blocks changes, while staying focusable and in the tab order.
      * @default false — changes are accepted.
      */
     readOnly: boolean;
     /**
-     * Snap value to rendered mark angles (no registration needed — marks
-     * discovered from DOM at interaction time). Arrow keys move one mark,
-     * Shift+arrow and PageUp/PageDown move three, Home/End jump endpoints.
-     * Dragging snaps to the nearest mark measured the short way around.
+     * Snaps the value to rendered mark angles instead of the step grid, discovered from the DOM at interaction time.
      * @default false — every angle on the step grid stays reachable.
      */
     restrictToMarks: boolean;
     /**
-     * Format angle for screen reader announcement via `aria-valuetext`. Use to
-     * localise or reword as compass bearing, clock position, etc. Empty string
-     * means no override. Property-only.
+     * Formats the angle for the `aria-valuetext` screen-reader announcement, such as a compass bearing.
      * @default (angle) => `${angle}°`
      */
     formatValue?: (angle: number) => string;
     /**
-     * `FormData` entry key when submitted inside a `<form>`, published via
-     * `ElementInternals` (no extra DOM node, value travels with the element).
+     * `FormData` entry key when submitted inside a `<form>`, published via `ElementInternals`.
      * @default undefined
      */
     name?: string;
     /**
-     * Form owner this dial submits into (lets it live outside the form element).
-     * Browser's form-owner algorithm honours the `form` attribute directly.
+     * Form owner this dial submits into, letting it live outside the form element.
      * @default undefined — submits into nearest ancestor form
      */
     formId?: string;
     /**
      * Ticks to derive into a `<skdx-angle-slider-marks>` container and marks.
-     * Property-only (arrays have no attribute form).
      * @default undefined — no marks derived; hand-composed children stand
      */
     marks?: readonly AngleSliderMarkData[];
@@ -132,28 +99,18 @@ export declare class SkdxAngleSlider extends SkdxAngleSlider_base {
     connectedCallback(): void;
     private readonly fillAnatomy;
     /**
-     * Restore angle from `default-value` attribute, announcing it as
-     * `'programmatic'` (application, not user). Silent when already at target.
+     * Restores the angle from `default-value`, announcing it as `'programmatic'`.
      */
     formResetCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Last reportable angle. `aria-valuemax` announces 360, which folds to 0
-     * and is never actually reported.
-     */
     private get maxReachable();
     private syncHostAttributes;
-    /** The marks currently in the DOM, or `[]` when the value isn't restricted to them. */
     private activeMarks;
-    /**
-     * Fold into `[0, 360)`, snap to nearest mark or step grid, dispatch
-     * `value-change`. Swallow if landing on angle already reported (interaction
-     * handled, nothing emitted).
-     */
     private commit;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    private commitHomeEnd;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSlider.d.ts

@@ -1,8 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
-/**
- * Tick data that `marks` derives into `<skdx-angle-slider-mark>` elements.
- * Named separately to avoid colliding with the part class name.
- */
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+/** Tick data that `marks` derives into `<skdx-angle-slider-mark>` elements. */
 export interface AngleSliderMarkData {
     /** The angle in degrees this tick occupies. */
     value: number;
@@ -10,11 +7,7 @@ export interface AngleSliderMarkData {
     label?: string;
 }
 /**
- * Detail of a `value-change` event. `reason` distinguishes consumers that
- * need to save only on `value-commit` (drag end) from those that save per
- * interaction: for a drag, `reason` is `'pointer'` per frame and
- * `value-commit` fires once; for a key, `reason` is `'keyboard'` and no
- * `value-commit` fires.
+ * Detail of a `value-change` event; `reason` tells drag frames (`'pointer'`) apart from a single `value-commit`.
  */
 export interface SkdxAngleSliderValueChangeDetail {
     /** The new angle in degrees, folded into `[0, 360)`. */
@@ -26,27 +19,15 @@ export interface SkdxAngleSliderValueChangeDetail {
 }
 /** @internal Folds any number of degrees into `[0, 360)`, so 450 and -270 both read as 90. */
 export declare function normalizeAngle(angle: number): number;
-/**
- * @internal All marks in the DOM, normalized, deduped, sorted. No registry
- * plumbing needed — dynamic marks just work.
- */
+/** @internal All marks in the DOM, normalized, deduped, and sorted. */
 export declare function readMarks(root: HTMLElement): number[];
-/**
- * @internal The mark closest to `angle` measured *around the circle*, so 350°
- * lands on a 0° mark rather than travelling the long way to a 340° one.
- */
+/** @internal The mark closest to `angle`, measured around the circle rather than numerically. */
 export declare function nearestMark(marks: number[], angle: number): number;
-declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * Dial slider for directional values (gradient angle, bearing, rotation).
- * Value in `[0, 360)` degrees: 0° is 12 o'clock, increasing clockwise.
- * Publishes `--skdx-angle-slider-angle` for CSS rotation; arrows step by
- * `step`, Shift+arrow by 10°, PageUp/PageDown by 45°; arrows wrap and are
- * not mirrored under `dir="rtl"`. Parts synced from root state. Form-associated
- * with `ElementInternals`. Requires accessible name via `aria-label` or
- * `aria-labelledby`.
+ * Dial slider for directional values (gradient angle, bearing, rotation), with a value in `[0, 360)` degrees where 0° is 12 o'clock.
  *
  * @example
  * ```html
@@ -59,70 +40,56 @@ declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) =>
 export declare class SkdxAngleSlider extends SkdxAngleSlider_base {
     static styles: import("lit").CSSResult;
     /**
-     * Current angle in degrees. The property is the single source of truth, like
-     * a native `<input>`'s `value`: a consumer that wants controlled behaviour
-     * listens for `value-change` and writes it back. Values outside `[0, 360)`
-     * are folded in on the next change, so handing back 450 still shows 90.
+     * Current angle in degrees, folded into `[0, 360)` on the next change.
      * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     * @min 0
+     * @max 360
      */
     value: number;
     /**
-     * Initial angle in degrees, for uncontrolled usage. Applied once, on connect,
-     * and only if the `value` attribute wasn't already set.
+     * Initial angle in degrees for uncontrolled usage, applied once on connect if `value` wasn't already set.
      * @default 0 — the dial starts pointing straight up.
+     * @min 0
+     * @max 360
      */
     defaultValue: number;
     /**
-     * Rounding increment in degrees for both pointer and keyboard. Shift+arrow
-     * always moves 10° and PageUp/PageDown always 45°, regardless of this value.
-     * @default 1 — every whole degree reachable. `0` makes pointer continuous;
-     * keyboard always snaps to 1° so every angle stays reachable.
+     * Rounding increment in degrees for both pointer and keyboard; Shift+arrow and PageUp/PageDown ignore it.
+     * @default 1 — every degree reachable; `0` makes pointer continuous, keyboard still snaps to 1°.
      */
     step: number;
     /**
-     * Blocks pointer and keyboard interaction and takes the host out of the tab
-     * order (it stays programmatically focusable, at `tabindex="-1"`, so focus
-     * already inside is not thrown to the top of the document).
+     * Blocks pointer and keyboard interaction and takes the host out of the tab order, though it stays programmatically focusable.
      * @default false — the dial is interactive and in the tab order.
      */
     disabled: boolean;
     /**
-     * Displays the current angle but blocks changes, while staying focusable and
-     * in the tab order — unlike `disabled`, a read-only dial can still be reached
-     * and read by a keyboard user.
+     * Displays the current angle but blocks changes, while staying focusable and in the tab order.
      * @default false — changes are accepted.
      */
     readOnly: boolean;
     /**
-     * Snap value to rendered mark angles (no registration needed — marks
-     * discovered from DOM at interaction time). Arrow keys move one mark,
-     * Shift+arrow and PageUp/PageDown move three, Home/End jump endpoints.
-     * Dragging snaps to the nearest mark measured the short way around.
+     * Snaps the value to rendered mark angles instead of the step grid, discovered from the DOM at interaction time.
      * @default false — every angle on the step grid stays reachable.
      */
     restrictToMarks: boolean;
     /**
-     * Format angle for screen reader announcement via `aria-valuetext`. Use to
-     * localise or reword as compass bearing, clock position, etc. Empty string
-     * means no override. Property-only.
+     * Formats the angle for the `aria-valuetext` screen-reader announcement, such as a compass bearing.
      * @default (angle) => `${angle}°`
      */
     formatValue?: (angle: number) => string;
     /**
-     * `FormData` entry key when submitted inside a `<form>`, published via
-     * `ElementInternals` (no extra DOM node, value travels with the element).
+     * `FormData` entry key when submitted inside a `<form>`, published via `ElementInternals`.
      * @default undefined
      */
     name?: string;
     /**
-     * Form owner this dial submits into (lets it live outside the form element).
-     * Browser's form-owner algorithm honours the `form` attribute directly.
+     * Form owner this dial submits into, letting it live outside the form element.
      * @default undefined — submits into nearest ancestor form
      */
     formId?: string;
     /**
      * Ticks to derive into a `<skdx-angle-slider-marks>` container and marks.
-     * Property-only (arrays have no attribute form).
      * @default undefined — no marks derived; hand-composed children stand
      */
     marks?: readonly AngleSliderMarkData[];
@@ -132,28 +99,18 @@ export declare class SkdxAngleSlider extends SkdxAngleSlider_base {
     connectedCallback(): void;
     private readonly fillAnatomy;
     /**
-     * Restore angle from `default-value` attribute, announcing it as
-     * `'programmatic'` (application, not user). Silent when already at target.
+     * Restores the angle from `default-value`, announcing it as `'programmatic'`.
      */
     formResetCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Last reportable angle. `aria-valuemax` announces 360, which folds to 0
-     * and is never actually reported.
-     */
     private get maxReachable();
     private syncHostAttributes;
-    /** The marks currently in the DOM, or `[]` when the value isn't restricted to them. */
     private activeMarks;
-    /**
-     * Fold into `[0, 360)`, snap to nearest mark or step grid, dispatch
-     * `value-change`. Swallow if landing on angle already reported (interaction
-     * handled, nothing emitted).
-     */
     private commit;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    private commitHomeEnd;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSlider.js

@@ -1,7 +1,7 @@
-var g=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(a,s,t,r)=>{for(var e=r>1?void 0:r?f(s,t):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(e=(r?o(s,t,e):o(e))||e);return r&&e&&g(s,t,e),e};import{css as p,html as v,LitElement as y}from"lit";import{property as u,state as A}from"lit/decorators.js";import{hasAuthoredParts as k}from"../internal/authored.js";import{customElement as E}from"../internal/define.js";import{FormAssociated as M}from"../internal/form-associated.js";import{trackPointerAngle as P}from"../internal/pointer-angle.js";import{ANGLE_SLIDER_ANATOMY_GENERATED as w,fillAngleSliderAnatomy as T}from"./AngleSliderAnatomy.js";var C="[data-skdx-angle-slider-mark]",D="skdx-angle-slider-thumb, skdx-angle-slider-marks, skdx-angle-slider-mark",R=10,V=45,x=3,L={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:1,PageDown:-1};function h(a){return(a%360+360)%360}function K(a,s){return s<=0?a:Math.round(Math.round(a/s)*s*1e6)/1e6}function N(a){let s=Array.from(a.querySelectorAll(C),t=>Number(t.getAttribute("data-value"))).filter(t=>Number.isFinite(t));return[...new Set(s.map(h))].sort((t,r)=>t-r)}function c(a,s){let t=a[0],r=1/0;for(let e of a){let n=Math.abs(e-s),o=Math.min(n,360-n);o<r&&(r=o,t=e)}return t}var i=class extends M(y){constructor(){super(...arguments);this.value=0;this.defaultValue=0;this.step=1;this.disabled=!1;this.readOnly=!1;this.restrictToMarks=!1;this.dragging=!1;this.fillAnatomy=()=>{k(this,w)||T(this)};this.handleKeydown=t=>{if(this.disabled||this.readOnly)return;let r=t.key,e=this.activeMarks();if(r==="Home"||r==="End"){t.preventDefault();let m=this.step>0?Math.floor(359/this.step)*this.step:359;r==="Home"?this.commit(e.length?e[0]:0,"keyboard"):this.commit(e.length?e[e.length-1]:m,"keyboard");return}let n=L[r];if(n===void 0)return;t.preventDefault();let o=r==="PageUp"||r==="PageDown";if(e.length){let m=e.indexOf(c(e,this.value)),b=n*(o||t.shiftKey?x:1);this.commit(e[((m+b)%e.length+e.length)%e.length],"keyboard");return}let d=this.step>0?this.step:1;this.commit(this.value+n*(o?V:t.shiftKey?R:d),"keyboard")}}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")||(this.value=this.defaultValue),this.addEventListener("keydown",this.handleKeydown),this.disposePointer=P(this,{step:()=>this.restrictToMarks?0:this.step,enabled:()=>!this.disabled&&!this.readOnly,onAngleChange:t=>this.commit(t,"pointer"),onAngleChangeEnd:()=>this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0})),onDraggingChange:t=>{this.dragging=t}}),this.syncHostAttributes(),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value!==h(this.defaultValue)&&this.commit(this.defaultValue,"programmatic")}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.disposePointer?.(),this.disposePointer=void 0,this.dragging=!1,this.removeAttribute("data-dragging"),super.disconnectedCallback()}updated(t){this.syncHostAttributes(),this.setFormValue(this.name?String(this.value):null),t.has("marks")&&this.fillAnatomy();for(let r of Array.from(this.querySelectorAll(D)))r.syncFromRoot?.()}get maxReachable(){return this.step>0?Math.floor(359/this.step)*this.step:359}syncHostAttributes(){this.setAttribute("role","slider"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.maxReachable)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-valuetext",this.formatValue?.(this.value)||`${this.value}\xB0`),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("data-value",String(this.value)),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.toggleAttribute("data-dragging",this.dragging),this.style.setProperty("--skdx-angle-slider-angle",`${this.value}deg`)}activeMarks(){return this.restrictToMarks?N(this):[]}commit(t,r){let e=this.activeMarks(),n=h(t),o=e.length?c(e,n):h(K(n,this.step));if(o===this.value)return;let d=this.value;this.value=o,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:o,previousValue:d,reason:r},bubbles:!0,composed:!0}))}render(){return v`<slot @slotchange=${this.fillAnatomy}></slot>`}};i.styles=p`
+var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var l=(a,s,t,e)=>{for(var r=e>1?void 0:e?g(s,t):s,o=a.length-1,n;o>=0;o--)(n=a[o])&&(r=(e?n(s,t,r):n(r))||r);return e&&r&&p(s,t,r),r};import{css as v,html as y,LitElement as A}from"lit";import{property as u,state as k}from"lit/decorators.js";import{hasAuthoredParts as E}from"../internal/authored.js";import{customElement as M}from"../internal/define.js";import{emit as m}from"../internal/events.js";import{FormAssociated as P}from"../internal/form-associated.js";import{trackPointerAngle as T}from"../internal/pointer-angle.js";import{ANGLE_SLIDER_ANATOMY_GENERATED as R,fillAngleSliderAnatomy as w}from"./AngleSliderAnatomy.js";var D="[data-skdx-angle-slider-mark]",V="skdx-angle-slider-thumb, skdx-angle-slider-marks, skdx-angle-slider-mark",C=10,H=45,L=3,x={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:1,PageDown:-1};function d(a){return(a%360+360)%360}function K(a,s){return s<=0?a:Math.round(Math.round(a/s)*s*1e6)/1e6}function N(a){let s=Array.from(a.querySelectorAll(D),t=>Number(t.getAttribute("data-value"))).filter(t=>Number.isFinite(t));return[...new Set(s.map(d))].sort((t,e)=>t-e)}function c(a,s){let t=a[0],e=1/0;for(let r of a){let o=Math.abs(r-s),n=Math.min(o,360-o);n<e&&(e=n,t=r)}return t}var i=class extends P(A){constructor(){super(...arguments);this.value=0;this.defaultValue=0;this.step=1;this.disabled=!1;this.readOnly=!1;this.restrictToMarks=!1;this.dragging=!1;this.fillAnatomy=()=>{E(this,R)||w(this)};this.handleKeydown=t=>{if(this.disabled||this.readOnly)return;let e=t.key,r=this.activeMarks();if(e==="Home"||e==="End"){t.preventDefault(),this.commitHomeEnd(e,r);return}let o=x[e];if(o===void 0)return;t.preventDefault();let n=e==="PageUp"||e==="PageDown";if(r.length){let f=r.indexOf(c(r,this.value)),b=o*(n||t.shiftKey?L:1);this.commit(r[((f+b)%r.length+r.length)%r.length],"keyboard");return}let h=this.step>0?this.step:1;t.shiftKey&&(h=C),n&&(h=H),this.commit(this.value+o*h,"keyboard")}}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")||(this.value=this.defaultValue),this.addEventListener("keydown",this.handleKeydown),this.disposePointer=T(this,{step:()=>this.restrictToMarks?0:this.step,enabled:()=>!this.disabled&&!this.readOnly,onAngleChange:t=>this.commit(t,"pointer"),onAngleChangeEnd:()=>m(this,"value-commit",this.value),onDraggingChange:t=>{this.dragging=t}}),this.syncHostAttributes(),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value!==d(this.defaultValue)&&this.commit(this.defaultValue,"programmatic")}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.disposePointer?.(),this.disposePointer=void 0,this.dragging=!1,this.removeAttribute("data-dragging"),super.disconnectedCallback()}updated(t){this.syncHostAttributes(),this.setFormValue(this.name?String(this.value):null),t.has("marks")&&this.fillAnatomy();for(let e of Array.from(this.querySelectorAll(V)))e.syncFromRoot?.()}get maxReachable(){return this.step>0?Math.floor(359/this.step)*this.step:359}syncHostAttributes(){this.setAttribute("role","slider"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.maxReachable)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-valuetext",this.formatValue?.(this.value)||`${this.value}\xB0`),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("data-value",String(this.value)),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.toggleAttribute("data-dragging",this.dragging),this.style.setProperty("--skdx-angle-slider-angle",`${this.value}deg`)}activeMarks(){return this.restrictToMarks?N(this):[]}commit(t,e){let r=this.activeMarks(),o=d(t),n=r.length?c(r,o):d(K(o,this.step));if(n===this.value)return;let h=this.value;this.value=n,m(this,"value-change",{value:n,previousValue:h,reason:e})}commitHomeEnd(t,e){let r=this.step>0?Math.floor(359/this.step)*this.step:359;t==="Home"?this.commit(e.length?e[0]:0,"keyboard"):this.commit(e.length?e[e.length-1]:r,"keyboard")}render(){return y`<slot @slotchange=${this.fillAnatomy}></slot>`}};i.styles=v`
     :host {
       display: block;
       position: relative;
       touch-action: none;
     }
-  `,l([u({type:Number,reflect:!0})],i.prototype,"value",2),l([u({type:Number,attribute:"default-value"})],i.prototype,"defaultValue",2),l([u({type:Number,reflect:!0})],i.prototype,"step",2),l([u({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([u({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),l([u({type:Boolean,reflect:!0,attribute:"restrict-to-marks"})],i.prototype,"restrictToMarks",2),l([u({attribute:!1})],i.prototype,"formatValue",2),l([u({type:String,reflect:!0})],i.prototype,"name",2),l([u({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),l([u({attribute:!1})],i.prototype,"marks",2),l([A()],i.prototype,"dragging",2),i=l([E("skdx-angle-slider","angle-slider","root")],i);export{i as SkdxAngleSlider,c as nearestMark,h as normalizeAngle,N as readMarks};
+  `,l([u({type:Number,reflect:!0})],i.prototype,"value",2),l([u({type:Number,attribute:"default-value"})],i.prototype,"defaultValue",2),l([u({type:Number,reflect:!0})],i.prototype,"step",2),l([u({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([u({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),l([u({type:Boolean,reflect:!0,attribute:"restrict-to-marks"})],i.prototype,"restrictToMarks",2),l([u({attribute:!1})],i.prototype,"formatValue",2),l([u({type:String,reflect:!0})],i.prototype,"name",2),l([u({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),l([u({attribute:!1})],i.prototype,"marks",2),l([k()],i.prototype,"dragging",2),i=l([M("skdx-angle-slider","angle-slider","root")],i);export{i as SkdxAngleSlider,c as nearestMark,d as normalizeAngle,N as readMarks};

package/dist/angle-slider/AngleSliderAnatomy.cjs

@@ -1,8 +1,8 @@
 "use strict";var s=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var k=(l,e)=>{for(var a in e)s(l,a,{get:e[a],enumerable:!0})},x=(l,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!g.call(l,r)&&r!==a&&s(l,r,{get:()=>e[r],enumerable:!(i=t(e,r))||i.enumerable});return l};var p=l=>x(s({},"__esModule",{value:!0}),l);var S={};k(S,{ANGLE_SLIDER_ANATOMY_GENERATED:()=>A,fillAngleSliderAnatomy:()=>o});module.exports=p(S);var d=require("lit"),n=require("lit/directives/repeat.js"),f=require("./AngleSliderMark.cjs"),h=require("./AngleSliderMarks.cjs"),E=require("./AngleSliderThumb.cjs"),A="data-skdx-angle-slider-generated";function o(l){(0,d.render)(d.html`
-      <skdx-angle-slider-thumb data-skdx-angle-slider-generated></skdx-angle-slider-thumb>
       ${l.marks&&l.marks.length>0?d.html`<skdx-angle-slider-marks data-skdx-angle-slider-generated>
               ${(0,n.repeat)(l.marks,e=>e.value,e=>d.html`<skdx-angle-slider-mark value=${e.value}
                     >${e.label??""}</skdx-angle-slider-mark
                   >`)}
             </skdx-angle-slider-marks>`:""}
+      <skdx-angle-slider-thumb data-skdx-angle-slider-generated></skdx-angle-slider-thumb>
     `,l,{host:l})}0&&(module.exports={ANGLE_SLIDER_ANATOMY_GENERATED,fillAngleSliderAnatomy});

package/dist/angle-slider/AngleSliderAnatomy.d.cts

@@ -3,14 +3,10 @@ import './AngleSliderMark.cjs';
 import './AngleSliderMarks.cjs';
 import './AngleSliderThumb.cjs';
 /**
- * @internal Marks a direct child of `<skdx-angle-slider>` this module
- * generated. Written literally in the template below — Lit binds attribute
- * *values*, not attribute names, so the constant cannot be interpolated there.
+ * @internal Marks a direct child this module generated; written literally below since Lit can't interpolate attribute names.
  */
 export declare const ANGLE_SLIDER_ANATOMY_GENERATED = "data-skdx-angle-slider-generated";
 /**
- * Builds the canonical anatomy: Thumb and optional Marks container.
- * Only called by `<skdx-angle-slider>` when no consumer-authored composition exists.
- * @internal
+ * @internal Builds the canonical anatomy: Thumb and an optional Marks container.
  */
 export declare function fillAngleSliderAnatomy(root: SkdxAngleSlider): void;

package/dist/angle-slider/AngleSliderAnatomy.d.ts

@@ -3,14 +3,10 @@ import './AngleSliderMark.js';
 import './AngleSliderMarks.js';
 import './AngleSliderThumb.js';
 /**
- * @internal Marks a direct child of `<skdx-angle-slider>` this module
- * generated. Written literally in the template below — Lit binds attribute
- * *values*, not attribute names, so the constant cannot be interpolated there.
+ * @internal Marks a direct child this module generated; written literally below since Lit can't interpolate attribute names.
  */
 export declare const ANGLE_SLIDER_ANATOMY_GENERATED = "data-skdx-angle-slider-generated";
 /**
- * Builds the canonical anatomy: Thumb and optional Marks container.
- * Only called by `<skdx-angle-slider>` when no consumer-authored composition exists.
- * @internal
+ * @internal Builds the canonical anatomy: Thumb and an optional Marks container.
  */
 export declare function fillAngleSliderAnatomy(root: SkdxAngleSlider): void;

package/dist/angle-slider/AngleSliderAnatomy.js

@@ -1,8 +1,8 @@
 import{html as d,render as r}from"lit";import{repeat as a}from"lit/directives/repeat.js";import"./AngleSliderMark.js";import"./AngleSliderMarks.js";import"./AngleSliderThumb.js";var g="data-skdx-angle-slider-generated";function k(e){r(d`
-      <skdx-angle-slider-thumb data-skdx-angle-slider-generated></skdx-angle-slider-thumb>
       ${e.marks&&e.marks.length>0?d`<skdx-angle-slider-marks data-skdx-angle-slider-generated>
               ${a(e.marks,l=>l.value,l=>d`<skdx-angle-slider-mark value=${l.value}
                     >${l.label??""}</skdx-angle-slider-mark
                   >`)}
             </skdx-angle-slider-marks>`:""}
+      <skdx-angle-slider-thumb data-skdx-angle-slider-generated></skdx-angle-slider-thumb>
     `,e,{host:e})}export{g as ANGLE_SLIDER_ANATOMY_GENERATED,k as fillAngleSliderAnatomy};

package/dist/angle-slider/AngleSliderMark.cjs

@@ -1,5 +1,5 @@
-"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var s in t)a(r,s,{get:t[s],enumerable:!0})},k=(r,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!b.call(r,e)&&e!==s&&a(r,e,{get:()=>t[e],enumerable:!(o=c(t,e))||o.enumerable});return r};var f=r=>k(a({},"__esModule",{value:!0}),r),m=(r,t,s,o)=>{for(var e=o>1?void 0:o?c(t,s):t,d=r.length-1,n;d>=0;d--)(n=r[d])&&(e=(o?n(t,s,e):n(e))||e);return o&&e&&a(t,s,e),e};var x={};y(x,{SkdxAngleSliderMark:()=>i});module.exports=f(x);var l=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs"),p=require("../internal/styles.cjs"),g=require("./AngleSlider.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.value=0;this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-mark> must be used inside <skdx-angle-slider>.");this.setAttribute("data-skdx-angle-slider-mark",""),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}updated(){this.syncFromRoot()}syncFromRoot(){let s=(0,g.normalizeAngle)(this.value);this.setAttribute("data-value",String(s)),this.setAttribute("data-state",this.root?.value===s?"active":"inactive"),this.toggleAttribute("data-disabled",this.root?.disabled??!1),this.toggleAttribute("data-readonly",this.root?.readOnly??!1),this.style.setProperty("--skdx-angle-slider-mark-angle",`${s}deg`)}render(){return l.html`<slot></slot>`}};i.styles=[p.hiddenHostStyles,l.css`
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(r,e)=>{for(var s in e)a(r,s,{get:e[s],enumerable:!0})},k=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!b.call(r,t)&&t!==s&&a(r,t,{get:()=>e[t],enumerable:!(o=c(e,t))||o.enumerable});return r};var f=r=>k(a({},"__esModule",{value:!0}),r),m=(r,e,s,o)=>{for(var t=o>1?void 0:o?c(e,s):e,d=r.length-1,n;d>=0;d--)(n=r[d])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&a(e,s,t),t};var x={};y(x,{SkdxAngleSliderMark:()=>l});module.exports=f(x);var i=require("lit"),u=require("lit/decorators.js"),p=require("../internal/define.cjs"),h=require("../internal/styles.cjs"),g=require("./AngleSlider.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.value=0;this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-mark> must be used inside <skdx-angle-slider>.");this.setAttribute("data-skdx-angle-slider-mark",""),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}updated(){this.syncFromRoot()}syncFromRoot(){let s=(0,g.normalizeAngle)(this.value);this.setAttribute("data-value",String(s)),this.setAttribute("data-state",this.root?.value===s?"active":"inactive"),this.toggleAttribute("data-disabled",this.root?.disabled??!1),this.toggleAttribute("data-readonly",this.root?.readOnly??!1),this.style.setProperty("--skdx-angle-slider-mark-angle",`${s}deg`)}render(){return i.html`<slot></slot>`}};l.styles=[h.hiddenHostStyles,i.css`
       :host {
         display: block;
       }
-    `],m([(0,h.property)({type:Number})],i.prototype,"value",2),i=m([(0,u.customElement)("skdx-angle-slider-mark","angle-slider","mark")],i);0&&(module.exports={SkdxAngleSliderMark});
+    `],m([(0,u.property)({type:Number})],l.prototype,"value",2),l=m([(0,p.customElement)("skdx-angle-slider-mark","angle-slider","mark")],l);0&&(module.exports={SkdxAngleSliderMark});

package/dist/angle-slider/AngleSliderMark.d.cts

@@ -1,23 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-angle-slider-mark>` — one tick on an `<skdx-angle-slider>`'s dial,
- * sitting at `value` degrees.
- *
- * Like the thumb, it ships no positioning: it publishes
- * `--skdx-angle-slider-mark-angle` (e.g. `90deg`) so a single CSS rule places
- * every tick around the ring.
- *
- * ```css
- * skdx-angle-slider-mark {
- *   transform: rotate(var(--skdx-angle-slider-mark-angle)) translateY(-70px);
- * }
- * ```
- *
- * It also carries `data-skdx-angle-slider-mark` and `data-value`, which is how
- * the root discovers the mark set when `restrict-to-marks` is on — found by
- * attribute at interaction time, so a mark added or removed later needs no
- * registration. Exposes `data-state="active" | "inactive"` (active when the
- * slider's value sits on this tick) plus `data-disabled` / `data-readonly`.
+ * `<skdx-angle-slider-mark>` is one tick on an `<skdx-angle-slider>`'s dial, publishing `--skdx-angle-slider-mark-angle` for positioning.
  *
  * @example
  * ```html
@@ -45,7 +28,7 @@ export declare class SkdxAngleSliderMark extends LitElement {
     protected updated(): void;
     /** @internal Sync this mark's angle and state. */
     syncFromRoot(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSliderMark.d.ts

@@ -1,23 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-angle-slider-mark>` — one tick on an `<skdx-angle-slider>`'s dial,
- * sitting at `value` degrees.
- *
- * Like the thumb, it ships no positioning: it publishes
- * `--skdx-angle-slider-mark-angle` (e.g. `90deg`) so a single CSS rule places
- * every tick around the ring.
- *
- * ```css
- * skdx-angle-slider-mark {
- *   transform: rotate(var(--skdx-angle-slider-mark-angle)) translateY(-70px);
- * }
- * ```
- *
- * It also carries `data-skdx-angle-slider-mark` and `data-value`, which is how
- * the root discovers the mark set when `restrict-to-marks` is on — found by
- * attribute at interaction time, so a mark added or removed later needs no
- * registration. Exposes `data-state="active" | "inactive"` (active when the
- * slider's value sits on this tick) plus `data-disabled` / `data-readonly`.
+ * `<skdx-angle-slider-mark>` is one tick on an `<skdx-angle-slider>`'s dial, publishing `--skdx-angle-slider-mark-angle` for positioning.
  *
  * @example
  * ```html
@@ -45,7 +28,7 @@ export declare class SkdxAngleSliderMark extends LitElement {
     protected updated(): void;
     /** @internal Sync this mark's angle and state. */
     syncFromRoot(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSliderMark.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(i,r,t,o)=>{for(var e=o>1?void 0:o?m(r,t):r,l=i.length-1,a;l>=0;l--)(a=i[l])&&(e=(o?a(r,t,e):a(e))||e);return o&&e&&n(r,t,e),e};import{css as c,html as h,LitElement as u}from"lit";import{property as p}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{normalizeAngle as b}from"./AngleSlider.js";var s=class extends u{constructor(){super(...arguments);this.value=0;this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-mark> must be used inside <skdx-angle-slider>.");this.setAttribute("data-skdx-angle-slider-mark",""),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}updated(){this.syncFromRoot()}syncFromRoot(){let t=b(this.value);this.setAttribute("data-value",String(t)),this.setAttribute("data-state",this.root?.value===t?"active":"inactive"),this.toggleAttribute("data-disabled",this.root?.disabled??!1),this.toggleAttribute("data-readonly",this.root?.readOnly??!1),this.style.setProperty("--skdx-angle-slider-mark-angle",`${t}deg`)}render(){return h`<slot></slot>`}};s.styles=[v,c`
+var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(l,r,e,o)=>{for(var t=o>1?void 0:o?m(r,e):r,i=l.length-1,a;i>=0;i--)(a=l[i])&&(t=(o?a(r,e,t):a(t))||t);return o&&t&&n(r,e,t),t};import{css as c,html as u,LitElement as p}from"lit";import{property as h}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{normalizeAngle as b}from"./AngleSlider.js";var s=class extends p{constructor(){super(...arguments);this.value=0;this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-mark> must be used inside <skdx-angle-slider>.");this.setAttribute("data-skdx-angle-slider-mark",""),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}updated(){this.syncFromRoot()}syncFromRoot(){let e=b(this.value);this.setAttribute("data-value",String(e)),this.setAttribute("data-state",this.root?.value===e?"active":"inactive"),this.toggleAttribute("data-disabled",this.root?.disabled??!1),this.toggleAttribute("data-readonly",this.root?.readOnly??!1),this.style.setProperty("--skdx-angle-slider-mark-angle",`${e}deg`)}render(){return u`<slot></slot>`}};s.styles=[v,c`
       :host {
         display: block;
       }
-    `],d([p({type:Number})],s.prototype,"value",2),s=d([g("skdx-angle-slider-mark","angle-slider","mark")],s);export{s as SkdxAngleSliderMark};
+    `],d([h({type:Number})],s.prototype,"value",2),s=d([g("skdx-angle-slider-mark","angle-slider","mark")],s);export{s as SkdxAngleSliderMark};

package/dist/angle-slider/AngleSliderMarks.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var p=(r,e)=>{for(var o in e)d(r,o,{get:e[o],enumerable:!0})},k=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!b.call(r,t)&&t!==o&&d(r,t,{get:()=>e[t],enumerable:!(s=c(e,t))||s.enumerable});return r};var v=r=>k(d({},"__esModule",{value:!0}),r),m=(r,e,o,s)=>{for(var t=s>1?void 0:s?c(e,o):e,a=r.length-1,n;a>=0;a--)(n=r[a])&&(t=(s?n(e,o,t):n(t))||t);return s&&t&&d(e,o,t),t};var y={};p(y,{SkdxAngleSliderMarks:()=>l});module.exports=v(y);var i=require("lit"),g=require("../internal/define.cjs"),h=require("../internal/styles.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-marks> must be used inside <skdx-angle-slider>.");this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let o=this.root;o&&(this.toggleAttribute("data-disabled",o.disabled),this.toggleAttribute("data-readonly",o.readOnly))}render(){return i.html`<slot></slot>`}};l.styles=[h.hiddenHostStyles,i.css`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var b=(l,e)=>{for(var o in e)d(l,o,{get:e[o],enumerable:!0})},k=(l,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!h.call(l,t)&&t!==o&&d(l,t,{get:()=>e[t],enumerable:!(r=c(e,t))||r.enumerable});return l};var y=l=>k(d({},"__esModule",{value:!0}),l),m=(l,e,o,r)=>{for(var t=r>1?void 0:r?c(e,o):e,a=l.length-1,n;a>=0;a--)(n=l[a])&&(t=(r?n(e,o,t):n(t))||t);return r&&t&&d(e,o,t),t};var v={};b(v,{SkdxAngleSliderMarks:()=>s});module.exports=y(v);var i=require("lit"),p=require("../internal/define.cjs"),u=require("../internal/styles.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-marks> must be used inside <skdx-angle-slider>.");this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let o=this.root;o&&(this.toggleAttribute("data-disabled",o.disabled),this.toggleAttribute("data-readonly",o.readOnly))}render(){return i.html`<slot></slot>`}};s.styles=[u.hiddenHostStyles,i.css`
       :host {
         display: block;
       }
-    `],l=m([(0,g.customElement)("skdx-angle-slider-marks","angle-slider","marks")],l);0&&(module.exports={SkdxAngleSliderMarks});
+    `],s=m([(0,p.customElement)("skdx-angle-slider-marks","angle-slider","marks")],s);0&&(module.exports={SkdxAngleSliderMarks});

package/dist/angle-slider/AngleSliderMarks.d.cts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Container for an `<skdx-angle-slider>`'s tick marks. Structural: mirrors the
- * root's disabled/readonly state and gives the ring a positioning context.
- *
- * Deliberately **not** `aria-hidden` since marks often carry real labels
- * ("N", "E", "S", "W", "45°"). Add `aria-hidden` yourself on purely decorative
- * ticks.
+ * Container for an `<skdx-angle-slider>`'s tick marks; not `aria-hidden` by default since marks often carry real labels.
  *
  * @example
  * ```html
@@ -24,7 +19,7 @@ export declare class SkdxAngleSliderMarks extends LitElement {
     disconnectedCallback(): void;
     /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
     syncFromRoot(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSliderMarks.d.ts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Container for an `<skdx-angle-slider>`'s tick marks. Structural: mirrors the
- * root's disabled/readonly state and gives the ring a positioning context.
- *
- * Deliberately **not** `aria-hidden` since marks often carry real labels
- * ("N", "E", "S", "W", "45°"). Add `aria-hidden` yourself on purely decorative
- * ticks.
+ * Container for an `<skdx-angle-slider>`'s tick marks; not `aria-hidden` by default since marks often carry real labels.
  *
  * @example
  * ```html
@@ -24,7 +19,7 @@ export declare class SkdxAngleSliderMarks extends LitElement {
     disconnectedCallback(): void;
     /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
     syncFromRoot(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSliderMarks.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(l,o,e,s)=>{for(var t=s>1?void 0:s?c(o,e):o,i=l.length-1,d;i>=0;i--)(d=l[i])&&(t=(s?d(o,e,t):d(t))||t);return s&&t&&n(o,e,t),t};import{css as m,html as g,LitElement as h}from"lit";import{customElement as u}from"../internal/define.js";import{hiddenHostStyles as b}from"../internal/styles.js";var r=class extends h{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-marks> must be used inside <skdx-angle-slider>.");this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let e=this.root;e&&(this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return g`<slot></slot>`}};r.styles=[b,m`
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(s,o,e,r)=>{for(var t=r>1?void 0:r?c(o,e):o,i=s.length-1,d;i>=0;i--)(d=s[i])&&(t=(r?d(o,e,t):d(t))||t);return r&&t&&n(o,e,t),t};import{css as m,html as p,LitElement as u}from"lit";import{customElement as g}from"../internal/define.js";import{hiddenHostStyles as h}from"../internal/styles.js";var l=class extends u{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-marks> must be used inside <skdx-angle-slider>.");this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let e=this.root;e&&(this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return p`<slot></slot>`}};l.styles=[h,m`
       :host {
         display: block;
       }
-    `],r=a([u("skdx-angle-slider-marks","angle-slider","marks")],r);export{r as SkdxAngleSliderMarks};
+    `],l=a([g("skdx-angle-slider-marks","angle-slider","marks")],l);export{l as SkdxAngleSliderMarks};