@skdx/vue 0.26.0 → 0.28.0

package/dist/navigation-menu/NavigationMenuTrigger.vue.d.cts

@@ -1,10 +1,9 @@
 /**
- * Button that opens its item's `SkdxNavigationMenuContent`: renders
- * `<button type="button">` marked `data-skdx-nav-trigger` (for the list's
- * roving focus), with `aria-expanded`/`aria-controls`/`data-state`.
- * Non-touch pointer-enter/leave start the root's open/close hover timers;
- * click or Enter/Space selects the item immediately; Escape closes and
- * refocuses the trigger.
+ * Button that opens its item's `SkdxNavigationMenuContent`, renders
+ * `<button>` with `aria-expanded`/`aria-controls`/`data-state`. Pointer
+ * enter/leave trigger hover timers (non-touch only); click or Enter/Space
+ * selects immediately. ArrowDown enters the content panel in horizontal
+ * menus only.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/navigation-menu/NavigationMenuTrigger.vue.d.ts

@@ -1,10 +1,9 @@
 /**
- * Button that opens its item's `SkdxNavigationMenuContent`: renders
- * `<button type="button">` marked `data-skdx-nav-trigger` (for the list's
- * roving focus), with `aria-expanded`/`aria-controls`/`data-state`.
- * Non-touch pointer-enter/leave start the root's open/close hover timers;
- * click or Enter/Space selects the item immediately; Escape closes and
- * refocuses the trigger.
+ * Button that opens its item's `SkdxNavigationMenuContent`, renders
+ * `<button>` with `aria-expanded`/`aria-controls`/`data-state`. Pointer
+ * enter/leave trigger hover timers (non-touch only); click or Enter/Space
+ * selects immediately. ArrowDown enters the content panel in horizontal
+ * menus only.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/navigation-menu/NavigationMenuTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("./context.cjs");let t=require("vue");var g=["id","aria-expanded","aria-controls","data-state"],_=(0,t.defineComponent)({__name:"NavigationMenuTrigger",setup(p){const n=(0,t.inject)(u.NAVIGATION_MENU_CONTEXT),r=(0,t.inject)(u.NAVIGATION_MENU_ITEM_CONTEXT);if(!n||!r)throw new Error("<SkdxNavigationMenuTrigger> must be used inside <SkdxNavigationMenuItem>.");const o=(0,t.computed)(()=>n.value.value===r.value);let a=!1;function i(){o.value&&!a?n.onClose():n.onItemSelect(r.value)}function l(e){e.pointerType!=="touch"&&(a=!0,n.onTriggerEnter(r.value))}function c(e){e.pointerType!=="touch"&&(a=!1,n.onTriggerLeave())}function s(){i()}function d(e){e.key==="Escape"?(n.onClose(),e.currentTarget.focus()):(e.key===" "||e.key==="Enter")&&(e.preventDefault(),i())}return(e,f)=>((0,t.openBlock)(),(0,t.createElementBlock)("button",{class:"skdx-navigation-menu__trigger","data-part":"trigger",type:"button",id:(0,t.unref)(r).triggerId,"aria-expanded":o.value,"aria-controls":(0,t.unref)(r).contentId,"data-skdx-nav-trigger":"","data-state":o.value?"open":"closed",onPointerenter:l,onPointerleave:c,onClick:s,onKeydown:d},[(0,t.renderSlot)(e.$slots,"default")],40,g))}});exports.default=_;
+const _=require("../utils/tabbable.cjs"),c=require("./context.cjs");let t=require("vue");var f=["id","aria-expanded","aria-controls","data-state"],v=(0,t.defineComponent)({__name:"NavigationMenuTrigger",setup(T){const n=(0,t.inject)(c.NAVIGATION_MENU_CONTEXT),r=(0,t.inject)(c.NAVIGATION_MENU_ITEM_CONTEXT);if(!n||!r)throw new Error("<SkdxNavigationMenuTrigger> must be used inside <SkdxNavigationMenuItem>.");const o=(0,t.computed)(()=>n.value.value===r.value);let a=!1;function u(){o.value&&!a?n.onClose():n.onItemSelect(r.value)}function s(e){e.pointerType!=="touch"&&(a=!0,n.onTriggerEnter(r.value))}function d(e){e.pointerType!=="touch"&&(a=!1,n.onTriggerLeave())}function g(){u()}function p(e){if(e.key===" "||e.key==="Enter")e.preventDefault(),u();else if(e.key==="ArrowDown"&&o.value&&n.orientation.value==="horizontal"){const i=e.currentTarget.ownerDocument.getElementById(r.contentId),l=i&&_.tabbablesWithin(i)[0];if(!l)return;e.preventDefault(),e.stopPropagation(),l.focus()}}return(e,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("button",{class:"skdx-navigation-menu__trigger","data-part":"trigger",type:"button",id:(0,t.unref)(r).triggerId,"aria-expanded":o.value,"aria-controls":(0,t.unref)(r).contentId,"data-skdx-nav-trigger":"","data-state":o.value?"open":"closed",onPointerenter:s,onPointerleave:d,onClick:g,onKeydown:p},[(0,t.renderSlot)(e.$slots,"default")],40,f))}});exports.default=v;

package/dist/navigation-menu/NavigationMenuTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{NAVIGATION_MENU_CONTEXT as e,NAVIGATION_MENU_ITEM_CONTEXT as t}from"./context.js";import{computed as n,createElementBlock as a,defineComponent as o,inject as r,openBlock as i,renderSlot as u,unref as s}from"vue";var l=["id","aria-expanded","aria-controls","data-state"],c=/* @__PURE__ */o({__name:"NavigationMenuTrigger",setup(o){const c=r(e),d=r(t);if(!c||!d)throw new Error("<SkdxNavigationMenuTrigger> must be used inside <SkdxNavigationMenuItem>.");const g=n(()=>c.value.value===d.value);let p=!1;function v(){g.value&&!p?c.onClose():c.onItemSelect(d.value)}function f(e){"touch"!==e.pointerType&&(p=!0,c.onTriggerEnter(d.value))}function T(e){"touch"!==e.pointerType&&(p=!1,c.onTriggerLeave())}function m(){v()}function N(e){"Escape"===e.key?(c.onClose(),e.currentTarget.focus()):(" "===e.key||"Enter"===e.key)&&(e.preventDefault(),v())}return(e,t)=>(i(),a("button",{class:"skdx-navigation-menu__trigger","data-part":"trigger",type:"button",id:s(d).triggerId,"aria-expanded":g.value,"aria-controls":s(d).contentId,"data-skdx-nav-trigger":"","data-state":g.value?"open":"closed",onPointerenter:f,onPointerleave:T,onClick:m,onKeydown:N},[u(e.$slots,"default")],40,l))}});export{c as default};
+import{tabbablesWithin as e}from"../utils/tabbable.js";import{NAVIGATION_MENU_CONTEXT as t,NAVIGATION_MENU_ITEM_CONTEXT as n}from"./context.js";import{computed as a,createElementBlock as o,defineComponent as r,inject as i,openBlock as u,renderSlot as s,unref as l}from"vue";var c=["id","aria-expanded","aria-controls","data-state"],d=/* @__PURE__ */r({__name:"NavigationMenuTrigger",setup(r){const d=i(t),g=i(n);if(!d||!g)throw new Error("<SkdxNavigationMenuTrigger> must be used inside <SkdxNavigationMenuItem>.");const p=a(()=>d.value.value===g.value);let v=!1;function f(){p.value&&!v?d.onClose():d.onItemSelect(g.value)}function m(e){"touch"!==e.pointerType&&(v=!0,d.onTriggerEnter(g.value))}function T(e){"touch"!==e.pointerType&&(v=!1,d.onTriggerLeave())}function I(){f()}function N(t){if(" "===t.key||"Enter"===t.key)t.preventDefault(),f();else if("ArrowDown"===t.key&&p.value&&"horizontal"===d.orientation.value){const n=t.currentTarget.ownerDocument.getElementById(g.contentId),a=n&&e(n)[0];if(!a)return;t.preventDefault(),t.stopPropagation(),a.focus()}}return(e,t)=>(u(),o("button",{class:"skdx-navigation-menu__trigger","data-part":"trigger",type:"button",id:l(g).triggerId,"aria-expanded":p.value,"aria-controls":l(g).contentId,"data-skdx-nav-trigger":"","data-state":p.value?"open":"closed",onPointerenter:m,onPointerleave:T,onClick:I,onKeydown:N},[s(e.$slots,"default")],40,c))}});export{d as default};

