@skdx/docs-kit 0.35.0

package/dist/shared/contracts/chat-composer.js

@@ -0,0 +1 @@
+import{changeDetail as e}from"./change-reason.js";import{ROOT_DATA_ATTRIBUTES as t}from"./styling-hooks.js";var r={name:"ChatComposer",purpose:"The message input at the bottom of a conversation, composing Textarea and Button inside a field with attachment, leading, trailing and footer regions. Sending is reported through one send event; the block performs no request of its own. Ships in the blocks package of each framework, not the core package.",props:[{name:"value",type:"string",required:!1,description:"Current message text for controlled usage, paired with the value-change event."},{name:"defaultValue",type:"string",defaultValue:"''",required:!1,description:"Initial message text for uncontrolled usage, read only on mount."},{name:"placeholder",type:"string",required:!1,description:"Hint text shown in the empty textarea, rendered as the native placeholder attribute."},{name:"label",type:"string",defaultValue:"'Message'",required:!1,description:"Accessible name of the message textarea, read by assistive technology."},{name:"sendLabel",type:"string",defaultValue:"'Send'",required:!1,description:"Text of the send button, and its accessible name when sendIcon is given."},{name:"sendIcon",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Glyph rendered inside the send button in place of its text, making the button icon-only and named by sendLabel. A prop in React, Svelte, and Angular; Vue and Web Components use the `send-icon` slot."},{name:"submitKey",type:"'enter' | 'mod-enter' | 'none'",defaultValue:"'enter'",required:!1,description:"Which key sends from inside the textarea: 'enter' sends on a plain Enter, 'mod-enter' on Cmd or Ctrl with Enter, and 'none' never sends from the keyboard. Every other Enter press inserts a newline."},{name:"maxRows",type:"number",defaultValue:"8",required:!1,description:"Caps how far the auto-growing textarea grows, in rows, before it starts scrolling."},{name:"maxLength",type:"number",required:!1,description:"Native maxlength of the textarea \u2014 the longest message it accepts."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables the textarea and the send button, blocking every send path."},{name:"pending",type:"boolean",defaultValue:"false",required:!1,description:'Marks a send in flight: the send button is busy and inert and the root carries data-state="pending", while the textarea stays editable.'},{name:"leading",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Controls rendered inside the field before the textarea, such as an attach button. No leading region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `leading` slot."},{name:"trailing",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Controls rendered inside the field after the textarea, such as a model picker. No trailing region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `trailing` slot."},{name:"attachments",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Attached files or chips rendered in a row above the field. No attachments region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `attachments` slot."},{name:"footer",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Usage counters or hints rendered in a row below the field. No footer region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `footer` slot."}],events:[{name:"value-change",detail:e("string"),description:"Fires with the new text on every edit of the textarea, including the clear that follows an uncontrolled send."},{name:"send",detail:"{ value: string }",description:"Fires with the message text when the send button is activated or the configured submit key is pressed. The native form submission is prevented, so the consumer performs the request; an uncontrolled composer clears itself afterwards while a controlled one is cleared by its owner."}],slots:[{name:"leading",description:"The leading prop's content \u2014 controls inside the field before the textarea."},{name:"trailing",description:"The trailing prop's content \u2014 controls inside the field after the textarea."},{name:"attachments",description:"The attachments prop's content \u2014 attached files or chips above the field."},{name:"footer",description:"The footer prop's content \u2014 usage counters or hints below the field."},{name:"send-icon",description:"The sendIcon prop's content \u2014 the glyph inside the icon-only send button."}],states:["default","pending"],controlledUncontrolled:"The message text works controlled through value with the value-change event, or uncontrolled from defaultValue; only an uncontrolled composer clears itself after a send.",formBehavior:"The root is a native <form> and the send button is its submit button, so clicking and pressing the submit key share one path; the native submission is always prevented and routed to the send event.",validationBehavior:"The block validates nothing beyond requiring non-whitespace text before a send; maxLength is the native maxlength constraint on the textarea.",accessibility:{role:"form (native <form>; the textarea is named by label, the send button is a submit button so Enter-to-send and clicking share one path)",keyboard:[{key:"Enter",behavior:"With submitKey 'enter', sends the message and inserts no newline; with 'mod-enter' or 'none', inserts a newline."},{key:"Shift+Enter",behavior:"Inserts a newline in the textarea and never sends, whatever submitKey is set to."},{key:"Meta+Enter/Control+Enter",behavior:"With submitKey 'mod-enter', sends the message; otherwise inserts a newline."}],ariaAttributes:["aria-label on the textarea carries the label prop, so the control is named without a visible label","the send button takes aria-label from sendLabel when sendIcon makes it icon-only","the send button sets aria-busy through the composed Button while a send is pending"],focusManagement:"Focus stays in the textarea through a send; the block never moves focus and the send button is disabled rather than removed while there is nothing to send."},styling:{cssParts:["chat-composer","attachments","field","leading","textarea","trailing","send","footer"],dataAttributes:[...t,"data-state",{name:"data-skdx-chat-composer-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[]};export{r as chatComposerContract};

package/dist/shared/contracts/chat-message.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for the ChatMessage block: one conversation message composing Time. */
+export declare const chatMessageContract: ComponentContract;

package/dist/shared/contracts/chat-message.js

@@ -0,0 +1 @@
+import{ROOT_DATA_ATTRIBUTES as e}from"./styling-hooks.js";var a={name:"ChatMessage",purpose:"One message in a conversation \u2014 assistant, support agent, human or system \u2014 composing Time above consumer-supplied content, attachments, actions and a footer; the block parses nothing. Ships in the blocks package of each framework, not the core package.",props:[{name:"sender",type:"'user' | 'assistant' | 'system' | (string & {})",required:!0,description:"Who sent the message, written to data-sender. The skin aligns user messages to the end and styles system messages as a centred note."},{name:"author",type:"string",required:!1,description:"Name of the person, model or system that sent the message, rendered as visible text. No author region renders when omitted."},{name:"avatar",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Decorative avatar rendered beside the message, always aria-hidden. No avatar region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `avatar` slot."},{name:"timestamp",type:"Date | string",required:!1,description:"Instant the message was sent, rendered through a composed Time."},{name:"now",type:"Date | number",required:!1,description:"Reference instant the timestamp's relative label renders against."},{name:"status",type:"'pending' | 'sent' | 'error' | (string & {})",required:!1,description:"Delivery state, written to data-status; pending also sets aria-busy on the root."},{name:"statusLabel",type:"string",required:!1,description:"Visible text for the delivery state, in the app's own wording. No status region renders when omitted."},{name:"attachments",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Files, links or previews attached to the message, rendered below the content. No attachments region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `attachments` slot."},{name:"actions",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Controls such as copy, regenerate or react, rendered below the footer. No actions region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `actions` slot."},{name:"footer",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Citations, token counts or other metadata, rendered below the content. No footer region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `footer` slot."}],events:[],slots:[{name:"default",description:"The message content: markdown output, code, citations or tool results."},{name:"avatar",description:"The avatar prop's content \u2014 a decorative avatar beside the message."},{name:"attachments",description:"The attachments prop's content \u2014 files, links or previews attached to the message."},{name:"actions",description:"The actions prop's content \u2014 controls such as copy, regenerate or react."},{name:"footer",description:"The footer prop's content \u2014 citations, token counts or other metadata."}],appearance:[{attribute:"data-sender",values:["user","system"],stylesheet:"chat-message.css"},{attribute:"data-status",values:["error","pending"],stylesheet:"chat-message.css"}],states:["default"],controlledUncontrolled:"Stateless \u2014 ChatMessage holds no internal state.",formBehavior:"Not applicable \u2014 ChatMessage participates in no form.",validationBehavior:"Not applicable \u2014 ChatMessage carries no value and participates in no validation.",accessibility:{role:"article (native <article>; author, time and status are visible text, avatar decorative; aria-busy while pending)",keyboard:[],ariaAttributes:["the avatar region is aria-hidden so the visible author text alone carries its meaning","aria-busy is set on the root while status is pending","the sender is named by the visible author text rather than by an announcement of the role, so the wording stays the consumer's"],focusManagement:"Nothing inside the block is focusable except the consumer-supplied actions."},styling:{cssParts:["chat-message","avatar","main","header","author","time","status","content","attachments","footer","actions"],dataAttributes:[...e,"data-sender","data-status",{name:"data-skdx-chat-message-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[]};export{a as chatMessageContract};

package/dist/shared/contracts/checkbox-card.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a boolean checkbox whose hit target is a whole card, a `<label>` wrapping a real checkbox input. */
+export declare const checkboxCardContract: ComponentContract;

package/dist/shared/contracts/checkbox-card.js

@@ -0,0 +1 @@
+import{constraintValidationMethods as e,setCustomValidityMethod as t}from"./form-validity.js";import{ROOT_DATA_ATTRIBUTES as a}from"./styling-hooks.js";var r={name:"CheckboxCard",purpose:'A checkbox with a card-sized hit target: a <label> root wrapping a real <input type="checkbox">, plus Control, Indicator, Label, and Description parts.',props:[{name:"checked",type:"boolean",required:!1,description:"Controlled checked state. Boolean only, not indeterminate: a card is one titled choice, and the mixed state belongs to a parent summarising a set."},{name:"defaultChecked",type:"boolean",defaultValue:"false",required:!1,description:"Initial checked state, for uncontrolled usage. The card starts unselected."},{name:"name",type:"string",required:!1,description:"Name put on the underlying native input for form submission. Unlike Checkbox the input always exists here \u2014 it is what makes the card clickable \u2014 so omitting name only means the value is not submitted."},{name:"value",type:"string",defaultValue:"'on'",required:!1,description:"Value submitted with the control when checked \u2014 the same default the HTML checkbox itself uses."},{name:"required",type:"boolean",defaultValue:"false",required:!1,description:"Marks the control required for form validation; an unchecked card blocks submission with valueMissing."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables the control: neither the card surface nor keyboard can change it, and it leaves the tab order."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:'Freezes selection without freezing interaction. The Control keeps its tab stop and stays focusable; gains aria-readonly="true"; clicking and Space do nothing. It does NOT gain aria-disabled, and the Control keeps submitting its value \u2014 the native readonly attribute is deliberately never set on it because that blocks constraint validation. Same model as Checkbox, CheckboxGroup and RadioGroup.'},{name:"form",type:"string",required:!1,description:"Id of the <form> that owns this card when rendered outside it. Set as the form content attribute on <skdx-checkbox-card>; in React, Vue, Svelte and Angular forwarded to the Control input's form attribute."},{name:"invalid",type:"boolean",defaultValue:"false",required:!1,description:"Marks the card invalid: exposes aria-invalid on the control and data-invalid on the root for error styling."},{name:"hasLabel",type:"boolean",defaultValue:"false",required:!1,description:"Declares a Label is present, so server-rendered markup carries aria-labelledby before hydration. Only affects the first paint; mount registration is authoritative.",frameworks:["svelte"],exception:"snippet-opaque",frameworksReason:"Svelte alone has no render-time signal: children arrive as an opaque Snippet function. React, Vue, and Angular resolve this from their declared children; Web Components queries real DOM."},{name:"hasDescription",type:"boolean",defaultValue:"false",required:!1,description:"Same as hasLabel, for a Description and aria-describedby.",frameworks:["svelte"],exception:"snippet-opaque",frameworksReason:"Same reason as hasLabel: Svelte has no render-time way to detect the part."},{name:"label",type:"string",required:!1,description:"The card's title copy, rendered into the derived Label that the control's aria-labelledby points at. Supplying it derives the whole anatomy (Control, Indicator, Label). Omitting it requires an aria-label on the control. Anatomy derivation is all-or-nothing: a card with any consumer composition derives nothing."},{name:"description",type:"string",required:!1,description:"The supporting copy under the title, which derives a Description part and the control's aria-describedby. The only optional part of the derived anatomy."},{name:"size",type:"'sm' | 'md' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the root; the data-size attribute may be set directly instead."}],events:[{name:"checked-change",detail:"boolean",description:"Fired with the new checked state whenever it changes, controlled or not."}],parts:[{name:"Control",description:"The real checkbox input, visually hidden but focusable so the browser owns activation, focus, form submission, and validation. Points aria-labelledby and aria-describedby only at the ones actually mounted."},{name:"Indicator",description:"The drawn check mark or box. Decorative and aria-hidden: the control already reports its own checked state, and a second announcement would stutter."},{name:"Label",description:"The card's title line, and its accessible name."},{name:"Description",description:"The supporting copy under the title, announced after the name via aria-describedby rather than folded into it."}],slots:[{name:"default",description:"The card's body \u2014 a Control, an Indicator, a Label, and usually a Description."}],appearance:[{attribute:"data-size",values:["sm","md","lg"],stylesheet:"checkbox-card.css"}],states:["checked","unchecked","focus-visible","invalid","disabled","readonly"],controlledUncontrolled:"Uncontrolled by default: starts at defaultChecked and tracks its own checked state. Passing checked switches to controlled.",formBehavior:`A real <input type="checkbox">: submits value under name when checked, participates in form reset, and is reachable through the form's elements collection. form associates it with a <form> outside its DOM location. readOnly does not affect submission \u2014 the Control never receives the native readonly attribute.`,validationBehavior:"Native constraint validation through required, failing with valueMissing when unchecked. checkValidity()/reportValidity() delegate straight to the Control input; setCustomValidity() writes to it for server or cross-field errors. The invalid prop is presentational and does not itself block submission \u2014 pair with Field for messages.",accessibility:{role:"checkbox \u2014 supplied by the native input, not an ARIA role",keyboard:[{key:"Space",behavior:"Toggles the card, handled natively by the input."},{key:"Tab",behavior:"Moves to the card; each card is its own tab stop, since checkboxes are independent."}],ariaAttributes:["aria-labelledby on the control pointing at the Label when mounted \u2014 a dangling reference is an accessibility bug","aria-describedby on the control pointing at the Description, when mounted","The association must also hold in server-rendered markup, where effects have not yet run: it is resolved from declared children or real DOM before rendering, or seeded by explicit hasLabel/hasDescription props (default false) where no render-time signal exists.","aria-invalid on the control while invalid, with data-invalid on the root for styling","aria-readonly on the control while readOnly, with data-readonly on the root \u2014 never aria-disabled","aria-hidden on the Indicator, which draws a state the control already reports"],focusManagement:"Focus lives on the hidden input, never the card. Pointer activation moves focus natively; data-focus-visible is set only for keyboard focus, so a ring appears when it should and not on every click. readOnly does not affect the tab order. Programmatic focus() sets data-focus-visible even without a preceding pointer event, diverging from some `:focus-visible` implementations.",namingRequirement:"A Label part or aria-label on the control. The Description is deliberately not part of the name; folding a paragraph into the accessible name makes announcements unbearable."},styling:{cssParts:["checkbox-card","control","indicator","label","description"],dataAttributes:[...a,"data-state","data-disabled","data-readonly","data-invalid","data-focus-visible","data-size",{name:"data-skdx-checkbox-card-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[...e,t]};export{r as checkboxCardContract};

package/dist/shared/contracts/checkbox-group.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a multi-selection group of checkboxes owning a string[] value, plus an optional tri-state select-all parent. */
+export declare const checkboxGroupContract: ComponentContract;

package/dist/shared/contracts/checkbox-group.js

@@ -0,0 +1 @@
+import{changeDetail as a}from"./change-reason.js";import{constraintValidationMethods as e,setCustomValidityMethod as t}from"./form-validity.js";import{ROOT_DATA_ATTRIBUTES as r}from"./styling-hooks.js";var s={name:"CheckboxGroup",purpose:"A multi-selection group owning a string[] value, with group-level disabled/required/invalid and optional tri-state select-all parent.",props:[{name:"value",type:"string[]",required:!1,description:"Checked item values, for controlled usage."},{name:"defaultValue",type:"string[]",defaultValue:"[]",required:!1,description:"Initially checked item values, for uncontrolled usage. Vue spells this default as the factory `() => []` rather than the literal, because Vue props with object/array defaults must be factories. The two say the same thing."},{name:"name",type:"string",required:!1,description:"Name under which the checked values are submitted \u2014 one entry per checked value, so formData.getAll(name) returns them all."},{name:"form",type:"string",required:!1,description:"Id of the <form> that owns this group, for a group rendered outside it. Forwarded to every item's hidden input (React/Vue/Svelte/Angular) or set on the element (<skdx-checkbox-group>)."},{name:"required",type:"boolean",defaultValue:"false",required:!1,description:'Marks the group as required \u2014 at least one item must be checked. Exposed as aria-required on every item (role="group" does not support it).'},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables every item in the group, and the select-all parent."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:'Freezes the selection. Items and parent stay focusable and tabstoppable; each gains aria-readonly="true". role="group" does not allow it on the root, so the root carries only data-readonly. Space and click change nothing, value-change never fires. Nothing gains aria-disabled. Same model as Checkbox.'},{name:"max",type:"number",required:!1,description:'Caps how many items may be checked. Unchecked items gain aria-disabled="true" and data-max-reached but keeps its tab stop (native disabled attribute is deliberately not used; disabling mid-interaction would steal focus).'},{name:"invalid",type:"boolean",defaultValue:"false",required:!1,description:"Marks the group as invalid, exposed as aria-invalid/data-invalid on the group root."},{name:"options",type:"ReadonlyArray<{ value: string; label: string; disabled?: boolean }>",required:!1,description:"The checkboxes the group derives (one Item per entry, keyed by value). Flat only \u2014 no option groups. Hand composition takes precedence."},{name:"size",type:"'sm' | 'md' | 'lg' | (string & {})",required:!1,description:"Size rung forwarded to every derived Item's and the SelectAll control's data-size; either attribute may be written directly instead."}],events:[{name:"value-change",description:"Fires with the new value array whenever an item \u2014 or the select-all parent \u2014 changes the selection.",detail:a("string[]","selectedValue: string | null")}],parts:[{name:"Item",description:'One checkbox in the group. Renders the framework\'s Checkbox with `role="checkbox"`, aria-checked, data-state, data-disabled, plus data-value and the item marker. Toggling adds/removes its value from the group. Each item is its own tab stop.',props:[{name:"checked",type:"boolean",required:!1,frameworks:["webComponents"],exception:"wc-internals",frameworksReason:"Only the custom element publishes it. The other four hand this derived state down to their parts through context, so a consumer never reads it off a part; here every part is its own element with no such channel, and reading it back is the only way to reflect the state in surrounding markup.",description:"Whether this item currently holds one of the group's selected values. Read-only: pick or clear it through the root's value."},{name:"effectiveDisabled",type:"boolean",required:!1,frameworks:["webComponents"],exception:"wc-internals",frameworksReason:"Only the custom element publishes it. The other four hand this derived state down to their parts through context, so a consumer never reads it off a part; here every part is its own element with no such channel, and reading it back is the only way to reflect the state in surrounding markup.",description:"Whether this item is disabled, by its own disabled or by the root's. Read-only: it is the OR of the two."},{name:"value",type:"string",required:!0,description:"Unique identifier added to or removed from the group's value."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables this item alone. A disabled item is excluded from select-all: neither counted in the parent state nor changed when the parent is toggled."},{name:"size",type:"'sm' | 'md' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the item; the data-size attribute may be set directly instead."}],methods:[...e,t]},{name:"SelectAll",description:"The tri-state parent. Checked when all enabled items are checked, indeterminate when some are, unchecked when none are. Toggling checks all items or clears them (indeterminate resolves to checked). It carries no value and is never submitted. Carries aria-controls listing every item it governs so it is announced as the parent of the set, not as one more option.",props:[{name:"effectiveDisabled",type:"boolean",required:!1,frameworks:["webComponents"],exception:"wc-internals",frameworksReason:"Only the custom element publishes it. The other four hand this derived state down to their parts through context, so a consumer never reads it off a part; here every part is its own element with no such channel, and reading it back is the only way to reflect the state in surrounding markup.",description:"Whether the select-all control is disabled, by its own disabled or by the root's. Read-only: it is the OR of the two."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables the parent alone; the group-level disabled also disables it."},{name:"size",type:"'sm' | 'md' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the select-all control; the data-size attribute may be set directly instead."}],methods:[...e,t]}],slots:[{name:"default",description:"CheckboxGroupItem children and an optional CheckboxGroupSelectAll."},{name:"select-all",description:"The SelectAll label, for a group derived from `options`; its content becomes the parent's accessible name."}],states:["default","disabled","readonly","invalid"],controlledUncontrolled:"Controlled via value + the value-change event, or uncontrolled via defaultValue. Passing value switches to controlled \u2014 the consumer owns the array and must update it from value-change.",formBehavior:'With a name, submits one entry per checked value (formData.getAll(name) returns every checked value). React/Vue/Svelte/Angular use a hidden <input type="checkbox"> per item; Web Components uses ElementInternals.multiFormValue(). Select-all parent is never submitted.',validationBehavior:`required means "at least one checked", which native constraint validation cannot express. Outside Web Components, required only sets aria-required on items and produces **no browser validation message at all**; Web Components reports valueMissing via ElementInternals. Wrap in Fieldset to get a browser message. This caveat is repeated in every package's own public TSDoc. invalid is a presentational flag.`,accessibility:{role:"group",keyboard:[{key:"Tab",behavior:"Moves to the next checkbox \u2014 every item is its own tab stop, as with native checkboxes."},{key:"Space",behavior:"Toggles the focused item, or the select-all parent."},{key:"Enter",behavior:'Suppressed, matching native <input type="checkbox">.'}],ariaAttributes:['aria-invalid reflects invalid on the root \u2014 it and aria-disabled are the only global ARIA attributes, so they are the only ones role="group" may carry','each item exposes aria-required while the group is required \u2014 role="checkbox" supports it and role="group" does not, the same split a segmented field makes between its group root and its spinbuttons',"each item exposes aria-readonly while the group is readOnly, on the same split and for the same reason; the root carries only data-readonly, and nothing carries aria-disabled","each item exposes aria-checked",'the select-all parent exposes aria-checked="mixed" while only some items are checked',"the select-all parent exposes aria-controls listing every item id it governs \u2014 without it the parent is announced as an indistinguishable fifth option in a four-option group",'while max is reached, every unchecked item exposes aria-disabled="true" without the native disabled attribute, so it can still be focused and heard'],focusManagement:"No roving tabindex. Each item is its own tab stop, unlike a radio group.",namingRequirement:'Requires a group name \u2014 a wrapping Fieldset or aria-label/aria-labelledby on the group root. Every item and the select-all parent need their own name (role="checkbox" takes its name from content).'},styling:{cssParts:["checkbox-group","item","item-label","select-all"],dataAttributes:[...r,"data-disabled","data-readonly","data-invalid","data-value","data-state","data-max-reached","data-size","data-skdx-checkbox-group-item",{name:"data-skdx-checkbox-group-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'},{name:"data-skdx-checkbox-group-item-indicator-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'},"data-skdx-checkbox-group-item-default-indicator"],cssCustomProperties:[]},publicMethods:[...e,t],frameworkExtensions:[{framework:"webComponents",name:"requiredMessage",type:"string",description:"Custom message shown when the required constraint fails; Web Components only, set from markup with the required-message attribute."}]};export{s as checkboxGroupContract};

package/dist/shared/contracts/checkbox.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a tri-state checkbox (checked/unchecked/indeterminate) with behavior and accessibility only. */
+export declare const checkboxContract: ComponentContract;

package/dist/shared/contracts/checkbox.js

@@ -0,0 +1 @@
+import{constraintValidationMethods as e,setCustomValidityMethod as a}from"./form-validity.js";import{ROOT_DATA_ATTRIBUTES as t}from"./styling-hooks.js";var n={name:"Checkbox",purpose:'Tri-state checkbox with behavior and accessibility only. When `name` is set, a hidden native `<input type="checkbox">` mirrors state for form participation.',props:[{name:"checked",type:"boolean | 'indeterminate'",defaultValue:"false",required:!1,description:"Checked state for controlled usage; pair with checked-change event."},{name:"defaultChecked",type:"boolean | 'indeterminate'",defaultValue:"false",required:!1,description:"Initial checked state, for uncontrolled usage.",frameworks:["react","vue","svelte","angular"],exception:"wc-default",frameworksReason:'Web Components express the uncontrolled seed as the initial `checked` attribute rather than as a second `defaultChecked` property, exactly as `<input type="checkbox" checked>` does: `<skdx-checkbox>` captures the declared attribute in connectedCallback and restores it from formResetCallback. That is a deliberate platform alignment, not a missing property.'},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disable toggling and remove from tab order."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:'Freeze checked state without freezing control; keeps its tab stop and `aria-readonly="true"`, does NOT gain aria-disabled, not given the native readonly attribute (would break constraint validation).'},{name:"form",type:"string",required:!1,description:"Form id when checkbox is rendered outside the form."},{name:"required",type:"boolean",defaultValue:"false",required:!1,description:"Mark hidden input required for form validation; sets aria-required."},{name:"name",type:"string",required:!1,description:"Name for form submission via hidden input; omit to skip the input."},{name:"value",type:"string",defaultValue:"'on'",required:!1,description:"Value to submit when checked."},{name:"invalid",type:"boolean",defaultValue:"false",required:!1,description:"Mark checkbox invalid; exposed as aria-invalid/data-invalid."},{name:"indicator",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot, not a prop.",description:"Check or dash glyph; shown when checked or indeterminate."},{name:"size",type:"'sm' | 'md' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the root; the data-size attribute may be set directly instead."}],events:[{name:"checked-change",description:"Fired with new checked state when it changes; always boolean.",detail:"boolean"}],parts:[{name:"Indicator",description:"Check or dash mark, shown only while checked or indeterminate.",props:[{name:"forceMount",type:"boolean",defaultValue:"false",required:!1,description:"Keep mark present when unchecked; lets animation libraries animate exits."}]}],slots:[{name:"default",description:"The visual checked/indeterminate indicator mark (e.g. a check icon)."},{name:"indicator",description:"Indicator part glyph (check or dash)."}],appearance:[{attribute:"data-size",values:["sm","md","lg"],stylesheet:"checkbox.css"}],states:["unchecked","checked","indeterminate","hover","focus","disabled","readonly","invalid"],controlledUncontrolled:"Uncontrolled by default (starts at defaultChecked). Passing checked switches to controlled. Web Components use the initial `checked` *attribute* and restore it from formResetCallback, not a second property.",formBehavior:'When name is set, renders a hidden native `<input type="checkbox">` mirroring checked/required/disabled for form submission. Indeterminate submits as unchecked. ReadOnly still submits name/value.',validationBehavior:"required marks the hidden input required. checkValidity()/reportValidity() delegate to that hidden input, so the answer is the browser's; with no name there is no input, nothing is submitted and both report valid. setCustomValidity() writes to the same input. invalid is a presentational flag (aria-invalid/data-invalid).",accessibility:{role:"checkbox",keyboard:[{key:"Space",behavior:"Toggles checked. Indeterminate resolves to checked."},{key:"Enter",behavior:"Suppressed, matching native checkbox."}],ariaAttributes:["aria-checked ('true' | 'false' | 'mixed')","aria-required when required","aria-readonly when readOnly (not aria-disabled)","aria-invalid when invalid"],focusManagement:"Native tab order; disabled removes it. readOnly keeps tab stop and stays focusable.",namingRequirement:"Requires an accessible name via aria-label, aria-labelledby, or an associated <label>."},styling:{cssParts:["checkbox","indicator","label"],dataAttributes:[...t,"data-state","data-disabled","data-readonly","data-invalid","data-size",{name:"data-skdx-checkbox-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'},"data-skdx-checkbox-default-indicator"],cssCustomProperties:[]},publicMethods:[...e,a],frameworkExtensions:[{framework:"webComponents",name:"requiredMessage",type:"string",description:"Custom required message; Web Components only, set from markup with the required-message attribute."}]};export{n as checkboxContract};

package/dist/shared/contracts/clipboard.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a copy-to-clipboard control with transient confirmation state and announcement. */
+export declare const clipboardContract: ComponentContract;

package/dist/shared/contracts/clipboard.js

@@ -0,0 +1 @@
+import{ROOT_DATA_ATTRIBUTES as e}from"./styling-hooks.js";var a={name:"Clipboard",purpose:"A copy control with transient confirmed state and announcement.",props:[{name:"value",type:"string",required:!0,description:"The text written to the system clipboard when a Trigger is activated."},{name:"timeout",type:"number | null",defaultValue:"2000",required:!1,description:"How long copied state lasts before falling back to idle; null keeps it until next copy."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables every trigger and blocks copying entirely."},{name:"copiedLabel",type:"string",defaultValue:"'Copied to clipboard'",required:!1,description:"Live-region message announced after successful copy (polite)."},{name:"errorLabel",type:"string",defaultValue:"'Copy failed'",required:!1,description:"Live-region message announced when copy fails (assertive)."},{name:"label",type:"string",defaultValue:"'Copy'",required:!1,description:"Accessible name for the derived copy trigger."},{name:"showInput",type:"boolean",defaultValue:"false",required:!1,description:"Renders a readonly input holding the value to be copied."},{name:"inputLabel",type:"string",defaultValue:"'Value to copy'",required:!1,description:"Accessible name for the readonly input."},{name:"size",type:"'md' | 'sm' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the root; the data-size attribute may be set directly instead."}],events:[{name:"copy-success",description:"Fired with copied text after write succeeds; never on failure.",detail:"string"},{name:"copy-error",description:"Fired with failure when copy fails. Errors reported here only: nothing is thrown into render and nothing is swallowed.",detail:"unknown"}],parts:[{name:"Input",description:"A read-only field showing the text the root will copy, so the value is visible as well as copyable.",props:[]},{name:"Trigger",description:"Copy button carrying root data-state. Copy state belongs to root, so two Triggers under one root both show confirmation after either is activated.",props:[{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disable this trigger only. A disabled root disables every trigger regardless."}]},{name:"Indicator",description:"Mark shown in copy state; renders only in its own state.",props:[{name:"match",type:"'copied' | 'idle' | 'error'",defaultValue:"'copied'",required:!1,description:"Which state this indicator renders in; defaults to copied."}]}],slots:[{name:"default",description:"The control's body \u2014 a Trigger, usually wrapping two Indicators, and optionally an Input."}],appearance:[{attribute:"data-size",values:["md","sm","lg"],stylesheet:"clipboard.css"}],states:["idle","copied","error","disabled"],controlledUncontrolled:"Copy state is internal and expires on timer. State belongs to the root, so every Trigger shows same confirmation.",formBehavior:'Not applicable \u2014 Clipboard participates in no form; Trigger is type="button".',validationBehavior:"Not applicable \u2014 Clipboard collects no value.",accessibility:{role:"none \u2014 Trigger is a plain button and the root renders a generic element",keyboard:[{key:"Enter / Space",behavior:"Activates the focused Trigger and performs the copy."}],ariaAttributes:["Successful copy announced politely","Failed copy announced ASSERTIVELY","Indicator glyphs are aria-hidden","aria-disabled on disabled trigger"],focusManagement:"Focus stays on the Trigger; state change happens under user, not around them.",namingRequirement:"Trigger must have accessible name via text or aria-label."},styling:{cssParts:["clipboard","trigger","indicator","input"],dataAttributes:[...e,"data-state","data-disabled","data-size",{name:"data-skdx-clipboard-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[{name:"copy",signature:"(): void",description:"Perform copy without a Trigger; same state, announcement, and events."}]};export{a as clipboardContract};

package/dist/shared/contracts/collapsible.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a show/hide interface with a trigger button and a content panel. */
+export declare const collapsibleContract: ComponentContract;

package/dist/shared/contracts/collapsible.js

@@ -0,0 +1 @@
+import{ROOT_DATA_ATTRIBUTES as e}from"./styling-hooks.js";var n={name:"Collapsible",purpose:"A show/hide interface. The root owns open state and hands it to a trigger button and content panel via context.",props:[{name:"open",type:"boolean",required:!1,description:"Open state, for controlled usage. Pair with an open-change event."},{name:"defaultOpen",type:"boolean",defaultValue:"false",required:!1,description:"Initial open state, for uncontrolled usage. Not in Web Components \u2014 `open` as a reflected property is the custom-element idiom; a `default-open` attribute would create two sources of truth.",frameworks:["react","vue","svelte","angular"],exception:"wc-default",frameworksReason:"Web Components idiom: `open` is a reflected property, not a `default-open` attribute."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Prevents the trigger from toggling the content."},{name:"title",type:"string",required:!1,description:"The trigger's copy, which derives a Trigger part above the panel. Absent prop, absent element. Consumer-authored Trigger wins the derived one. On Web Components this shadows `HTMLElement.title` (browser tooltip)."}],events:[{name:"open-change",description:"Fires with the new open state whenever it changes.",detail:"boolean"},{name:"open-change-complete",description:"Fires with settled open state once the content panel finishes transitioning \u2014 on transitionend or synchronously when no transition is running.",detail:"{ open: boolean }"}],parts:[{name:"Trigger",description:"The button that toggles the panel. Carries aria-expanded, aria-controls and data-state, and forwards its disabled state from the root.",props:[]},{name:"Content",description:"The panel revealed when open. Unmounted while closed unless forceMount or hiddenUntilFound is set. Always carries measured size custom properties.",props:[{name:"forceMount",type:"boolean",defaultValue:"false",required:!1,frameworks:["react","vue","svelte","angular"],exception:"force-mount",frameworksReason:"Web Components satisfy this vacuously \u2014 markup content is never unmounted, only hidden via the hidden attribute.",description:'Keep the panel mounted while closed, hidden via hidden="". For exit animations or to preserve panel state. Web Components satisfy this vacuously \u2014 markup is never unmounted.'},{name:"hiddenUntilFound",type:"boolean",defaultValue:"false",required:!1,description:'Keep panel mounted as hidden="until-found" for browser find-in-page search. Opens on beforematch event to keep aria-expanded/data-state truthful. Implies forceMount.'}]},{name:"Indicator",description:"The disclosure affordance inside the trigger \u2014 chevron or caret. A <span> carrying data-state so the skin can rotate it. No glyph of its own \u2014 the icon is the consumer's child.",props:[]}],slots:[{name:"default",description:"Root content \u2014 typically a trigger and a content panel."},{name:"trigger",description:"CollapsibleTrigger's content \u2014 the toggle button."},{name:"content",description:"CollapsibleContent's content \u2014 the revealed panel."},{name:"indicator",description:"CollapsibleIndicator's content \u2014 the chevron or caret glyph."}],states:["open","closed"],controlledUncontrolled:"Supports both: `open` for controlled, `defaultOpen` for uncontrolled.",formBehavior:"Not applicable \u2014 Collapsible does not participate in forms.",validationBehavior:"Not applicable \u2014 Collapsible carries no value and participates in no validation.",accessibility:{role:"generic root; trigger is a native button",keyboard:[{key:"Enter",behavior:"Toggles the panel and fires exactly one open-change, via native <button> activation."},{key:"Space",behavior:"Toggles the panel and fires exactly one open-change, identically to Enter. Listed separately because a trigger that is not a native button gets Enter for free and Space only if something implements it."}],ariaAttributes:["trigger's aria-controls points at the content's id (only while content is in DOM; default: unmounted while closed)","trigger's aria-expanded reflects open state"],focusManagement:"Does not move focus on toggle."},styling:{cssParts:["root","trigger","content","indicator"],dataAttributes:[...e,"data-state","data-disabled",{name:"data-skdx-collapsible-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:["--skdx-collapsible-content-height","--skdx-collapsible-content-width"]},publicMethods:[{name:"setOpen",signature:"(next: boolean) => void",description:"Sets open and fires open-change; setting the prop directly is the equivalent declarative path.",frameworks:["webComponents"],exception:"imperative",frameworksReason:"Custom elements have no props; the trigger reaches its root through closest() and needs something to call."}]};export{n as collapsibleContract};

package/dist/shared/contracts/color-picker.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a colour picker with a saturation/brightness area, hue and alpha tracks, swatches, inputs, and a format switch, stored internally as HSB. */
+export declare const colorPickerContract: ComponentContract;

package/dist/shared/contracts/color-picker.js

@@ -0,0 +1 @@
+import{changeDetail as e}from"./change-reason.js";import{ROOT_DATA_ATTRIBUTES as a}from"./styling-hooks.js";var o={name:"ColorPicker",purpose:"A colour picker: 2D saturation/brightness Area, Hue and Alpha sliders, SwatchGroup, per-channel/whole-colour Inputs, FormatSelect, EyeDropper. Stores as HSB, emits formatted string, publishes channels as CSS custom properties.",props:[{name:"value",type:"string",required:!1,description:"Controlled colour in active format, paired with value-change. Any parseable notation accepted; unparseable kept as-is, should not blank the picker."},{name:"defaultValue",type:"string",defaultValue:"'#000000'",required:!1,description:"Initial colour, for uncontrolled usage \u2014 opaque black, the one colour every format agrees on."},{name:"format",type:"'hex' | 'rgb' | 'hsl' | 'hsb'",required:!1,description:"Controlled output notation, paired with format-change. Stored as HSB whatever this says; format only controls spelling. hsb is library-only, not CSS-valid. Use --skdx-color-picker-value for styles."},{name:"defaultFormat",type:"'hex' | 'rgb' | 'hsl' | 'hsb'",defaultValue:"'hex'",required:!1,description:"Initial uncontrolled notation \u2014 the one people paste, type and recognize."},{name:"alpha",type:"boolean",defaultValue:"true",required:!1,description:"Whether the picker has an alpha channel. False: Alpha slider hidden, emitted strings opaque, never receives an rgba() it must strip."},{name:"step",type:"number",defaultValue:"1",required:!1,description:"Keyboard increment in channel units (percent/degrees). Shift multiplies it by ten for coarse adjustments."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Blocks all interaction, removes focusable parts from tab order."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:"Displays colour but blocks changes. All parts stay focusable and in tab order, unlike disabled."},{name:"showInput",type:"boolean",defaultValue:"true",required:!1,description:"Includes whole-colour Input in derived anatomy. Ignored with hand composition. FormatSelect never derived."},{name:"showSwatches",type:"boolean",defaultValue:"true",required:!1,description:"Includes SwatchGroup built from swatches in derived anatomy. Ignored with hand composition, renders nothing if swatches empty."},{name:"showEyeDropper",type:"boolean",defaultValue:"true",required:!1,description:"Includes EyeDropper trigger in derived anatomy. Ignored with hand composition and where platform lacks eyedropper API."},{name:"swatches",type:"string[]",defaultValue:"[]",required:!1,description:"Preset colours in any parseable notation for derived SwatchGroup. Ignored with hand composition. Web Components: supports { value, label } for aria-label."},{name:"fullWidth",type:"boolean",required:!1,description:"Stretches the picker to its container width, written to data-full-width on the root; the data-full-width attribute may be set directly instead."},{name:"size",type:"'sm' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the root; the data-size attribute may be set directly instead."}],events:[{name:"value-change",description:"Fired on every change: arrow key, drag frame, swatch click, and format change. String changed even though the colour did not.",detail:e("string")},{name:"value-commit",description:"Fired exactly once when pointer drag ends. Use for expensive effects; value-change fires per frame. Keyboard and click changes do not fire it.",detail:"string"},{name:"format-change",description:"Fired with new notation when it changes. value-change fires alongside with re-spelled string.",detail:"'hex' | 'rgb' | 'hsl' | 'hsb'"}],parts:[{name:"Area",description:"2D saturation/brightness surface (left-right/bottom-top). Pointer-down seeks to colour; drag survives leaving element/window. No ARIA; accessibility in AreaThumb's sliders."},{name:"AreaThumb",lightDom:!0,description:'Handle on 2D surface, renders two role="slider" axes as children for accessibility.',props:[{name:"saturationLabel",type:"string",defaultValue:"'Saturation'",required:!1,description:"Accessible name of the horizontal axis slider."},{name:"brightnessLabel",type:"string",defaultValue:"'Brightness'",required:!1,description:"Accessible name of the vertical axis slider."}]},{name:"HueSlider",description:'The 0\u2013360\xB0 hue track, a role="slider" reporting degrees.',props:[{name:"label",type:"string",defaultValue:"'Hue'",required:!1,description:"Accessible name of the slider, declared as prop for i18n. Consumer aria-label wins."},{name:"orientation",type:"'horizontal' | 'vertical'",defaultValue:"'horizontal'",required:!1,description:"Track axis direction, published as data-orientation. Vertical runs bottom-to-top."}]},{name:"HueSliderThumb",description:"The handle on the hue track."},{name:"AlphaSlider",description:'0\u2013100% opacity track, a role="slider". Nothing when alpha disabled.',props:[{name:"label",type:"string",defaultValue:"'Opacity'",required:!1,description:"Accessible name of the slider, declared as prop for i18n. Consumer aria-label wins."},{name:"orientation",type:"'horizontal' | 'vertical'",defaultValue:"'horizontal'",required:!1,description:"Track axis direction, published as data-orientation. Vertical runs bottom-to-top."}]},{name:"AlphaSliderThumb",description:"The handle on the alpha track."},{name:"SwatchGroup",description:"Container for preset swatches, a radiogroup of mutually-exclusive options with one roving tab stop.",props:[{name:"loop",type:"boolean",defaultValue:"true",required:!1,description:"Whether arrow-key navigation wraps at the ends."}]},{name:"Swatch",description:"A radio preset: checked when it matches current colour, publishes colour as CSS custom property. Unparseable value renders disabled swatch rather than a button that silently does nothing. Name if presets have meaning via aria-label.",props:[{name:"value",type:"string",required:!0,description:"The colour this swatch selects, in any parseable notation."}]},{name:"Input",lightDom:!0,description:"Text field for colour entry. No channel: whole colour in current format (the expected hex box).",props:[{name:"channel",type:"'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha'",required:!1,description:"Which single channel to edit. Omit for whole colour in current format."}]},{name:"FormatSelect",lightDom:!0,description:"A native <select> for format switching \u2014 a real form control rather than custom menu.",props:[{name:"formats",type:"Array<'hex' | 'rgb' | 'hsl' | 'hsb'>",defaultValue:"['hex', 'rgb', 'hsl', 'hsb']",required:!1,description:"Notations to offer, in desired order."}]},{name:"EyeDropper",description:"Platform eyedropper trigger for picking colour anywhere on screen. Renders nothing where unsupported, rather than offering a button that cannot work. If relying on it, also expose hex Input."}],slots:[{name:"default",description:"Picker's body: Area, sliders, swatches, inputs, format select, eyedropper. None is required; works with any subset."}],appearance:[{attribute:"data-full-width",values:[],stylesheet:"color-picker.css"},{attribute:"data-size",values:["sm","lg"],stylesheet:"color-picker.css"}],states:["dragging","checked","disabled","readonly"],controlledUncontrolled:"Two independent controlled/uncontrolled axes \u2014 value and format \u2014 each starting from its default* prop and switching to controlled when the matching prop is passed. The stored HSB colour is internal either way, which is what keeps a drag along a constant hue from drifting through a lossy string round-trip.",formBehavior:"Not a native form control in itself. The Inputs and the FormatSelect are real elements, but the colour is submitted by the consumer, typically through a hidden input carrying the emitted string.",validationBehavior:'Parsing is the only rule: an unparseable string is ignored and the previous colour kept, rather than being reported as an invalid state. Constraints like "must be dark enough for contrast" belong to the surrounding Field.',accessibility:{role:"slider (the two Area axes, HueSlider, AlphaSlider), radiogroup (SwatchGroup), radio (Swatch) \u2014 the Area itself has no role",keyboard:[{key:"Arrow keys (on an Area axis)",behavior:"Move saturation or brightness by step. Each axis is its own slider with its own value."},{key:"Arrow keys (on a track)",behavior:"Move hue by step degrees, or alpha by step percentage points."},{key:"Shift + Arrow keys",behavior:"Move ten times step, so a 1-unit picker still has a coarse gear."},{key:"Home / End",behavior:"Jump to the minimum/maximum of the focused channel."},{key:"Arrow keys (in the SwatchGroup)",behavior:"Move between presets and select as they go, wrapping unless loop is false."},{key:"Enter (in an Input)",behavior:"Commits the typed value; an unparseable one is discarded."}],ariaAttributes:['role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext on each channel, so every value is announced in its own units rather than as a bare number',`No role at all on the Area: role="application" would hand the surface to the browser as an opaque box and take the screen reader's own navigation away from the user, to buy keyboard handling the AreaThumb already implements`,"Separate accessible names on the saturation and brightness axes \u2014 two unnamed sliders in the same box are indistinguishable",'role="radiogroup" with role="radio" and aria-checked on the presets, so they are announced as a choice rather than as a row of buttons',"aria-orientation on each track, and aria-readonly / aria-disabled mirroring the root","The resulting colour is announced politely after a jump the user cannot feel their way to \u2014 a swatch, an eyedropper pick, or a typed input \u2014 since those replace the whole colour at once rather than nudging a channel the slider already reports"],focusManagement:"Every interactive part is its own tab stop except the swatches, which share one roving stop. A disabled picker leaves the tab order entirely; a read-only one stays in it, so the colour can still be read by keyboard.",namingRequirement:'Each slider needs a name: the Area axes default to "Saturation" and "Brightness", and the hue and alpha tracks must be named by the consumer. Every Swatch needs a name too \u2014 a radio whose only content is a background colour announces nothing.'},styling:{cssParts:["color-picker","area","area-thumb","hue-slider","hue-slider-thumb","alpha-slider","alpha-slider-thumb","swatch-group","swatch","input","format-select","eye-dropper"],dataAttributes:[...a,"data-dragging","data-disabled","data-readonly","data-orientation","data-channel","data-format","data-value","data-skdx-color-picker-swatch","data-state","data-full-width","data-size",{name:"data-skdx-color-picker-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:["--skdx-color-picker-value","--skdx-color-picker-hue","--skdx-color-picker-saturation","--skdx-color-picker-brightness","--skdx-color-picker-alpha","--skdx-color-picker-hue-position","--skdx-color-picker-alpha-position","--skdx-color-picker-swatch-value"]},publicMethods:[]};export{o as colorPickerContract};

package/dist/shared/contracts/combobox.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a WAI-ARIA 1.2 "combobox with list autocomplete", keeping real DOM focus on the input with a virtually-focused highlighted option. */
+export declare const comboboxContract: ComponentContract;

package/dist/shared/contracts/combobox.js

@@ -0,0 +1 @@
+import{changeDescription as i,changeDetail as e}from"./change-reason.js";import{constraintValidationMethods as r,setCustomValidityMethod as s}from"./form-validity.js";import{dismissalEvents as l,forceMountProp as t,openChangeCompleteEvent as d,popperContentProps as h,popperMeasurementProperties as u,portalPart as p,portalPropsSansForceMount as c}from"./overlay-parts.js";import{VIRTUAL_FOCUS_RULE as m}from"./rules.js";import{SELECTION_ATTRIBUTE_RULE as a,SELECTION_INPUT_RULE as n,SELECTION_OUTPUT_RULE as o}from"./selection-value.js";import{PART_DATA_ATTRIBUTES as f}from"./styling-hooks.js";var k={name:"Combobox",purpose:'An accessible text input with floating-ui-positioned listbox of options, following WAI-ARIA 1.2 "combobox with list autocomplete". Real DOM focus stays on input; highlighted option is virtual focus (aria-activedescendant). Accepts options array or hand-composed Item/Group children; parts are the same either way.',props:[{name:"value",type:"string | string[]",required:!1,description:`Selected option value(s), for controlled usage. Pair with the value-change event. Distinct from inputValue, which is the draft text in the field. ${n} ${o} ${a}`},{name:"defaultValue",type:"string | string[]",required:!1,description:`Initially selected option value(s), for uncontrolled usage. Same shape as \`value\`. ${n} ${a}`},{name:"multiple",type:"boolean",defaultValue:"false",required:!1,description:'Allows multiple options selected at once. Does not change `value`/`defaultValue` shape \u2014 both take string | string[] and return string[]. Sets `aria-multiselectable="true"` on Content; toggling an option clears draft text and keeps listbox open so several can be picked in one pass.'},{name:"allowCustomValue",type:"boolean",defaultValue:"false",required:!1,description:'Lets Enter commit unmatched draft text as a value ("creatable"). Off by default; a combobox accepting unmatched text suits open sets, not closed ones.'},{name:"filter",type:"'manual' | ((itemText: string, inputValue: string) => boolean | number)",defaultValue:"'manual'",required:!1,description:"How Items are filtered against draft text. `'manual'` (default): consumer renders only matching Items. A predicate moves filtering inside: every Item is measured (`textValue` or rendered text), rejected ones stop being options. Returns boolean to filter or number to rank (0 excludes, positive keeps and orders by score). With `options` supplied and no `filter`, a case-insensitive text match narrows the derived list. On `<skdx-combobox>` this is **property-only** (`el.filter = \u2026`): attributes carry strings, not predicates."},{name:"autoHighlight",type:"boolean",defaultValue:"false",required:!1,description:"Keeps first option highlighted when filtered list changes while open. Off by default; it commits an option the user never pointed at, which is wrong when draft text alone is valid."},{name:"loop",type:"boolean",defaultValue:"true",required:!1,description:"Wraps arrow navigation around option list ends. On by default; set `false` to clamp at ends. Home/End always jump to an end regardless."},{name:"openOn",type:"'type' | 'click' | 'focus'",defaultValue:"'type'",required:!1,description:"Which pointer/focus gesture opens the listbox, **on top of** keyboard ones (ArrowDown/ArrowUp and typing always open). `'type'` (default): list appears after typing. `'click'`: also opens on field click. `'focus'`: also opens on Tab; most eager for a search box, but unwanted in form rows. Does not open a `disabled` or `readOnly` combobox."},{name:"loading",type:"boolean",defaultValue:"false",required:!1,description:'Marks results as in flight, exposed as `aria-busy="true"` plus `data-loading` on Input and Content. Also suppresses the result-count announcement, since a count measured mid-fetch would announce "0 results available" for every request.'},{name:"inputValue",type:"string",required:!1,description:"The input's controlled draft text. Pair it with the input-value-change event and render only the Items that match it: with `filter` left `'manual'` the component filters nothing, so this prop *is* the filtering mechanism rather than a common use of it."},{name:"defaultInputValue",type:"string",defaultValue:"''",required:!1,description:"Initial draft text, for uncontrolled usage."},{name:"open",type:"boolean",required:!1,description:"Controlled open state. Pair with the open-change event."},{name:"defaultOpen",type:"boolean",defaultValue:"false",required:!1,description:"Initial open state, for uncontrolled usage."},{name:"invalid",type:"boolean",defaultValue:"false",required:!1,description:"Marks the combobox as invalid, exposed as aria-invalid/data-invalid on Input."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:"Makes Input read-only, exposed as the native readonly attribute plus aria-readonly/data-readonly."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables Input and prevents opening the listbox. Distinct from readOnly, which still allows focus and selection of the existing text."},{name:"name",type:"string",required:!1,description:"Form field name. The selected value \u2014 not the draft inputValue \u2014 is submitted under it; without it the combobox submits nothing."},{name:"form",type:"string | undefined",required:!1,defaultValue:"undefined",description:"Id of the `<form>` the combobox submits into; forwarded to every mirrored control. Needs `name` to have an effect. A `multiple` combobox reaches every mirrored control so the whole selection stays associated with the same form. Web Components names this `formId`, not `form`: the element already publishes a readonly `form` accessor."},{name:"required",type:"boolean",defaultValue:"false",required:!1,description:"Marks the combobox required. valueMissing while no option is selected."},{name:"getResultCountLabel",type:"(count: number) => string",defaultValue:"defaultGetResultCountLabel",required:!1,description:'Formats the message announced through the LiveAnnouncer whenever rendered Items count changes while the listbox is open, reaching screen-reader users. Return an empty string to announce nothing. The default **singularises**: `"1 result available"` for count 1, `"3 results available"` otherwise. Property-only on `<skdx-combobox>`, like `filter`: attributes cannot carry functions.'},{name:"options",type:"Array<{ value: string; label?: string; disabled?: boolean } | { label: string; options: Array<{ value: string; label?: string; disabled?: boolean }> }>",required:!1,description:"Declares the option collection as data instead of hand-composed Item/Group children, and the derived Content renders Item/Group/GroupLabel from it. A flat entry is a plain option; an entry carrying its own `options` array is a group, labelled by its `label`. Filtered by `filter` exactly like hand-composed Items. Property-only on `<skdx-combobox>` (`@property({ attribute: false })`): an array of objects has no attribute form."},{name:"renderOption",type:"(option: ComboboxOptionData, state: { selected: boolean }) => ReactNode",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:'Web Components uses named light-DOM slot (`slot="option"`, keyed by `data-value`), the platform-native form; Vue uses scoped slot (`#option`). Both are that framework.s own idiom for the same hook.',description:"Custom rendering for an `options`-derived Item, given the option data and selection state. Angular uses `TemplateRef` instead of a function. Ignored for hand-composed Item children."},{name:"placeholder",type:"string",required:!1,description:"Placeholder text forwarded to the derived Input. Ignored under full manual composition."},{name:"aria-label",type:"string",required:!1,frameworks:["react","vue","svelte","angular"],exception:"attribute-passthrough",frameworksReason:"React forwards `aria-label`; Vue/Svelte declare it (`ariaLabel`); Angular takes `ariaLabel`. Derived name is `aria-label ?? placeholder` in all five. Web Components claims the native attribute off the host and relocates it to the derived control (platform mechanism, invisible to extractor).",description:"Convenience accessible name for the derived Input, and for Content/List, neither of which takes a name from its content. Equivalent to naming Input directly under manual composition."},{name:"clearable",frameworks:["angular","svelte"],exception:"derived-anatomy",frameworksReason:"Angular and Svelte fold the Clear part into their derived anatomy behind this switch. React, Vue and Web Components publish the same part for the consumer to place by hand, so the prop would only restate what writing the part already says.",type:"boolean",defaultValue:"false",required:!1,description:"Whether the derived anatomy renders a Clear button that empties the selection and draft text in one action. Off by default, matching the existing Clear part being opt-in under manual composition."},{name:"emptyMessage",frameworks:["angular","svelte"],exception:"derived-anatomy",frameworksReason:"Angular and Svelte fold the Empty part into their derived anatomy behind this switch. React, Vue and Web Components publish the same part for the consumer to place by hand, so the prop would only restate what writing the part already says.",type:"string",required:!1,description:"Content for the derived Empty part, shown when no Items are rendered. Where this prop is absent the package instead renders a hardcoded, unoverridable placeholder string."},{name:"shape",type:"'rounded' | 'square' | (string & {})",required:!1,description:"Corner rounding rung forwarded to the Input's data-shape; the attribute may be written on Input directly instead."},{name:"size",type:"'md' | 'sm' | 'lg' | (string & {})",required:!1,description:"Size rung forwarded to the Input's data-size; the attribute may be written on Input directly instead."}],events:[{name:"value-change",description:`${i("the selection")} Carries the whole selection, not the single option that was toggled; \`selectedValue\` names that one. ${o}`,detail:e("string[]","selectedValue: string | null")},{name:"value-change-detail",frameworks:["angular"],exception:"event-shape",frameworksReason:"Angular's `valueChange` emits the scalar so `[(value)]` round-trips the value itself; this second output carries the detail object the other four hand to `value-change`.",description:"Fires with valueChange, carrying the previous selection, the change reason and the toggled option.",detail:e("string[]","selectedValue: string | null")},{name:"input-value-change",detail:"string",description:"Fires with the input's new draft text as the user types, or when a selection updates it, controlled or not."},{name:"open-change",detail:"boolean",description:"Fired with the new open state whenever it changes, controlled or not."},{name:"highlight-change",detail:"{ value: string | null; previousValue: string | null; reason: 'keyboard' | 'pointer' | 'auto' }",description:"Fires whenever virtual-focus changes, carrying the highlighted option value, replaced value, and what moved it. Read-only: no `highlight` or `defaultHighlight` prop exists. A programmatic highlight could name an unrendered option, making aria-activedescendant invalid \u2014 precisely the failure the re-pointing effect prevents. `value` is the option's **value**, never element id (generated per-render/framework). `null` is valid: closed listbox, empty result, or fresh draft with `autoHighlight` off. `reason` is **not** ChangeReason: `'auto'` covers filtering, re-seeding, and opening actions; no programmatic setter exists."},d("listbox"),...l("listbox")],parts:[{name:"Input",lightDom:!0,description:'The text field (role="combobox") driving filtering. Keeps real DOM focus; highlighted option is virtual focus via aria-activedescendant.',props:[{name:"shape",type:"'rounded' | 'square' | (string & {})",required:!1,description:"Corner rounding rung, written to data-shape on the input; the data-shape attribute may be set directly instead."},{name:"size",type:"'md' | 'sm' | 'lg' | (string & {})",required:!1,description:"Visual size rung, written to data-size on the input; the data-size attribute may be set directly instead."}]},{name:"Trigger",lightDom:!0,description:'An optional button that toggles the listbox, for pointer users unsure a field filters. `<button type="button" tabindex="-1">` with aria-expanded and aria-controls naming Content. Not a Tab stop: real DOM focus must stay on Input, so the button cancels mousedown and returns focus on click. Needs aria-label or visible text (glyph alone is not a name).'},{name:"Clear",description:'An optional button that empties selection and draft text in one action and returns focus to Input. `<button type="button" tabindex="-1">`, natively disabled when nothing to clear or when root is disabled/readOnly. Cancels mousedown to keep DOM focus on Input. Needs aria-label or visible text. Clicking while the listbox is open also dismisses it.'},{...p,props:[...c,{...t,frameworks:["react","vue","svelte"],exception:"force-mount",frameworksReason:"Web Components never unmounts closed overlays (only hides them), so forceMount has no effect. Angular has no Portal part \u2014 it portals via [skdxPortal] directive instead."}]},{name:"Content",description:'The floating listbox (role="listbox", aria-multiselectable="true" while `multiple`). Positioned below and start-aligned, as an extension of Input.',props:[...h({align:"'start'",sideOffset:"4"}),{...t,frameworks:["react","vue","svelte"],exception:"force-mount",frameworksReason:"Web Components never unmounts closed overlays (only hides them). Angular keeps this part in the tree, toggled with [hidden], so neither ships forceMount."}]},{name:"Item",description:'One selectable option (role="option"). When a `filter` predicate rejects an Item, it becomes unreachable through aria-activedescendant, uncounted in result announcements, and invisible to the Empty part\'s emptiness check. Removed from DOM in React/Vue/Svelte/Angular; hides in Web Components (cannot un-author consumer tags).',props:[{name:"value",type:"string",required:!0,description:"Identifier committed to the root's value when this option is chosen."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Excludes this option from selection and from pointer/keyboard highlight; exposed as aria-disabled/data-disabled."},{name:"textValue",type:"string",required:!1,description:"Text the `filter` predicate matches and selection writes back into Input. Falls back to rendered text content, which is wrong only when the option renders more than its label (icon, secondary line) \u2014 supply it then."}]},{name:"Group",description:'A named section of related Items (role="group") whose aria-labelledby points at its GroupLabel. Named automatically: a filtered listbox reorders and empties sections as the user types, so structure announcement is critical. Purely structural \u2014 registers no options, not in highlight order.'},{name:"GroupLabel",description:"The heading that names a Group, carrying the id its Group points aria-labelledby at. No role, so it never becomes an option the arrow keys can reach. Must be inside a Group."},{name:"Empty",description:"Shown in place of the item list when no Items are rendered \u2014 because the consumer filtered them all away, or because the `filter` predicate rejected every one."}],slots:[{name:"default",description:"Content's body \u2014 Item/Group/Empty entries."}],appearance:[{attribute:"data-shape",values:["rounded","square"],stylesheet:"combobox.css"},{attribute:"data-size",values:["md","sm","lg"],stylesheet:"combobox.css"}],states:["closed","open","checked","unchecked","disabled","highlighted","loading","multiple"],controlledUncontrolled:"value, inputValue, and open each independently support controlled or uncontrolled usage. In Angular the pair is split: `valueChange` emits the scalar for `[(value)]`, `valueChangeDetail` carries the detail.",formBehavior:'Form-associated: with a name, the selected option\'s value (not draft inputValue) is submitted; a required Combobox with no selection is valueMissing. A `multiple` Combobox submits one entry per value under the same name (like `<select multiple>`), readable via `formData.getAll(name)`. An empty `multiple` selection submits nothing except when `required` (then one empty-valued control renders for valueMissing). Mirrored controls are never `type="hidden"` or `readonly` (both disable validation); only `disabled` withholds values. Form reset restores initial selection and draft text.',validationBehavior:"invalid toggles aria-invalid/data-invalid presentation only; required participates in native constraint validation via checkValidity()/reportValidity(). Web Components publishes `required-message` (a FormAssociated mixin convention), unavailable in the other four frameworks where setCustomValidity() on the mirrored input answers the same need.",accessibility:{role:"combobox (Input), button (Trigger, Clear), listbox (Content), option (Item), group (Group), presentation (Empty, GroupLabel)",keyboard:[{key:"Typing",behavior:"Updates the draft text and opens the listbox."},{key:"ArrowDown / ArrowUp",behavior:"Opens the listbox highlighting the first/last option, or moves the highlight by one when already open \u2014 wrapping around the ends unless `loop` is `false`."},{key:"Alt+ArrowDown",behavior:`Opens the listbox and highlights nothing \u2014 APG's optional "show me the list" key. The missing highlight is the whole difference from the plain key: it lets the options be inspected without Enter then committing one the user never pointed at. Prevents the default.`},{key:"Alt+ArrowUp",behavior:'Commits the highlighted option and closes the listbox \u2014 closing even while `multiple`, where an ordinary commit keeps it open, because this key means "I am done here" rather than "select this one". With nothing highlighted it only closes. Prevents the default.'},{key:"Home / End",behavior:"While the listbox is open, moves the highlight to the first/last option and prevents the default. While it is closed neither key is intercepted: they are the text field's caret keys, and APG requires an editable combobox to leave them to the field."},{key:"PageUp / PageDown",behavior:'Aliases of Home/End, on the same open-only condition. Deliberately not a fixed multi-row jump: "one page" presupposes a row height and a viewport height, and a listbox knows neither \u2014 the consumer styles both.'},{key:"Enter",behavior:"Commits the highlighted option as the selected value and closes the listbox \u2014 or toggles it and keeps the listbox open while `multiple`. With `allowCustomValue` and nothing highlighted, commits the draft text itself."},{key:"Escape",behavior:"Closes the listbox without changing the selection."}],ariaAttributes:['aria-expanded, aria-controls, aria-autocomplete="list", and aria-activedescendant on Input',"Content's id matches Input's aria-controls",'aria-multiselectable="true" on Content while `multiple` (absent otherwise, never "false")','aria-busy="true" and data-loading on Input and Content while `loading`',"aria-selected and data-state on Item reflecting selection; data-highlighted reflecting virtual focus","aria-disabled and data-disabled on a disabled item, which is skipped by highlight/selection","the number of rendered Items is announced through the shared LiveAnnouncer polite region while the listbox is open, formatted by getResultCountLabel \u2014 including after a `filter` predicate narrows the list, and suppressed while `loading`","aria-expanded on Trigger, plus an aria-controls resolving to Content exactly while the listbox is open and absent while it is closed, since a closed listbox is unmounted and an IDREF that resolves to nothing is worse than no IDREF. It mirrors what Input reports rather than replacing it \u2014 two elements may both point at one listbox, and neither takes aria-activedescendant, which stays on Input alone",'role="group" with an aria-labelledby resolving to the GroupLabel inside it on Group; tabindex="-1" on Trigger and Clear, which are affordances rather than tab stops'],focusManagement:`${m} Here the anchor is the Input. When typing filters the highlighted option away, the highlight moves to the first survivor rather than disappearing \u2014 aria-activedescendant is dropped only when no option is left. Virtual focus scrolls via scrollIntoView({ block: "nearest" }); the highlight set while the listbox is *opening* scrolls the listbox itself instead (floating-ui renders at document origin before measuring). Focus out reconciles draft text with selection unless allowCustomValue is set: inputValue becomes the selected option's text or empty string \u2014 ensuring no unmatched text remains. Escape stays non-destructive; it closes the listbox and leaves the draft alone.`,namingRequirement:'Input must be named by <label>, aria-label, or aria-labelledby; role="combobox" takes no name from content, and Content is a sibling, not ancestor. Wrapping in Field family satisfies this automatically. Trigger and Clear need aria-label or visible text (glyph alone is not a name). Group is named by its GroupLabel.'},styling:{cssParts:["input","trigger","clear","content","item","group","label","empty"],dataAttributes:[...f,"data-state","data-side","data-align","data-disabled","data-highlighted","data-invalid","data-readonly","data-loading","data-multiple","data-value","data-shape","data-size",{name:"data-skdx-combobox-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:u("combobox")},publicMethods:[...r,s,{name:"focus",signature:"(): void",description:"Moves keyboard focus to the text field, which is where the combobox keeps real DOM focus.",frameworks:["vue","webComponents"],exception:"element-handoff",frameworksReason:"Vue hides the Input inside the root component instance, and the custom element forwards focus() to it. React, Svelte and Angular hand the consumer the Input element itself."}]};export{k as comboboxContract};

package/dist/shared/contracts/command.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for a command palette (cmdk-style) using virtual focus over a filtered item list, not popper-anchored. */
+export declare const commandContract: ComponentContract;

package/dist/shared/contracts/command.js

@@ -0,0 +1 @@
+import{changeDetail as e}from"./change-reason.js";import{ROOT_DATA_ATTRIBUTES as t}from"./styling-hooks.js";var s={name:"Command",purpose:"Accessible command-palette list with virtual focus (aria-activedescendant) synced to mounted items; real DOM focus stays on Input. Root owns search text and filters items, unless filter is 'manual'. Not popper-anchored \u2014 mount in a Dialog or standalone.",props:[{name:"value",type:"string",required:!1,description:"The highlighted item's value (controlled). **This is the keyboard cursor, not a selection** \u2014 Combobox/Select use `value` for committed user input, Command uses it for highlight position. The name is cmdk's and deliberately diverges from family convention."},{name:"defaultValue",type:"string",required:!1,description:"Initial highlight value (uncontrolled); defaults to the first item."},{name:"search",type:"string",required:!1,description:"Current search text (controlled); Input updates it as the user types. **The rest of the family calls this `inputValue`** \u2014 Combobox/Autocomplete/Select do. `search` is kept as cmdk's name; the family spells one concept two ways."},{name:"defaultSearch",type:"string",defaultValue:"''",required:!1,description:"Initial search text (uncontrolled); the family's `defaultInputValue` under this component's name."},{name:"filter",type:"'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number)",required:!1,description:"Replaces the built-in matcher (case-insensitive substring on value **or keywords**); return true to keep an item mounted. The item's `keywords` arrive as the third argument (undefined when omitted), so a custom predicate can honour aliases. 'manual' filters nothing. Same *shape* as Combobox's filter \u2014 and the **opposite default**: Command filters by default; Combobox does not. Both defaults suit their component. A number may rank instead of filter: 0 excludes, positive keeps, items order by score descending."},{name:"loop",type:"boolean",defaultValue:"false",required:!1,description:"Wraps arrow navigation around list ends: ArrowDown from last highlights first, ArrowUp from first highlights last. Off by default (cmdk's default). Deliberately the *opposite* default from Combobox/Autocomplete: a popup has nothing past its ends to walk into; a palette's list is the whole surface."},{name:"disablePointerSelection",type:"boolean",defaultValue:"false",required:!1,description:"Stops pointer-enter from moving the highlight; off by default so hover tracks the pointer. Turn on for keyboard-driven palettes to prevent mouse motion from stealing the highlight."},{name:"loading",type:"boolean",defaultValue:"false",required:!1,description:'Marks results in flight: data-loading on root/List, mounts Loading, hides Empty (prevents "No results" flash).'},{name:"groups",type:"{ label?: string; items: CommandItem[] }[]",required:!1,description:`The palette's contents as groups of items. Group wrapper only around labelled groups (unlabelled role="group" has no accessible name). groups={[{ items }]} is a flat palette; item's value defaults to its label. Supplying groups derives Input/List.`},{name:"placeholder",type:"string",required:!1,description:"Placeholder on Input; also List's accessible name when no aria-label is supplied."},{name:"emptyMessage",type:"string",required:!1,description:"Text for Empty part (shown when search matches nothing). **No default, deliberately; Empty derives only when set.** Default text would ship untranslated English to consumers who didn't opt in."},{name:"loadingMessage",type:"string",required:!1,description:'Text for Loading part (announced via role="status"). **No default, deliberately; Loading derives only when set.** Empty live regions are a11y noise; default text would be untranslated English.'},{name:"renderItem",type:"(item: CommandItem) => React.ReactNode",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:`Vue uses scoped #item slot; Web Components uses light-DOM slot="item". Each framework's idiomatic hook; neither exposed as a declared prop. Web Components has no property-only equivalent (HTML attributes cannot carry functions); falls back to plain label when unslotted.`,description:"Customises what renders *inside* a derived item, never the item itself \u2014 role, id, data attributes, filtering, disabled state stay the library's. Only read while groups derives the anatomy."}],events:[{name:"value-change",description:"Fires with the highlighted item's value when the highlight moves (arrow keys, Home/End, pointer-enter, or filtering). Not a selection event; see the Item's `select` for that.",detail:e("string")},{name:"search-change",description:"Fires with new search text when Input changes. The family's `input-value-change` under this component's name.",detail:"string"},{name:"select",frameworks:["react","vue","svelte","angular"],exception:"event-shape",frameworksReason:"<skdx-command> cannot use this name: its Item part already dispatches a bubbling select through the same host carrying the item's value string, and two same-named events with different details on one node is a real ambiguity rather than a naming preference. It dispatches item-select instead \u2014 see the entry below.",description:"Recipe-level selection: fires with the CommandItem entry the derived anatomy activated (Item's select carries only its value). Fires after the item's onSelect; neither cancels the other.",detail:"CommandItem"},{name:"item-select",frameworks:["webComponents"],exception:"event-shape",frameworksReason:"React, Vue, Svelte and Angular spell the recipe-level callback select (onSelect / @select / (select)) on the root. <skdx-command> cannot: its Item part already dispatches a bubbling select through the same host with a different detail, so the recipe's is renamed here alone.",description:"Recipe-level select, dispatched with the activated CommandItem entry.",detail:"CommandItem"}],parts:[{name:"Input",description:'The search box that filters the list \u2014 a plain text field, deliberately without role="combobox", since Command anchors no popup. Owns aria-activedescendant, so the highlight moves without focus ever leaving it.',props:[]},{name:"Group",description:'A labelled section of items (role="group"). When all items filter out, heading remains (mount Group conditionally to hide it). No `forceMount` \u2014 the Group never unmounts itself.',props:[{name:"heading",type:"string | undefined",required:!1,description:"Group's accessible name, rendered as visible heading; referenced by aria-labelledby (aria-label in Web Components)."}]},{name:"Item",description:`Selectable command (role="option"). Virtual highlight via Input's aria-activedescendant; hidden when filter rejects it.`,props:[{name:"value",type:"string",required:!0,description:"What this item is filtered and selected on. Required: an item with no value cannot be matched or chosen."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Excludes item from selection and navigation (data-disabled, aria-disabled)."},{name:"keywords",type:"string[]",required:!1,description:'Aliases the filter matches alongside `value`. Example: "Toggle theme" searchable as "dark mode". Matched case-insensitive substring; passed to custom `filter` as third argument.'},{name:"forceMount",type:"boolean",defaultValue:"false",required:!1,description:'Keeps item mounted despite filter rejections (for pinned actions like "Create new\u2026"). Here, rejected items unmount entirely (unlike cmdk which hides them), changing item count and Empty state. Short-circuits the matcher, so custom filters honor it.'}],events:[{name:"select",description:"Fires with this item's `value` when activated (click or Enter). Per-item callback \u2014 the only selection signal (palette persists no state).",detail:"string"}]},{name:"Loading",description:'Renders only while root is loading. role="status" announces search progress without moving focus. **Sibling of List, never child** \u2014 role="status" cannot be a listbox child.'},{name:"Empty",description:'Renders only when no Item is mounted and never while the root is loading. **Sibling of List, never child** \u2014 role="presentation" cannot be a listbox child.'}],slots:[{name:"default",description:"List body \u2014 Item/Group/Separator entries. Empty and Loading sit beside List (not inside), as their roles cannot be listbox children."}],states:["highlighted","disabled","loading"],controlledUncontrolled:"Two independent controllable values: `value` (the highlighted item, with `defaultValue`) and `search` (the Input's text, with `defaultSearch`). Selection itself is still per-item: each Item carries its own onSelect callback, and Command persists no separate selected state.",formBehavior:"Not applicable \u2014 Command participates in no form.",validationBehavior:"Not applicable.",accessibility:{role:'listbox (List), option (Item), group (Group), separator (Separator), presentation (Empty/Group heading). Input is deliberately **not** role="combobox".',keyboard:[{key:"ArrowDown / ArrowUp",behavior:'Moves virtual highlight across mounted Items; clamps at ends unless `loop` is set. Scrolls with scrollIntoView({ block: "nearest" }) \u2014 virtual focus scrolls nothing on its own.'},{key:"Home / End",behavior:"While Items are mounted, moves highlight to first/last and prevents default (scrolls into view). Scoped to non-empty lists: Input is a text field, so these are caret keys and must reach the browser."},{key:"Enter",behavior:"Invokes the highlighted item's select handler, unless it is disabled."},{key:"Escape",behavior:"Deliberately **unhandled** \u2014 Command anchors no popup. The wrapping Dialog (usually) owns Escape; intercepting it here would swallow the user's dismiss action."}],ariaAttributes:["aria-controls on Input \u2192 List; aria-activedescendant on Input tracking the highlighted item",`Input carries **no role="combobox" and no aria-expanded** \u2014 both presuppose a popup, which Command lacks. Plain text field with aria-controls and aria-activedescendant follows APG's virtual-focus listbox pattern.`,"aria-selected and data-highlighted on Item reflecting virtual focus",'aria-disabled="true" and data-disabled on disabled items (skipped by navigation, cannot be selected); announced, never omitted','aria-labelledby on Group pointing to its heading (keeps role="presentation" so it never becomes an option)'],focusManagement:'Real focus stays on Input; highlight is virtual (via aria-activedescendant). First mounted item auto-highlights when current highlight becomes stale. Two scroll paths: user-requested moves use scrollIntoView({ block: "nearest" }); component-assigned highlights use List-local scroll that will never move an ancestor (prevents page drag on keystroke).',namingRequirement:'List must be named via aria-label or aria-labelledby (role="listbox" takes no name from content). Input names itself (sibling, not ancestor). Group names itself from its `heading`.'},styling:{cssParts:["input","list","item","group","group-label","separator","empty","loading","root"],dataAttributes:[...t,"data-highlighted","data-disabled","data-loading","data-value",{name:"data-skdx-command-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[]};export{s as commandContract};

package/dist/shared/contracts/comment-thread.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for the CommentThread block: a root comment with its collapsible replies. */
+export declare const commentThreadContract: ComponentContract;

package/dist/shared/contracts/comment-thread.js

@@ -0,0 +1 @@
+import{ROOT_DATA_ATTRIBUTES as e}from"./styling-hooks.js";var o={name:"CommentThread",purpose:"A root comment with its replies, indented one level and collapsible with the consumer's own labels, composing the core Collapsible primitives above a slot for the root Comment block, a reply composer and a load-more control. Ships in the blocks package of each framework, not the core package.",props:[{name:"replies",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"The reply Comments, rendered indented one level below the root comment. No replies region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `replies` slot."},{name:"expanded",type:"boolean",required:!1,description:"Whether the replies are shown, for controlled usage paired with expanded-change."},{name:"defaultExpanded",type:"boolean",defaultValue:"true",required:!1,description:"Whether the replies start shown, used only while uncontrolled."},{name:"showRepliesLabel",type:"string",required:!1,description:"Text of the toggle button while the replies are hidden. A toggle only renders when this is given; without it the replies are always shown."},{name:"hideRepliesLabel",type:"string",required:!1,description:"Text of the toggle button while the replies are shown; falls back to showRepliesLabel's value when omitted."},{name:"loadMore",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Control that requests more replies, rendered below the replies region. No load-more region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `load-more` slot."},{name:"composer",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Reply composer rendered at the end of the thread. No composer region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `composer` slot."}],events:[{name:"expanded-change",detail:"{ expanded: boolean }",description:"Fires with the new expanded state whenever the replies toggle is activated."}],slots:[{name:"default",description:"The root Comment this thread replies to."},{name:"replies",description:"The replies prop's content \u2014 the reply Comments."},{name:"load-more",description:"The loadMore prop's content \u2014 the control that requests more replies."},{name:"composer",description:"The composer prop's content \u2014 the reply composer at the end of the thread."}],states:["expanded","collapsed"],controlledUncontrolled:"expanded/defaultExpanded/expanded-change follow the controlled/uncontrolled pattern; the block otherwise holds no state.",formBehavior:"Not applicable \u2014 CommentThread participates in no form.",validationBehavior:"Not applicable \u2014 CommentThread carries no value and participates in no validation.",accessibility:{role:"generic (a <div>; the toggle is a native button with aria-expanded and aria-controls from the core Collapsible; replies are indented with a border, one level only)",keyboard:[{key:"Enter/Space",behavior:"Activates the focused replies toggle button (native button activation)."}],ariaAttributes:["aria-expanded and aria-controls on the toggle button come from the composed Collapsible"],focusManagement:"Focus stays on the toggle button after it is activated."},styling:{cssParts:["comment-thread","comment","toggle","replies","load-more","composer"],dataAttributes:[...e,"data-state",{name:"data-skdx-comment-thread-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[]};export{o as commentThreadContract};

package/dist/shared/contracts/comment.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for the Comment block: one collaboration comment composing Time. */
+export declare const commentContract: ComponentContract;

package/dist/shared/contracts/comment.js

@@ -0,0 +1 @@
+import{ROOT_DATA_ATTRIBUTES as e}from"./styling-hooks.js";var a={name:"Comment",purpose:"One collaboration comment \u2014 author, avatar, timestamp, edited indicator, arbitrary content, attachments, metadata and actions \u2014 composing Time above consumer-supplied content. Ships in the blocks package of each framework, not the core package.",props:[{name:"author",type:"string",required:!0,description:"Name of the person or system that wrote the comment, rendered as visible text."},{name:"avatar",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Decorative avatar rendered beside the author, always aria-hidden. No avatar region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `avatar` slot."},{name:"timestamp",type:"Date | string",required:!1,description:"Instant the comment was posted, rendered through a composed Time."},{name:"now",type:"Date | number",required:!1,description:"Reference instant the timestamp's relative label renders against."},{name:"edited",type:"boolean",defaultValue:"false",required:!1,description:"Marks the comment as edited since it was first posted."},{name:"editedLabel",type:"string",defaultValue:"'Edited'",required:!1,description:"Text of the edited indicator, shown only when edited is set."},{name:"metadata",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Badges or supplementary text rendered beside the author, such as an Author badge. No metadata region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `metadata` slot."},{name:"attachments",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Files or links attached to the comment, rendered below the content. No attachments region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `attachments` slot."},{name:"actions",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Controls such as reply, edit and react, rendered below the attachments. No actions region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `actions` slot."}],events:[],slots:[{name:"default",description:"The comment content, the consumer-supplied body text or markup."},{name:"avatar",description:"The avatar prop's content \u2014 a decorative avatar beside the author."},{name:"metadata",description:"The metadata prop's content \u2014 badges or supplementary text beside the author."},{name:"attachments",description:"The attachments prop's content \u2014 files or links attached to the comment."},{name:"actions",description:"The actions prop's content \u2014 controls such as reply, edit and react."}],states:["default"],controlledUncontrolled:"Stateless \u2014 Comment holds no internal state.",formBehavior:"Not applicable \u2014 Comment participates in no form.",validationBehavior:"Not applicable \u2014 Comment carries no value and participates in no validation.",accessibility:{role:"article (native <article>; author, time and edited state are visible text; avatar decorative)",keyboard:[],ariaAttributes:["the avatar region is aria-hidden so the author text alone carries its meaning"],focusManagement:"Nothing inside the block is focusable except the consumer-supplied actions."},styling:{cssParts:["comment","avatar","main","header","author","metadata","time","edited","content","attachments","actions"],dataAttributes:[...e,{name:"data-skdx-comment-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[]};export{a as commentContract};

package/dist/shared/contracts/confirm-dialog.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for the ConfirmDialog block: an alert dialog with a pending state for a confirmed request in flight. */
+export declare const confirmDialogContract: ComponentContract;

package/dist/shared/contracts/confirm-dialog.js

@@ -0,0 +1 @@
+import{autoFocusEvents as e,dismissalEvents as t,openChangeCompleteEvent as n}from"./overlay-parts.js";import{ROOT_DATA_ATTRIBUTES as o}from"./styling-hooks.js";var r={name:"ConfirmDialog",purpose:"A confirmation dialog block composing the core DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogCancel, DialogAction and Button as an alert dialog for a destructive, irreversible or sensitive action. Adds an externally controlled pending state that disables both buttons and blocks dismissal while the confirmed request is in flight, and a destructive switch that colours the confirm button and the panel. Ships in the blocks package of each framework, not the core package.",props:[{name:"open",type:"boolean",required:!1,description:"Whether the dialog is open, for controlled usage."},{name:"defaultOpen",type:"boolean",defaultValue:"false",required:!1,description:"Whether the dialog starts open, for uncontrolled usage."},{name:"trigger",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Element that opens the dialog, decorated with the trigger behavior. No trigger renders when omitted, and the dialog opens only through `open`/`onOpenChange`. A prop in React, Svelte, and Angular; Vue and Web Components use the `trigger` slot."},{name:"title",type:"string",required:!0,description:"Heading text rendered into the panel's title, naming and labelling the dialog."},{name:"description",type:"string",required:!1,description:"Supporting sentence rendered into the panel's description, read alongside the title. No description region renders when omitted."},{name:"confirmLabel",type:"string",defaultValue:"'Confirm'",required:!1,description:"Text of the button that carries out the confirmed action."},{name:"cancelLabel",type:"string",defaultValue:"'Cancel'",required:!1,description:"Text of the button that abandons the action."},{name:"destructive",type:"boolean",defaultValue:"false",required:!1,description:'Renders the confirm button in the danger weight and marks the panel data-status="danger", for an irreversible or destructive action.'},{name:"pending",type:"boolean",defaultValue:"false",required:!1,description:"Marks the confirmed request as in flight: disables both buttons, renders the confirm button loading, and blocks Escape dismissal until it clears."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables the confirm button on its own, independent of pending, for example until a typed confirmation matches."},{name:"size",type:"'sm' | 'md' | 'lg' | string",required:!1,description:"Panel width rung, fed to the underlying dialog panel; the skin's own default width when omitted."}],events:[...t("dialog",{outsideDismisses:!1,outsideNote:"An alert dialog demands an explicit choice, so outside interaction never closes it; while pending, Escape is withheld as well."}),...e("dialog"),n("dialog"),{name:"open-change",detail:"boolean",description:"Fires with the new open state whenever the dialog opens or closes, controlled or not."},{name:"confirm",detail:"MouseEvent",description:"Fires when the confirm button is activated, before the dialog closes. Calling preventDefault() on the event holds the panel open, typically paired with pending for an async confirmation."},{name:"cancel",detail:"MouseEvent",description:"Fires when the cancel button is activated, before the dialog closes. Calling preventDefault() on the event keeps the panel open."}],slots:[{name:"default",description:"Extra content rendered between the description and the footer buttons."},{name:"trigger",description:"Element that opens the dialog, decorated with the trigger behavior."}],states:["default"],controlledUncontrolled:"Open state works controlled through open/onOpenChange or uncontrolled through defaultOpen. pending is always controlled by the consumer, driving the dismiss policy and both buttons.",formBehavior:"Not applicable \u2014 ConfirmDialog participates in no form.",validationBehavior:"Not applicable \u2014 ConfirmDialog carries no value and participates in no validation.",accessibility:{role:"alertdialog (from the core DialogContent; modal, named by its title, described by its description)",keyboard:[{key:"Escape",behavior:"Closes the dialog unless pending is true."},{key:"Tab",behavior:"Cycles focus between the cancel and confirm buttons and any content in between."},{key:"Enter/Space",behavior:"Activates the focused button."}],ariaAttributes:['role="alertdialog" and aria-modal="true" on the panel, from the core DialogContent',"aria-labelledby points at the title and aria-describedby at the description, both wired automatically once each part mounts"],focusManagement:"The core alert dialog focuses the cancel button on open (the least destructive choice) and returns focus to the trigger on close."},styling:{cssParts:["confirm-dialog","title","description","body","footer","cancel","confirm"],dataAttributes:[...o,{name:"data-skdx-confirm-dialog-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'},"data-variant","data-loading","data-status"],cssCustomProperties:[]},publicMethods:[]};export{r as confirmDialogContract};

package/dist/shared/contracts/conversation-list.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for the ConversationList block: a selectable list of conversations or threads. */
+export declare const conversationListContract: ComponentContract;

package/dist/shared/contracts/conversation-list.js

@@ -0,0 +1 @@
+import{changeDetail as e}from"./change-reason.js";import{ROOT_DATA_ATTRIBUTES as t}from"./styling-hooks.js";var n={name:"ConversationList",purpose:"A navigation block for moving between conversations or threads, composing Listbox, ListboxItem, ListboxGroup and ListboxLabel for single selection and keyboard navigation, plus Time, Badge, Skeleton and the EmptyState block for each row and for the loading and empty states. It routes nowhere: it reports the chosen conversation and the consumer navigates. Ships in the blocks package of each framework, not the core package.",props:[{name:"items",type:"ReadonlyArray<{ id: string; title: string; preview?: string; timestamp?: DateInput; unread?: boolean; badge?: string; group?: string; disabled?: boolean }>",required:!0,description:"The conversations to render, in order, each one a selectable option keyed by its id."},{name:"value",type:"string",required:!1,description:"Selected conversation's id for controlled usage, paired with the value-change event."},{name:"defaultValue",type:"string",required:!1,description:"Conversation selected on first render, for uncontrolled usage; nothing is selected when omitted."},{name:"label",type:"string",defaultValue:"'Conversations'",required:!1,description:"Accessible name of the derived listbox holding the conversation rows."},{name:"unreadLabel",type:"string",defaultValue:"'Unread'",required:!1,description:"Visually hidden text appended to an unread row's title, so the mark is spoken and never colour alone."},{name:"emptyTitle",type:"string",defaultValue:"'No conversations'",required:!1,description:"Heading of the derived EmptyState shown when there are no items and nothing is loading."},{name:"emptyDescription",type:"string",required:!1,description:"Supporting copy under the empty state's heading; the heading renders alone when omitted."},{name:"loading",type:"boolean",defaultValue:"false",required:!1,description:"Replaces the rows with decorative placeholder lines and marks the root aria-busy."},{name:"now",type:"Date | number",required:!1,description:"Reference instant the relative row timestamps are measured from, supplied to control re-renders."},{name:"leading",type:"Snippet<[ConversationListItem]>",required:!1,frameworks:["svelte"],exception:"render-prop",frameworksReason:"Svelte spells a per-item render hook as a snippet prop, which is both a prop and a slot in that framework's own idiom; the other frameworks take it through renderLeading or the `leading` scoped slot.",description:"The Svelte snippet form of `renderLeading`, rendered once per item with that item as its argument."},{name:"renderLeading",type:"unknown",required:!1,frameworks:["react","angular","webComponents"],exception:"render-prop",frameworksReason:"Vue takes this as a scoped slot and Svelte as a snippet of the same name rather than a prop, because a per-item render hook is a slot with slot props in their own idioms; React, Angular and Web Components take the function, since one markup slot cannot render once per item.",description:"Renders a decorative leading region for one row, such as an avatar or a status dot, and is always aria-hidden. No leading region renders when omitted. A prop in React and Angular; Vue uses the `leading` scoped slot and Svelte the `leading` snippet; Web Components set the function as a property."}],events:[{name:"value-change",detail:e("string"),description:"Fires with the newly selected conversation's id whenever the selection moves by pointer or keyboard. Re-choosing the row that is already selected commits nothing and emits nothing."}],slots:[{name:"leading",frameworks:["vue","svelte"],exception:"render-prop",frameworksReason:"Vue spells a per-item render hook as a scoped slot and Svelte as a snippet; React, Angular and Web Components take the equivalent function through the prop of the same purpose.",description:"The decorative leading region of one row \u2014 an avatar, glyph or status dot."}],states:["default"],controlledUncontrolled:"The selected conversation is controlled through value with the value-change event, or uncontrolled from defaultValue; everything else is derived from items on every render.",formBehavior:"Not applicable \u2014 ConversationList submits nothing and joins no form.",validationBehavior:"Not applicable \u2014 the block carries no user input and runs no validation of its own.",accessibility:{role:"listbox (from the core Listbox, single-select, named by label; unread is spoken through unreadLabel and shown by data-unread, never colour alone)",keyboard:[{key:"ArrowDown/ArrowUp",behavior:"Moves roving focus to the next or previous enabled row, without wrapping."},{key:"Home/End",behavior:"Moves roving focus to the first or last enabled row in the whole list."},{key:"PageDown/PageUp",behavior:"Jumps roving focus ten rows down or up, clamped to the ends of the list."},{key:"Enter/Space",behavior:"Selects the focused row, replacing whatever was selected before."},{key:"Printable characters",behavior:"Typeahead moves focus to the next row whose title starts with what was typed; the row's title is published as its text value."}],ariaAttributes:["aria-label on the derived listbox is the label prop, so the list is named without a visible heading","aria-busy on the root is true while loading, and the placeholder region itself is aria-hidden","aria-selected on each row reports the selection, and aria-disabled marks a row that cannot be chosen","the leading region is aria-hidden so the row is announced by its title, preview and unread label alone"],focusManagement:"The list holds one Tab stop, on the selected row when there is one and on the first enabled row otherwise; disabled rows are skipped and never take focus."},styling:{cssParts:["conversation-list","loading","empty","list","group","group-label","item","leading","body","title","preview","meta","time","badge"],dataAttributes:[...t,"data-unread"],cssCustomProperties:[]},publicMethods:[]};export{n as conversationListContract};

package/dist/shared/contracts/dashboard-layout.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** Contract for the DashboardLayout block: an app bar, a collapsible side navigation and the content region. */
+export declare const dashboardLayoutContract: ComponentContract;

package/dist/shared/contracts/dashboard-layout.js

@@ -0,0 +1 @@
+import{ROOT_DATA_ATTRIBUTES as e}from"./styling-hooks.js";var n={name:"DashboardLayout",purpose:"An application shell block: a top app bar with a navigation toggle, branding, title and actions; a side <nav> built from a navigation item list; and a <main> content region. Ships in the blocks package of each framework, not the core package.",props:[{name:"title",type:"string",required:!1,description:"Application title shown in the app bar after the branding. Nothing renders when omitted."},{name:"navigation",type:"DashboardNavigationItem[]",required:!0,description:`The side navigation, one entry per item: { kind?: 'item' | 'header' | 'divider', label?, href?, current?, children? }. An item with href renders a link, current marks it aria-current="page"; an item with children and no href renders a labelled nested list; a header renders a group label; a divider renders a separator.`},{name:"navOpen",type:"boolean",required:!1,description:"Whether the side navigation is shown, for controlled usage."},{name:"defaultNavOpen",type:"boolean",defaultValue:"true",required:!1,description:"Whether the side navigation starts shown, for uncontrolled usage."},{name:"navLabel",type:"string",defaultValue:"'Main navigation'",required:!1,description:"Accessible name of the side <nav>."},{name:"navToggleLabel",type:"string",defaultValue:"'Toggle navigation'",required:!1,description:"Accessible name of the icon-only button that shows and hides the side navigation."},{name:"branding",type:"unknown",required:!1,frameworks:["react","svelte"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node \u2014 and Angular projects it through content marked skdxBranding, the shell idiom its template compiler reads. The slot spellings are declared under `slots`.",description:"Logo or product mark rendered at the start of the app bar. A prop in React and Svelte; Vue and Web Components use the `branding` slot, Angular projects content marked skdxBranding."},{name:"actions",type:"unknown",required:!1,frameworks:["react","svelte"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop, and Angular projects content marked skdxActions, for the same reasons `branding` does. The slot spellings are declared under `slots`.",description:"Controls rendered at the end of the app bar. A prop in React and Svelte; Vue and Web Components use the `actions` slot, Angular projects content marked skdxActions."}],events:[{name:"nav-open-change",detail:"boolean",description:"Fires with the new open state whenever the navigation toggle is activated."}],slots:[{name:"default",description:"The page content rendered inside the <main> region."},{name:"branding",description:"Logo or product mark at the start of the app bar."},{name:"actions",description:"Controls at the end of the app bar."}],states:["default"],controlledUncontrolled:"The navigation open state works controlled through navOpen or uncontrolled through defaultNavOpen.",formBehavior:"Not applicable \u2014 DashboardLayout participates in no form.",validationBehavior:"Not applicable \u2014 DashboardLayout carries no value and participates in no validation.",accessibility:{role:"generic root holding a banner (<header>), a navigation (<nav>) and a main (<main>) landmark",keyboard:[{key:"Enter/Space",behavior:"Activates the focused navigation toggle, showing or hiding the side navigation (native button activation)."}],ariaAttributes:["aria-expanded on the navigation toggle mirrors navOpen, with aria-controls pointing at the <nav> id","aria-label on the <nav> from navLabel, so a page with several navigation landmarks tells them apart",'aria-current="page" on the navigation link whose item is marked current','role="separator" on a divider item'],focusManagement:"The toggle is a native button and the navigation entries are native links; a hidden <nav> removes its links from the tab order through the hidden attribute."},styling:{cssParts:["dashboard-layout","app-bar","nav-toggle","branding","title","actions","body","nav","nav-list","nav-item","nav-header","nav-divider","content"],dataAttributes:[...e,"data-nav-open","data-icon-only",{name:"data-skdx-dashboard-layout-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[]};export{n as dashboardLayoutContract};

package/dist/shared/contracts/date-field.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** The DateField contract: a segmented date/time entry with one role="spinbutton" per locale-ordered segment. */
+export declare const dateFieldContract: ComponentContract;

package/dist/shared/contracts/date-field.js

@@ -0,0 +1 @@
+import{changeDetail as t}from"./change-reason.js";import{DATE_INPUT_RULE as e,DATE_MALFORMED_RULE as a,DATE_OUTPUT_RULE as n,DATE_PARSE_RULE as i}from"./date-value.js";import{constraintValidationMethods as r,setCustomValidityMethod as o}from"./form-validity.js";import{ROOT_DATA_ATTRIBUTES as s}from"./styling-hooks.js";var m={name:"DateField",purpose:'Segmented keyboard entry of a date (and optionally time): one role="spinbutton" per segment, arrow keys to step, digits type with roll-over, segment order from Intl.DateTimeFormat.formatToParts. Typed counterpart of Calendar and typed-input part of DatePicker.',lightDom:!0,props:[{name:"value",type:"Date | string | null",required:!1,description:`Current date, for controlled usage. Pair with the value-change event. null while any segment is still untyped. ${e} ${i} ${a}`},{name:"defaultValue",type:"Date | string | null",required:!1,description:"Initial date, for uncontrolled usage. Takes the same Date-or-ISO-string forms value does. React, Vue, Svelte and Angular only: <skdx-date-field> deliberately has no defaultValue, because like a native input its value is the single source of truth with no controlled/uncontrolled split. The absence there is the design, not a gap \u2014 see controlledUncontrolled.",frameworks:["react","vue","svelte","angular"],exception:"wc-default",frameworksReason:"<skdx-date-field> deliberately has no defaultValue, because like a native input its value is the single source of truth with no controlled/uncontrolled split. The absence there is the design."},{name:"granularity",type:"'day' | 'minute' | 'second'",defaultValue:"'day'",required:!1,description:"How far the field is editable: 'day' is date-only; 'minute' adds hour/minute segments; 'second' adds seconds. Anything past 'day' makes this datetime-local. No 'hour' deliberately \u2014 hour and minute always render together (a bare hour is not typeable; HH:00 is what it submits), so a same-named field was removed."},{name:"hourCycle",type:"12 | 24",required:!1,description:"Forces 12-hour (with an AM/PM segment) or 24-hour display of the time segments. Defaults to whatever the locale resolves to. Presentation only \u2014 the submitted value is always 24 hour."},{name:"locale",type:"string",required:!1,description:"BCP-47 locale deciding segment order, the literals between segments, and the AM/PM names. en-US orders month/day/year, de-DE orders day.month.year. Defaults to the runtime locale."},{name:"minDate",type:"Date | string",required:!1,description:`${e} Earliest accepted date, named exactly as on Calendar. A value before it sets aria-invalid="true" and data-invalid on the group and fails constraint validation, so checkValidity() reports rangeUnderflow the way <input type="date" min> does. Compared at the field's granularity, so a date-only field ignores the time of day.`},{name:"maxDate",type:"Date | string",required:!1,description:`${e} Latest accepted date, named exactly as on Calendar. A value after it is aria-invalid/data-invalid and fails constraint validation with rangeOverflow.`},{name:"isDateUnavailable",type:"(date: Date) => boolean",required:!1,description:`Predicate marking dates as unavailable (a booked night, a closed day), receiving the typed Date. The same signature Calendar carries, deliberately: one predicate can then be handed to both halves of a DatePicker composition, and the typed half cannot disagree with the calendar half about which days are takeable. A segmented field has no cell to disable, so an unavailable date is reported the way an out-of-range one is \u2014 aria-invalid="true" and data-invalid on the group \u2014 and it does not change what the field submits, because availability is the consumer's rule and the platform has no constraint for it.`},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables the field: every segment leaves the tab order and refuses input, so no keystroke, step or paste changes the value. Distinct from readOnly, which keeps the segments focusable and announced."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:"Segments stay focusable and readable but refuse every edit."},{name:"invalid",type:"boolean",defaultValue:"false",required:!1,description:"Marks the field as invalid."},{name:"required",type:"boolean",defaultValue:"false",required:!1,description:"Marks the field required. valueMissing while any segment is untyped, and the segments announce aria-required. Independent of name: the mirrored native control is rendered for a required field even when it submits nothing, so a requirement that is announced is also a requirement checkValidity() enforces."},{name:"name",type:"string",required:!1,description:"Form field name. Without it the field submits nothing. With it, the date submits as YYYY-MM-DD, or YYYY-MM-DDTHH:mm[:ss] when granularity includes time."},{name:"dir",type:"'ltr' | 'rtl'",required:!1,frameworks:["react","vue","svelte","angular"],exception:"attribute-passthrough",frameworksReason:"<skdx-date-field> declares no `dir` input by design: it resolves direction by climbing from the host to the nearest `[dir]` ancestor, crossing shadow boundaries, so the native `dir` attribute on the element itself is already the per-instance override. A declared property would be a second source of truth for an attribute the platform owns.",description:"Writing direction deciding which arrow key moves focus forward through segments: under rtl, ArrowLeft moves next, ArrowRight previous. Omit and direction is read from a DOM dir ancestor (normal case) \u2014 this prop is the per-instance override. Contracted because it changes keyboard behaviour, not layout: a prop deciding what a key does is behaviour no parity tool can see."},{name:"shouldForceLeadingZeros",type:"boolean",defaultValue:"true",required:!1,description:"Whether one-digit month, day, or hour renders zero-padded (05/09/2026 vs 5/9/2026). Disabled, only those three change: year keeps four digits (padding separates typed 0042 from 42) and minute/second keep two (every locale writes them two-digit; 9:5 is unreadable). Mirrors Intl.DateTimeFormat's numeric vs 2-digit split. Presentation only: affects filled segments and placeholders, never aria-valuenow or submitted value."},{name:"getSegmentLabel",type:"(type: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod') => string",required:!1,description:'Accessible name for one segment, called per type. Segment order and literals come from Intl; these names don\'t (they describe the widget, not the value). Defaults to English ("year", "month", "AM/PM", \u2026). **Property-only**: functions have no attribute form. `<skdx-date-field>` declares it `@property({ attribute: false })` per platform constraints for function members on custom elements.'},{name:"emptySegmentText",type:"string",required:!1,description:'The aria-valuetext an untyped segment announces instead of a number it does not have; aria-valuenow has to stay present, so this is the text that actually gets read. Defaults to "Empty".'},{name:"getSegmentPlaceholder",type:"(type: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod') => string",required:!1,description:`Placeholder letters a segment shows before typing, called per type. Segment order and literals come from Intl; the placeholder doesn't (CLDR covers written values, not their absence) \u2014 these letters are the only visible string a locale cannot reach. Defaults to English ("yyyy", "mm", "dd", "hh", "ss", "--"), so a de-DE field renders dd.mm.yyyy until this prop changes it to TT.MM.JJJJ.`},{name:"form",type:"string",required:!1,description:"Id of the <form> owning this field when rendered outside it (e.g., in a Dialog's portal). React/Vue/Svelte/Angular forward it to the hidden input's form attribute, resolving reset through it rather than closest('form'), so a field outside its form still answers reset. <skdx-date-field> extends FormAssociated(LitElement), so the form attribute is the native one the browser resolves through ElementInternals."}],events:[{name:"value-change",detail:t("Date | null"),description:`Fires with the new Date whenever every segment is filled, and with null as soon as a segment is cleared. Never fires with a half-typed date. ${n}`}],parts:[{name:"Segment",description:"One editable piece of the value (year, month, day, hour, minute, second, dayPeriod), rendered by the root in the locale order. Exposed for styling via ::part(segment) and [data-segment]; not instantiated by the consumer, because segment count and order are locale-derived."}],slots:[],states:["default","disabled","readonly","invalid","placeholder"],controlledUncontrolled:'Controlled via value + a change event, or uncontrolled via defaultValue. value is controlled only while it is not undefined: null is a legitimate controlled "no date entered" and must not fall back to the internal value, otherwise a consumer could never clear a controlled field. Web Components have no defaultValue: like a native input, value is the single source of truth with no controlled/uncontrolled split, so an initial value is just value. Being a Date it has no attribute form, so the element snapshots the date it first rendered with and restores that on form reset.',formBehavior:'Form-associated: with a name, submits YYYY-MM-DD (or YYYY-MM-DDTHH:mm[:ss] past day granularity), exactly like <input type="date">/<input type="datetime-local"> \u2014 which is literally what the mirrored control is, so minDate/maxDate are checked by the browser rather than re-implemented. An incomplete field submits an empty entry. A form reset restores the initial value \u2014 silently in Web Components, and by firing value-change in React/Vue/Svelte/Angular, where a controlled value belongs to the parent and would otherwise be restored straight back. React/Vue/Svelte/Angular carry the value on a visually-hidden <input type="date"> (type="datetime-local" past day granularity; never type="hidden" and never readonly, both of which bar an input from constraint validation) \u2014 the native counterpart, so minDate/maxDate are checked by the browser rather than re-implemented; Web Components publish it through ElementInternals.setFormValue and setValidity instead. One caveat unique to a segmented field: its segments are <span role="spinbutton">, not native controls, so a <fieldset disabled> ancestor disables the mirrored input (and so blocks submission) but does not disable the segments themselves \u2014 pass disabled explicitly there.',validationBehavior:'required and the minDate/maxDate bounds are the constraints the field itself enforces. An incomplete or empty field is valueMissing; a date outside the bounds is rangeUnderflow/rangeOverflow, and also sets aria-invalid="true" and data-invalid on the group, because a control that fails constraint validation without saying so announces nothing. Both are reported through checkValidity()/reportValidity() identically in all five frameworks \u2014 the mirrored control is a native <input type="date"> (or type="datetime-local" past day granularity) carrying the same wire value, so it is a genuine constraint-validation candidate (willValidate is true) and an empty required or out-of-range field blocks submission rather than silently passing. invalid is a purely presentational flag on top.',accessibility:{role:"group on the root; spinbutton on each editable segment",keyboard:[{key:"ArrowUp",behavior:"Increments the focused segment, wrapping at its maximum."},{key:"ArrowDown",behavior:"Decrements the focused segment, wrapping at its minimum."},{key:"ArrowLeft / ArrowRight",behavior:'Moves focus to the previous/next editable segment, mirrored under dir="rtl" so ArrowLeft always means "forward through the value as it reads".'},{key:"Home / End",behavior:"Sets the focused segment to its minimum/maximum."},{key:"0-9",behavior:"Types into the focused segment, rolling over when a keystroke would overflow it and advancing to the next segment once no further digit could fit."},{key:"A / P (or the first letter of the locale's own day-period names)",behavior:'Sets the AM/PM segment, when the hour cycle is 12. A and P always work; beyond them the first character of each localised name is matched case- and accent-insensitively, so a de-DE field takes v and n for "vorm."/"nachm.". Where both names begin with the same character the keystroke is ambiguous and is ignored \u2014 the arrow keys are not.'},{key:"Backspace / Delete",behavior:"Clears the focused segment back to its placeholder."}],ariaAttributes:['role="group" on the root, so assistive technology reads the segments as one control','aria-valuenow/aria-valuemin/aria-valuemax on each segment; a placeholder segment reports aria-valuenow at its minimum and announces itself via aria-valuetext="Empty"',"aria-valuenow is always inside [aria-valuemin, aria-valuemax], including mid-entry: typing 0 into the month segment leaves the segment holding 0 so the next keystroke can make it 05, but the spinbutton publishes 1. The raw digits still reach the user through aria-valuetext, which is what a spinbutton announces in preference to the number",'aria-valuetext on each segment carries the rendered text (the AM/PM name, or "Empty")','aria-disabled and aria-invalid (both global ARIA) go on the group; aria-readonly and aria-required go on each spinbutton, because role="group" does not allow them'],focusManagement:"Each editable segment is individually focusable (tabindex 0, or -1 while disabled); digit entry advances focus to the next segment automatically. Literals are aria-hidden and never focusable.",namingRequirement:"The root needs an accessible name (aria-label or aria-labelledby, e.g. from a Label); each segment is self-labelled with its segment type."},styling:{cssParts:["date-field","segment","literal"],dataAttributes:[...s,"data-disabled","data-readonly","data-invalid","data-segment","data-placeholder"],cssCustomProperties:[]},publicMethods:[...r,o]};export{m as dateFieldContract};

package/dist/shared/contracts/date-picker.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** The DatePicker contract: a button-triggered popup composing Popover's positioning with Calendar's date-grid logic. */
+export declare const datePickerContract: ComponentContract;

package/dist/shared/contracts/date-picker.js

@@ -0,0 +1 @@
+import{calendarContract as o}from"./calendar.js";import{changeDetail as d}from"./change-reason.js";import{dateFieldContract as p}from"./date-field.js";import{DATE_CHANGE_VALUE_TYPE as c,DATE_INPUT_RULE as r,DATE_MALFORMED_RULE as u,DATE_OUTPUT_RULE as m,DATE_PARSE_RULE as h}from"./date-value.js";import{constraintValidationMethods as g,setCustomValidityMethod as f}from"./form-validity.js";import{dismissalEvents as y,forceMountProp as v,openChangeCompleteEvent as b,popperContentProps as w,portalPart as i,portalPropsSansForceMount as C}from"./overlay-parts.js";import{PART_DATA_ATTRIBUTES as k}from"./styling-hooks.js";import{timeFieldContract as E}from"./time-field.js";function n(a,e){return a.filter(t=>!e.includes(t.name)).map(t=>t.name==="readOnly"?{...t,description:`${t.description} OR'd with the picker root's readOnly rather than overriding it, so a read-only picker never leaves this part editable.`}:t)}var s=["value","defaultValue","granularity"],D={frameworks:["react","vue","svelte","angular"],exception:"attribute-passthrough",frameworksReason:"DELIBERATE FRAMEWORK DIVERGENCE (Web Components): the picker part exposes no dir, because the nested <skdx-date-field>/<skdx-time-field> exposes none either \u2014 direction is read off a DOM dir ancestor there."},T={frameworks:["react","vue","svelte","angular"],exception:"attribute-passthrough",frameworksReason:"DELIBERATE FRAMEWORK DIVERGENCE (Web Components): the picker part forwards no form id; the nested field is form-associated natively and the picker root already carries the form the selection submits into."};function l(a){return a.map(e=>e.name==="dir"?{...e,...D}:e.name==="form"?{...e,...T}:e)}var F={name:"DatePicker",purpose:"A button-triggered popup with composed Calendar, positioned via floating-ui. Derives anatomy: labeled trigger, portalled calendar, optional typed date and time fields. Children replace anatomy entirely.",props:[{name:"selectionMode",type:"'single' | 'multiple' | 'range'",defaultValue:"'single'",required:!1,description:"Forwarded to Calendar, shaping value accordingly. Controls popup auto-close: immediately in single, once range is closed in range, never in multiple."},{name:"value",type:"Date | string | Array<Date | string> | { start: Date | string; end: Date | string | null } | null",required:!1,description:`Controlled selection, paired with value-change. Shape follows selectionMode. ${r} Wire string mirrors Calendar format: single "2024-01-05", comma-separated multiple, start/end range. ${h} ${u}`},{name:"defaultValue",type:"Date | string | Array<Date | string> | { start: Date | string; end: Date | string | null } | null",required:!1,description:`Initial selection for uncontrolled usage. Shape follows selectionMode, same Date-or-ISO-string forms as value. ${r}`,frameworks:["react","vue","svelte","angular"],exception:"wc-default",frameworksReason:"DELIBERATE FRAMEWORK DIVERGENCE (Web Components): property is the single source of truth, like a native input. Form reset restores the value attribute."},{name:"open",type:"boolean",required:!1,description:"Controlled open state. Pair with the open-change event."},{name:"defaultOpen",type:"boolean",defaultValue:"false",required:!1,description:"Initial open state, for uncontrolled usage.",frameworks:["react","vue","svelte","angular"],exception:"wc-default",frameworksReason:"DELIBERATE FRAMEWORK DIVERGENCE (Web Components): the element has no defaultOpen \u2014 the property is the single source of truth, like a native input, and a form reset restores the selection the value attribute declared."},{name:"granularity",type:"'day' | 'minute' | 'second'",defaultValue:"'day'",required:!1,description:"Selection precision, forwarded to Input and TimeField. Past 'day' = date-time mode: no auto-close on day (incomplete). Hour/minute render together, so no 'hour' option. Only single mode edits time: range and multiple keep the date-only calendar."},{name:"closeOnSelect",type:"boolean",defaultValue:"true",required:!1,description:"Whether completed selection dismisses popup. Single: immediately. Range: after end date. Multiple: ignored. Set false to keep open. Ignored past 'day' granularity."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables Trigger and prevents opening the popup."},{name:"readOnly",type:"boolean",defaultValue:"false",required:!1,description:"Non-editable across all parts, forwarded to Calendar and segmented fields. Trigger opens, all parts stay focusable/readable. Declared at root for UI consistency."},{name:"invalid",type:"boolean",defaultValue:"false",required:!1,description:"Marks invalid, reflected as data-invalid (Trigger/Content) and aria-invalid (Trigger). Purely presentational, like segmented fields. Root property for UI painting."},{name:"name",type:"string",required:!1,description:"Form field name. The selected date is submitted under it as YYYY-MM-DD; without it the picker submits nothing."},{name:"form",type:"string | undefined",required:!1,defaultValue:"undefined",description:"Form id for submission, forwarded to all hidden controls. Allows picker outside form. Needs name to associate. In multiple/range, reaches all inputs. Web Components: named formId."},{name:"required",type:"boolean",defaultValue:"false",required:!1,description:"Marks the picker required. valueMissing while no date is selected."},{name:"placeholder",type:"string",defaultValue:"'Select date'",required:!1,description:"Derived trigger text while nothing is selected. Only used in derived anatomy; ignored with custom children."},{name:"locale",type:"string | undefined",defaultValue:"undefined",required:!1,description:"BCP 47 tag for derived trigger formatting via Intl. Separate from Calendar's locale. Ignored with custom children."},{name:"showInput",type:"boolean",defaultValue:"false",required:!1,description:"Whether derived popup includes typed-entry field above calendar for typing dates. Only in single mode. Ignored with custom children."}],events:[{name:"value-change",detail:d(c),description:`Fires with new selection on every change: Date (single), Date[] (multiple), range object (range). ${m}`},{name:"open-change",detail:"boolean",description:"Fired with the new open state whenever it changes, controlled or not."},b("popup"),...y("popup"),{name:"open-auto-focus",detail:"void",description:"Fired before focus moves into Calendar on open (selected date or today). Prevent default to leave focus as-is."},{name:"close-auto-focus",detail:"void",description:"Fired before focus returns to Trigger on popup close from inside (selection/Close/Escape). Prevent default to suppress return. Never fired for outside dismissals."}],slots:[{name:"trigger",description:"Trigger's content \u2014 button that opens and anchors popup."},{name:"default",description:"Replaces full derived anatomy. Left empty (recommended): picker draws itself. Filled: takes Trigger, Portal, and Content with Calendar and optional Input, TimeField, Close."}],parts:[{name:"Trigger",description:"Opens popup and anchors position. Carries aria-haspopup, aria-expanded, aria-controls, data-state, data-disabled/data-invalid."},{...i,description:`${i.description} React, Vue, Svelte, Web Components ship it. Angular: Content is fixed-positioned, nothing to escape. Web Components: hidden attribute vs unmount.`,frameworks:["react","vue","svelte","webComponents"],exception:"portal",frameworksReason:"Angular uses fixed-positioned Content, nothing to escape. Portal component omitted.",props:[...C,{...v,frameworks:["react","vue","svelte"],exception:"force-mount",frameworksReason:"Web Components portal hides via `hidden`, not unmount, so no force-mount needed."}]},{name:"Content",description:"The dialog popup panel, positioned against Trigger by floating-ui. Named via aria-labelledby pointing at Trigger unless overridden.",props:w({sideOffset:"4"})},{name:"Calendar",description:"Pre-wired Calendar component: value, selectionMode, readOnly forwarded. Accepts all other Calendar props. Hand-composed Calendar works the same.",props:n(o.props,["value","defaultValue","selectionMode"]),events:o.events.filter(a=>a.name!=="value-change")},{name:"Input",lightDom:!0,description:"DateField for typed entry, pre-wired to value, granularity, readOnly. Single mode only (ranges/multi unsupported by segmented fields).",props:l(n(p.props,s))},{name:"TimeField",lightDom:!0,description:"Time-of-day editor for date-time mode. Nothing at 'day' granularity, multiple modes, or before date selected.",props:l(n(E.props,s))},{name:"Close",description:"Dismisses popup without changing selection."}],states:["closed","open","disabled","readonly","invalid"],controlledUncontrolled:"DELIBERATE FRAMEWORK DIVERGENCE (Web Components): the element has no defaultValue and no defaultOpen, and a form reset there is silent where the other four fire value-change. Recorded here rather than only in prose because a divergence that appears nowhere in the generated API tables reads as a missing prop. value and open each independently support controlled or uncontrolled usage. A prop is controlled only while it is not undefined: value={null} is a controlled empty selection, not a request to fall back to internal state \u2014 otherwise a consumer could never clear a controlled picker. Web Components have no defaultValue/defaultOpen: the property is the single source of truth, like a native input, and a form reset restores the selection the value attribute declared \u2014 falling back to the one the element first rendered with when no attribute was authored.",formBehavior:'Form-associated: with a name, the selection is submitted as local-time YYYY-MM-DD strings, exactly like <input type="date"> \u2014 one entry in single mode, one entry per date in multiple mode, and start then end (two entries under the same name) in range mode. With nothing selected it submits an empty entry and is valueMissing when required. A form reset restores the initial selection \u2014 silently in Web Components, and by firing value-change in React/Vue/Svelte/Angular, where a controlled value belongs to the parent and would otherwise be restored straight back.',validationBehavior:"Range/availability validation is delegated entirely to the composed Calendar (minDate/maxDate/isDateDisabled/isDateUnavailable); required is the only constraint DatePicker itself enforces, reported through checkValidity()/reportValidity(). In range mode an anchored-but-unclosed range (end still null) counts as no selection for required.",accessibility:{role:"dialog on Content, emitted explicitly rather than left implied by Trigger's aria-haspopup \u2014 an implied role is not a role, and the panel announced as a generic container until it was set; the composed Calendar inside carries its own grid semantics",keyboard:[{key:"Enter / Space (on Trigger)",behavior:"Opens or closes the popup. Opening moves focus into the composed Calendar \u2014 onto the selected date, or onto today when nothing is selected."},{key:"Escape",behavior:"Closes the popup and returns focus to Trigger."},{key:"Tab",behavior:`Moves focus out of the popup and dismisses it, rather than cycling inside. This is the coherent pairing with the panel's role="dialog" *without* aria-modal: a non-modal dialog does not trap focus, so Tab reaching the next thing on the page is what a user expects, and leaving the popup open behind them would leave a panel nobody is in. A picker that wanted containment would have to declare aria-modal="true" and trap focus; it deliberately declares neither. No package binds Tab as a key of its own: the dismissal comes from focus landing outside the panel, which is the same route a click-away or a programmatic focus move takes. One consequence follows from that mechanism \u2014 focus arriving on document.body does not count as outside, so tabbing past the last focusable element on the page leaves the popup open.`},{key:"(within the composed Calendar)",behavior:"See the Calendar contract for grid navigation."}],ariaAttributes:['aria-haspopup="dialog", aria-expanded, and aria-controls on Trigger',"Content's id matches Trigger's aria-controls",'role="dialog" on Content, and deliberately no aria-modal: the popup does not trap focus and does not make the rest of the page inert, so claiming modality would be a promise the focus management does not keep','data-invalid on Trigger and Content, and aria-invalid="true" on Trigger, while the picker is invalid',"an accessible name on Content: aria-labelledby pointing at Trigger by default, so the panel announces whatever the button that opened it says, and suppressed the moment the consumer supplies an aria-label or aria-labelledby of their own \u2014 aria-labelledby outranks aria-label, so emitting it unconditionally would shadow the consumer's name"],focusManagement:"Opening moves focus into the composed Calendar (the selected date, else today, else the grid's roving tab stop), announced first as a cancelable open-auto-focus. Every close that started inside the popup \u2014 a completed selection, Close, or Escape \u2014 returns focus to Trigger through one shared close-auto-focus path, so the three cannot drift apart. A dismissal that started outside the popup makes no focus move and fires no close-auto-focus: focus already belongs to whatever the user reached for."},styling:{cssParts:["trigger","content","close","calendar","input","time-field"],dataAttributes:[...k,"data-state","data-side","data-align","data-disabled","data-readonly","data-invalid","data-skdx-calendar-cell","data-skdx-field-control",{name:"data-skdx-date-picker-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'}],cssCustomProperties:[]},publicMethods:[...g,f,{name:"setValue",signature:"(value: CalendarValue | undefined) => void",frameworks:["webComponents"],exception:"imperative",frameworksReason:"Only the custom element publishes it. The other four re-render with a new value prop and never expose a setter; a Web Components consumer holds the element itself, so the same change is made by calling this method on it.",description:"Replaces the selected date and emits value-change, exactly as picking a cell would."},{name:"setOpen",signature:"(open: boolean) => void",frameworks:["webComponents"],exception:"imperative",frameworksReason:"Only the custom element publishes it. The other four re-render with a new open prop and never expose a setter; a Web Components consumer holds the element itself, so the same change is made by calling this method on it.",description:"Opens or closes the picker popup and emits open-change, exactly as the trigger would."}]};export{F as datePickerContract};

package/dist/shared/contracts/date-value.d.ts

@@ -0,0 +1,11 @@
+/** Canonical date-value rules shared by Calendar, DateField, DatePicker, and TimeField. */
+/** Date input rule, spread into every prop that accepts a date. */
+export declare const DATE_INPUT_RULE = "Takes a native Date or an ISO-8601 string (YYYY-MM-DD, or YYYY-MM-DDTHH:mm[:ss]). String form crosses the attribute boundary, so Web Components can be written in static HTML.";
+/** Parse rule: date strings are read field by field, never via new Date(string). */
+export declare const DATE_PARSE_RULE = "ISO date-only strings are parsed field by field in local time, never handed to new Date(string), which reads YYYY-MM-DD as UTC midnight and returns the previous day everywhere west of Greenwich.";
+/** Malformed-string rule: invalid input is ignored rather than coerced. */
+export declare const DATE_MALFORMED_RULE = "A string that does not match the accepted shapes is ignored (member behaves as unset) and warns once in development. Never coerce to today, the epoch, or Invalid Date, which poisons downstream comparisons.";
+/** Output rule: events emit Date objects, while persistence uses ISO strings. */
+export declare const DATE_OUTPUT_RULE = "Change payloads always carry the native Date shape. The ISO string is obtained from the package formatter or the element's valueAsString \u2014 and that string is canonical for persistence.";
+/** The value shape a Calendar or DatePicker change payload carries, under any cardinality. */
+export declare const DATE_CHANGE_VALUE_TYPE = "Date | Date[] | { start: Date; end: Date | null } | null";

package/dist/shared/contracts/date-value.js

@@ -0,0 +1 @@
+var e="Takes a native Date or an ISO-8601 string (YYYY-MM-DD, or YYYY-MM-DDTHH:mm[:ss]). String form crosses the attribute boundary, so Web Components can be written in static HTML.",t="ISO date-only strings are parsed field by field in local time, never handed to new Date(string), which reads YYYY-MM-DD as UTC midnight and returns the previous day everywhere west of Greenwich.",a="A string that does not match the accepted shapes is ignored (member behaves as unset) and warns once in development. Never coerce to today, the epoch, or Invalid Date, which poisons downstream comparisons.",n="Change payloads always carry the native Date shape. The ISO string is obtained from the package formatter or the element's valueAsString \u2014 and that string is canonical for persistence.",s="Date | Date[] | { start: Date; end: Date | null } | null";export{s as DATE_CHANGE_VALUE_TYPE,e as DATE_INPUT_RULE,a as DATE_MALFORMED_RULE,n as DATE_OUTPUT_RULE,t as DATE_PARSE_RULE};

package/dist/shared/contracts/dialog.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from './types.js';
+/** The Dialog contract: a modal-by-default panel with focus trap, scroll lock, and top-layer rendering. */
+export declare const dialogContract: ComponentContract;