@skdx/web-components 0.26.0

package/dist/radio-group/RadioGroupItem.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-group-item>` — a single radio button within an
+ * `<skdx-radio-group>`. Sets `role="radio"`, `aria-checked`, `data-state`
+ * (`"checked"` / `"unchecked"`), `data-disabled`, `aria-disabled`, and `data-value` on
+ * itself. Selects on click, and also selects on focus (matching the
+ * WAI-ARIA radio group pattern where arrow-key navigation selects as it
+ * moves). Only tabbable when checked, or when nothing in the group is
+ * checked and it's the first enabled item. Must be used inside
+ * `<skdx-radio-group>`.
+ *
+ * Named by a `<label>` that either points at it (`for="<its id>"`) or wraps it,
+ * which the item resolves into `aria-labelledby` on itself — see
+ * {@link SkdxRadioGroupItem._linkLabel}. An explicit `aria-label` /
+ * `aria-labelledby` on the tag wins over both.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-group-item value="compact" id="density-compact">
+ *   <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ * </skdx-radio-group-item>
+ * <label for="density-compact">compact</label>
+ * ```
+ */
+export declare class SkdxRadioGroupItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+    /** Disables this item, independent of the group's `disabled`. @default false */
+    disabled: boolean;
+    private rootEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-radio-group>` whenever the selected value changes. */
+    refresh(): void;
+    private get effectiveDisabled();
+    /** Whether this item is currently the group's selected value. */
+    get checked(): boolean;
+    /**
+     * Points `aria-labelledby` at the `<label>` naming this item, if there is one
+     * and the tag does not already carry its own name.
+     *
+     * The other four packages put `role="radio"` on a native `<button>`, and a
+     * `<button>` is a *labelable* element: `<label for>` and a wrapping `<label>`
+     * both name it, for free, with no work from the component. This host is a
+     * custom element, which is not labelable — a `<label for>` aimed at it names
+     * nothing, so the same markup that works everywhere else produced a radio
+     * with no accessible name at all here (axe `aria-toggle-field-name`).
+     * Resolving the association into `aria-labelledby` is what closes that gap;
+     * it is the same `ensureId` + `aria-labelledby` wiring `<skdx-radio-card>` and
+     * `<skdx-form-control>` already do for their own labels.
+     *
+     * ponytail: resolved once, at connect, like `takeHostAriaLabel`. Re-parenting
+     * an item under a different label after connect is not tracked — add a
+     * MutationObserver if a real case for it turns up.
+     */
+    private _linkLabel;
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleFocus;
+    private readonly _handleKeydown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-group-item': SkdxRadioGroupItem;
+    }
+}

package/dist/radio-group/RadioGroupItem.js

@@ -0,0 +1,9 @@
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(d,l,t,i)=>{for(var e=i>1?void 0:i?c(l,t):l,s=d.length-1,a;s>=0;s--)(a=d[s])&&(e=(i?a(l,t,e):a(e))||e);return i&&e&&h(l,t,e),e};import{css as u,html as b,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{ensureId as p}from"../internal/ids.js";var r=class extends v{constructor(){super(...arguments);this.value="";this.disabled=!1;this.rootEl=null;this._handleClick=()=>{!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value)};this._handleFocus=()=>{!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value)};this._handleKeydown=t=>{t.key==="Enter"&&t.preventDefault()}}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-group"),this.rootEl?.registerItem(this,this.value,this.disabled),this.setAttribute("role","radio"),this._linkLabel(),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.rootEl&&this.rootEl.unregisterItem(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}refresh(){this._sync()}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}get checked(){return this.rootEl?.getSelectedValue()===this.value}_linkLabel(){if(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))return;let t=this.getRootNode(),e=(this.id?Array.from(t.querySelectorAll("label")).find(s=>s.htmlFor===this.id):void 0)??this.closest("label");e&&this.setAttribute("aria-labelledby",p(e,"skdx-radio-group","label"))}_sync(){let t=this.rootEl,i=this.checked,e=this.effectiveDisabled;this.setAttribute("aria-checked",String(i)),this.setAttribute("data-state",i?"checked":"unchecked"),this.setAttribute("data-value",this.value),e?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"));let s=t?.getSelectedValue()===void 0&&t?.getFirstEnabledValue()===this.value,a=!e&&(i||s);this.setAttribute("tabindex",a?"0":"-1")}updated(){this._sync()}render(){return b`<slot></slot>`}};r.styles=u`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,o([n({type:String,reflect:!0})],r.prototype,"value",2),o([n({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=o([f("skdx-radio-group-item","radio-group","item")],r);export{r as SkdxRadioGroupItem};

package/dist/radio-group/index.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var u=(r,o)=>{for(var p in o)x(r,p,{get:o[p],enumerable:!0})},G=(r,o,p,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let d of f(o))!k.call(r,d)&&d!==p&&x(r,d,{get:()=>o[d],enumerable:!(t=m(o,d))||t.enumerable});return r};var R=r=>G(x({},"__esModule",{value:!0}),r);var S={};u(S,{SkdxRadioGroup:()=>a.SkdxRadioGroup,SkdxRadioGroupIndicator:()=>i.SkdxRadioGroupIndicator,SkdxRadioGroupItem:()=>e.SkdxRadioGroupItem});module.exports=R(S);var a=require("./RadioGroup.cjs"),e=require("./RadioGroupItem.cjs"),i=require("./RadioGroupIndicator.cjs");0&&(module.exports={SkdxRadioGroup,SkdxRadioGroupIndicator,SkdxRadioGroupItem});

package/dist/radio-group/index.d.cts

@@ -0,0 +1,3 @@
+export { SkdxRadioGroup } from './RadioGroup.cjs';
+export { SkdxRadioGroupItem } from './RadioGroupItem.cjs';
+export { SkdxRadioGroupIndicator } from './RadioGroupIndicator.cjs';

package/dist/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export { SkdxRadioGroup } from './RadioGroup.js';
+export { SkdxRadioGroupItem } from './RadioGroupItem.js';
+export { SkdxRadioGroupIndicator } from './RadioGroupIndicator.js';

package/dist/radio-group/index.js

@@ -0,0 +1 @@
+import{SkdxRadioGroup as d}from"./RadioGroup.js";import{SkdxRadioGroupItem as x}from"./RadioGroupItem.js";import{SkdxRadioGroupIndicator as a}from"./RadioGroupIndicator.js";export{d as SkdxRadioGroup,a as SkdxRadioGroupIndicator,x as SkdxRadioGroupItem};

package/dist/rating/Rating.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var E=(s,r)=>{for(var e in r)h(s,e,{get:r[e],enumerable:!0})},L=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of A(r))!w.call(s,t)&&t!==e&&h(s,t,{get:()=>r[t],enumerable:!(i=m(r,t))||i.enumerable});return s};var H=s=>L(h({},"__esModule",{value:!0}),s),l=(s,r,e,i)=>{for(var t=i>1?void 0:i?m(r,e):r,u=s.length-1,o;u>=0;u--)(o=s[u])&&(t=(i?o(r,e,t):o(t))||t);return i&&t&&h(r,e,t),t};var x={};E(x,{SkdxRating:()=>a});module.exports=H(x);var d=require("lit"),n=require("lit/decorators.js"),b=require("../internal/define.cjs"),v=require("../internal/direction.cjs"),c=require("../internal/form-associated.cjs"),y=require("../internal/part.cjs");var f="skdx-rating-item",M=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","tabindex"],a=class extends(0,c.FormAssociated)(d.LitElement){constructor(){super(...arguments);this.value=0;this.max=5;this.allowHalf=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.hoverValue=null;this.handlePointerLeave=()=>{this.setHoverValue(null)};this.handleKeydown=e=>{if(this.disabled||this.readOnly)return;if(this.allowHalf){this.handleSliderKeydown(e);return}let i=Array.from(this.querySelectorAll(f)).filter(p=>!p.hasAttribute("disabled"));if(i.length===0)return;let t=i.indexOf(document.activeElement),u=(0,v.directionalKey)(e.key,this),o;u==="ArrowRight"||u==="ArrowDown"?o=Math.min(i.length-1,Math.max(0,t)+1):(u==="ArrowLeft"||u==="ArrowUp")&&(o=Math.max(0,t-1)),o!==void 0&&o!==t&&(e.preventDefault(),i[o]?.focus())}}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=this.value),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncHostAttributes()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){this.syncHostAttributes(),(e.has("value")||e.has("disabled")||e.has("readOnly"))&&this.notify(),(e.has("value")||e.has("required"))&&this.syncFormState()}syncFormState(){this.setFormValue(this.value>0?String(this.value):null),this.setValueMissing(this.required&&this.value<=0,"Please select a rating.",this.querySelector(f)?.shadowRoot?.querySelector("button"))}formResetCallback(){this.value=this.defaultValue??0}syncHostAttributes(){if(this.allowHalf)this.setAttribute("role","slider"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-valuetext",`${this.value} out of ${this.max}`),this.setAttribute("aria-orientation","horizontal"),this.setAttribute("tabindex",this.disabled?"-1":"0");else{this.setAttribute("role","radiogroup");for(let e of M)this.removeAttribute(e)}this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),(0,y.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-readonly":this.readOnly?"":null})}notify(){this.dispatchEvent(new CustomEvent("skdx-rating-internal-update"))}commit(e){this.disabled||this.readOnly||e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}setHoverValue(e){this.hoverValue!==e&&(this.hoverValue=e,this.dispatchEvent(new CustomEvent("hover-value-change",{detail:e,bubbles:!0,composed:!0})),this.notify())}handleSliderKeydown(e){let i=(0,v.directionalKey)(e.key,this),t=null;i==="ArrowRight"||i==="ArrowUp"?t=this.value+.5:i==="ArrowLeft"||i==="ArrowDown"?t=this.value-.5:i==="Home"?t=0:i==="End"&&(t=this.max),t!==null&&(e.preventDefault(),this.commit(Math.min(Math.max(t,0),this.max)))}render(){return d.html`<slot></slot>`}};a.styles=d.css`
+    :host {
+      display: inline-flex;
+    }
+  `,l([(0,n.property)({type:Number,reflect:!0})],a.prototype,"value",2),l([(0,n.property)({type:Number,reflect:!0})],a.prototype,"max",2),l([(0,n.property)({type:Boolean,reflect:!0,attribute:"allow-half"})],a.prototype,"allowHalf",2),l([(0,n.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),l([(0,n.property)({type:Boolean,reflect:!0,attribute:"read-only"})],a.prototype,"readOnly",2),l([(0,n.property)({type:Boolean,reflect:!0})],a.prototype,"required",2),l([(0,n.property)({type:String,reflect:!0})],a.prototype,"name",2),l([(0,n.property)({attribute:"required-message"})],a.prototype,"requiredMessage",2),a=l([(0,b.customElement)("skdx-rating","rating","root")],a);0&&(module.exports={SkdxRating});

package/dist/rating/Rating.d.cts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+declare const SkdxRating_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-rating>` — the Web Components implementation of the shared Rating
+ * contract (see `@skdx/shared`'s `ratingContract`). Owns the selected
+ * `value` and hover-preview state, and hands them down to descendant
+ * `<skdx-rating-item>`s (which look it up via `closest('skdx-rating')`).
+ * Renders `role="radiogroup"` with `aria-disabled`/`aria-readonly` and the
+ * `data-disabled` styling hook on this
+ * host. Arrow-key navigation roves focus between items (horizontal, no
+ * wrap); hover state resets on pointer leave.
+ *
+ * The hover preview is display-only: it drives `data-highlighted`/`data-half`
+ * and the `hover-value-change` event, and never touches the committed
+ * `value` — same preview/commit split as `<skdx-slider>`, where dragging
+ * paints the track but only pointer-up writes the value.
+ *
+ * With `allow-half`, the host becomes a `role="slider"` instead: half-star
+ * values cannot be told truthfully by a set of whole-star radios, so the host
+ * takes the tab stop and reports `aria-valuenow`, and the items become purely
+ * visual. Arrow keys then step the value by `0.5` rather than roving focus.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the selected value is
+ * submitted by the surrounding `<form>`. Like a radio group, a rating of `0`
+ * (nothing selected) submits no entry at all, and is `valueMissing` when the
+ * component is `required`.
+ *
+ * @example
+ * ```html
+ * <skdx-rating value="3" max="5">
+ *   <skdx-rating-item value="1">★</skdx-rating-item>
+ *   <skdx-rating-item value="2">★</skdx-rating-item>
+ *   <skdx-rating-item value="3">★</skdx-rating-item>
+ *   <skdx-rating-item value="4">★</skdx-rating-item>
+ *   <skdx-rating-item value="5">★</skdx-rating-item>
+ * </skdx-rating>
+ * ```
+ *
+ * @fires value-change - Fires with the new value (number) whenever the selected item changes.
+ * @fires hover-value-change - Fires with the previewed value (number) while the pointer moves across the items, and with `null` when it leaves. Display-only: the preview never writes the committed `value`.
+ */
+export declare class SkdxRating extends SkdxRating_base {
+    static styles: import("lit").CSSResult;
+    /** Selected value. Listen for `value-change` to observe or override changes. */
+    value: number;
+    /** Number of selectable items to render, e.g. stars. @default 5 */
+    max: number;
+    /**
+     * Allow half-item values (`0.5`, `1`, `1.5`, …). Pointer input picks a half
+     * from the leading half of an item's box (the trailing half under RTL);
+     * arrow keys step by `0.5`, so half values are reachable without a pointer.
+     *
+     * This changes the widget's ARIA, deliberately: a set of whole-star
+     * `role="radio"` items cannot say "2.5" truthfully, so the host becomes a
+     * `role="slider"` reporting `aria-valuenow`/`aria-valuetext`, takes the
+     * single tab stop, and the items become `aria-hidden` visuals. Give the host
+     * an accessible name (`aria-label`) either way.
+     * @default false
+     */
+    allowHalf: boolean;
+    /** Disables every item, excluding the group from the tab order. @default false */
+    disabled: boolean;
+    /** Displays the current value but blocks interaction (still focusable, unlike disabled). */
+    readOnly: boolean;
+    /** Marks the rating required for native form validation, until an item is selected. @default false */
+    required: boolean;
+    /** Name used as the `FormData` entry key when the rating is inside a `<form>`. @default undefined */
+    name?: string;
+    /**
+     * Replaces the message the browser shows when a `required` rating is
+     * submitted unset. Sealed inside the shadow root otherwise, so this is the
+     * only way to translate it or to name what is being rated ("Please rate your
+     * delivery.").
+     * @default undefined — keeps `'Please select a rating.'`
+     */
+    requiredMessage?: string;
+    /** @internal Hover-preview value, not reflected as an attribute. */
+    hoverValue: number | null;
+    private defaultValue?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncFormState;
+    /** Restores the rating the `value` attribute declared when the element was first connected. */
+    formResetCallback(): void;
+    private syncHostAttributes;
+    /** Dispatches an internal, non-bubbling event so items re-render on state they don't own an attribute for (hoverValue). */
+    private notify;
+    /** @internal Commits a new selected value, unless disabled or read-only. Called by `<skdx-rating-item>`. */
+    commit(next: number): void;
+    /**
+     * @internal Sets the hover-preview value and dispatches `hover-value-change`.
+     * Called by `<skdx-rating-item>`. Deduped, because with `allowHalf` the
+     * preview is driven by pointermove, which fires per pixel, and only the two
+     * crossings per item are interesting.
+     */
+    setHoverValue(next: number | null): void;
+    private readonly handlePointerLeave;
+    /** `allowHalf` only: the host is the slider, so arrows step the value by 0.5 instead of roving focus. */
+    private handleSliderKeydown;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-rating': SkdxRating;
+    }
+}
+export {};

package/dist/rating/Rating.d.ts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+declare const SkdxRating_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-rating>` — the Web Components implementation of the shared Rating
+ * contract (see `@skdx/shared`'s `ratingContract`). Owns the selected
+ * `value` and hover-preview state, and hands them down to descendant
+ * `<skdx-rating-item>`s (which look it up via `closest('skdx-rating')`).
+ * Renders `role="radiogroup"` with `aria-disabled`/`aria-readonly` and the
+ * `data-disabled` styling hook on this
+ * host. Arrow-key navigation roves focus between items (horizontal, no
+ * wrap); hover state resets on pointer leave.
+ *
+ * The hover preview is display-only: it drives `data-highlighted`/`data-half`
+ * and the `hover-value-change` event, and never touches the committed
+ * `value` — same preview/commit split as `<skdx-slider>`, where dragging
+ * paints the track but only pointer-up writes the value.
+ *
+ * With `allow-half`, the host becomes a `role="slider"` instead: half-star
+ * values cannot be told truthfully by a set of whole-star radios, so the host
+ * takes the tab stop and reports `aria-valuenow`, and the items become purely
+ * visual. Arrow keys then step the value by `0.5` rather than roving focus.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the selected value is
+ * submitted by the surrounding `<form>`. Like a radio group, a rating of `0`
+ * (nothing selected) submits no entry at all, and is `valueMissing` when the
+ * component is `required`.
+ *
+ * @example
+ * ```html
+ * <skdx-rating value="3" max="5">
+ *   <skdx-rating-item value="1">★</skdx-rating-item>
+ *   <skdx-rating-item value="2">★</skdx-rating-item>
+ *   <skdx-rating-item value="3">★</skdx-rating-item>
+ *   <skdx-rating-item value="4">★</skdx-rating-item>
+ *   <skdx-rating-item value="5">★</skdx-rating-item>
+ * </skdx-rating>
+ * ```
+ *
+ * @fires value-change - Fires with the new value (number) whenever the selected item changes.
+ * @fires hover-value-change - Fires with the previewed value (number) while the pointer moves across the items, and with `null` when it leaves. Display-only: the preview never writes the committed `value`.
+ */
+export declare class SkdxRating extends SkdxRating_base {
+    static styles: import("lit").CSSResult;
+    /** Selected value. Listen for `value-change` to observe or override changes. */
+    value: number;
+    /** Number of selectable items to render, e.g. stars. @default 5 */
+    max: number;
+    /**
+     * Allow half-item values (`0.5`, `1`, `1.5`, …). Pointer input picks a half
+     * from the leading half of an item's box (the trailing half under RTL);
+     * arrow keys step by `0.5`, so half values are reachable without a pointer.
+     *
+     * This changes the widget's ARIA, deliberately: a set of whole-star
+     * `role="radio"` items cannot say "2.5" truthfully, so the host becomes a
+     * `role="slider"` reporting `aria-valuenow`/`aria-valuetext`, takes the
+     * single tab stop, and the items become `aria-hidden` visuals. Give the host
+     * an accessible name (`aria-label`) either way.
+     * @default false
+     */
+    allowHalf: boolean;
+    /** Disables every item, excluding the group from the tab order. @default false */
+    disabled: boolean;
+    /** Displays the current value but blocks interaction (still focusable, unlike disabled). */
+    readOnly: boolean;
+    /** Marks the rating required for native form validation, until an item is selected. @default false */
+    required: boolean;
+    /** Name used as the `FormData` entry key when the rating is inside a `<form>`. @default undefined */
+    name?: string;
+    /**
+     * Replaces the message the browser shows when a `required` rating is
+     * submitted unset. Sealed inside the shadow root otherwise, so this is the
+     * only way to translate it or to name what is being rated ("Please rate your
+     * delivery.").
+     * @default undefined — keeps `'Please select a rating.'`
+     */
+    requiredMessage?: string;
+    /** @internal Hover-preview value, not reflected as an attribute. */
+    hoverValue: number | null;
+    private defaultValue?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncFormState;
+    /** Restores the rating the `value` attribute declared when the element was first connected. */
+    formResetCallback(): void;
+    private syncHostAttributes;
+    /** Dispatches an internal, non-bubbling event so items re-render on state they don't own an attribute for (hoverValue). */
+    private notify;
+    /** @internal Commits a new selected value, unless disabled or read-only. Called by `<skdx-rating-item>`. */
+    commit(next: number): void;
+    /**
+     * @internal Sets the hover-preview value and dispatches `hover-value-change`.
+     * Called by `<skdx-rating-item>`. Deduped, because with `allowHalf` the
+     * preview is driven by pointermove, which fires per pixel, and only the two
+     * crossings per item are interesting.
+     */
+    setHoverValue(next: number | null): void;
+    private readonly handlePointerLeave;
+    /** `allowHalf` only: the host is the slider, so arrows step the value by 0.5 instead of roving focus. */
+    private handleSliderKeydown;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-rating': SkdxRating;
+    }
+}
+export {};

package/dist/rating/Rating.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var a=(u,n,e,i)=>{for(var t=i>1?void 0:i?f(n,e):n,l=u.length-1,s;l>=0;l--)(s=u[l])&&(t=(i?s(n,e,t):s(t))||t);return i&&t&&m(n,e,t),t};import{css as b,html as c,LitElement as y}from"lit";import{property as o}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";import{directionalKey as d}from"../internal/direction.js";import{FormAssociated as A}from"../internal/form-associated.js";import{reflectHostState as w}from"../internal/part.js";var h="skdx-rating-item",E=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","tabindex"],r=class extends A(y){constructor(){super(...arguments);this.value=0;this.max=5;this.allowHalf=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.hoverValue=null;this.handlePointerLeave=()=>{this.setHoverValue(null)};this.handleKeydown=e=>{if(this.disabled||this.readOnly)return;if(this.allowHalf){this.handleSliderKeydown(e);return}let i=Array.from(this.querySelectorAll(h)).filter(v=>!v.hasAttribute("disabled"));if(i.length===0)return;let t=i.indexOf(document.activeElement),l=d(e.key,this),s;l==="ArrowRight"||l==="ArrowDown"?s=Math.min(i.length-1,Math.max(0,t)+1):(l==="ArrowLeft"||l==="ArrowUp")&&(s=Math.max(0,t-1)),s!==void 0&&s!==t&&(e.preventDefault(),i[s]?.focus())}}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=this.value),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncHostAttributes()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){this.syncHostAttributes(),(e.has("value")||e.has("disabled")||e.has("readOnly"))&&this.notify(),(e.has("value")||e.has("required"))&&this.syncFormState()}syncFormState(){this.setFormValue(this.value>0?String(this.value):null),this.setValueMissing(this.required&&this.value<=0,"Please select a rating.",this.querySelector(h)?.shadowRoot?.querySelector("button"))}formResetCallback(){this.value=this.defaultValue??0}syncHostAttributes(){if(this.allowHalf)this.setAttribute("role","slider"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-valuetext",`${this.value} out of ${this.max}`),this.setAttribute("aria-orientation","horizontal"),this.setAttribute("tabindex",this.disabled?"-1":"0");else{this.setAttribute("role","radiogroup");for(let e of E)this.removeAttribute(e)}this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),w(this,{"data-disabled":this.disabled?"":null,"data-readonly":this.readOnly?"":null})}notify(){this.dispatchEvent(new CustomEvent("skdx-rating-internal-update"))}commit(e){this.disabled||this.readOnly||e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}setHoverValue(e){this.hoverValue!==e&&(this.hoverValue=e,this.dispatchEvent(new CustomEvent("hover-value-change",{detail:e,bubbles:!0,composed:!0})),this.notify())}handleSliderKeydown(e){let i=d(e.key,this),t=null;i==="ArrowRight"||i==="ArrowUp"?t=this.value+.5:i==="ArrowLeft"||i==="ArrowDown"?t=this.value-.5:i==="Home"?t=0:i==="End"&&(t=this.max),t!==null&&(e.preventDefault(),this.commit(Math.min(Math.max(t,0),this.max)))}render(){return c`<slot></slot>`}};r.styles=b`
+    :host {
+      display: inline-flex;
+    }
+  `,a([o({type:Number,reflect:!0})],r.prototype,"value",2),a([o({type:Number,reflect:!0})],r.prototype,"max",2),a([o({type:Boolean,reflect:!0,attribute:"allow-half"})],r.prototype,"allowHalf",2),a([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),a([o({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),a([o({type:Boolean,reflect:!0})],r.prototype,"required",2),a([o({type:String,reflect:!0})],r.prototype,"name",2),a([o({attribute:"required-message"})],r.prototype,"requiredMessage",2),r=a([p("skdx-rating","rating","root")],r);export{r as SkdxRating};

package/dist/rating/RatingItem.cjs

@@ -0,0 +1,26 @@
+"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var y=(a,i)=>{for(var e in i)h(a,e,{get:i[e],enumerable:!0})},k=(a,i,e,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of m(i))!g.call(a,t)&&t!==e&&h(a,t,{get:()=>i[t],enumerable:!(o=p(i,t))||o.enumerable});return a};var H=a=>k(h({},"__esModule",{value:!0}),a),u=(a,i,e,o)=>{for(var t=o>1?void 0:o?p(i,e):i,n=a.length-1,d;n>=0;n--)(d=a[n])&&(t=(o?d(i,e,t):d(t))||t);return o&&t&&h(i,e,t),t};var w={};y(w,{SkdxRatingItem:()=>s});module.exports=H(w);var r=require("lit"),c=require("lit/decorators.js"),f=require("../internal/define.cjs"),b=require("../internal/direction.cjs"),v=require("../internal/part.cjs"),l=require("../internal/styles.cjs");var s=class extends r.LitElement{constructor(){super(...arguments);this.value=0;this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.rootObserver=new MutationObserver(()=>this.requestUpdate());this.handleClick=e=>{this.isDisabled||this.root?.commit(this.valueFromPointer(e))};this.handleFocus=()=>{this.isDisabled||this.allowHalf||this.isChecked||this.root?.commit(this.value)};this.handlePointerEnter=e=>{this.isDisabled||this.root?.readOnly||this.root?.setHoverValue(this.valueFromPointer(e))};this.handlePointerMove=e=>{!this.allowHalf||this.isDisabled||this.root?.readOnly||this.root?.setHoverValue(this.valueFromPointer(e))};this.handleKeydown=e=>{e.key==="Enter"&&e.preventDefault()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-rating"),!this.root)throw new Error("<skdx-rating-item> must be used inside <skdx-rating>.");this.root.addEventListener("skdx-rating-internal-update",this.onRootUpdate),this.rootObserver.observe(this.root,{attributeFilter:["value","disabled","read-only","allow-half"]})}disconnectedCallback(){this.root?.removeEventListener("skdx-rating-internal-update",this.onRootUpdate),this.rootObserver.disconnect(),super.disconnectedCallback()}get allowHalf(){return this.root?.allowHalf??!1}get isChecked(){return this.root?.value===this.value||this.allowHalf&&this.root?.value===this.value-.5}get isDisabled(){return this.disabled||(this.root?.disabled??!1)}get displayValue(){let e=this.root;return e?e.hoverValue??e.value:null}get isHighlighted(){let e=this.displayValue;return e===null?!1:e>=(this.allowHalf?this.value-.5:this.value)}get isHalf(){return this.allowHalf&&this.displayValue===this.value-.5}get isTabStop(){let e=this.root;return e?this.isChecked||e.value===0&&this.value===1:!1}valueFromPointer(e){if(!this.allowHalf)return this.value;let o=e.currentTarget,t=o.getBoundingClientRect();if(!t.width)return this.value;let n=(e.clientX-t.left)/t.width;return((0,b.resolveDirection)(o)==="rtl"?1-n:n)<=.5?this.value-.5:this.value}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null}),(0,v.reflectHostState)(this,{"data-state":this.isChecked?"checked":"unchecked","data-highlighted":this.isHighlighted?"":null})}render(){let e=this.isChecked,o=this.isDisabled,t=this.allowHalf;return r.html`
+      <button
+        part="item"
+        type="button"
+        role=${t?r.nothing:"radio"}
+        aria-checked=${t?r.nothing:e}
+        aria-hidden=${t?"true":r.nothing}
+        data-state=${e?"checked":"unchecked"}
+        data-highlighted=${this.isHighlighted?"":r.nothing}
+        data-half=${this.isHalf?"":r.nothing}
+        data-disabled=${o?"":r.nothing}
+        ?disabled=${o}
+        tabindex=${t?"-1":this.isTabStop?"0":"-1"}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @pointerenter=${this.handlePointerEnter}
+        @pointermove=${this.handlePointerMove}
+        @keydown=${this.handleKeydown}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=l.delegatesFocusShadowRootOptions,s.styles=[l.resetNativeControl,l.hiddenHostStyles,r.css`
+      :host {
+        display: inline-block;
+      }
+    `,l.controlBoxOnHost],u([(0,c.property)({type:Number})],s.prototype,"value",2),u([(0,c.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=u([(0,f.customElement)("skdx-rating-item","rating","item")],s);0&&(module.exports={SkdxRatingItem});

package/dist/rating/RatingItem.d.cts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-rating-item>` — a single selectable item (e.g. one star) within a
+ * `<skdx-rating>`. Renders `role="radio"` in shadow DOM with `aria-checked`,
+ * `data-state`, `data-highlighted` (set for this item and every one before
+ * it, up to the hovered or committed value), and `data-disabled`. Only the
+ * checked item (or item 1 when nothing is selected) is a tab stop; clicking,
+ * focusing, or hovering (when not disabled/read-only) selects it. Must be
+ * used inside `<skdx-rating>`.
+ *
+ * When the root sets `allow-half` the item is purely visual — `aria-hidden`,
+ * out of the tab order, no `role="radio"` — because the root carries the
+ * whole widget's semantics as a `role="slider"`. It still emits
+ * `data-highlighted` plus `data-half` (present when the effective value lands
+ * on this item's leading half) so a brand layer can paint half a star.
+ *
+ * @example
+ * ```html
+ * <skdx-rating-item value="1">★</skdx-rating-item>
+ * ```
+ *
+ * @csspart item - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxRatingItem extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** This item's position/value within the rating scale. */
+    value: number;
+    /** Disables this item specifically, in addition to the ancestor's disabled state. */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly rootObserver;
+    private get allowHalf();
+    private get isChecked();
+    private get isDisabled();
+    /** Display state: the hover preview wins while it exists, but it is only ever read — committing stays with click/focus/keyboard. */
+    private get displayValue();
+    private get isHighlighted();
+    private get isHalf();
+    private get isTabStop();
+    /**
+     * Whole-star mode always means this item's value. With `allowHalf` the
+     * leading half of the item's box (trailing half under RTL) means
+     * `value - 0.5`. A zero-width box (jsdom, or an item that hasn't been laid
+     * out yet) falls back to the whole value rather than dividing by zero.
+     */
+    private valueFromPointer;
+    private readonly handleClick;
+    private readonly handleFocus;
+    private readonly handlePointerEnter;
+    private readonly handlePointerMove;
+    private readonly handleKeydown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-rating-item': SkdxRatingItem;
+    }
+}

package/dist/rating/RatingItem.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-rating-item>` — a single selectable item (e.g. one star) within a
+ * `<skdx-rating>`. Renders `role="radio"` in shadow DOM with `aria-checked`,
+ * `data-state`, `data-highlighted` (set for this item and every one before
+ * it, up to the hovered or committed value), and `data-disabled`. Only the
+ * checked item (or item 1 when nothing is selected) is a tab stop; clicking,
+ * focusing, or hovering (when not disabled/read-only) selects it. Must be
+ * used inside `<skdx-rating>`.
+ *
+ * When the root sets `allow-half` the item is purely visual — `aria-hidden`,
+ * out of the tab order, no `role="radio"` — because the root carries the
+ * whole widget's semantics as a `role="slider"`. It still emits
+ * `data-highlighted` plus `data-half` (present when the effective value lands
+ * on this item's leading half) so a brand layer can paint half a star.
+ *
+ * @example
+ * ```html
+ * <skdx-rating-item value="1">★</skdx-rating-item>
+ * ```
+ *
+ * @csspart item - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxRatingItem extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** This item's position/value within the rating scale. */
+    value: number;
+    /** Disables this item specifically, in addition to the ancestor's disabled state. */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly rootObserver;
+    private get allowHalf();
+    private get isChecked();
+    private get isDisabled();
+    /** Display state: the hover preview wins while it exists, but it is only ever read — committing stays with click/focus/keyboard. */
+    private get displayValue();
+    private get isHighlighted();
+    private get isHalf();
+    private get isTabStop();
+    /**
+     * Whole-star mode always means this item's value. With `allowHalf` the
+     * leading half of the item's box (trailing half under RTL) means
+     * `value - 0.5`. A zero-width box (jsdom, or an item that hasn't been laid
+     * out yet) falls back to the whole value rather than dividing by zero.
+     */
+    private valueFromPointer;
+    private readonly handleClick;
+    private readonly handleFocus;
+    private readonly handlePointerEnter;
+    private readonly handlePointerMove;
+    private readonly handleKeydown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-rating-item': SkdxRatingItem;
+    }
+}

package/dist/rating/RatingItem.js

@@ -0,0 +1,26 @@
+var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(d,s,e,i)=>{for(var t=i>1?void 0:i?v(s,e):s,r=d.length-1,l;r>=0;r--)(l=d[r])&&(t=(i?l(s,e,t):l(t))||t);return i&&t&&c(s,e,t),t};import{css as p,html as f,LitElement as b,nothing as a}from"lit";import{property as h}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{resolveDirection as g}from"../internal/direction.js";import{reflectHostState as u}from"../internal/part.js";import{controlBoxOnHost as y,delegatesFocusShadowRootOptions as k,hiddenHostStyles as H,resetNativeControl as w}from"../internal/styles.js";var o=class extends b{constructor(){super(...arguments);this.value=0;this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.rootObserver=new MutationObserver(()=>this.requestUpdate());this.handleClick=e=>{this.isDisabled||this.root?.commit(this.valueFromPointer(e))};this.handleFocus=()=>{this.isDisabled||this.allowHalf||this.isChecked||this.root?.commit(this.value)};this.handlePointerEnter=e=>{this.isDisabled||this.root?.readOnly||this.root?.setHoverValue(this.valueFromPointer(e))};this.handlePointerMove=e=>{!this.allowHalf||this.isDisabled||this.root?.readOnly||this.root?.setHoverValue(this.valueFromPointer(e))};this.handleKeydown=e=>{e.key==="Enter"&&e.preventDefault()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-rating"),!this.root)throw new Error("<skdx-rating-item> must be used inside <skdx-rating>.");this.root.addEventListener("skdx-rating-internal-update",this.onRootUpdate),this.rootObserver.observe(this.root,{attributeFilter:["value","disabled","read-only","allow-half"]})}disconnectedCallback(){this.root?.removeEventListener("skdx-rating-internal-update",this.onRootUpdate),this.rootObserver.disconnect(),super.disconnectedCallback()}get allowHalf(){return this.root?.allowHalf??!1}get isChecked(){return this.root?.value===this.value||this.allowHalf&&this.root?.value===this.value-.5}get isDisabled(){return this.disabled||(this.root?.disabled??!1)}get displayValue(){let e=this.root;return e?e.hoverValue??e.value:null}get isHighlighted(){let e=this.displayValue;return e===null?!1:e>=(this.allowHalf?this.value-.5:this.value)}get isHalf(){return this.allowHalf&&this.displayValue===this.value-.5}get isTabStop(){let e=this.root;return e?this.isChecked||e.value===0&&this.value===1:!1}valueFromPointer(e){if(!this.allowHalf)return this.value;let i=e.currentTarget,t=i.getBoundingClientRect();if(!t.width)return this.value;let r=(e.clientX-t.left)/t.width;return(g(i)==="rtl"?1-r:r)<=.5?this.value-.5:this.value}updated(){u(this,{"data-disabled":this.isDisabled?"":null}),u(this,{"data-state":this.isChecked?"checked":"unchecked","data-highlighted":this.isHighlighted?"":null})}render(){let e=this.isChecked,i=this.isDisabled,t=this.allowHalf;return f`
+      <button
+        part="item"
+        type="button"
+        role=${t?a:"radio"}
+        aria-checked=${t?a:e}
+        aria-hidden=${t?"true":a}
+        data-state=${e?"checked":"unchecked"}
+        data-highlighted=${this.isHighlighted?"":a}
+        data-half=${this.isHalf?"":a}
+        data-disabled=${i?"":a}
+        ?disabled=${i}
+        tabindex=${t?"-1":this.isTabStop?"0":"-1"}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @pointerenter=${this.handlePointerEnter}
+        @pointermove=${this.handlePointerMove}
+        @keydown=${this.handleKeydown}
+      >
+        <slot></slot>
+      </button>
+    `}};o.shadowRootOptions=k,o.styles=[w,H,p`
+      :host {
+        display: inline-block;
+      }
+    `,y],n([h({type:Number})],o.prototype,"value",2),n([h({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=n([m("skdx-rating-item","rating","item")],o);export{o as SkdxRatingItem};

package/dist/rating/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(o,t)=>{for(var x in t)e(o,x,{get:t[x],enumerable:!0})},n=(o,t,x,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!i.call(o,r)&&r!==x&&e(o,r,{get:()=>t[r],enumerable:!(m=f(t,r))||m.enumerable});return o};var p=o=>n(e({},"__esModule",{value:!0}),o);var R={};k(R,{SkdxRating:()=>a.SkdxRating,SkdxRatingItem:()=>d.SkdxRatingItem});module.exports=p(R);var a=require("./Rating.cjs"),d=require("./RatingItem.cjs");0&&(module.exports={SkdxRating,SkdxRatingItem});

package/dist/rating/index.d.cts

@@ -0,0 +1,2 @@
+export { SkdxRating } from './Rating.cjs';
+export { SkdxRatingItem } from './RatingItem.cjs';

package/dist/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { SkdxRating } from './Rating.js';
+export { SkdxRatingItem } from './RatingItem.js';

package/dist/rating/index.js

@@ -0,0 +1 @@
+import{SkdxRating as r}from"./Rating.js";import{SkdxRatingItem as e}from"./RatingItem.js";export{r as SkdxRating,e as SkdxRatingItem};

package/dist/resizable/ResizableHandle.cjs

@@ -0,0 +1,12 @@
+"use strict";var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(n,i)=>{for(var e in i)h(n,e,{get:i[e],enumerable:!0})},P=(n,i,e,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of g(i))!m.call(n,t)&&t!==e&&h(n,t,{get:()=>i[t],enumerable:!(r=b(i,t))||r.enumerable});return n};var z=n=>P(h({},"__esModule",{value:!0}),n),u=(n,i,e,r)=>{for(var t=r>1?void 0:r?b(i,e):i,o=n.length-1,s;o>=0;o--)(s=n[o])&&(t=(r?s(i,e,t):s(t))||t);return r&&t&&h(i,e,t),t};var y={};f(y,{SkdxResizableHandle:()=>a});module.exports=z(y);var l=require("lit"),c=require("lit/decorators.js"),v=require("../internal/define.cjs"),p=require("../internal/direction.cjs");var a=class extends l.LitElement{constructor(){super(...arguments);this.disabled=!1;this.step=2;this.group=null;this.handleIndex=0;this.dragLastPos=null;this.handlePointerDown=e=>{this.disabled||(this.setPointerCapture?.(e.pointerId),this.dragLastPos=this.group?.direction==="horizontal"?e.clientX:e.clientY)};this.handlePointerMove=e=>{if(this.disabled||this.dragLastPos===null||!this.group)return;let r=this.group.getBoundingClientRect(),t=this.group.direction,o=t==="horizontal"?r.width:r.height;if(!o)return;let s=t==="horizontal"?e.clientX:e.clientY,d=(s-this.dragLastPos)/o*100;t==="horizontal"&&(0,p.resolveDirection)(this)==="rtl"&&(d=-d),this.dragLastPos=s,d!==0&&this.group.resizePanels(this.handleIndex,d),this.requestUpdate()};this.handlePointerUp=e=>{this.dragLastPos!==null&&this.releasePointerCapture?.(e.pointerId),this.dragLastPos=null};this.handleKeyDown=e=>{if(this.disabled||!this.group)return;let r=this.group.direction==="horizontal",t=r?"ArrowRight":"ArrowDown",o=r?"ArrowLeft":"ArrowUp",s=(0,p.directionalKey)(e.key,this);if(s===t)e.preventDefault(),this.group.resizePanels(this.handleIndex,this.step);else if(s===o)e.preventDefault(),this.group.resizePanels(this.handleIndex,-this.step);else if(s==="Home")e.preventDefault(),this.group.resizePanels(this.handleIndex,-1e3);else if(s==="End")e.preventDefault(),this.group.resizePanels(this.handleIndex,1e3);else return;this.requestUpdate()}}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-resizable-panel-group"),!this.group)throw new Error("<skdx-resizable-handle> must be used inside <skdx-resizable-panel-group>.");this.handleIndex=this.group.registerHandle(),this.setAttribute("role","separator"),this.disabled?this.removeAttribute("tabindex"):this.tabIndex=0,this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),super.disconnectedCallback()}updated(){this.disabled?this.removeAttribute("tabindex"):this.tabIndex=0,this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){let e=this.group?.getPanelConfig(this.handleIndex),{sizes:r}=this.group?.getLayout()??{sizes:[]},t=r[this.handleIndex]??0,o=this.group?.direction??"horizontal",s=o==="horizontal"?"vertical":"horizontal";return this.setAttribute("aria-orientation",s),this.setAttribute("data-orientation",o),e&&(this.setAttribute("aria-valuenow",String(Math.round(t))),this.setAttribute("aria-valuemin",String(e.minSize)),this.setAttribute("aria-valuemax",String(e.maxSize))),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),l.html`<slot>${l.nothing}</slot>`}};a.styles=l.css`
+    :host {
+      display: block;
+      touch-action: none;
+    }
+    :host(:not([data-disabled])[data-orientation='horizontal']) {
+      cursor: col-resize;
+    }
+    :host(:not([data-disabled])[data-orientation='vertical']) {
+      cursor: row-resize;
+    }
+  `,u([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),u([(0,c.property)({type:Number})],a.prototype,"step",2),a=u([(0,v.customElement)("skdx-resizable-handle","resizable","handle")],a);0&&(module.exports={SkdxResizableHandle});

package/dist/resizable/ResizableHandle.d.cts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-resizable-handle>` — the draggable divider between two
+ * `<skdx-resizable-panel>`s. `role="separator"` with `aria-orientation` set to
+ * the axis *perpendicular* to the group's `direction`, plus
+ * `aria-valuenow`/`aria-valuemin`/`aria-valuemax` describing the size of the
+ * panel to its start side. Draggable via pointer, and keyboard-operable when
+ * focused: Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical
+ * groups) nudge by `step`, Home/End jump to the panel's min/max size. Must
+ * be used inside `<skdx-resizable-panel-group>`.
+ */
+export declare class SkdxResizableHandle extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Disables dragging and keyboard resizing on this handle. */
+    disabled: boolean;
+    /** Percentage nudged per Arrow key press. @default 2 */
+    step: number;
+    private group;
+    private handleIndex;
+    private dragLastPos;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    private readonly handlePointerUp;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-resizable-handle': SkdxResizableHandle;
+    }
+}