@skdx/react 0.26.0 → 0.28.0

package/dist/select/types.d.ts

@@ -1,258 +1,210 @@
 import type * as React from 'react';
 import type { FormValidityHandle } from '../utils/formControl.js';
+import type { PassThroughProps } from '../utils/passThrough.js';
 import type { PopperContentProps } from '../utils/popper.js';
 import type { PortalProps } from '../utils/portal.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { InteractOutsideEvent } from '../utils/useDismiss.js';
-/**
- * One entry of the {@link SelectProps.items} collection: everything the root
- * needs to know about an option *before* that option has ever been rendered.
- */
+import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
+import type { SelectionChangeDetail } from '../utils/useSelection.js';
+/** One entry of {@link SelectProps.items}: option metadata before rendering. */
 export interface SelectItemDescriptor {
-    /** Identifier committed to the root's value when this option is chosen. */
+    /** Identifier committed to the root's value when chosen. */
     value: string;
-    /**
-     * Text shown by `SelectValue` and matched by trigger typeahead. A mounted
-     * `SelectItemText` overrides it.
-     * @default undefined — falls back to `value`.
-     */
+    /** Text for SelectValue and typeahead; overridden by mounted SelectItemText. @default undefined — falls back to value. */
     label?: string;
-    /**
-     * Excludes this option from trigger typeahead. The rendered `SelectItem`'s
-     * own `disabled` is what excludes it from selection.
-     * @default false
-     */
+    /** Excludes from trigger typeahead; rendered SelectItem's disabled excludes from selection. @default false */
+    disabled?: boolean;
+}
+/** One option for {@link SelectProps.options} recipe prop — flat entry rendered as SelectItem. */
+export interface SelectOption {
+    /** Identifier committed when chosen. */
+    value: string;
+    /** Text for SelectValue and typeahead. @default undefined — falls back to value. */
+    label?: string;
+    /** Excludes from selection and typeahead. @default false */
     disabled?: boolean;
 }
+/** Labeled group of SelectOptions for SelectProps.options; grouping is data-driven. */
+export interface SelectOptionGroup {
+    /** Heading rendered as SelectLabel above this group's options. */
+    label: string;
+    /** Options in this group. */
+    options: SelectOption[];
+}
+/** One entry of {@link SelectProps.options}: a flat option, or a labeled group of them. */
+export type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
+/** Where opening should put the active option: 'selected', 'first', or 'last'. @internal */
+export type SelectOpenIntent = 'selected' | 'first' | 'last';
 /** @internal Shared state distributed from {@link Select} to its parts via context. Not part of the public API. */
 export interface SelectContextValue {
+    /** Hands focus back to the trigger; the one place `close-auto-focus` announces from. */
+    focusTrigger: () => void;
+    /** SelectContent's onCloseAutoFocus callback; mutable ref because Content's lifecycle spans the root's. */
+    closeAutoFocusRef: React.MutableRefObject<((event: AutoFocusEvent) => void) | undefined>;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
+    /** Id on SelectValue; trigger's aria-labelledby points at it. */
+    valueId: string;
+    /** Whether SelectValue is mounted (aria-labelledby must name an existing element). */
+    hasValuePart: boolean;
+    /** Called by SelectValue on mount/unmount to keep trigger's aria-labelledby valid. */
+    setHasValuePart: (present: boolean) => void;
+    /** Id of virtually-focused option or null; published as aria-activedescendant/data-highlighted. */
+    activeId: string | null;
+    /** Moves virtual focus to an option or clears it. */
+    setActiveId: (id: string | null) => void;
+    /** Where next open should put active option; written by trigger, read by SelectContent on mount. Ref for inter-part messaging, not rendering. */
+    openIntentRef: React.MutableRefObject<SelectOpenIntent>;
     /** Whether more than one option can be selected. */
     multiple: boolean;
-    /** Every selected value, normalised to an array whether or not `multiple`. */
+    /** Whether committing an option closes the listbox (defaults to !multiple). */
+    closeOnSelect: boolean;
+    /** Every selected value, normalized to an array. */
     selectedValues: string[];
     /** Whether one option value is currently selected. */
     isSelected: (value: string) => boolean;
-    /** Commits an option: replaces the selection, or toggles it within it when `multiple`. */
+    /** Commits an option: replaces or toggles it when multiple. */
     selectItem: (value: string) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     disabled: boolean;
+    /** Selection is fixed; trigger stays focusable and in form submission, but listbox refuses to open. */
+    readOnly: boolean;
     required: boolean;
     invalid: boolean;
     name?: string;
     registerOptionLabel: (value: string, label: string) => void;
-    /** Label for a value: a registered `SelectItemText` wins, then `items`, then the value itself. */
+    /** Label for a value: registered SelectItemText, then items, then value itself. */
     getOptionLabel: (value: string) => string;
-    /** Every option the root knows about without opening the listbox — the trigger-typeahead pool. */
+    /** Every option known without opening (the trigger-typeahead pool). */
     collection: SelectItemDescriptor[];
 }