package/dist/navigation-menu/context.d.cts

@@ -1,13 +1,18 @@
 import type { InjectionKey, Ref } from 'vue';
 /** @internal Injection key a NavigationMenu provides so its parts can read/drive shared hover-intent state. */
 export interface NavigationMenuContext {
-    value: Readonly<Ref<string>>;
+    /** Value of the open item, or `null` when nothing is open. */
+    value: Readonly<Ref<string | null>>;
+    /** Axis the list lays out and arrow-keys travel along. Set on the root. */
+    orientation: Readonly<Ref<'horizontal' | 'vertical'>>;
     onTriggerEnter: (itemValue: string) => void;
     onTriggerLeave: () => void;
     onContentEnter: () => void;
     onContentLeave: () => void;
     onItemSelect: (itemValue: string) => void;
     onClose: () => void;
+    /** Closes menu on link click (when `closeOnSelect` is true). */
+    onLinkSelect: () => void;
 }
 /** @internal Injection key a NavigationMenu provides so its items share the active value and hover-intent handlers. */
 export declare const NAVIGATION_MENU_CONTEXT: InjectionKey<NavigationMenuContext>;

package/dist/navigation-menu/context.d.ts

@@ -1,13 +1,18 @@
 import type { InjectionKey, Ref } from 'vue';
 /** @internal Injection key a NavigationMenu provides so its parts can read/drive shared hover-intent state. */
 export interface NavigationMenuContext {
-    value: Readonly<Ref<string>>;
+    /** Value of the open item, or `null` when nothing is open. */
+    value: Readonly<Ref<string | null>>;
+    /** Axis the list lays out and arrow-keys travel along. Set on the root. */
+    orientation: Readonly<Ref<'horizontal' | 'vertical'>>;
     onTriggerEnter: (itemValue: string) => void;
     onTriggerLeave: () => void;
     onContentEnter: () => void;
     onContentLeave: () => void;
     onItemSelect: (itemValue: string) => void;
     onClose: () => void;
+    /** Closes menu on link click (when `closeOnSelect` is true). */
+    onLinkSelect: () => void;
 }
 /** @internal Injection key a NavigationMenu provides so its items share the active value and hover-intent handlers. */
 export declare const NAVIGATION_MENU_CONTEXT: InjectionKey<NavigationMenuContext>;

