@skdx/vue 0.27.0 → 0.29.0

package/dist/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COLLAPSIBLE_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as t,inject as o,openBlock as l,renderSlot as s,unref as d}from"vue";var r=["aria-controls","aria-expanded","data-state","data-disabled","disabled"],n=/* @__PURE__ */t({__name:"CollapsibleTrigger",setup(t){const n=o(e);if(!n)throw new Error("<SkdxCollapsibleTrigger> must be used inside <SkdxCollapsible>.");return(e,t)=>(l(),a("button",{class:"skdx-collapsible__trigger","data-part":"trigger",type:"button","aria-controls":d(n).contentId,"aria-expanded":d(n).open.value,"data-state":d(n).open.value?"open":"closed","data-disabled":d(n).disabled.value?"":void 0,disabled:d(n).disabled.value,onClick:t[0]||(t[0]=(...e)=>d(n).onOpenToggle&&d(n).onOpenToggle(...e))},[s(e.$slots,"default")],8,r))}});export{n as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{COLLAPSIBLE_CONTEXT as a}from"./context.js";import{createElementBlock as l,defineComponent as o,openBlock as t,ref as s,renderSlot as d,unref as n}from"vue";var r=["aria-controls","aria-expanded","data-state","data-disabled","disabled"],i=/* @__PURE__ */o({__name:"CollapsibleTrigger",setup(o,{expose:i}){const u=e(a,"<SkdxCollapsibleTrigger> must be used inside <SkdxCollapsible>."),p=s(null);return i({focus:e=>p.value?.focus(e),el:p}),(e,a)=>(t(),l("button",{ref_key:"elRef",ref:p,class:"skdx-collapsible__trigger","data-part":"trigger",type:"button","aria-controls":n(u).open.value||n(u).contentMounted.value?n(u).contentId:void 0,"aria-expanded":n(u).open.value,"data-state":n(u).open.value?"open":"closed","data-disabled":n(u).disabled.value?"":void 0,disabled:n(u).disabled.value,onClick:a[0]||(a[0]=(...e)=>n(u).onOpenToggle&&n(u).onOpenToggle(...e))},[d(e.$slots,"default")],8,r))}});export{i as default};

package/dist/collapsible/context.d.cts

@@ -5,6 +5,13 @@ export interface CollapsibleContext {
     open: Readonly<Ref<boolean>>;
     disabled: Readonly<Ref<boolean>>;
     onOpenToggle: () => void;
+    /** Opens without toggling — the `beforematch` path, where the browser has already revealed the panel. */
+    onOpen: () => void;
+    /** Reports that the panel has settled into `open`; deduped by the root, which also reports for an unmounted panel. */
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Whether the panel is mounted, so `aria-controls` names an existing element. */
+    contentMounted: Readonly<Ref<boolean>>;
+    setContentMounted: (mounted: boolean) => void;
 }
 /** @internal Injection key a Collapsible provides so its trigger/content can read open/disabled state and toggle it. */
 export declare const COLLAPSIBLE_CONTEXT: InjectionKey<CollapsibleContext>;

package/dist/collapsible/context.d.ts

@@ -5,6 +5,13 @@ export interface CollapsibleContext {
     open: Readonly<Ref<boolean>>;
     disabled: Readonly<Ref<boolean>>;
     onOpenToggle: () => void;
+    /** Opens without toggling — the `beforematch` path, where the browser has already revealed the panel. */
+    onOpen: () => void;
+    /** Reports that the panel has settled into `open`; deduped by the root, which also reports for an unmounted panel. */
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Whether the panel is mounted, so `aria-controls` names an existing element. */
+    contentMounted: Readonly<Ref<boolean>>;
+    setContentMounted: (mounted: boolean) => void;
 }
 /** @internal Injection key a Collapsible provides so its trigger/content can read open/disabled state and toggle it. */
 export declare const COLLAPSIBLE_CONTEXT: InjectionKey<CollapsibleContext>;

package/dist/collapsible/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Collapsible.vue.cjs"),l=require("./CollapsibleTrigger.vue.cjs"),r=require("./CollapsibleContent.vue.cjs");exports.SkdxCollapsible=e.default;exports.SkdxCollapsibleContent=r.default;exports.SkdxCollapsibleTrigger=l.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Collapsible.vue.cjs");exports.SkdxCollapsible=e.default;

package/dist/collapsible/index.d.cts

@@ -1,3 +1 @@
 export { default as SkdxCollapsible } from './Collapsible.vue.cjs';
-export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.cjs';
-export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.cjs';

package/dist/collapsible/index.d.ts

@@ -1,3 +1 @@
 export { default as SkdxCollapsible } from './Collapsible.vue.js';
-export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.js';
-export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.js';

package/dist/collapsible/index.js