-/** Props for the {@link Select} root. */
-export interface SelectProps {
+/** Props for Select root; standard attributes land on the derived SelectTrigger. */
+export interface SelectProps extends PassThroughProps {
     /**
-     * The trigger, portal, and content parts, distributed selection/open state via context.
+     * Trigger, portal, and content parts with selection/open state via context.
      * @default undefined
      */
     children?: React.ReactNode;
-    /**
-     * Selected option's value, for controlled usage — a `string[]` when
-     * `multiple`, a `string` otherwise. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own selected value internally.
-     */
+    /** Selected option value(s) for controlled usage; pair with onValueChange. @default undefined — uncontrolled. */
     value?: string | string[];
-    /**
-     * Initially selected option's value, for uncontrolled usage. Same shape as
-     * `value`: a `string[]` when `multiple`.
-     * @default undefined — no option selected until the user picks one.
-     */
+    /** Initially selected value(s) for uncontrolled usage. @default undefined — no option selected until user picks one. */
     defaultValue?: string | string[];
-    /**
-     * Fires with the new value whenever the selected option changes, controlled
-     * or not — the whole `string[]` when `multiple`, not the toggled option.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string | string[]) => void;
-    /**
-     * Allows more than one option to be selected: `value` becomes a `string[]`,
-     * the listbox gets `aria-multiselectable`, choosing an option toggles it
-     * instead of replacing the selection, and the listbox stays open so several
-     * options can be picked in one pass.
-     * @default false
-     */
+    /** Fires when selection changes with the whole selection, not the toggled option. @default undefined — no-op if omitted. */
+    onValueChange?: (detail: SelectionChangeDetail) => void;
+    /** Allows more than one option selected. Sets aria-multiselectable="true" on Content, toggles options instead of replacing, keeps listbox open. @default false */
     multiple?: boolean;
-    /**
-     * The full option collection, declared up front.
-     *
-     * Options otherwise register their label only when `SelectContent` mounts,
-     * and `SelectContent` unmounts while closed — so before the listbox has
-     * ever been opened the root knows no labels at all, which leaves
-     * `SelectValue` rendering a raw `defaultValue` and leaves the closed trigger
-     * with nothing to run typeahead against. `items` closes both gaps from
-     * first paint. It renders nothing; mounted `SelectItem`s stay the source of
-     * truth for anything it doesn't cover.
-     * @default undefined — the root only knows options that have been rendered.
-     */
+    /** Picking the already-selected option in single-select mode clears it; ignored in multiple mode. @default false */
+    deselectable?: boolean;
+    /** Option collection declared up front. Enables closed-trigger typeahead and labels on first paint before Content mounts. @default undefined — only knows rendered options. */
     items?: SelectItemDescriptor[];
-    /**
-     * Whether the listbox popup is open, for controlled usage. Pair with `onOpenChange`.
-     * @default undefined — uncontrolled, tracks its own open state internally.
-     */
+    /** Flat or grouped option data to render automatically — trigger, portal, listbox, and Items — instead of hand composition. @default undefined — compose parts yourself. */
+    options?: SelectOptionOrGroup[];
+    /** Customizes how derived option renders inside SelectItem; receives option and selected state. @default undefined — renders option.label ?? option.value. */
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    /** Customizes trigger content in place of default label/chips; receives selected option(s) or null. @default undefined — renders default label/placeholder/chips. */
+    renderValue?: (selected: SelectOption | SelectOption[] | null) => React.ReactNode;
+    /** Placeholder shown by derived trigger while nothing is selected; only read while options derives. @default undefined — renders nothing when no option selected. */
+    placeholder?: string;
+    /** Picking an option closes the listbox. Defaults to !multiple; can override the default. @default !multiple */
+    closeOnSelect?: boolean;
+    /** Whether the listbox popup is open for controlled usage; pair with onOpenChange. @default undefined — uncontrolled. */
     open?: boolean;
-    /**
-     * Initial open state, for uncontrolled usage.
-     * @default false
-     */
+    /** Initial open state for uncontrolled usage. @default false */
     defaultOpen?: boolean;
-    /**
-     * Fires with the new open state whenever it changes, controlled or not.
-     * @default undefined — no-op if omitted.
-     */
+    /** Fires with new open state whenever it changes, controlled or not. @default undefined — no-op if omitted. */
     onOpenChange?: (open: boolean) => void;
-    /**
-     * Fires with the new open state once the change has finished on screen — after
-     * `SelectContent`'s enter or exit animation ends, or as soon as the listbox has
-     * settled when it declares no animation. Use it for work that must not race the
-     * transition; use `onOpenChange` for work that must not wait for it.
-     * @default undefined — no-op if omitted.
-     */
+    /** Fires with new open state once animation finishes (after SelectContent's enter/exit ends). @default undefined — no-op if omitted. */
     onOpenChangeComplete?: (open: boolean) => void;
-    /**
-     * Disables the trigger and prevents opening the listbox.
-     * @default false
-     */
+    /** Disables the trigger and prevents opening. Distinct from readOnly, which keeps focusable and submits. @default false */
     disabled?: boolean;
-    /**
-     * Marks the underlying hidden `<select>` as required for form validation.
-     * Only meaningful when `name` is also set.
-     * @default false
-     */
+    /** Unchangeable value. Trigger keeps tab stop and focus, carries aria-readonly="true" and data-readonly, submits the value. @default false */
+    readOnly?: boolean;
+    /** Marks hidden form controls as required for constraint validation (only meaningful when name is set). @default false */
     required?: boolean;
-    /**
-     * Marks the select as invalid, exposed as `aria-invalid`/`data-invalid` on
-     * the `SelectTrigger`.
-     * @default false
-     */
+    /** Marks select as invalid, exposed as aria-invalid/data-invalid on SelectTrigger. @default false */
     invalid?: boolean;
-    /**
-     * When set, renders a visually-hidden native `<select>` in sync with the value, so the select participates in native form submission and validation.
-     * @default undefined — no hidden input rendered.
-     */
+    /** Visually-hidden native form control kept in sync with value for submission, reset, and validation. @default undefined — no hidden control. */
     name?: string;
+    /** Form id the select submits into, forwarded to every hidden control so select can live outside the form it belongs to. @default undefined — submit into nearest ancestor form. */
+    form?: string;
+    /** Browser autofill hint, forwarded to the first mirrored hidden control — the same one that answers for the whole set's validity. @default undefined — no autofill hint. */
+    autoComplete?: string;
 }
 /** Props for {@link SelectTrigger}, the button that opens the listbox and displays the current value. */
 export interface SelectTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
-/** Props for {@link SelectValue}, which renders the selected option's label (or a placeholder) inside the trigger. */
+/** Props for SelectValue: renders the selected option's label or placeholder inside the trigger. */
 export interface SelectValueProps extends PrimitivePropsWithRef<'span'> {
-    /**
-     * Content shown when no value is selected.
-     * @default undefined — renders nothing when no value is selected.
-     */
+    /** Shown while no option is selected. @default undefined — renders nothing. */
     placeholder?: React.ReactNode;
 }
-/** Props for {@link SelectIcon}, a decorative indicator inside the trigger (defaults to `▾`). */
+/** Props for SelectIcon, a decorative indicator inside the trigger (defaults to ▾). */
 export interface SelectIconProps extends PrimitivePropsWithRef<'span'> {
 }
-/** Props for {@link SelectPortal}, which teleports its content to `document.body` while the listbox is open. */
+/** Props for SelectPortal: teleports its content to document.body while the listbox is open. */
 export interface SelectPortalProps extends PortalProps {
-    /**
-     * Render (and mount `SelectContent`) even while closed, instead of
-     * unmounting. Useful for animation libraries that need the outgoing
-     * content present in the DOM during an exit transition.
-     * @default false
-     */
+    /** Mount SelectContent even while closed, for animation exit transitions. @default false */
     forceMount?: boolean;
 }
-/**
- * Props for {@link SelectContent}, the listbox popup. Extends
- * {@link PopperContentProps} (`side`, `align`, `sideOffset`, `alignOffset`,
- * `avoidCollisions`, `collisionPadding`) for floating-ui positioning relative
- * to the trigger — note `SelectContent` defaults `side` to `'bottom'`,
- * `align` to `'start'`, and `sideOffset` to `4`, instead of the popper base
- * defaults (`'bottom'` / `'center'` / `0`).
- */
+/** Props for SelectContent: the listbox popup with side='bottom', align='start', sideOffset=4 defaults. */
 export interface SelectContentProps extends PopperContentProps {
-    /**
-     * Keep this listbox mounted even while closed, instead of unmounting it.
-     * @default false
-     */
+    /** Mount listbox even while closed, for animation exit transitions. @default false */
     forceMount?: boolean;
-    /**
-     * Fires on Escape while open. `preventDefault()` keeps the listbox open.
-     * @default undefined — no-op if omitted.
-     */
+    /** Fires on Escape while open; preventDefault() keeps it open. @default undefined — no-op if omitted. */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Fires on a pointer-down outside the listbox and trigger. `preventDefault()` keeps it open.
-     * @default undefined — no-op if omitted.
-     */
+    /** Fires on pointer-down outside listbox and trigger; preventDefault() keeps it open. @default undefined — no-op if omitted. */
     onPointerDownOutside?: (event: PointerEvent) => void;
-    /**
-     * Fires when focus moves outside the listbox and trigger, carrying a
-     * cancelable stand-in for the uncancelable `focusin`. `preventDefault()`
-     * keeps the listbox open.
-     * @default undefined — no-op if omitted.
-     */
+    /** Fires when focus moves outside (cancelable focusin stand-in); preventDefault() keeps it open. @default undefined — no-op if omitted. */
     onFocusOutside?: (event: CustomEvent<FocusEvent>) => void;
-    /**
-     * Fires for *either* kind of outside interaction, immediately before the
-     * specific handler and with the same event — so one `preventDefault()`
-     * vetoes both paths.
-     * @default undefined — no-op if omitted.
-     */
+    /** Fires for outside interaction before specific handler; preventDefault() vetoes both paths. @default undefined — no-op if omitted. */
     onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /** Fires before focus returns to trigger as listbox closes; preventDefault() suppresses return. @default undefined — no-op if omitted. */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
 }
 /** Props for {@link SelectViewport}, the scrollable container for `SelectItem`s inside `SelectContent`. */
 export interface SelectViewportProps extends PrimitivePropsWithRef<'div'> {
 }
-/** @internal Shared state distributed from {@link SelectItem} to its text/indicator via context. Not part of the public API. */
+/** @internal Shared state distributed from SelectItem to its text/indicator via context. */
 export interface SelectItemContextValue {
     value: string;
     selected: boolean;
     registerText: (text: string) => void;
 }
-/** Props for a single {@link SelectItem} option within `SelectContent`. */
+/** Props for a single SelectItem option within SelectContent. */
 export interface SelectItemProps extends PrimitivePropsWithRef<'div'> {
-    /** Unique identifier committed to the select root's value when this option is chosen. */
+    /** Identifier committed to the root's value when chosen. */
     value: string;
-    /**
-     * Excludes this option from selection and keyboard/typeahead navigation.
-     * @default false
-     */
+    /** Excludes from selection and keyboard navigation. @default false */
     disabled?: boolean;
-    /**
-     * Text used for the trigger label; defaults to the item's text content.
-     * @default undefined — falls back to the item's rendered text content.
-     */
+    /** Text for Trigger label and typeahead, published as data-text-value; falls back to rendered text. @default undefined — falls back to rendered text. */
     textValue?: string;
 }
-/** Props for {@link SelectItemText}, the label content of a {@link SelectItem}, whose text is captured for `SelectValue`. */
+/** Props for SelectItemText: an Item's label content, captured so Value can render it inside Trigger. */
 export interface SelectItemTextProps extends PrimitivePropsWithRef<'span'> {
 }
-/** Props for {@link SelectItemIndicator}, shown inside a {@link SelectItem} when it's the selected option. */
+/** Props for SelectItemIndicator: selected-state glyph inside an Item, rendered only while selected. */
 export interface SelectItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
-    /**
-     * Keep this indicator mounted even while its item isn't selected, instead
-     * of rendering nothing.
-     * @default false
-     */
+    /** Mount this indicator even while its item isn't selected, for animation exit transitions. @default false */
     forceMount?: boolean;
 }