package/dist/navigation-menu/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./NavigationMenu.vue.cjs"),i=require("./NavigationMenuList.vue.cjs"),n=require("./NavigationMenuItem.vue.cjs"),t=require("./NavigationMenuTrigger.vue.cjs"),a=require("./NavigationMenuContent.vue.cjs"),r=require("./NavigationMenuLink.vue.cjs"),u=require("./NavigationMenuIndicator.vue.cjs");exports.SkdxNavigationMenu=e.default;exports.SkdxNavigationMenuContent=a.default;exports.SkdxNavigationMenuIndicator=u.default;exports.SkdxNavigationMenuItem=n.default;exports.SkdxNavigationMenuLink=r.default;exports.SkdxNavigationMenuList=i.default;exports.SkdxNavigationMenuTrigger=t.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./NavigationMenu.vue.cjs");exports.SkdxNavigationMenu=e.default;

package/dist/navigation-menu/index.d.cts

@@ -1,7 +1,2 @@
 export { default as SkdxNavigationMenu } from './NavigationMenu.vue.cjs';
-export { default as SkdxNavigationMenuList } from './NavigationMenuList.vue.cjs';
-export { default as SkdxNavigationMenuItem } from './NavigationMenuItem.vue.cjs';
-export { default as SkdxNavigationMenuTrigger } from './NavigationMenuTrigger.vue.cjs';
-export { default as SkdxNavigationMenuContent } from './NavigationMenuContent.vue.cjs';
-export { default as SkdxNavigationMenuLink } from './NavigationMenuLink.vue.cjs';
-export { default as SkdxNavigationMenuIndicator } from './NavigationMenuIndicator.vue.cjs';
+export type { NavigationMenuItem } from './types.cjs';

package/dist/navigation-menu/index.d.ts

@@ -1,7 +1,2 @@
 export { default as SkdxNavigationMenu } from './NavigationMenu.vue.js';
-export { default as SkdxNavigationMenuList } from './NavigationMenuList.vue.js';
-export { default as SkdxNavigationMenuItem } from './NavigationMenuItem.vue.js';
-export { default as SkdxNavigationMenuTrigger } from './NavigationMenuTrigger.vue.js';
-export { default as SkdxNavigationMenuContent } from './NavigationMenuContent.vue.js';
-export { default as SkdxNavigationMenuLink } from './NavigationMenuLink.vue.js';
-export { default as SkdxNavigationMenuIndicator } from './NavigationMenuIndicator.vue.js';
+export type { NavigationMenuItem } from './types.js';

package/dist/navigation-menu/index.js

@@ -1 +1 @@
-import i from"./NavigationMenu.vue.js";import a from"./NavigationMenuList.vue.js";import n from"./NavigationMenuItem.vue.js";import o from"./NavigationMenuTrigger.vue.js";import t from"./NavigationMenuContent.vue.js";import e from"./NavigationMenuLink.vue.js";import r from"./NavigationMenuIndicator.vue.js";export{i as SkdxNavigationMenu,t as SkdxNavigationMenuContent,r as SkdxNavigationMenuIndicator,n as SkdxNavigationMenuItem,e as SkdxNavigationMenuLink,a as SkdxNavigationMenuList,o as SkdxNavigationMenuTrigger};
+import a from"./NavigationMenu.vue.js";export{a as SkdxNavigationMenu};

package/dist/navigation-menu/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./NavigationMenuContent.vue.cjs"),i=require("./NavigationMenuIndicator.vue.cjs"),n=require("./NavigationMenuItem.vue.cjs"),t=require("./NavigationMenuLink.vue.cjs"),a=require("./NavigationMenuList.vue.cjs"),r=require("./NavigationMenuTrigger.vue.cjs"),u=require("./NavigationMenu.vue.cjs");exports.SkdxNavigationMenu=u.default;exports.SkdxNavigationMenuContent=e.default;exports.SkdxNavigationMenuIndicator=i.default;exports.SkdxNavigationMenuItem=n.default;exports.SkdxNavigationMenuLink=t.default;exports.SkdxNavigationMenuList=a.default;exports.SkdxNavigationMenuTrigger=r.default;

package/dist/navigation-menu/primitives.d.cts

@@ -0,0 +1,31 @@
+/**
+ * Advanced primitives for custom `SkdxNavigationMenu` layouts.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxNavigationMenu, SkdxNavigationMenuContent, SkdxNavigationMenuItem, SkdxNavigationMenuLink, SkdxNavigationMenuList, SkdxNavigationMenuTrigger } from '@skdx/vue/primitives/navigation-menu';
+ * </script>
+ *
+ * <template>
+ *   <SkdxNavigationMenu>
+ *     <SkdxNavigationMenuList>
+ *       <SkdxNavigationMenuItem value="products">
+ *         <SkdxNavigationMenuTrigger>Products</SkdxNavigationMenuTrigger>
+ *         <SkdxNavigationMenuContent>
+ *           <SkdxNavigationMenuLink href="/analytics">Analytics</SkdxNavigationMenuLink>
+ *         </SkdxNavigationMenuContent>
+ *       </SkdxNavigationMenuItem>
+ *     </SkdxNavigationMenuList>
+ *   </SkdxNavigationMenu>
+ * </template>
+ * ```
+ */
+export { default as SkdxNavigationMenu } from './NavigationMenu.vue.cjs';
+export { default as SkdxNavigationMenuList } from './NavigationMenuList.vue.cjs';
+export { default as SkdxNavigationMenuItem } from './NavigationMenuItem.vue.cjs';
+export { default as SkdxNavigationMenuTrigger } from './NavigationMenuTrigger.vue.cjs';
+export { default as SkdxNavigationMenuContent } from './NavigationMenuContent.vue.cjs';
+export { default as SkdxNavigationMenuLink } from './NavigationMenuLink.vue.cjs';
+export { default as SkdxNavigationMenuIndicator } from './NavigationMenuIndicator.vue.cjs';
+export type { NavigationMenuItem } from './types.cjs';

