@skdx/web-components 0.27.0 → 0.28.0

package/dist/angle-slider/AngleSlider.cjs

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

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

@@ -1,10 +1,34 @@
-import { LitElement } from 'lit';
+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.
+ */
+export interface AngleSliderMarkData {
+    /** The angle in degrees this tick occupies. */
+    value: number;
+    /** The mark's label. @default undefined */
+    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.
+ */
+export interface SkdxAngleSliderValueChangeDetail {
+    /** The new angle in degrees, folded into `[0, 360)`. */
+    value: number;
+    /** The previous angle, or `null` if there was none. */
+    previousValue: number | null;
+    /** What triggered the change: `'keyboard'`, `'pointer'`, or `'programmatic'`. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @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 Every rendered mark's angle, normalized, deduped and sorted. Read
- * from the DOM rather than a registry — dynamically added or removed marks need
- * no bookkeeping.
+ * @internal All marks in the DOM, normalized, deduped, sorted. No registry
+ * plumbing needed — dynamic marks just work.
  */
 export declare function readMarks(root: HTMLElement): number[];
 /**
@@ -12,57 +36,27 @@ export declare function readMarks(root: HTMLElement): number[];
  * lands on a 0° mark rather than travelling the long way to a 340° one.
  */
 export declare function nearestMark(marks: number[], angle: number): number;
+declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
 /**
- * `<skdx-angle-slider>` — the Web Components implementation of the shared
- * AngleSlider contract (see `@skdx/shared`'s `angleSliderContract`). A dial
- * whose value is a *direction* rather than a position along a line: a gradient
- * angle, a wind bearing, a rotation knob. The host itself is the
- * `role="slider"`, reporting `aria-valuemin="0"` / `aria-valuemax="360"` /
- * `aria-valuenow` plus an `aria-valuetext` in degrees.
- *
- * **0° is at 12 o'clock and the angle increases clockwise** (90° = 3 o'clock),
- * matching `trackPointerAngle`, which does the pointer geometry. The value
- * lives in `[0, 360)`: 360 is never reported, because it is the same direction
- * as 0, and a value handed in from outside that range is folded in on the next
- * change — 450 reads as 90.
- *
- * The host publishes `--skdx-angle-slider-angle` (e.g. `45deg`) so the thumb's
- * rotation is pure CSS — `transform: rotate(var(--skdx-angle-slider-angle))` —
- * with no per-frame JS positioning to reimplement.
- *
- * Every value is reachable **without a pointer**: arrows step by `step`,
- * Shift+arrow by 10°, PageUp/PageDown by 45°, Home/End jump to the first and
- * last reachable angles. Arrow steps wrap around the circle, because a dial has
- * no ends. Under `dir="rtl"` the horizontal arrows swap, via `directionalKey`.
- *
- * Descendant `<skdx-angle-slider-thumb>`, `<skdx-angle-slider-marks>` and
- * `<skdx-angle-slider-mark>` elements find this root with
- * `closest('skdx-angle-slider')`; the root pushes its state onto them after
- * every update, so no part duplicates it.
- *
- * Not a form control: a consumer submitting the angle serialises it through a
- * hidden input.
- *
- * Give the host an accessible name (`aria-label` or `aria-labelledby`) — an
- * unnamed slider announces a bare number of degrees.
+ * 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`.
  *
  * @example
  * ```html
- * <skdx-angle-slider aria-label="Gradient angle" default-value="45" step="5">
- *   <skdx-angle-slider-marks>
- *     <skdx-angle-slider-mark value="0"></skdx-angle-slider-mark>
- *     <skdx-angle-slider-mark value="90"></skdx-angle-slider-mark>
- *     <skdx-angle-slider-mark value="180"></skdx-angle-slider-mark>
- *     <skdx-angle-slider-mark value="270"></skdx-angle-slider-mark>
- *   </skdx-angle-slider-marks>
- *   <skdx-angle-slider-thumb></skdx-angle-slider-thumb>
- * </skdx-angle-slider>
+ * <skdx-angle-slider aria-label="Gradient angle" default-value="45" step="5"></skdx-angle-slider>
  * ```
  *
- * @fires value-change - Fires with the new angle (number) on every change — each arrow key, and each frame of a drag that crosses a `step` boundary. Suppressed when the change would land on the angle already reported.
- * @fires value-commit - Fires once with the committed angle (number) when a drag ends, by release or cancel. This is the event to hang an expensive effect on: a drag emits `value-change` per step crossed and this one exactly once. Keyboard changes do not fire it — a key press is already a discrete commit, reported by `value-change`.
+ * @fires value-change - Each arrow key or drag frame crossing a `step` boundary, with detail `{ value, previousValue, reason }`.
+ * @fires value-commit - Once when a drag ends (release or cancel), carrying the committed angle as the detail.
  */
-export declare class SkdxAngleSlider extends LitElement {
+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
@@ -79,12 +73,10 @@ export declare class SkdxAngleSlider extends LitElement {
      */
     defaultValue: number;
     /**
-     * Increment in degrees that both pointer and keyboard input are rounded to.
-     * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
-     * regardless of this value.
-     * @default 1 — every whole degree is reachable. `0` makes pointer input
-     * continuous, while the arrows keep falling back to 1° so every angle stays
-     * reachable by keyboard.
+     * 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.
      */
     step: number;
     /**
@@ -102,35 +94,62 @@ export declare class SkdxAngleSlider extends LitElement {
      */
     readOnly: boolean;
     /**
-     * Restrict the value to the angles declared by the rendered
-     * `<skdx-angle-slider-mark>` parts. Marks are discovered from the DOM at
-     * interaction time, so there is no registration plumbing and a mark added or
-     * removed later just works.
-     *
-     * With marks present, dragging snaps to the nearest one (measured the short
-     * way around the circle, so 350° snaps to a 0° mark), arrow keys move one
-     * mark, Shift+arrow and PageUp/PageDown move three, and Home/End jump to the
-     * first/last mark.
-     * @default false — every angle on the step grid stays reachable. Set with no
-     * marks rendered, the value falls back to the step grid rather than becoming
-     * unchangeable.
+     * 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.
+     * @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.
+     * @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).
+     * @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.
+     * @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[];
     /** @internal True between pointer down and release/cancel; drives `data-dragging` on the host and every part. */
     private dragging;
     private disposePointer?;
     connectedCallback(): void;
+    private readonly fillAnatomy;
+    /**
+     * Restore angle from `default-value` attribute, announcing it as
+     * `'programmatic'` (application, not user). Silent when already at target.
+     */
+    formResetCallback(): void;
     disconnectedCallback(): void;
-    protected updated(): 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;
     /**
-     * Folds `raw` into `[0, 360)`, snaps it to the nearest mark (or the step
-     * grid), and dispatches `value-change`. Landing on the angle already reported
-     * — an arrow key that snaps back to the same mark, a drag that re-crosses its
-     * own step — is swallowed: the interaction is still handled, but nothing is
-     * emitted.
+     * 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;
@@ -141,3 +160,4 @@ declare global {
         'skdx-angle-slider': SkdxAngleSlider;
     }
 }
+export {};

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

@@ -1,10 +1,34 @@
-import { LitElement } from 'lit';
+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.
+ */
+export interface AngleSliderMarkData {
+    /** The angle in degrees this tick occupies. */
+    value: number;
+    /** The mark's label. @default undefined */
+    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.
+ */
+export interface SkdxAngleSliderValueChangeDetail {
+    /** The new angle in degrees, folded into `[0, 360)`. */
+    value: number;
+    /** The previous angle, or `null` if there was none. */
+    previousValue: number | null;
+    /** What triggered the change: `'keyboard'`, `'pointer'`, or `'programmatic'`. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @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 Every rendered mark's angle, normalized, deduped and sorted. Read
- * from the DOM rather than a registry — dynamically added or removed marks need
- * no bookkeeping.
+ * @internal All marks in the DOM, normalized, deduped, sorted. No registry
+ * plumbing needed — dynamic marks just work.
  */
 export declare function readMarks(root: HTMLElement): number[];
 /**
@@ -12,57 +36,27 @@ export declare function readMarks(root: HTMLElement): number[];
  * lands on a 0° mark rather than travelling the long way to a 340° one.
  */
 export declare function nearestMark(marks: number[], angle: number): number;
+declare const SkdxAngleSlider_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
 /**
- * `<skdx-angle-slider>` — the Web Components implementation of the shared
- * AngleSlider contract (see `@skdx/shared`'s `angleSliderContract`). A dial
- * whose value is a *direction* rather than a position along a line: a gradient
- * angle, a wind bearing, a rotation knob. The host itself is the
- * `role="slider"`, reporting `aria-valuemin="0"` / `aria-valuemax="360"` /
- * `aria-valuenow` plus an `aria-valuetext` in degrees.
- *
- * **0° is at 12 o'clock and the angle increases clockwise** (90° = 3 o'clock),
- * matching `trackPointerAngle`, which does the pointer geometry. The value
- * lives in `[0, 360)`: 360 is never reported, because it is the same direction
- * as 0, and a value handed in from outside that range is folded in on the next
- * change — 450 reads as 90.
- *
- * The host publishes `--skdx-angle-slider-angle` (e.g. `45deg`) so the thumb's
- * rotation is pure CSS — `transform: rotate(var(--skdx-angle-slider-angle))` —
- * with no per-frame JS positioning to reimplement.
- *
- * Every value is reachable **without a pointer**: arrows step by `step`,
- * Shift+arrow by 10°, PageUp/PageDown by 45°, Home/End jump to the first and
- * last reachable angles. Arrow steps wrap around the circle, because a dial has
- * no ends. Under `dir="rtl"` the horizontal arrows swap, via `directionalKey`.
- *
- * Descendant `<skdx-angle-slider-thumb>`, `<skdx-angle-slider-marks>` and
- * `<skdx-angle-slider-mark>` elements find this root with
- * `closest('skdx-angle-slider')`; the root pushes its state onto them after
- * every update, so no part duplicates it.
- *
- * Not a form control: a consumer submitting the angle serialises it through a
- * hidden input.
- *
- * Give the host an accessible name (`aria-label` or `aria-labelledby`) — an
- * unnamed slider announces a bare number of degrees.
+ * 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`.
  *
  * @example
  * ```html
- * <skdx-angle-slider aria-label="Gradient angle" default-value="45" step="5">
- *   <skdx-angle-slider-marks>
- *     <skdx-angle-slider-mark value="0"></skdx-angle-slider-mark>
- *     <skdx-angle-slider-mark value="90"></skdx-angle-slider-mark>
- *     <skdx-angle-slider-mark value="180"></skdx-angle-slider-mark>
- *     <skdx-angle-slider-mark value="270"></skdx-angle-slider-mark>
- *   </skdx-angle-slider-marks>
- *   <skdx-angle-slider-thumb></skdx-angle-slider-thumb>
- * </skdx-angle-slider>
+ * <skdx-angle-slider aria-label="Gradient angle" default-value="45" step="5"></skdx-angle-slider>
  * ```
  *
- * @fires value-change - Fires with the new angle (number) on every change — each arrow key, and each frame of a drag that crosses a `step` boundary. Suppressed when the change would land on the angle already reported.
- * @fires value-commit - Fires once with the committed angle (number) when a drag ends, by release or cancel. This is the event to hang an expensive effect on: a drag emits `value-change` per step crossed and this one exactly once. Keyboard changes do not fire it — a key press is already a discrete commit, reported by `value-change`.
+ * @fires value-change - Each arrow key or drag frame crossing a `step` boundary, with detail `{ value, previousValue, reason }`.
+ * @fires value-commit - Once when a drag ends (release or cancel), carrying the committed angle as the detail.
  */
-export declare class SkdxAngleSlider extends LitElement {
+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
@@ -79,12 +73,10 @@ export declare class SkdxAngleSlider extends LitElement {
      */
     defaultValue: number;
     /**
-     * Increment in degrees that both pointer and keyboard input are rounded to.
-     * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
-     * regardless of this value.
-     * @default 1 — every whole degree is reachable. `0` makes pointer input
-     * continuous, while the arrows keep falling back to 1° so every angle stays
-     * reachable by keyboard.
+     * 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.
      */
     step: number;
     /**
@@ -102,35 +94,62 @@ export declare class SkdxAngleSlider extends LitElement {
      */
     readOnly: boolean;
     /**
-     * Restrict the value to the angles declared by the rendered
-     * `<skdx-angle-slider-mark>` parts. Marks are discovered from the DOM at
-     * interaction time, so there is no registration plumbing and a mark added or
-     * removed later just works.
-     *
-     * With marks present, dragging snaps to the nearest one (measured the short
-     * way around the circle, so 350° snaps to a 0° mark), arrow keys move one
-     * mark, Shift+arrow and PageUp/PageDown move three, and Home/End jump to the
-     * first/last mark.
-     * @default false — every angle on the step grid stays reachable. Set with no
-     * marks rendered, the value falls back to the step grid rather than becoming
-     * unchangeable.
+     * 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.
+     * @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.
+     * @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).
+     * @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.
+     * @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[];
     /** @internal True between pointer down and release/cancel; drives `data-dragging` on the host and every part. */
     private dragging;
     private disposePointer?;
     connectedCallback(): void;
+    private readonly fillAnatomy;
+    /**
+     * Restore angle from `default-value` attribute, announcing it as
+     * `'programmatic'` (application, not user). Silent when already at target.
+     */
+    formResetCallback(): void;
     disconnectedCallback(): void;
-    protected updated(): 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;
     /**
-     * Folds `raw` into `[0, 360)`, snaps it to the nearest mark (or the step
-     * grid), and dispatches `value-change`. Landing on the angle already reported
-     * — an arrow key that snaps back to the same mark, a drag that re-crosses its
-     * own step — is swallowed: the interaction is still handled, but nothing is
-     * emitted.
+     * 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;
@@ -141,3 +160,4 @@ declare global {
         'skdx-angle-slider': SkdxAngleSlider;
     }
 }
+export {};

package/dist/angle-slider/AngleSlider.js

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

package/dist/angle-slider/AngleSliderAnatomy.cjs

@@ -0,0 +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>`:""}
+    `,l,{host:l})}0&&(module.exports={ANGLE_SLIDER_ANATOMY_GENERATED,fillAngleSliderAnatomy});

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

@@ -0,0 +1,16 @@
+import type { SkdxAngleSlider } from './AngleSlider.cjs';
+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.
+ */
+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
+ */
+export declare function fillAngleSliderAnatomy(root: SkdxAngleSlider): void;

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

@@ -0,0 +1,16 @@
+import type { SkdxAngleSlider } from './AngleSlider.js';
+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.
+ */
+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
+ */
+export declare function fillAngleSliderAnatomy(root: SkdxAngleSlider): void;

package/dist/angle-slider/AngleSliderAnatomy.js

@@ -0,0 +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>`:""}
+    `,e,{host:e})}export{g as ANGLE_SLIDER_ANATOMY_GENERATED,k as fillAngleSliderAnatomy};

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

@@ -35,17 +35,15 @@ import { LitElement } from 'lit';
 export declare class SkdxAngleSliderMark extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * The angle in degrees this tick sits at. Published back as
-     * `--skdx-angle-slider-mark-angle` for positioning, and read by the root when
-     * `restrict-to-marks` is set.
-     * @default 0 — straight up, the same direction the dial itself starts at.
+     * Angle in degrees. Published as `--skdx-angle-slider-mark-angle` for positioning.
+     * @default 0
      */
     value: number;
     private root;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
-    /** @internal Mirrors this tick's angle and the root's state onto this host. Called by the root after every update. */
+    /** @internal Sync this mark's angle and state. */
     syncFromRoot(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -35,17 +35,15 @@ import { LitElement } from 'lit';
 export declare class SkdxAngleSliderMark extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * The angle in degrees this tick sits at. Published back as
-     * `--skdx-angle-slider-mark-angle` for positioning, and read by the root when
-     * `restrict-to-marks` is set.
-     * @default 0 — straight up, the same direction the dial itself starts at.
+     * Angle in degrees. Published as `--skdx-angle-slider-mark-angle` for positioning.
+     * @default 0
      */
     value: number;
     private root;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
-    /** @internal Mirrors this tick's angle and the root's state onto this host. Called by the root after every update. */
+    /** @internal Sync this mark's angle and state. */
     syncFromRoot(): void;
     render(): import("lit").TemplateResult<1>;
 }