-/** Props for {@link SelectGroup}, a labeled group of related `SelectItem`s. */
+/** Props for SelectGroup, a labeled group of related SelectItems. */
 export interface SelectGroupProps extends PrimitivePropsWithRef<'div'> {
 }
-/** Props for {@link SelectLabel}, a heading for a {@link SelectGroup}. */
+/** What SelectGroup publishes to its SelectLabel: the id the group points aria-labelledby at. */
+export interface SelectGroupContextValue {
+    /** The id the group's aria-labelledby names (null when SelectLabel rendered outside any group). */
+    labelId: string | null;
+}
+/** Props for SelectLabel: non-interactive heading for Group, providing its accessible name. */
 export interface SelectLabelProps extends PrimitivePropsWithRef<'div'> {
 }
-/** Props for {@link SelectSeparator}, a visual divider between items or groups. */
+/** Props for SelectSeparator: visual divider between Items or Groups inside Content, renders aria-hidden element. */
 export interface SelectSeparatorProps extends PrimitivePropsWithRef<'div'> {
 }
-/**
- * What {@link Select}'s forwarded ref carries. The root renders no DOM of its
- * own besides its mirrored inputs, so the ref is these two
- * constraint-validation methods and nothing else —
- * `React.useRef<SelectHandle>(null)`.
- */
+/** What Select's forwarded ref carries: constraint-validation methods only (root renders no DOM besides mirrored inputs). */
 export type SelectHandle = FormValidityHandle;