@@ -1 +1 @@
-import l from"./Collapsible.vue.js";import o from"./CollapsibleTrigger.vue.js";import e from"./CollapsibleContent.vue.js";export{l as SkdxCollapsible,e as SkdxCollapsibleContent,o as SkdxCollapsibleTrigger};
+import l from"./Collapsible.vue.js";export{l as SkdxCollapsible};

package/dist/collapsible/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CollapsibleContent.vue.cjs"),l=require("./CollapsibleIndicator.vue.cjs"),r=require("./CollapsibleRoot.vue.cjs"),o=require("./CollapsibleTrigger.vue.cjs");exports.SkdxCollapsibleContent=e.default;exports.SkdxCollapsibleIndicator=l.default;exports.SkdxCollapsibleRoot=r.default;exports.SkdxCollapsibleTrigger=o.default;

package/dist/collapsible/primitives.d.cts

@@ -0,0 +1,26 @@
+/**
+ * Advanced primitives for `SkdxCollapsible`, the parts the recipe composes,
+ * for a structure other than the derived anatomy — custom trigger layouts,
+ * panels with `force-mount` or `hidden-until-found`.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCollapsibleContent, SkdxCollapsibleIndicator, SkdxCollapsibleRoot, SkdxCollapsibleTrigger } from '@skdx/vue/primitives/collapsible';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCollapsibleRoot v-model:open="open">
+ *     <SkdxCollapsibleTrigger>
+ *       Shipping
+ *       <SkdxCollapsibleIndicator>▾</SkdxCollapsibleIndicator>
+ *     </SkdxCollapsibleTrigger>
+ *     <SkdxCollapsibleContent hidden-until-found>Free over £50.</SkdxCollapsibleContent>
+ *   </SkdxCollapsibleRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxCollapsibleRoot } from './CollapsibleRoot.vue.cjs';
+export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.cjs';
+export { default as SkdxCollapsibleIndicator } from './CollapsibleIndicator.vue.cjs';
+export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.cjs';

package/dist/collapsible/primitives.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Advanced primitives for `SkdxCollapsible`, the parts the recipe composes,
+ * for a structure other than the derived anatomy — custom trigger layouts,
+ * panels with `force-mount` or `hidden-until-found`.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCollapsibleContent, SkdxCollapsibleIndicator, SkdxCollapsibleRoot, SkdxCollapsibleTrigger } from '@skdx/vue/primitives/collapsible';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCollapsibleRoot v-model:open="open">
+ *     <SkdxCollapsibleTrigger>
+ *       Shipping
+ *       <SkdxCollapsibleIndicator>▾</SkdxCollapsibleIndicator>
+ *     </SkdxCollapsibleTrigger>
+ *     <SkdxCollapsibleContent hidden-until-found>Free over £50.</SkdxCollapsibleContent>
+ *   </SkdxCollapsibleRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxCollapsibleRoot } from './CollapsibleRoot.vue.js';
+export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.js';
+export { default as SkdxCollapsibleIndicator } from './CollapsibleIndicator.vue.js';
+export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.js';

package/dist/collapsible/primitives.js

@@ -0,0 +1 @@
+import o from"./CollapsibleContent.vue.js";import l from"./CollapsibleIndicator.vue.js";import e from"./CollapsibleRoot.vue.js";import i from"./CollapsibleTrigger.vue.js";export{o as SkdxCollapsibleContent,l as SkdxCollapsibleIndicator,e as SkdxCollapsibleRoot,i as SkdxCollapsibleTrigger};

package/dist/color-picker/ColorPicker.vue.d.cts

@@ -1,47 +1,8 @@
 import { type ColorFormat } from '../utils/color.cjs';
 /**
- * The Vue implementation of the shared ColorPicker contract (see
- * `@skdx/shared`'s `colorPickerContract`) — a 2D saturation/brightness area,
- * a hue track, an alpha track, preset swatches, text entry, a format switch
- * and an eyedropper, over one stored colour. Renders a plain `<div>` with no
- * role of its own: each interactive part carries its own semantics, so a role
- * here would only add an unnamed group between the user and them.
- *
- * **The colour is stored as HSB, not as the string.** RGB and hex cannot
- * represent the hue of a black, so a picker that re-parsed its own string on
- * every change would lose the user's hue the moment they dragged brightness to
- * zero and hand them red on the way back up. `value` is the *serialisation*;
- * the canonical colour lives beside it and only re-syncs when a string arrives
- * that this picker did not produce. All of the maths is in `utils/color.ts`.
- *
- * An unparseable `value` keeps the last good colour rather than blanking the
- * picker: `value` is frequently mid-edit text, and `#ab` is one keystroke from
- * being valid.
- *
- * Positioning is entirely CSS. The root publishes:
- *
- * | Property | Example | For |
- * | --- | --- | --- |
- * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
- * | `--skdx-color-picker-hue-position` | `58.333%` | the hue thumb's offset along its track |
- * | `--skdx-color-picker-saturation` | `65%` | the area thumb's horizontal offset |
- * | `--skdx-color-picker-brightness` | `85%` | the area thumb's vertical offset |
- * | `--skdx-color-picker-alpha` | `0.5` | an opacity, directly |
- * | `--skdx-color-picker-alpha-position` | `50%` | the alpha thumb's offset along its track |
- * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill |
- *
- * `--skdx-color-picker-value` is **always hex**, never the active format:
- * `hsb()` is this library's own notation and not a CSS colour, so publishing
- * the raw `value` would silently break every
- * `background: var(--skdx-color-picker-value)` the moment a user switched format.
- *
- * Works controlled (`value` + `@value-change`, or `v-model:value`) or
- * uncontrolled (`defaultValue`), and the same for
- * `format` / `defaultFormat` / `@format-change` — two independent axes.
- *
- * Overlay variants **compose the existing `SkdxPopover`**; there is no
- * trigger/content part here, because there is nothing about positioning a
- * colour picker that differs from positioning anything else.
+ * A 2D saturation/brightness area, hue and alpha tracks, preset swatches,
+ * text entry, a format switch, and an eyedropper, over one stored colour,
+ * rendered as a plain `<div>` with no role of its own.
  *
  * @example
  * ```vue
@@ -56,45 +17,39 @@ import { type ColorFormat } from '../utils/color.cjs';
  */
 type __VLS_Props = {
     /**
-     * Current colour as a string in the active `format`, for controlled usage.
-     * Pair with `v-model:value` or `@value-change`. Anything `parseColor`
-     * understands is accepted regardless of `format`; an unparseable string is
-     * ignored and the last good colour is kept, because a half-typed `#ab`
-     * should not blank the picker.
+     * Current colour for controlled usage, paired with `v-model:value` or
+     * `@value-change`, accepting any `parseColor` notation with unparseable
+     * input keeping the last colour.
      * @default undefined — uncontrolled, tracks its own colour internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial colour, for uncontrolled usage, seeding the first render.
      * @default '#000000' — opaque black, the one colour every format agrees on.
      */
     defaultValue?: string;
     /**
-     * Notation `value` is written in, for controlled usage. Pair with
-     * `v-model:format` or `@format-change`. The colour itself is stored as HSB
-     * whatever this says; the format only decides how it is spelled on the way out.
+     * Notation `value` is written in, for controlled usage, paired with
+     * `v-model:format` or `@format-change`; colour is stored as HSB, format
+     * only decides spelling.
      * @default undefined — uncontrolled, tracks its own format internally.
      */
-    format?: ColorFormat;
+    format?: ColorFormat | undefined;
     /**
      * The notation the picker starts in when it is left uncontrolled.
      * @default 'hex' — the notation people paste, type and recognise.
      */
     defaultFormat?: ColorFormat;
     /**
-     * Whether the picker has an alpha channel. When `false`,
-     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is
-     * fully opaque — so a consumer that cannot handle transparency never
-     * receives an `rgba()` it must strip.
+     * Whether the picker has an alpha channel; when `false`,
+     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is fully opaque.
      * @default true — the picker has an opacity channel.
      */
     alpha?: boolean;
     /**
-     * Keyboard increment, in the units of whichever channel is being stepped:
-     * percentage points for saturation/brightness/alpha, degrees for hue.
-     * Shift multiplies it by ten, so a 1-unit picker still has a coarse gear.
-     * `0` makes pointer input continuous while the arrows keep falling back to
-     * one unit, so every value stays reachable by keyboard.
+     * Keyboard increment in channel units (percent for saturation/brightness/alpha,
+     * degrees for hue), multiplied by ten with Shift, or `0` for continuous
+     * pointer movement with keyboard falling back to one unit.
      * @default 1 — every whole unit is reachable without a pointer.
      */
     step?: number;
@@ -105,13 +60,46 @@ type __VLS_Props = {
      */
     disabled?: boolean;
     /**
-     * Displays the colour but blocks changes, while every part stays focusable
-     * and in the tab order — unlike `disabled`, a read-only picker can still be
-     * reached and read by a keyboard user. It also refuses a format switch,
-     * because switching format changes `value`.
+     * Displays the colour but blocks changes, keeping every part focusable and
+     * in the tab order (unlike `disabled`), and refuses a format switch since
+     * that changes `value`.
      * @default false — changes are accepted.
      */
     readOnly?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerInput`. Ignored when the default
+     * slot supplies its own parts.
+     * @default true — a picker with no way to type a value is not a complete one.
+     */
+    showInput?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerSwatchGroup`. Ignored when the
+     * default slot supplies its own parts or `swatches` is empty.
+     * @default true — rendered only once `swatches` is non-empty.
+     */
+    showSwatches?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerEyeDropper` trigger. Ignored when
+     * the default slot supplies its own parts.
+     * @default true — rendered only where the platform supports it.
+     */
+    showEyeDropper?: boolean;
+    /**
+     * Preset colours for the derived swatch group, in any notation
+     * `parseColor` understands. Ignored unless `showSwatches` is set.
+     * @default [] — no presets, so `showSwatches` alone renders nothing.
+     */
+    swatches?: string[];
+    /**
+     * Whether the skin stretches the picker to fill its container, as `data-full-width`.
+     * @default undefined — falls back to a `data-full-width` attribute.
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Size rung the skin renders the picker at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -124,19 +112,22 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "update:format": (format: ColorFormat) => any;
     "format-change": (format: ColorFormat) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((value: string) => any) | undefined;
-    "onValue-commit"?: ((value: string) => any) | undefined;
-    "onUpdate:format"?: ((format: ColorFormat) => any) | undefined;
-    "onFormat-change"?: ((format: ColorFormat) => any) | undefined;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (value: string) => any;
+    "onValue-commit"?: (value: string) => any;
+    "onUpdate:format"?: (format: ColorFormat) => any;
+    "onFormat-change"?: (format: ColorFormat) => any;
 }>, {
     disabled: boolean;
-    value: string;
     defaultValue: string;
-    alpha: boolean;
     readOnly: boolean;
     step: number;
-    format: ColorFormat;
+    alpha: boolean;
+    fullWidth: boolean | undefined;
+    showInput: boolean;
+    showSwatches: boolean;
+    showEyeDropper: boolean;
+    swatches: string[];
     defaultFormat: ColorFormat;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/color-picker/ColorPicker.vue.d.ts

@@ -1,47 +1,8 @@
 import { type ColorFormat } from '../utils/color.js';
 /**
- * The Vue implementation of the shared ColorPicker contract (see
- * `@skdx/shared`'s `colorPickerContract`) — a 2D saturation/brightness area,
- * a hue track, an alpha track, preset swatches, text entry, a format switch
- * and an eyedropper, over one stored colour. Renders a plain `<div>` with no
- * role of its own: each interactive part carries its own semantics, so a role
- * here would only add an unnamed group between the user and them.
- *
- * **The colour is stored as HSB, not as the string.** RGB and hex cannot
- * represent the hue of a black, so a picker that re-parsed its own string on
- * every change would lose the user's hue the moment they dragged brightness to
- * zero and hand them red on the way back up. `value` is the *serialisation*;
- * the canonical colour lives beside it and only re-syncs when a string arrives
- * that this picker did not produce. All of the maths is in `utils/color.ts`.
- *
- * An unparseable `value` keeps the last good colour rather than blanking the
- * picker: `value` is frequently mid-edit text, and `#ab` is one keystroke from
- * being valid.
- *
- * Positioning is entirely CSS. The root publishes:
- *
- * | Property | Example | For |
- * | --- | --- | --- |
- * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
- * | `--skdx-color-picker-hue-position` | `58.333%` | the hue thumb's offset along its track |
- * | `--skdx-color-picker-saturation` | `65%` | the area thumb's horizontal offset |
- * | `--skdx-color-picker-brightness` | `85%` | the area thumb's vertical offset |
- * | `--skdx-color-picker-alpha` | `0.5` | an opacity, directly |
- * | `--skdx-color-picker-alpha-position` | `50%` | the alpha thumb's offset along its track |
- * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill |
- *
- * `--skdx-color-picker-value` is **always hex**, never the active format:
- * `hsb()` is this library's own notation and not a CSS colour, so publishing
- * the raw `value` would silently break every
- * `background: var(--skdx-color-picker-value)` the moment a user switched format.
- *
- * Works controlled (`value` + `@value-change`, or `v-model:value`) or
- * uncontrolled (`defaultValue`), and the same for
- * `format` / `defaultFormat` / `@format-change` — two independent axes.
- *
- * Overlay variants **compose the existing `SkdxPopover`**; there is no
- * trigger/content part here, because there is nothing about positioning a
- * colour picker that differs from positioning anything else.
+ * A 2D saturation/brightness area, hue and alpha tracks, preset swatches,
+ * text entry, a format switch, and an eyedropper, over one stored colour,
+ * rendered as a plain `<div>` with no role of its own.
  *
  * @example
  * ```vue
@@ -56,45 +17,39 @@ import { type ColorFormat } from '../utils/color.js';
  */
 type __VLS_Props = {
     /**
-     * Current colour as a string in the active `format`, for controlled usage.
-     * Pair with `v-model:value` or `@value-change`. Anything `parseColor`
-     * understands is accepted regardless of `format`; an unparseable string is
-     * ignored and the last good colour is kept, because a half-typed `#ab`
-     * should not blank the picker.
+     * Current colour for controlled usage, paired with `v-model:value` or
+     * `@value-change`, accepting any `parseColor` notation with unparseable
+     * input keeping the last colour.
      * @default undefined — uncontrolled, tracks its own colour internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial colour, for uncontrolled usage, seeding the first render.
      * @default '#000000' — opaque black, the one colour every format agrees on.
      */
     defaultValue?: string;
     /**
-     * Notation `value` is written in, for controlled usage. Pair with
-     * `v-model:format` or `@format-change`. The colour itself is stored as HSB
-     * whatever this says; the format only decides how it is spelled on the way out.
+     * Notation `value` is written in, for controlled usage, paired with
+     * `v-model:format` or `@format-change`; colour is stored as HSB, format
+     * only decides spelling.
      * @default undefined — uncontrolled, tracks its own format internally.
      */
-    format?: ColorFormat;
+    format?: ColorFormat | undefined;
     /**
      * The notation the picker starts in when it is left uncontrolled.
      * @default 'hex' — the notation people paste, type and recognise.
      */
     defaultFormat?: ColorFormat;
     /**
-     * Whether the picker has an alpha channel. When `false`,
-     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is
-     * fully opaque — so a consumer that cannot handle transparency never
-     * receives an `rgba()` it must strip.
+     * Whether the picker has an alpha channel; when `false`,
+     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is fully opaque.
      * @default true — the picker has an opacity channel.
      */
     alpha?: boolean;
     /**
-     * Keyboard increment, in the units of whichever channel is being stepped:
-     * percentage points for saturation/brightness/alpha, degrees for hue.
-     * Shift multiplies it by ten, so a 1-unit picker still has a coarse gear.
-     * `0` makes pointer input continuous while the arrows keep falling back to
-     * one unit, so every value stays reachable by keyboard.
+     * Keyboard increment in channel units (percent for saturation/brightness/alpha,
+     * degrees for hue), multiplied by ten with Shift, or `0` for continuous
+     * pointer movement with keyboard falling back to one unit.
      * @default 1 — every whole unit is reachable without a pointer.
      */
     step?: number;
@@ -105,13 +60,46 @@ type __VLS_Props = {
      */
     disabled?: boolean;
     /**
-     * Displays the colour but blocks changes, while every part stays focusable
-     * and in the tab order — unlike `disabled`, a read-only picker can still be
-     * reached and read by a keyboard user. It also refuses a format switch,
-     * because switching format changes `value`.
+     * Displays the colour but blocks changes, keeping every part focusable and
+     * in the tab order (unlike `disabled`), and refuses a format switch since
+     * that changes `value`.
      * @default false — changes are accepted.
      */
     readOnly?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerInput`. Ignored when the default
+     * slot supplies its own parts.
+     * @default true — a picker with no way to type a value is not a complete one.
+     */
+    showInput?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerSwatchGroup`. Ignored when the
+     * default slot supplies its own parts or `swatches` is empty.
+     * @default true — rendered only once `swatches` is non-empty.
+     */
+    showSwatches?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerEyeDropper` trigger. Ignored when
+     * the default slot supplies its own parts.
+     * @default true — rendered only where the platform supports it.
+     */
+    showEyeDropper?: boolean;
+    /**
+     * Preset colours for the derived swatch group, in any notation
+     * `parseColor` understands. Ignored unless `showSwatches` is set.
+     * @default [] — no presets, so `showSwatches` alone renders nothing.
+     */
+    swatches?: string[];
+    /**
+     * Whether the skin stretches the picker to fill its container, as `data-full-width`.
+     * @default undefined — falls back to a `data-full-width` attribute.
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Size rung the skin renders the picker at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -124,19 +112,22 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "update:format": (format: ColorFormat) => any;
     "format-change": (format: ColorFormat) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((value: string) => any) | undefined;
-    "onValue-commit"?: ((value: string) => any) | undefined;
-    "onUpdate:format"?: ((format: ColorFormat) => any) | undefined;
-    "onFormat-change"?: ((format: ColorFormat) => any) | undefined;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (value: string) => any;
+    "onValue-commit"?: (value: string) => any;
+    "onUpdate:format"?: (format: ColorFormat) => any;
+    "onFormat-change"?: (format: ColorFormat) => any;
 }>, {
     disabled: boolean;
-    value: string;
     defaultValue: string;
-    alpha: boolean;
     readOnly: boolean;
     step: number;
-    format: ColorFormat;
+    alpha: boolean;
+    fullWidth: boolean | undefined;
+    showInput: boolean;
+    showSwatches: boolean;
+    showEyeDropper: boolean;
+    swatches: string[];
     defaultFormat: ColorFormat;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/color-picker/ColorPicker.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const $=require("../utils/liveAnnouncer.cjs"),c=require("../utils/color.cjs"),x=require("./context.cjs");let o=require("vue");var B=["data-value","data-format","data-disabled","data-readonly"],V=(0,o.defineComponent)({__name:"ColorPicker",props:{value:{default:void 0},defaultValue:{default:"#000000"},format:{default:void 0},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(s,{emit:_}){const y={h:0,s:0,b:0,a:1};function r(e){return Math.round(e*1e3)/1e3}const a=s,n=_,m=(0,o.ref)(a.defaultValue),t=(0,o.computed)(()=>a.value===void 0?m.value:a.value),h=(0,o.ref)(a.defaultFormat),v=(0,o.computed)(()=>a.format===void 0?h.value:a.format),d=(0,o.ref)({color:c.parseColor(a.value??a.defaultValue)??y,value:t.value}),l=(0,o.computed)(()=>t.value===d.value.value?d.value.color:c.parseColor(t.value)??d.value.color),p=(0,o.computed)(()=>!a.disabled&&!a.readOnly);function k(e){const u=c.formatColor(e,"hex",!1);return a.alpha&&e.a<1?`${u}, ${Math.round(e.a*100)}% opaque`:u}function C(e,u){a.value===void 0&&(m.value=e),e!==u&&(n("update:value",e),n("value-change",e))}function b(e,u){if(!p.value)return;const f=t.value,i=c.formatColor(e,v.value,a.alpha);d.value={color:e,value:i},C(i,f),u?.announce&&$.announce(k(e))}function q(e){if(!p.value)return;const u=t.value,f=v.value,i=l.value;a.format===void 0&&(h.value=e),e!==f&&(n("update:format",e),n("format-change",e)),d.value={color:i,value:c.formatColor(i,e,a.alpha)},C(d.value.value,u)}(0,o.provide)(x.COLOR_PICKER_CONTEXT,{color:l,value:t,format:v,alpha:(0,o.computed)(()=>a.alpha),step:(0,o.computed)(()=>a.step),disabled:(0,o.computed)(()=>a.disabled),readOnly:(0,o.computed)(()=>a.readOnly),interactive:p,describe:k,setColor:b,commit:()=>n("value-commit",t.value),setFormat:q});const O=(0,o.computed)(()=>({"--skdx-color-picker-hue":`${r(l.value.h)}deg`,"--skdx-color-picker-hue-position":`${r(l.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${r(l.value.s)}%`,"--skdx-color-picker-brightness":`${r(l.value.b)}%`,"--skdx-color-picker-alpha":r(l.value.a),"--skdx-color-picker-alpha-position":`${r(l.value.a*100)}%`,"--skdx-color-picker-value":c.formatColor(l.value,"hex",a.alpha)}));return(e,u)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":t.value,"data-format":v.value,"data-disabled":s.disabled?"":void 0,"data-readonly":s.readOnly?"":void 0,style:(0,o.normalizeStyle)(O.value)},[(0,o.renderSlot)(e.$slots,"default")],12,B))}});exports.default=V;
+const $=require("../utils/appearance.cjs"),O=require("../utils/liveAnnouncer.cjs"),d=require("../utils/color.cjs"),V=require("./context.cjs"),g=require("./ColorPickerAnatomy.vue.cjs");let a=require("vue");var x=["data-value","data-format","data-disabled","data-readonly"],A=(0,a.defineComponent)({inheritAttrs:!1,__name:"ColorPicker",props:{value:{},defaultValue:{default:"#000000"},format:{},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]},fullWidth:{type:Boolean,default:void 0},size:{}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(l,{emit:y}){const C={h:0,s:0,b:0,a:1};function s(e){return Math.round(e*1e3)/1e3}const o=l,n=y,f=(0,a.ref)(o.defaultValue),r=(0,a.computed)(()=>o.value===void 0?f.value:o.value),h=(0,a.ref)(o.defaultFormat),i=(0,a.computed)(()=>o.format===void 0?h.value:o.format),c=(0,a.ref)({color:d.parseColor(o.value??o.defaultValue)??C,value:r.value}),u=(0,a.computed)(()=>r.value===c.value.value?c.value.color:d.parseColor(r.value)??c.value.color),p=(0,a.computed)(()=>!o.disabled&&!o.readOnly);function m(e){const t=d.formatColor(e,"hex",!1);return o.alpha&&e.a<1?`${t}, ${Math.round(e.a*100)}% opaque`:t}function k(e,t){o.value===void 0&&(f.value=e),e!==t&&(n("update:value",e),n("value-change",e))}function b(e,t){if(!p.value)return;const v=r.value,w=d.formatColor(e,i.value,o.alpha);c.value={color:e,value:w},k(w,v),t?.announce&&O.announce(m(e))}function q(e){if(!p.value)return;const t=i.value;o.format===void 0&&(h.value=e),e!==t&&(n("update:format",e),n("format-change",e))}(0,a.watch)(i,e=>{const t=r.value,v=u.value;c.value={color:v,value:d.formatColor(v,e,o.alpha)},k(c.value.value,t)}),(0,a.provide)(V.COLOR_PICKER_CONTEXT,{color:u,value:r,format:i,alpha:(0,a.computed)(()=>o.alpha),step:(0,a.computed)(()=>o.step),disabled:(0,a.computed)(()=>o.disabled),readOnly:(0,a.computed)(()=>o.readOnly),interactive:p,describe:m,setColor:b,commit:()=>n("value-commit",r.value),setFormat:q});const B=(0,a.computed)(()=>({"--skdx-color-picker-hue":`${s(u.value.h)}deg`,"--skdx-color-picker-hue-position":`${s(u.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${s(u.value.s)}%`,"--skdx-color-picker-brightness":`${s(u.value.b)}%`,"--skdx-color-picker-alpha":s(u.value.a),"--skdx-color-picker-alpha-position":`${s(u.value.a*100)}%`,"--skdx-color-picker-value":d.formatColor(u.value,"hex",o.alpha)}));return(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",(0,a.mergeProps)({class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":r.value,"data-format":i.value,"data-disabled":l.disabled?"":void 0,"data-readonly":l.readOnly?"":void 0,style:B.value},{...e.$attrs,...(0,a.unref)($.appearanceAttrs)({fullWidth:l.fullWidth,size:l.size},e.$attrs)}),[(0,a.renderSlot)(e.$slots,"default",{},()=>[(0,a.createVNode)(g.default,{alpha:l.alpha,"show-input":l.showInput,"show-swatches":l.showSwatches,"show-eye-dropper":l.showEyeDropper,swatches:l.swatches},null,8,["alpha","show-input","show-swatches","show-eye-dropper","swatches"])])],16,x))}});exports.default=A;

package/dist/color-picker/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{announce as a}from"../utils/liveAnnouncer.js";import{formatColor as e,parseColor as l}from"../utils/color.js";import{COLOR_PICKER_CONTEXT as o}from"./context.js";import{computed as t,createElementBlock as u,defineComponent as r,normalizeStyle as d,openBlock as v,provide as n,ref as s,renderSlot as i}from"vue";var c=["data-value","data-format","data-disabled","data-readonly"],p=/* @__PURE__ */r({__name:"ColorPicker",props:{value:{default:void 0},defaultValue:{default:"#000000"},format:{default:void 0},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(r,{emit:p}){function f(a){return Math.round(1e3*a)/1e3}const m=r,h=p,k=s(m.defaultValue),x=t(()=>void 0===m.value?k.value:m.value),y=s(m.defaultFormat),b=t(()=>void 0===m.format?y.value:m.format),C=s({color:l(m.value??m.defaultValue)??{h:0,s:0,b:0,a:1},value:x.value}),O=t(()=>x.value===C.value.value?C.value.color:l(x.value)??C.value.color),$=t(()=>!m.disabled&&!m.readOnly);function g(a){const l=e(a,"hex",!1);return m.alpha&&a.a<1?`${l}, ${Math.round(100*a.a)}% opaque`:l}function B(a,e){void 0===m.value&&(k.value=a),a!==e&&(h("update:value",a),h("value-change",a))}n(o,{color:O,value:x,format:b,alpha:t(()=>m.alpha),step:t(()=>m.step),disabled:t(()=>m.disabled),readOnly:t(()=>m.readOnly),interactive:$,describe:g,setColor:function(l,o){if(!$.value)return;const t=x.value,u=e(l,b.value,m.alpha);C.value={color:l,value:u},B(u,t),o?.announce&&a(g(l))},commit:()=>h("value-commit",x.value),setFormat:function(a){if(!$.value)return;const l=x.value,o=b.value,t=O.value;void 0===m.format&&(y.value=a),a!==o&&(h("update:format",a),h("format-change",a)),C.value={color:t,value:e(t,a,m.alpha)},B(C.value.value,l)}});const _=t(()=>({"--skdx-color-picker-hue":`${f(O.value.h)}deg`,"--skdx-color-picker-hue-position":`${f(O.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${f(O.value.s)}%`,"--skdx-color-picker-brightness":`${f(O.value.b)}%`,"--skdx-color-picker-alpha":f(O.value.a),"--skdx-color-picker-alpha-position":`${f(100*O.value.a)}%`,"--skdx-color-picker-value":e(O.value,"hex",m.alpha)}));return(a,e)=>(v(),u("div",{class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":x.value,"data-format":b.value,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,style:d(_.value)},[i(a.$slots,"default")],12,c))}});export{p as default};
+import{appearanceAttrs as a}from"../utils/appearance.js";import{announce as e}from"../utils/liveAnnouncer.js";import{formatColor as o,parseColor as l}from"../utils/color.js";import{COLOR_PICKER_CONTEXT as t}from"./context.js";import r from"./ColorPickerAnatomy.vue.js";import{computed as u,createElementBlock as s,createVNode as d,defineComponent as n,mergeProps as p,openBlock as c,provide as i,ref as v,renderSlot as h,unref as f,watch as m}from"vue";var k=["data-value","data-format","data-disabled","data-readonly"],w=/* @__PURE__ */n({inheritAttrs:!1,__name:"ColorPicker",props:{value:{},defaultValue:{default:"#000000"},format:{},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]},fullWidth:{type:Boolean,default:void 0},size:{}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(n,{emit:w}){function y(a){return Math.round(1e3*a)/1e3}const x=n,b=w,$=v(x.defaultValue),B=u(()=>void 0===x.value?$.value:x.value),C=v(x.defaultFormat),O=u(()=>void 0===x.format?C.value:x.format),g=v({color:l(x.value??x.defaultValue)??{h:0,s:0,b:0,a:1},value:B.value}),j=u(()=>B.value===g.value.value?g.value.color:l(B.value)??g.value.color),E=u(()=>!x.disabled&&!x.readOnly);function A(a){const e=o(a,"hex",!1);return x.alpha&&a.a<1?`${e}, ${Math.round(100*a.a)}% opaque`:e}function P(a,e){void 0===x.value&&($.value=a),a!==e&&(b("update:value",a),b("value-change",a))}m(O,a=>{const e=B.value,l=j.value;g.value={color:l,value:o(l,a,x.alpha)},P(g.value.value,e)}),i(t,{color:j,value:B,format:O,alpha:u(()=>x.alpha),step:u(()=>x.step),disabled:u(()=>x.disabled),readOnly:u(()=>x.readOnly),interactive:E,describe:A,setColor:function(a,l){if(!E.value)return;const t=B.value,r=o(a,O.value,x.alpha);g.value={color:a,value:r},P(r,t),l?.announce&&e(A(a))},commit:()=>b("value-commit",B.value),setFormat:function(a){if(!E.value)return;const e=O.value;void 0===x.format&&(C.value=a),a!==e&&(b("update:format",a),b("format-change",a))}});const V=u(()=>({"--skdx-color-picker-hue":`${y(j.value.h)}deg`,"--skdx-color-picker-hue-position":`${y(j.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${y(j.value.s)}%`,"--skdx-color-picker-brightness":`${y(j.value.b)}%`,"--skdx-color-picker-alpha":y(j.value.a),"--skdx-color-picker-alpha-position":`${y(100*j.value.a)}%`,"--skdx-color-picker-value":o(j.value,"hex",x.alpha)}));return(e,o)=>(c(),s("div",p({class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":B.value,"data-format":O.value,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,style:V.value},{...e.$attrs,...f(a)({fullWidth:n.fullWidth,size:n.size},e.$attrs)}),[h(e.$slots,"default",{},()=>[d(r,{alpha:n.alpha,"show-input":n.showInput,"show-swatches":n.showSwatches,"show-eye-dropper":n.showEyeDropper,swatches:n.swatches},null,8,["alpha","show-input","show-swatches","show-eye-dropper","swatches"])])],16,k))}});export{w as default};

package/dist/color-picker/ColorPickerAlphaSlider.vue.d.cts

@@ -1,29 +1,6 @@
 /**
- * The opacity track: a linear `role="slider"` over 0–100%, reported and stepped
- * in whole percentage points even though the colour stores alpha as `0–1` —
- * "50%" is what a user reads and types, `0.5` is what CSS wants, and only one
- * of those belongs in an announcement.
- *
- * **Renders nothing when the root has `alpha` turned off.** A picker that
- * cannot express transparency should not show a control that appears to set it;
- * the part is left in the tree so a layout does not have to be conditionally
- * authored twice.
- *
- * Ships no CSS. The checkerboard behind the gradient and the gradient itself
- * are yours, and `--skdx-color-picker-value` gives you the current colour to
- * fade out to:
- *
- * ```css
- * .my-alpha {
- *   background:
- *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
- *     var(--my-checkerboard);
- * }
- * .my-alpha-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-alpha-position);
- * }
- * ```
+ * The opacity track, a linear `role="slider"` over 0–100%, rendering nothing
+ * when the root has `alpha` turned off.
  *
  * @example
  * ```vue
@@ -34,18 +11,24 @@
  */
 type __VLS_Props = {
     /**
-     * Axis the track runs along, which decides whether pointer position is read
-     * from `clientX` or `clientY` and is published as `data-orientation`.
-     * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
+     * Axis the track runs along (`clientX`/`clientY` for horizontal/vertical),
+     * with vertical tracks running bottom-to-top to match `SkdxSlider`.
      * @default 'horizontal' — the track runs left-to-right.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Accessible name of the slider, a prop (not just `aria-label`) so a
+     * localised UI can translate it through the component's own API.
+     * @default 'Opacity'
+     */
+    label?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;