package/dist/navigation-menu/primitives.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Advanced primitives for custom `SkdxNavigationMenu` layouts.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxNavigationMenu, SkdxNavigationMenuContent, SkdxNavigationMenuItem, SkdxNavigationMenuLink, SkdxNavigationMenuList, SkdxNavigationMenuTrigger } from '@skdx/vue/primitives/navigation-menu';
+ * </script>
+ *
+ * <template>
+ *   <SkdxNavigationMenu>
+ *     <SkdxNavigationMenuList>
+ *       <SkdxNavigationMenuItem value="products">
+ *         <SkdxNavigationMenuTrigger>Products</SkdxNavigationMenuTrigger>
+ *         <SkdxNavigationMenuContent>
+ *           <SkdxNavigationMenuLink href="/analytics">Analytics</SkdxNavigationMenuLink>
+ *         </SkdxNavigationMenuContent>
+ *       </SkdxNavigationMenuItem>
+ *     </SkdxNavigationMenuList>
+ *   </SkdxNavigationMenu>
+ * </template>
+ * ```
+ */
+export { default as SkdxNavigationMenu } from './NavigationMenu.vue.js';
+export { default as SkdxNavigationMenuList } from './NavigationMenuList.vue.js';
+export { default as SkdxNavigationMenuItem } from './NavigationMenuItem.vue.js';
+export { default as SkdxNavigationMenuTrigger } from './NavigationMenuTrigger.vue.js';
+export { default as SkdxNavigationMenuContent } from './NavigationMenuContent.vue.js';
+export { default as SkdxNavigationMenuLink } from './NavigationMenuLink.vue.js';
+export { default as SkdxNavigationMenuIndicator } from './NavigationMenuIndicator.vue.js';
+export type { NavigationMenuItem } from './types.js';

package/dist/navigation-menu/primitives.js

@@ -0,0 +1 @@
+import i from"./NavigationMenuContent.vue.js";import a from"./NavigationMenuIndicator.vue.js";import n from"./NavigationMenuItem.vue.js";import o from"./NavigationMenuLink.vue.js";import t from"./NavigationMenuList.vue.js";import e from"./NavigationMenuTrigger.vue.js";import r from"./NavigationMenu.vue.js";export{r as SkdxNavigationMenu,i as SkdxNavigationMenuContent,a as SkdxNavigationMenuIndicator,n as SkdxNavigationMenuItem,o as SkdxNavigationMenuLink,t as SkdxNavigationMenuList,e as SkdxNavigationMenuTrigger};

package/dist/navigation-menu/types.d.cts

@@ -0,0 +1,35 @@
+/**
+ * One entry in `items` (plain link or trigger/panel). Narrow with `'items' in item`.
+ */
+export type NavigationMenuItem = {
+    /** Text rendered inside the derived `SkdxNavigationMenuLink`. */
+    label: string;
+    /** The link's destination. */
+    href: string;
+    /**
+     * Marks link as current page. @default false
+     */
+    active?: boolean;
+    /**
+     * Identifier matched against root's `value`. @default (entry's index as string)
+     */
+    value?: string;
+} | {
+    /** Text rendered inside the derived `SkdxNavigationMenuTrigger`. */
+    label: string;
+    /**
+     * Identifier matched against root's `value`. @default (entry's index as string)
+     */
+    value?: string;
+    /** Links in the panel this trigger opens. */
+    items: {
+        /** Text rendered in the link. */
+        label: string;
+        /** The link's destination. */
+        href: string;
+        /**
+         * Marks link as current page. @default false
+         */
+        active?: boolean;
+    }[];
+};

package/dist/navigation-menu/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * One entry in `items` (plain link or trigger/panel). Narrow with `'items' in item`.
+ */
+export type NavigationMenuItem = {
+    /** Text rendered inside the derived `SkdxNavigationMenuLink`. */
+    label: string;
+    /** The link's destination. */
+    href: string;
+    /**
+     * Marks link as current page. @default false
+     */
+    active?: boolean;
+    /**
+     * Identifier matched against root's `value`. @default (entry's index as string)
+     */
+    value?: string;
+} | {
+    /** Text rendered inside the derived `SkdxNavigationMenuTrigger`. */
+    label: string;
+    /**
+     * Identifier matched against root's `value`. @default (entry's index as string)
+     */
+    value?: string;
+    /** Links in the panel this trigger opens. */
+    items: {
+        /** Text rendered in the link. */
+        label: string;
+        /** The link's destination. */
+        href: string;
+        /**
+         * Marks link as current page. @default false
+         */
+        active?: boolean;
+    }[];
+};

package/dist/number-field/NumberField.vue.d.cts

@@ -1,55 +1,60 @@
 /**
- * The Vue implementation of the shared NumberField contract (see
- * `@skdx/shared`'s `numberFieldContract`). Renders a plain
- * `<div data-disabled data-invalid data-readonly>` — layout is entirely up
- * to your CSS. Owns the clamped value and hands it to
- * `SkdxNumberFieldInput` / `SkdxNumberFieldIncrement` / `SkdxNumberFieldDecrement`
- * via context.
- *
- * Works controlled (`v-model:value`) or uncontrolled (`defaultValue`).
- *
- * With a `name`, a visually-hidden native input submits the committed number
- * with the surrounding `<form>` — `String(value)`, never the formatted text
- * `SkdxNumberFieldInput` displays. `checkValidity()`/`reportValidity()` are
- * exposed on the root and delegate to that input; the value is always clamped
- * into `[min, max]` and can never be empty, so there is no constraint to
- * violate. Resetting the form restores the value the field was declared with
- * (clamped, like the initial one), emitting `value-change` so a controlled
- * parent follows it.
+ * Number input with increment/decrement buttons, clamped to min/max.
+ * Controlled (`v-model:value`) or uncontrolled. With a `name`, submits
+ * clamped value to surrounding form; `checkValidity()`/`reportValidity()` exposed.
+ * Derives body from `showControls` unless slot provided.
  */
 type __VLS_Props = {
-    /** Current value, for controlled usage via `v-model:value`. */
-    value?: number;
-    /** Initial value, for uncontrolled usage. Clamped to `min`/`max` on mount. */
-    defaultValue?: number;
-    /** Lower bound the value is clamped to, including via increment/decrement and arrow keys. */
+    /** Current value for controlled usage via `v-model:value`; `null` is empty field. */
+    value?: number | null;
+    /** Initial value for uncontrolled usage; clamped on mount, `null` for empty. */
+    defaultValue?: number | null;
+    /** Lower bound; value clamped including via increment/decrement.
+     * @default -Infinity
+     */
     min?: number;
-    /** Upper bound the value is clamped to, including via increment/decrement and arrow keys. */
+    /** Upper bound; value clamped including via increment/decrement.
+     * @default Infinity
+     */
     max?: number;
-    /** Amount the step buttons and Arrow Up/Down change the value by (Page Up/Down uses 10x this). */
+    /** Step amount for buttons and arrow keys; Page Up/Down uses 10x.
+     * @default 1
+     */
     step?: number;
-    /** Disables the field, its input, and both step buttons. */
+    /** Disables field, input, and step buttons.
+     * @default false
+     */
     disabled?: boolean;
-    /** Marks the field as invalid, exposed as `data-invalid`/`aria-invalid`. */
+    /** Marks field as invalid via `data-invalid` / `aria-invalid`.
+     * @default false
+     */
     invalid?: boolean;
-    /** Makes the input read-only and the increment/decrement buttons inert. */
+    /** Makes input read-only; disables increment/decrement buttons.
+     * @default false
+     */
     readOnly?: boolean;
-    /**
-     * `Intl.NumberFormat` options used to display the value (currency, percent,
-     * unit, grouping); typed text is parsed back through the same options and
-     * the formatted string is announced via `aria-valuetext`. `min`/`max`/`step`
-     * always operate on the numeric value — with `{ style: 'percent' }` the
-     * value is the fraction, so `0.5` shows as `50%`.
+    /** Marks field required; empty field fails `checkValidity()`.
+     * @default false
      */
+    required?: boolean;
+    /** `Intl.NumberFormat` options for display and parsing. */
     formatOptions?: Intl.NumberFormatOptions;
-    /** BCP-47 locale used for formatting and parsing (decimal/group separators). */
+    /** BCP-47 locale for formatting and parsing. */
     locale?: string;
-    /**
-     * Name for native form participation via a hidden input. The committed
-     * number is submitted as `String(value)`, not the formatted display text.
-     * @default undefined
-     */
+    /** When to snap typed text into `[min, max]`; `'blur'` always clamps. */
+    clampBehavior?: 'blur' | 'never';
+    /** Let mouse wheel step value while input focused. */
+    allowWheel?: boolean;
+    /** Form id this field submits into. */
+    form?: string;
+    /** Name for form submission via hidden input. */
     name?: string;
+    /** Renders derived increment/decrement buttons flanking the input; ignored with custom children. */
+    showControls?: boolean;
+    /** Accessible name for the Increment button when controls are shown. */
+    incrementLabel?: string;
+    /** Accessible name for the Decrement button when controls are shown. */
+    decrementLabel?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -60,24 +65,40 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
+    /**
+     * Pushes an externally-computed error onto the hidden input, exactly like
+     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the field
+     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
+     * Dropped without a `name`, matching the reads above.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: number) => any;
-    "value-change": (value: number) => any;
+    "update:value": (value: number | null) => any;
+    "value-change": (value: number | null) => any;
+    "value-commit": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: number) => any) | undefined;
-    "onValue-change"?: ((value: number) => any) | undefined;
+    "onUpdate:value"?: ((value: number | null) => any) | undefined;
+    "onValue-change"?: ((value: number | null) => any) | undefined;
+    "onValue-commit"?: ((value: number | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    value: number | null;
+    readOnly: boolean;
+    required: boolean;
     name: string;
-    value: number;
     invalid: boolean;
-    defaultValue: number;
+    defaultValue: number | null;
     max: number;
     min: number;
-    readOnly: boolean;
     step: number;
     formatOptions: Intl.NumberFormatOptions;
     locale: string;
+    showControls: boolean;
+    incrementLabel: string;
+    decrementLabel: string;
+    clampBehavior: "blur" | "never";
+    allowWheel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/number-field/NumberField.vue.d.ts

@@ -1,55 +1,60 @@
 /**
- * The Vue implementation of the shared NumberField contract (see
- * `@skdx/shared`'s `numberFieldContract`). Renders a plain
- * `<div data-disabled data-invalid data-readonly>` — layout is entirely up
- * to your CSS. Owns the clamped value and hands it to
- * `SkdxNumberFieldInput` / `SkdxNumberFieldIncrement` / `SkdxNumberFieldDecrement`
- * via context.
- *
- * Works controlled (`v-model:value`) or uncontrolled (`defaultValue`).
- *
- * With a `name`, a visually-hidden native input submits the committed number
- * with the surrounding `<form>` — `String(value)`, never the formatted text
- * `SkdxNumberFieldInput` displays. `checkValidity()`/`reportValidity()` are
- * exposed on the root and delegate to that input; the value is always clamped
- * into `[min, max]` and can never be empty, so there is no constraint to
- * violate. Resetting the form restores the value the field was declared with
- * (clamped, like the initial one), emitting `value-change` so a controlled
- * parent follows it.
+ * Number input with increment/decrement buttons, clamped to min/max.
+ * Controlled (`v-model:value`) or uncontrolled. With a `name`, submits
+ * clamped value to surrounding form; `checkValidity()`/`reportValidity()` exposed.
+ * Derives body from `showControls` unless slot provided.
  */
 type __VLS_Props = {
-    /** Current value, for controlled usage via `v-model:value`. */
-    value?: number;
-    /** Initial value, for uncontrolled usage. Clamped to `min`/`max` on mount. */
-    defaultValue?: number;
-    /** Lower bound the value is clamped to, including via increment/decrement and arrow keys. */
+    /** Current value for controlled usage via `v-model:value`; `null` is empty field. */
+    value?: number | null;
+    /** Initial value for uncontrolled usage; clamped on mount, `null` for empty. */
+    defaultValue?: number | null;
+    /** Lower bound; value clamped including via increment/decrement.
+     * @default -Infinity
+     */
     min?: number;
-    /** Upper bound the value is clamped to, including via increment/decrement and arrow keys. */
+    /** Upper bound; value clamped including via increment/decrement.
+     * @default Infinity
+     */
     max?: number;
-    /** Amount the step buttons and Arrow Up/Down change the value by (Page Up/Down uses 10x this). */
+    /** Step amount for buttons and arrow keys; Page Up/Down uses 10x.
+     * @default 1
+     */
     step?: number;
-    /** Disables the field, its input, and both step buttons. */
+    /** Disables field, input, and step buttons.
+     * @default false
+     */
     disabled?: boolean;
-    /** Marks the field as invalid, exposed as `data-invalid`/`aria-invalid`. */
+    /** Marks field as invalid via `data-invalid` / `aria-invalid`.
+     * @default false
+     */
     invalid?: boolean;
-    /** Makes the input read-only and the increment/decrement buttons inert. */
+    /** Makes input read-only; disables increment/decrement buttons.
+     * @default false
+     */
     readOnly?: boolean;
-    /**
-     * `Intl.NumberFormat` options used to display the value (currency, percent,
-     * unit, grouping); typed text is parsed back through the same options and
-     * the formatted string is announced via `aria-valuetext`. `min`/`max`/`step`
-     * always operate on the numeric value — with `{ style: 'percent' }` the
-     * value is the fraction, so `0.5` shows as `50%`.
+    /** Marks field required; empty field fails `checkValidity()`.
+     * @default false
      */
+    required?: boolean;
+    /** `Intl.NumberFormat` options for display and parsing. */
     formatOptions?: Intl.NumberFormatOptions;
-    /** BCP-47 locale used for formatting and parsing (decimal/group separators). */
+    /** BCP-47 locale for formatting and parsing. */
     locale?: string;
-    /**
-     * Name for native form participation via a hidden input. The committed
-     * number is submitted as `String(value)`, not the formatted display text.
-     * @default undefined
-     */
+    /** When to snap typed text into `[min, max]`; `'blur'` always clamps. */
+    clampBehavior?: 'blur' | 'never';
+    /** Let mouse wheel step value while input focused. */
+    allowWheel?: boolean;
+    /** Form id this field submits into. */
+    form?: string;
+    /** Name for form submission via hidden input. */
     name?: string;
+    /** Renders derived increment/decrement buttons flanking the input; ignored with custom children. */
+    showControls?: boolean;
+    /** Accessible name for the Increment button when controls are shown. */
+    incrementLabel?: string;
+    /** Accessible name for the Decrement button when controls are shown. */
+    decrementLabel?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -60,24 +65,40 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
+    /**
+     * Pushes an externally-computed error onto the hidden input, exactly like
+     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the field
+     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
+     * Dropped without a `name`, matching the reads above.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: number) => any;
-    "value-change": (value: number) => any;
+    "update:value": (value: number | null) => any;
+    "value-change": (value: number | null) => any;
+    "value-commit": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: number) => any) | undefined;
-    "onValue-change"?: ((value: number) => any) | undefined;
+    "onUpdate:value"?: ((value: number | null) => any) | undefined;
+    "onValue-change"?: ((value: number | null) => any) | undefined;
+    "onValue-commit"?: ((value: number | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    value: number | null;
+    readOnly: boolean;
+    required: boolean;
     name: string;
-    value: number;
     invalid: boolean;
-    defaultValue: number;
+    defaultValue: number | null;
     max: number;
     min: number;
-    readOnly: boolean;
     step: number;
     formatOptions: Intl.NumberFormatOptions;
     locale: string;
+    showControls: boolean;
+    incrementLabel: string;
+    decrementLabel: string;
+    clampBehavior: "blur" | "never";
+    allowWheel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/number-field/NumberField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("../utils/useFormReset.cjs"),u=require("../utils/clamp.cjs"),y=require("./context.cjs");let a=require("vue");var b=["data-disabled","data-invalid","data-readonly"],h=["name","^value","disabled"],x=(0,a.defineComponent)({__name:"NumberField",props:{value:{default:void 0},defaultValue:{default:0},min:{default:-1/0},max:{default:1/0},step:{default:1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},formatOptions:{default:void 0},locale:{default:void 0},name:{default:void 0}},emits:["update:value","value-change"],setup(l,{expose:m,emit:c}){const e=l,n=c,o=(0,a.ref)(u.clamp(e.defaultValue,e.min,e.max)),r=(0,a.computed)(()=>e.value??o.value);function i(t){e.value===void 0&&(o.value=t),n("update:value",t),n("value-change",t)}function s(t){i(u.clamp(t,e.min,e.max))}function v(t){i(t)}(0,a.provide)(y.NUMBER_FIELD_CONTEXT,{value:r,min:(0,a.computed)(()=>e.min),max:(0,a.computed)(()=>e.max),step:(0,a.computed)(()=>e.step),disabled:(0,a.computed)(()=>e.disabled),invalid:(0,a.computed)(()=>e.invalid),readOnly:(0,a.computed)(()=>e.readOnly),formatOptions:(0,a.computed)(()=>e.formatOptions),locale:(0,a.computed)(()=>e.locale),setValue:s,setValueUnclamped:v});const d=(0,a.ref)(null),p=u.clamp(e.value??e.defaultValue,e.min,e.max);return f.useFormReset(()=>d.value,()=>i(p)),m({checkValidity:()=>d.value?.checkValidity()??!0,reportValidity:()=>d.value?.reportValidity()??!0}),(t,V)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-number-field","data-part":"root","data-skdx-component":"number-field","data-disabled":l.disabled?"":void 0,"data-invalid":l.invalid?"":void 0,"data-readonly":l.readOnly?"":void 0},[(0,a.renderSlot)(t.$slots,"default"),l.name?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:d,type:"text","aria-hidden":"true",tabindex:"-1",name:l.name,"^value":String(r.value),disabled:l.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,h)):(0,a.createCommentVNode)("",!0)],8,b))}});exports.default=x;
+const w=require("../utils/useFormReset.cjs"),m=require("../utils/clamp.cjs"),g=require("./context.cjs"),N=require("./NumberFieldAnatomy.vue.cjs");let l=require("vue");var E=["data-disabled","data-invalid","data-readonly"],F=["name","form","^value","required","disabled"],C=(0,l.defineComponent)({__name:"NumberField",props:{value:{default:void 0},defaultValue:{default:null},min:{default:-1/0},max:{default:1/0},step:{default:1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},formatOptions:{default:void 0},locale:{default:void 0},clampBehavior:{default:"blur"},allowWheel:{type:Boolean,default:!1},form:{default:void 0},name:{default:void 0},showControls:{type:Boolean,default:!0},incrementLabel:{default:"Increment"},decrementLabel:{default:"Decrement"}},emits:["update:value","value-change","value-commit"],setup(t,{expose:B,emit:q}){const e=t,o=q,c=(0,l.ref)(e.defaultValue===null||e.clampBehavior==="never"?e.defaultValue:m.clamp(e.defaultValue,e.min,e.max)),u=(0,l.computed)(()=>e.value===void 0?c.value:e.value);function s(a){a!==u.value&&(e.value===void 0&&(c.value=a),o("update:value",a),o("value-change",a))}const r=a=>a===null||e.clampBehavior==="never"?a:m.clamp(a,e.min,e.max);function v(a){s(r(a))}function f(a){const n=r(a);s(n),o("value-commit",n)}function x(a){const n=u.value??0,p=k=>{const i=String(k);if(i.includes("e")||i.includes("E"))return null;const V=i.indexOf(".");return V===-1?0:i.length-V-1},b=n+a*e.step,h=p(n),y=p(e.step);f(m.clamp(h===null||y===null?b:Number(b.toFixed(Math.min(Math.max(h,y),15))),e.min,e.max))}(0,l.provide)(g.NUMBER_FIELD_CONTEXT,{value:u,min:(0,l.computed)(()=>e.min),max:(0,l.computed)(()=>e.max),step:(0,l.computed)(()=>e.step),disabled:(0,l.computed)(()=>e.disabled),invalid:(0,l.computed)(()=>e.invalid),readOnly:(0,l.computed)(()=>e.readOnly),required:(0,l.computed)(()=>e.required),formatOptions:(0,l.computed)(()=>e.formatOptions),locale:(0,l.computed)(()=>e.locale||e.formatOptions?new Intl.NumberFormat(e.locale).resolvedOptions().locale:void 0),clampBehavior:(0,l.computed)(()=>e.clampBehavior),allowWheel:(0,l.computed)(()=>e.allowWheel),outOfRange:(0,l.computed)(()=>u.value!==null&&(u.value<e.min||u.value>e.max)),setValue:v,commitValue:f,stepBy:x});const d=(0,l.ref)(null),O=r(e.value===void 0?e.defaultValue:e.value);return w.useFormReset(()=>d.value,()=>v(O)),B({checkValidity:()=>d.value?.checkValidity()??!0,reportValidity:()=>d.value?.reportValidity()??!0,setCustomValidity:a=>d.value?.setCustomValidity(a)}),(a,n)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{class:"skdx-number-field","data-part":"root","data-skdx-component":"number-field","data-disabled":t.disabled?"":void 0,"data-invalid":t.invalid?"":void 0,"data-readonly":t.readOnly?"":void 0},[(0,l.renderSlot)(a.$slots,"default",{},()=>[(0,l.createVNode)(N.default,{"show-controls":t.showControls,"increment-label":t.incrementLabel,"decrement-label":t.decrementLabel},null,8,["show-controls","increment-label","decrement-label"])]),t.name?((0,l.openBlock)(),(0,l.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:d,type:"text","aria-hidden":"true",tabindex:"-1",name:t.name,form:t.form,"^value":u.value===null?"":String(u.value),required:t.required,disabled:t.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,F)):(0,l.createCommentVNode)("",!0)],8,E))}});exports.default=C;

package/dist/number-field/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{clamp as a}from"../utils/clamp.js";import{NUMBER_FIELD_CONTEXT as l}from"./context.js";import{computed as t,createCommentVNode as d,createElementBlock as i,defineComponent as n,openBlock as o,provide as u,ref as s,renderSlot as m}from"vue";var r=["data-disabled","data-invalid","data-readonly"],p=["name","^value","disabled"],v=/* @__PURE__ */n({__name:"NumberField",props:{value:{default:void 0},defaultValue:{default:0},min:{default:-1/0},max:{default:1/0},step:{default:1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},formatOptions:{default:void 0},locale:{default:void 0},name:{default:void 0}},emits:["update:value","value-change"],setup(n,{expose:v,emit:f}){const c=n,y=f,x=s(a(c.defaultValue,c.min,c.max)),b=t(()=>c.value??x.value);function V(e){void 0===c.value&&(x.value=e),y("update:value",e),y("value-change",e)}u(l,{value:b,min:t(()=>c.min),max:t(()=>c.max),step:t(()=>c.step),disabled:t(()=>c.disabled),invalid:t(()=>c.invalid),readOnly:t(()=>c.readOnly),formatOptions:t(()=>c.formatOptions),locale:t(()=>c.locale),setValue:function(e){V(a(e,c.min,c.max))},setValueUnclamped:function(e){V(e)}});const h=s(null),k=a(c.value??c.defaultValue,c.min,c.max);return e(()=>h.value,()=>V(k)),v({checkValidity:()=>h.value?.checkValidity()??!0,reportValidity:()=>h.value?.reportValidity()??!0}),(e,a)=>(o(),i("div",{class:"skdx-number-field","data-part":"root","data-skdx-component":"number-field","data-disabled":n.disabled?"":void 0,"data-invalid":n.invalid?"":void 0,"data-readonly":n.readOnly?"":void 0},[m(e.$slots,"default"),n.name?(o(),i("input",{key:0,ref_key:"hiddenEl",ref:h,type:"text","aria-hidden":"true",tabindex:"-1",name:n.name,"^value":String(b.value),disabled:n.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,p)):d("",!0)],8,r))}});export{v as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{clamp as a}from"../utils/clamp.js";import{NUMBER_FIELD_CONTEXT as l}from"./context.js";import t from"./NumberFieldAnatomy.vue.js";import{computed as o,createCommentVNode as n,createElementBlock as d,createVNode as i,defineComponent as u,openBlock as r,provide as m,ref as s,renderSlot as v}from"vue";var c=["data-disabled","data-invalid","data-readonly"],f=["name","form","^value","required","disabled"],p=/* @__PURE__ */u({__name:"NumberField",props:{value:{default:void 0},defaultValue:{default:null},min:{default:-1/0},max:{default:1/0},step:{default:1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},formatOptions:{default:void 0},locale:{default:void 0},clampBehavior:{default:"blur"},allowWheel:{type:Boolean,default:!1},form:{default:void 0},name:{default:void 0},showControls:{type:Boolean,default:!0},incrementLabel:{default:"Increment"},decrementLabel:{default:"Decrement"}},emits:["update:value","value-change","value-commit"],setup(u,{expose:p,emit:b}){const y=u,h=b,x=s(null===y.defaultValue||"never"===y.clampBehavior?y.defaultValue:a(y.defaultValue,y.min,y.max)),B=o(()=>void 0===y.value?x.value:y.value);function V(e){e!==B.value&&(void 0===y.value&&(x.value=e),h("update:value",e),h("value-change",e))}const O=e=>null===e||"never"===y.clampBehavior?e:a(e,y.min,y.max);function w(e){V(O(e))}function g(e){const a=O(e);V(a),h("value-commit",a)}m(l,{value:B,min:o(()=>y.min),max:o(()=>y.max),step:o(()=>y.step),disabled:o(()=>y.disabled),invalid:o(()=>y.invalid),readOnly:o(()=>y.readOnly),required:o(()=>y.required),formatOptions:o(()=>y.formatOptions),locale:o(()=>y.locale||y.formatOptions?new Intl.NumberFormat(y.locale).resolvedOptions().locale:void 0),clampBehavior:o(()=>y.clampBehavior),allowWheel:o(()=>y.allowWheel),outOfRange:o(()=>null!==B.value&&(B.value<y.min||B.value>y.max)),setValue:w,commitValue:g,stepBy:function(e){const l=B.value??0,t=e=>{const a=String(e);if(a.includes("e")||a.includes("E"))return null;const l=a.indexOf(".");return-1===l?0:a.length-l-1},o=l+e*y.step,n=t(l),d=t(y.step);g(a(null===n||null===d?o:Number(o.toFixed(Math.min(Math.max(n,d),15))),y.min,y.max))}});const k=s(null),N=O(void 0===y.value?y.defaultValue:y.value);return e(()=>k.value,()=>w(N)),p({checkValidity:()=>k.value?.checkValidity()??!0,reportValidity:()=>k.value?.reportValidity()??!0,setCustomValidity:e=>k.value?.setCustomValidity(e)}),(e,a)=>(r(),d("div",{class:"skdx-number-field","data-part":"root","data-skdx-component":"number-field","data-disabled":u.disabled?"":void 0,"data-invalid":u.invalid?"":void 0,"data-readonly":u.readOnly?"":void 0},[v(e.$slots,"default",{},()=>[i(t,{"show-controls":u.showControls,"increment-label":u.incrementLabel,"decrement-label":u.decrementLabel},null,8,["show-controls","increment-label","decrement-label"])]),u.name?(r(),d("input",{key:0,ref_key:"hiddenEl",ref:k,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,form:u.form,"^value":null===B.value?"":String(B.value),required:u.required,disabled:u.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,f)):n("",!0)],8,c))}});export{p as default};

package/dist/number-field/NumberFieldAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./NumberFieldAnatomy.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;