package/dist/separator/Separator.cjs

@@ -1 +1 @@
-"use strict";var n=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var v=(r,o)=>{for(var a in o)p(r,a,{get:o[a],enumerable:!0})},i=(r,o,a,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of P(o))!c.call(r,e)&&e!==a&&p(r,e,{get:()=>o[e],enumerable:!(t=y(o,e))||t.enumerable});return r};var x=(r,o,a)=>(a=r!=null?n(S(r)):{},i(o||!r||!r.__esModule?p(a,"default",{value:r,enumerable:!0}):a,r)),R=r=>i(p({},"__esModule",{value:!0}),r);var N={};v(N,{Separator:()=>d});module.exports=R(N);var m=x(require("react"),1),s=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),l=require("react/jsx-runtime"),d=m.forwardRef(({orientation:r="horizontal",decorative:o,...a},t)=>(0,l.jsx)(f.Primitive.div,{"data-orientation":r,...o?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...a,...(0,s.skdxPart)("separator","root",a.className),ref:t}));d.displayName="Separator";0&&(module.exports={Separator});
+"use strict";var f=Object.create;var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var P=(r,o)=>{for(var t in o)p(r,t,{get:o[t],enumerable:!0})},i=(r,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of S(o))!y.call(r,e)&&e!==t&&p(r,e,{get:()=>o[e],enumerable:!(a=h(o,e))||a.enumerable});return r};var R=(r,o,t)=>(t=r!=null?f(c(r)):{},i(o||!r||!r.__esModule?p(t,"default",{value:r,enumerable:!0}):t,r)),g=r=>i(p({},"__esModule",{value:!0}),r);var x={};P(x,{Separator:()=>l});module.exports=g(x);var s=R(require("react"),1),m=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),d=require("react/jsx-runtime"),l=s.forwardRef(({orientation:r="horizontal",decorative:o,children:t,...a},e)=>(0,d.jsx)(n.Primitive.hr,{"data-orientation":r,...o?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...a,...(0,m.skdxPart)("separator","root",a.className),...a.asChild?{children:t}:null,ref:e}));l.displayName="Separator";0&&(module.exports={Separator});

package/dist/separator/Separator.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { SeparatorProps } from './types.cjs';
 /**
- * Visual or semantic divider between content. Renders `role="separator"`
- * with `aria-orientation` (vertical only) unless `decorative` is set, in
- * which case it renders `role="none"` and is removed from the a11y tree.
- * Always exposes `data-orientation` for styling.
+ * Divider, renders `<hr>` with `role="separator"`. Set `decorative` for
+ * `role="none"` (removed from a11y tree). Void element; `children` dropped
+ * except under `asChild`.
  *
  * @example
  * ```tsx
@@ -15,4 +14,4 @@ import type { SeparatorProps } from './types.cjs';
  * </div>
  * ```
  */
-export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLHRElement>>;

package/dist/separator/Separator.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { SeparatorProps } from './types.js';
 /**
- * Visual or semantic divider between content. Renders `role="separator"`
- * with `aria-orientation` (vertical only) unless `decorative` is set, in
- * which case it renders `role="none"` and is removed from the a11y tree.
- * Always exposes `data-orientation` for styling.
+ * Divider, renders `<hr>` with `role="separator"`. Set `decorative` for
+ * `role="none"` (removed from a11y tree). Void element; `children` dropped
+ * except under `asChild`.
  *
  * @example
  * ```tsx
@@ -15,4 +14,4 @@ import type { SeparatorProps } from './types.js';
  * </div>
  * ```
  */
-export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLHRElement>>;

package/dist/separator/Separator.js

@@ -1 +1 @@
-import*as a from"react";import{skdxPart as p}from"../utils/part.js";import{Primitive as i}from"../utils/primitive.js";import{jsx as s}from"react/jsx-runtime";var m=a.forwardRef(({orientation:r="horizontal",decorative:e,...o},t)=>s(i.div,{"data-orientation":r,...e?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...o,...p("separator","root",o.className),ref:t}));m.displayName="Separator";export{m as Separator};
+import*as t from"react";import{skdxPart as i}from"../utils/part.js";import{Primitive as s}from"../utils/primitive.js";import{jsx as n}from"react/jsx-runtime";var m=t.forwardRef(({orientation:r="horizontal",decorative:e,children:a,...o},p)=>n(s.hr,{"data-orientation":r,...e?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...o,...i("separator","root",o.className),...o.asChild?{children:a}:null,ref:p}));m.displayName="Separator";export{m as Separator};

package/dist/separator/types.d.cts

@@ -1,10 +1,8 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** Props for the {@link Separator} root. */
-export interface SeparatorProps extends PrimitivePropsWithRef<'div'> {
+export interface SeparatorProps extends PrimitivePropsWithRef<'hr'> {
     /**
-     * Layout axis, exposed as `data-orientation` and, when not `decorative`,
-     * also as `aria-orientation` (vertical only — horizontal is the ARIA
-     * default and is omitted).
+     * Layout axis. Exposed as `data-orientation` and `aria-orientation` when not `decorative` (vertical only; horizontal is ARIA default).
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';

package/dist/separator/types.d.ts

@@ -1,10 +1,8 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** Props for the {@link Separator} root. */
-export interface SeparatorProps extends PrimitivePropsWithRef<'div'> {
+export interface SeparatorProps extends PrimitivePropsWithRef<'hr'> {
     /**
-     * Layout axis, exposed as `data-orientation` and, when not `decorative`,
-     * also as `aria-orientation` (vertical only — horizontal is the ARIA
-     * default and is omitted).
+     * Layout axis. Exposed as `data-orientation` and `aria-orientation` when not `decorative` (vertical only; horizontal is ARIA default).
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';

package/dist/skeleton/Skeleton.cjs

@@ -1 +1 @@
-"use strict";var n=Object.create;var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var t in o)m(e,t,{get:o[t],enumerable:!0})},a=(e,o,t,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of y(o))!S.call(e,r)&&r!==t&&m(e,r,{get:()=>o[r],enumerable:!(p=d(o,r))||p.enumerable});return e};var c=(e,o,t)=>(t=e!=null?n(P(e)):{},a(o||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),v=e=>a(m({},"__esModule",{value:!0}),e);var R={};x(R,{Skeleton:()=>f});module.exports=v(R);var s=c(require("react"),1),i=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),k=require("react/jsx-runtime"),f=s.forwardRef((e,o)=>(0,k.jsx)(l.Primitive.div,{"aria-hidden":"true","data-skdx-skeleton":"",...e,...(0,i.skdxPart)("skeleton","root",e.className),ref:o}));f.displayName="Skeleton";0&&(module.exports={Skeleton});
+"use strict";var k=Object.create;var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var c=(e,o)=>{for(var t in o)m(e,t,{get:o[t],enumerable:!0})},i=(e,o,t,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of y(o))!S.call(e,r)&&r!==t&&m(e,r,{get:()=>o[r],enumerable:!(p=d(o,r))||p.enumerable});return e};var v=(e,o,t)=>(t=e!=null?k(P(e)):{},i(o||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>i(m({},"__esModule",{value:!0}),e);var R={};c(R,{Skeleton:()=>l});module.exports=x(R);var a=v(require("react"),1),s=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),n=require("react/jsx-runtime"),l=a.forwardRef((e,o)=>(0,n.jsx)(f.Primitive.div,{"aria-hidden":"true",...e,...(0,s.skdxPart)("skeleton","root",e.className),ref:o}));l.displayName="Skeleton";0&&(module.exports={Skeleton});

package/dist/skeleton/Skeleton.d.cts

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import type { SkeletonProps } from './types.cjs';
 /**
- * Loading placeholder block. Renders a `<div>` with `aria-hidden="true"` and
- * `data-skdx-skeleton` — purely visual, hidden from assistive tech so screen
- * readers don't announce placeholder content as if it were real. Shape/size
- * and shimmer animation are brand-layer concerns applied via `className`.
+ * Loading placeholder block. Renders a `<div>` with `aria-hidden="true"` —
+ * visual only. Shape, size, and animation are brand-layer concerns. Takes no
+ * content; size with `style`/`className` instead.
+ *
+ * The container (not this element) announces loading state through
+ * `aria-busy="true"` — a permanently hidden element cannot announce.
  *
  * @example
  * ```tsx
- * <Skeleton style={{ width: 200, height: 20 }} />
+ * <section aria-busy={loading} aria-label="Recent activity">
+ *   {loading ? <Skeleton style={{ width: 200, height: 20 }} /> : <ActivityList />}
+ * </section>
  * ```
  */
 export declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/skeleton/Skeleton.d.ts

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import type { SkeletonProps } from './types.js';
 /**
- * Loading placeholder block. Renders a `<div>` with `aria-hidden="true"` and
- * `data-skdx-skeleton` — purely visual, hidden from assistive tech so screen
- * readers don't announce placeholder content as if it were real. Shape/size
- * and shimmer animation are brand-layer concerns applied via `className`.
+ * Loading placeholder block. Renders a `<div>` with `aria-hidden="true"` —
+ * visual only. Shape, size, and animation are brand-layer concerns. Takes no
+ * content; size with `style`/`className` instead.
+ *
+ * The container (not this element) announces loading state through
+ * `aria-busy="true"` — a permanently hidden element cannot announce.
  *
  * @example
  * ```tsx
- * <Skeleton style={{ width: 200, height: 20 }} />
+ * <section aria-busy={loading} aria-label="Recent activity">
+ *   {loading ? <Skeleton style={{ width: 200, height: 20 }} /> : <ActivityList />}
+ * </section>
  * ```
  */
 export declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/skeleton/Skeleton.js

@@ -1 +1 @@
-import*as o from"react";import{skdxPart as r}from"../utils/part.js";import{Primitive as m}from"../utils/primitive.js";import{jsx as a}from"react/jsx-runtime";var p=o.forwardRef((e,t)=>a(m.div,{"aria-hidden":"true","data-skdx-skeleton":"",...e,...r("skeleton","root",e.className),ref:t}));p.displayName="Skeleton";export{p as Skeleton};
+import*as o from"react";import{skdxPart as r}from"../utils/part.js";import{Primitive as m}from"../utils/primitive.js";import{jsx as i}from"react/jsx-runtime";var p=o.forwardRef((e,t)=>i(m.div,{"aria-hidden":"true",...e,...r("skeleton","root",e.className),ref:t}));p.displayName="Skeleton";export{p as Skeleton};

package/dist/skip-link/SkipLink.cjs

@@ -1 +1 @@
-"use strict";var S=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var i in t)s(e,i,{get:t[i],enumerable:!0})},f=(e,t,i,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!x.call(e,o)&&o!==i&&s(e,o,{get:()=>t[o],enumerable:!(n=b(t,o))||n.enumerable});return e};var v=(e,t,i)=>(i=e!=null?S(h(e)):{},f(t||!e||!e.__esModule?s(i,"default",{value:e,enumerable:!0}):i,e)),y=e=>f(s({},"__esModule",{value:!0}),e);var T={};E(T,{SkipLink:()=>m});module.exports=y(T);var p=v(require("react"),1),d=require("../utils/part.cjs"),r=require("../utils/primitive.cjs"),u=require("react/jsx-runtime"),P={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},R={position:"absolute",top:"0",left:"0",zIndex:999};function w(e){e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}var m=p.forwardRef(({targetId:e,onClick:t,onFocus:i,onBlur:n,style:o,...a},k)=>{let[l,c]=p.useState(!1);return(0,u.jsx)(r.Primitive.a,{href:`#${e}`,"data-state":l?"visible":"hidden",onClick:(0,r.composeEventHandlers)(t,()=>w(document.getElementById(e))),onFocus:(0,r.composeEventHandlers)(i,()=>c(!0)),onBlur:(0,r.composeEventHandlers)(n,()=>c(!1)),style:{...l?R:P,...o},...a,...(0,d.skdxPart)("skip-link","root",a.className),ref:k})});m.displayName="SkipLink";0&&(module.exports={SkipLink});
+"use strict";var y=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},d=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of R(t))!T.call(e,s)&&s!==i&&a(e,s,{get:()=>t[s],enumerable:!(r=w(t,s))||r.enumerable});return e};var g=(e,t,i)=>(i=e!=null?y(v(e)):{},d(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),x=e=>d(a({},"__esModule",{value:!0}),e);var D={};P(D,{SkipLink:()=>S});module.exports=x(D);var o=g(require("react"),1),u=require("../utils/composeRefs.cjs"),c=require("../utils/is-dev-mode.cjs"),h=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),k=require("../utils/tabbable.cjs"),b=require("react/jsx-runtime"),A={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},N={position:"absolute"};function C(e){let t=document.getElementById(e);if(!t){(0,c.isDevMode)()&&console.warn(`[skdx] SkipLink: no element with id "${e}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${e}".`);return}t.hasAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",()=>t.removeAttribute("tabindex"),{once:!0})),t.focus()}function B(e){let t=Array.from(document.querySelectorAll(k.TABBABLE_SELECTOR)).find(i=>i!==e&&!e.contains(i)&&(e.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_PRECEDING)!==0);t&&(0,c.isDevMode)()&&console.warn(`[skdx] SkipLink: a focusable <${t.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)}var S=o.forwardRef(({targetId:e,onClick:t,onFocus:i,onBlur:r,style:s,...l},L)=>{let[f,m]=o.useState(!1),p=o.useRef(null),E=(0,u.useComposedRefs)(L,p);return o.useEffect(()=>{p.current&&B(p.current)},[]),(0,b.jsx)(n.Primitive.a,{href:`#${e}`,"data-state":f?"visible":"hidden",onClick:(0,n.composeEventHandlers)(t,()=>C(e)),onFocus:(0,n.composeEventHandlers)(i,()=>m(!0)),onBlur:(0,n.composeEventHandlers)(r,()=>m(!1)),style:{...f?N:A,...s},...l,...(0,h.skdxPart)("skip-link","root",l.className),ref:E})});S.displayName="SkipLink";0&&(module.exports={SkipLink});

package/dist/skip-link/SkipLink.d.cts

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import type { SkipLinkProps } from './types.cjs';
 /**
- * The bypass-block link (WCAG 2.4.1): render it as the first focusable element
- * on the page so a keyboard or screen-reader user can Tab once and jump
- * straight past repeated navigation. It is clipped out of sight until focused
- * and revealed while focused (`data-state="hidden" | "visible"`), and on
- * activation it programmatically focuses `targetId` rather than only moving
- * the URL hash.
+ * The bypass-block link (WCAG 2.4.1): render as first focusable element on page
+ * so keyboard or screen-reader user can Tab once and jump past repeated navigation.
+ * Clipped out of sight until focused, revealed while focused (`data-state="hidden" | "visible"`).
+ * On activation, programmatically focuses `targetId` rather than only moving URL hash.
  *
  * @example
  * ```tsx

package/dist/skip-link/SkipLink.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import type { SkipLinkProps } from './types.js';
 /**
- * The bypass-block link (WCAG 2.4.1): render it as the first focusable element
- * on the page so a keyboard or screen-reader user can Tab once and jump
- * straight past repeated navigation. It is clipped out of sight until focused
- * and revealed while focused (`data-state="hidden" | "visible"`), and on
- * activation it programmatically focuses `targetId` rather than only moving
- * the URL hash.
+ * The bypass-block link (WCAG 2.4.1): render as first focusable element on page
+ * so keyboard or screen-reader user can Tab once and jump past repeated navigation.
+ * Clipped out of sight until focused, revealed while focused (`data-state="hidden" | "visible"`).
+ * On activation, programmatically focuses `targetId` rather than only moving URL hash.
  *
  * @example
  * ```tsx

package/dist/skip-link/SkipLink.js

@@ -1 +1 @@
-import*as t from"react";import{skdxPart as f}from"../utils/part.js";import{composeEventHandlers as i,Primitive as d}from"../utils/primitive.js";import{jsx as b}from"react/jsx-runtime";var m={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},u={position:"absolute",top:"0",left:"0",zIndex:999};function k(e){e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}var S=t.forwardRef(({targetId:e,onClick:s,onFocus:p,onBlur:a,style:l,...o},c)=>{let[r,n]=t.useState(!1);return b(d.a,{href:`#${e}`,"data-state":r?"visible":"hidden",onClick:i(s,()=>k(document.getElementById(e))),onFocus:i(p,()=>n(!0)),onBlur:i(a,()=>n(!1)),style:{...r?u:m,...l},...o,...f("skip-link","root",o.className),ref:c})});S.displayName="SkipLink";export{S as SkipLink};
+import*as i from"react";import{useComposedRefs as u}from"../utils/composeRefs.js";import{isDevMode as c}from"../utils/is-dev-mode.js";import{skdxPart as h}from"../utils/part.js";import{composeEventHandlers as n,Primitive as k}from"../utils/primitive.js";import{TABBABLE_SELECTOR as S}from"../utils/tabbable.js";import{jsx as R}from"react/jsx-runtime";var b={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},L={position:"absolute"};function E(t){let e=document.getElementById(t);if(!e){c()&&console.warn(`[skdx] SkipLink: no element with id "${t}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${t}".`);return}e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus()}function y(t){let e=Array.from(document.querySelectorAll(S)).find(o=>o!==t&&!t.contains(o)&&(t.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING)!==0);e&&c()&&console.warn(`[skdx] SkipLink: a focusable <${e.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)}var w=i.forwardRef(({targetId:t,onClick:e,onFocus:o,onBlur:l,style:f,...r},m)=>{let[a,p]=i.useState(!1),s=i.useRef(null),d=u(m,s);return i.useEffect(()=>{s.current&&y(s.current)},[]),R(k.a,{href:`#${t}`,"data-state":a?"visible":"hidden",onClick:n(e,()=>E(t)),onFocus:n(o,()=>p(!0)),onBlur:n(l,()=>p(!1)),style:{...a?L:b,...f},...r,...h("skip-link","root",r.className),ref:d})});w.displayName="SkipLink";export{w as SkipLink};