@skdx/docs-kit 0.35.0 → 0.36.0

package/dist/data/styling-hooks-manifest.json

@@ -1296,6 +1296,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-state",
           "frameworks": [
@@ -1351,6 +1359,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-status",
           "frameworks": [
@@ -2417,6 +2433,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -2449,6 +2473,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-state",
           "frameworks": [
@@ -2504,6 +2536,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-status",
           "frameworks": [
@@ -3265,6 +3305,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -3543,6 +3591,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -3748,6 +3804,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -3883,6 +3947,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-variant",
           "frameworks": [
@@ -4966,6 +5038,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -5134,6 +5214,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -6114,6 +6202,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -6785,6 +6881,14 @@
           ],
           "declared": true,
           "internal": false
+        },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
         }
       ],
       "cssCustomProperties": []
@@ -7212,6 +7316,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-skdx-stat-card-generated",
           "frameworks": [
@@ -10167,6 +10279,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-skdx-usage-card-generated",
           "frameworks": [
@@ -10222,6 +10342,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-skdx-user-menu-generated",
           "frameworks": [
@@ -10265,6 +10393,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-skdx-verification-page-content",
           "frameworks": [
@@ -10316,6 +10452,14 @@
           "declared": true,
           "internal": false
         },
+        {
+          "name": "data-skdx-slot",
+          "frameworks": [
+            "web-components"
+          ],
+          "declared": false,
+          "internal": false
+        },
         {
           "name": "data-skdx-workspace-switcher-generated",
           "frameworks": [

package/dist/shared/contracts/verification-page.js

@@ -1 +1 @@
-import{changeDetail as e}from"./change-reason.js";import{ROOT_DATA_ATTRIBUTES as t}from"./styling-hooks.js";var o={name:"VerificationPage",purpose:"A one-time-code block composing Heading, Text, Alert, Form, Field, PinInput and Button. It collects a code of a fixed length, reports it through a verify event once it is complete, and offers a resend control whose cooldown the consumer owns. Ships in the blocks package of each framework, not the core package.",props:[{name:"title",type:"string",defaultValue:"'Enter your verification code'",required:!1,description:"Heading text, rendered into a derived <h1> that names the section."},{name:"description",type:"string",required:!1,description:"Supporting copy rendered into a derived Text below the title, naming where the code was sent. No description region renders when omitted."},{name:"error",type:"string",required:!1,description:"Message rendered into a derived error Alert above the form. The block never clears it: set it from the verify handler and reset it when the next attempt starts."},{name:"pending",type:"boolean",defaultValue:"false",required:!1,description:"Marks the request in flight, making the submit button busy and unusable while the code boxes stay editable, so the user can still correct a digit."},{name:"codeLabel",type:"string",defaultValue:"'Verification code'",required:!1,description:"Field label and accessible name of the derived pin input holding the code, so the group of boxes is announced as one control."},{name:"length",type:"number",defaultValue:"6",required:!1,description:"How many character boxes the code is entered into, and how long a complete code is before it may be submitted."},{name:"value",type:"string",required:!1,description:"Current code, for controlled usage; pair it with the value-change event. Uncontrolled, the pin input tracks the code itself."},{name:"defaultValue",type:"string",required:!1,description:"Initial code, for uncontrolled usage \u2014 seeds the boxes on first render and leaves the rest empty."},{name:"submitLabel",type:"string",defaultValue:"'Verify'",required:!1,description:"Text of the form submit button."},{name:"resendLabel",type:"string",defaultValue:"'Resend code'",required:!1,description:"Text of the resend button, which renders only alongside a resend event handler."},{name:"resendDisabled",type:"boolean",defaultValue:"false",required:!1,description:"Makes the resend button unusable, for a consumer running its own cooldown between requests."},{name:"resendHint",type:"string",required:!1,description:"Note rendered beside the resend button, such as how long the cooldown has left. The block runs no timer of its own."},{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:"Navigation rendered below the resend region, such as a link back to the sign-in page. No footer region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `footer` slot."}],events:[{name:"verify",detail:"{ code: string }",description:"Fires when the form is submitted with a code of exactly the declared length, carrying that code. The native submit is prevented, so the consumer performs the check and sets error on failure."},{name:"resend",detail:"void",description:"Fires when the resend button is activated. Handling it is what renders the resend region at all; the cooldown between requests belongs to the consumer."},{name:"value-change",detail:e("string"),description:"Fires with the new code whenever any box changes, controlled or not, so a consumer can mirror the code or clear a stale error."}],slots:[{name:"default",description:"Extra fields rendered inside the form, above the submit button."},{name:"footer",description:"Navigation below the resend region, such as a link back to the sign-in page."}],states:["default"],controlledUncontrolled:"The code is controllable through value with the value-change event, or seeded with defaultValue and tracked by the pin input; error and pending are always controlled by the consumer.",formBehavior:"The form is a core Form root whose pin input submits the joined code as one required entry with a length pattern, so a short code is refused by constraint validation and emits nothing.",validationBehavior:"The code is required and only satisfies its constraint once every box is filled; the block adds no validators and never times the resend cooldown.",accessibility:{role:"region (native <section> named by its heading through aria-labelledby)",keyboard:[{key:"ArrowLeft/ArrowRight",behavior:"Moves between the code boxes, which the pin input wires itself."},{key:"Enter",behavior:"Submits the form while a code box has focus (native form submission)."}],ariaAttributes:["aria-labelledby on the <section> points at the derived heading","the pin input group carries aria-label from codeLabel, so the boxes are announced as one named control","the derived error Alert is a live region, so a new error is announced without moving focus"],focusManagement:"Focus follows the code boxes as the pin input advances them; a refused submit reports through constraint validation rather than a jump of the block's own."},styling:{cssParts:["verification-page","panel","title","description","error","form","field","code","submit","resend","resend-hint","footer"],dataAttributes:[...t,{name:"data-skdx-verification-page-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-verification-page-content",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 verificationPageContract};
+import{changeDetail as e}from"./change-reason.js";import{ROOT_DATA_ATTRIBUTES as t}from"./styling-hooks.js";var o={name:"VerificationPage",purpose:"A one-time-code block composing Heading, Text, Alert, Form, Fieldset, PinInput and Button. It collects a code of a fixed length, reports it through a verify event once it is complete, and offers a resend control whose cooldown the consumer owns. Ships in the blocks package of each framework, not the core package.",props:[{name:"title",type:"string",defaultValue:"'Enter your verification code'",required:!1,description:"Heading text, rendered into a derived <h1> that names the section."},{name:"description",type:"string",required:!1,description:"Supporting copy rendered into a derived Text below the title, naming where the code was sent. No description region renders when omitted."},{name:"error",type:"string",required:!1,description:"Message rendered into a derived error Alert above the form. The block never clears it: set it from the verify handler and reset it when the next attempt starts."},{name:"pending",type:"boolean",defaultValue:"false",required:!1,description:"Marks the request in flight, making the submit button busy and unusable while the code boxes stay editable, so the user can still correct a digit."},{name:"codeLabel",type:"string",defaultValue:"'Verification code'",required:!1,description:"Legend of the code fieldset and accessible name of the derived pin input holding the code, so the group of boxes is announced as one control."},{name:"length",type:"number",defaultValue:"6",required:!1,description:"How many character boxes the code is entered into, and how long a complete code is before it may be submitted."},{name:"value",type:"string",required:!1,description:"Current code, for controlled usage; pair it with the value-change event. Uncontrolled, the pin input tracks the code itself."},{name:"defaultValue",type:"string",required:!1,description:"Initial code, for uncontrolled usage \u2014 seeds the boxes on first render and leaves the rest empty."},{name:"submitLabel",type:"string",defaultValue:"'Verify'",required:!1,description:"Text of the form submit button."},{name:"resendLabel",type:"string",defaultValue:"'Resend code'",required:!1,description:"Text of the resend button, which renders only alongside a resend event handler."},{name:"resendDisabled",type:"boolean",defaultValue:"false",required:!1,description:"Makes the resend button unusable, for a consumer running its own cooldown between requests."},{name:"resendHint",type:"string",required:!1,description:"Note rendered beside the resend button, such as how long the cooldown has left. The block runs no timer of its own."},{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:"Navigation rendered below the resend region, such as a link back to the sign-in page. No footer region renders when omitted. A prop in React, Svelte, and Angular; Vue and Web Components use the `footer` slot."}],events:[{name:"verify",detail:"{ code: string }",description:"Fires when the form is submitted with a code of exactly the declared length, carrying that code. The native submit is prevented, so the consumer performs the check and sets error on failure."},{name:"resend",detail:"void",description:"Fires when the resend button is activated. Handling it is what renders the resend region at all; the cooldown between requests belongs to the consumer."},{name:"value-change",detail:e("string"),description:"Fires with the new code whenever any box changes, controlled or not, so a consumer can mirror the code or clear a stale error."}],slots:[{name:"default",description:"Extra fields rendered inside the form, above the submit button."},{name:"footer",description:"Navigation below the resend region, such as a link back to the sign-in page."}],states:["default"],controlledUncontrolled:"The code is controllable through value with the value-change event, or seeded with defaultValue and tracked by the pin input; error and pending are always controlled by the consumer.",formBehavior:"The form is a core Form root whose pin input submits the joined code as one required entry with a length pattern, so a short code is refused by constraint validation and emits nothing.",validationBehavior:"The code is required and only satisfies its constraint once every box is filled; the block adds no validators and never times the resend cooldown.",accessibility:{role:"region (native <section> named by its heading through aria-labelledby)",keyboard:[{key:"ArrowLeft/ArrowRight",behavior:"Moves between the code boxes, which the pin input wires itself."},{key:"Enter",behavior:"Submits the form while a code box has focus (native form submission)."}],ariaAttributes:["aria-labelledby on the <section> points at the derived heading","the pin input group carries aria-label from codeLabel, so the boxes are announced as one named control","the derived error Alert is a live region, so a new error is announced without moving focus"],focusManagement:"Focus follows the code boxes as the pin input advances them; a refused submit reports through constraint validation rather than a jump of the block's own."},styling:{cssParts:["verification-page","panel","title","description","error","form","field","code","submit","resend","resend-hint","footer"],dataAttributes:[...t,{name:"data-skdx-verification-page-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-verification-page-content",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 verificationPageContract};

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

@@ -1 +1 @@
-import{dateToFormValue as c,parseDateFormValue as m}from"./date-segments.js";var g=/^(\d{4,})-(\d{2})$/,p=/^(\d{4,}-\d{2}-\d{2})/,d=!1;function M(){d=!1}function f(e,n){d||(d=!0,console.warn(`[skdx] ${n?`\`${n}\``:"A date property"} was given ${JSON.stringify(e)}, which is not an ISO-8601 date. Expected \`YYYY-MM-DD\`, \`YYYY-MM-DDTHH:mm[:ss]\`, or a bare \`YYYY-MM\` for a month. The value is ignored \u2014 the property behaves as if it had not been supplied \u2014 rather than being coerced to today, to the epoch, or to an \`Invalid Date\` that would then poison every comparison after it.`))}function i(e,n){if(e==null)return null;if(e instanceof Date)return Number.isNaN(e.getTime())?null:e;if(typeof e!="string")return null;let t=e.trim();if(t==="")return null;let r=m(t);if(r!==null){let l=p.exec(t)?.[1];return l!==void 0&&o(r)!==l?(f(t,n),null):r}let a=y(t);return a||(f(t,n),null)}function y(e){let n=g.exec(e);if(!n)return null;let t=Number(n[2])-1;if(t<0||t>11)return null;let r=Number(n[1]),a=new Date(r,t,1);return r<100&&a.setFullYear(r),Number.isNaN(a.getTime())?null:a}function o(e,n="day"){return c(e,n)}function I(e,n,t){if(e===void 0)return;if(e===null)return n==="multiple"?[]:null;if(typeof e=="string"){let l=h(e,t);return s(l,n)}if(Array.isArray(e)){let l=e.map(u=>i(u,t)).filter(u=>u!==null);return s(l,n)}if(e instanceof Date)return s(i(e,t),n);let r=e,a=i(r.start,t);return a===null?n==="multiple"?[]:null:{start:a,end:i(r.end,t)}}function s(e,n){return n!=="multiple"?e:e===null?[]:Array.isArray(e)?e:e instanceof Date?[e]:[]}function h(e,n){let t=e.trim();if(t==="")return null;if(t.includes("/")){let[r="",a=""]=t.split("/"),l=i(r,n);return l===null?null:{start:l,end:a===""?null:i(a,n)}}return t.includes(",")?t.split(",").map(r=>i(r,n)).filter(r=>r!==null):i(t,n)}function Y(e){return e==null?null:Array.isArray(e)?e.length===0?null:e.map(n=>o(n)).join(","):e instanceof Date?o(e):`${o(e.start)}/${e.end===null?"":o(e.end)}`}var N=/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;function b(e,n){if(e==null)return null;if(e instanceof Date){if(Number.isNaN(e.getTime()))return null;let a=D=>String(D).padStart(2,"0"),l=e.getSeconds(),u=`${a(e.getHours())}:${a(e.getMinutes())}`;return l===0?u:`${u}:${a(l)}`}if(typeof e!="string")return null;let t=e.trim();if(t==="")return null;let r=N.exec(t);return!r||Number(r[1])>23||Number(r[2])>59||r[3]!==void 0&&Number(r[3])>59?(f(t,n),null):t}export{M as resetMalformedDateWarning,Y as toCalendarString,I as toCalendarValue,i as toDate,o as toISODateValue,b as toTimeValue};
+import{dateToFormValue as c,parseDateFormValue as m}from"./date-segments.js";var g=/^(\d{4,})-(\d{2})$/,p=/^(\d{4,}-\d{2}-\d{2})/,y=/^\d{4,}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})$/,s=!1;function M(){s=!1}function f(e,n){s||(s=!0,console.warn(`[skdx] ${n?`\`${n}\``:"A date property"} was given ${JSON.stringify(e)}, which is not an ISO-8601 date. Expected \`YYYY-MM-DD\`, \`YYYY-MM-DDTHH:mm[:ss]\`, an instant with \`Z\` or a \`\xB1HH:mm\` offset, or a bare \`YYYY-MM\` for a month. The value is ignored \u2014 the property behaves as if it had not been supplied \u2014 rather than being coerced to today, to the epoch, or to an \`Invalid Date\` that would then poison every comparison after it.`))}function l(e,n){if(e==null)return null;if(e instanceof Date)return Number.isNaN(e.getTime())?null:e;if(typeof e!="string")return null;let t=e.trim();if(t==="")return null;let r=m(t);if(r!==null){let i=p.exec(t)?.[1];return i!==void 0&&o(r)!==i?(f(t,n),null):r}if(y.test(t)){let i=new Date(t);if(!Number.isNaN(i.getTime()))return i}let a=N(t);return a||(f(t,n),null)}function N(e){let n=g.exec(e);if(!n)return null;let t=Number(n[2])-1;if(t<0||t>11)return null;let r=Number(n[1]),a=new Date(r,t,1);return r<100&&a.setFullYear(r),Number.isNaN(a.getTime())?null:a}function o(e,n="day"){return c(e,n)}function b(e,n,t){if(e===void 0)return;if(e===null)return n==="multiple"?[]:null;if(typeof e=="string"){let i=h(e,t);return d(i,n)}if(Array.isArray(e)){let i=e.map(u=>l(u,t)).filter(u=>u!==null);return d(i,n)}if(e instanceof Date)return d(l(e,t),n);let r=e,a=l(r.start,t);return a===null?n==="multiple"?[]:null:{start:a,end:l(r.end,t)}}function d(e,n){return n!=="multiple"?e:e===null?[]:Array.isArray(e)?e:e instanceof Date?[e]:[]}function h(e,n){let t=e.trim();if(t==="")return null;if(t.includes("/")){let[r="",a=""]=t.split("/"),i=l(r,n);return i===null?null:{start:i,end:a===""?null:l(a,n)}}return t.includes(",")?t.split(",").map(r=>l(r,n)).filter(r=>r!==null):l(t,n)}function Y(e){return e==null?null:Array.isArray(e)?e.length===0?null:e.map(n=>o(n)).join(","):e instanceof Date?o(e):`${o(e.start)}/${e.end===null?"":o(e.end)}`}var I=/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;function T(e,n){if(e==null)return null;if(e instanceof Date){if(Number.isNaN(e.getTime()))return null;let a=D=>String(D).padStart(2,"0"),i=e.getSeconds(),u=`${a(e.getHours())}:${a(e.getMinutes())}`;return i===0?u:`${u}:${a(i)}`}if(typeof e!="string")return null;let t=e.trim();if(t==="")return null;let r=I.exec(t);return!r||Number(r[1])>23||Number(r[2])>59||r[3]!==void 0&&Number(r[3])>59?(f(t,n),null):t}export{M as resetMalformedDateWarning,Y as toCalendarString,b as toCalendarValue,l as toDate,o as toISODateValue,T as toTimeValue};

package/dist/shared/core/label-activation.d.ts

@@ -0,0 +1 @@
+export declare function activateLabelledButton(label: HTMLElement, event: Event): void;

package/dist/shared/core/label-activation.js

@@ -0,0 +1 @@
+var l='a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',i="radio, checkbox, switch, menuitemcheckbox, menuitemradio",u='button, [role="radio"], [role="checkbox"], [role="switch"]';function s(t){let e=t instanceof HTMLButtonElement||i.split(", ").includes(t.getAttribute("role")??"")?t:t.querySelector(u);return!(e instanceof HTMLElement)||e instanceof HTMLInputElement||e.disabled||e.getAttribute("aria-disabled")==="true"?null:e}function a(t,n){let e=`#${CSS.escape(n)}`;for(let o=t.parentElement;o;o=o.parentElement){let r=o.querySelector(e);if(r)return r}return t.getRootNode().getElementById(n)}function f(t,n){if(n.defaultPrevented)return;let e=t.getAttribute("for");if(!e)return;let o=n.target instanceof Element?n.target:null;if(o&&o!==t&&o.closest(l)!==t.closest(l))return;let r=a(t,e),c=r&&s(r);c&&(n.preventDefault(),c.focus(),c.click())}export{f as activateLabelledButton};

package/dist/shared/core/tabbable.d.ts

@@ -6,3 +6,12 @@ export declare const TABBABLE_SELECTOR: string;
  * small subtrees only in the DOM while open.
  */
 export declare function tabbablesWithin(container: Element): HTMLElement[];
+/**
+ * Keeps Tab cycling inside `container` while it is the modal surface: Tab from the last tabbable
+ * lands on the first and Shift+Tab from the first on the last. A native `showModal()` leaves the
+ * loop through the browser chrome instead, which assistive technology reads as focus escaping.
+ *
+ * @param container the modal surface, typically the open `<dialog>`
+ * @param event the keydown to act on; anything but an unhandled Tab is ignored
+ */
+export declare function wrapTabWithin(container: Element, event: KeyboardEvent): void;

package/dist/shared/core/tabbable.js

@@ -1 +1 @@
-var e=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function n(t){return Array.from(t.querySelectorAll(e))}export{e as TABBABLE_SELECTOR,n as tabbablesWithin};
+var r=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function d(e){return Array.from(e.querySelectorAll("*")).filter(t=>t.matches(r)||t.shadowRoot?.delegatesFocus===!0)}function u(e,t){if(t.key!=="Tab"||t.defaultPrevented)return;let o=d(e);if(o.length===0){t.preventDefault();return}let a=o[0],s=o[o.length-1],n=document.activeElement,i=n===null||n===e||!e.contains(n),l=t.shiftKey?n===a:n===s;!i&&!l||(t.preventDefault(),(t.shiftKey?s:a).focus())}export{r as TABBABLE_SELECTOR,d as tabbablesWithin,u as wrapTabWithin};

package/dist/skins-src/_foundation-fallback.css

@@ -79,6 +79,7 @@
     --skdx-border-width-thick: 2px;
     --skdx-border-width-thicker: 4px;
     --skdx-opacity-disabled: 0.5;
+    --skdx-opacity-muted: 0.7;
     --skdx-opacity-scrim: 0.6;
     --skdx-control-height-sm: 1.875rem;
     --skdx-control-height-md: 2.25rem;

package/dist/skins-src/components/chat-message.css

@@ -75,8 +75,9 @@
     text-align: center;
   }
 
+  /* Muted, not disabled: the text is still meant to be read while the send is in flight. */
   :where(.skdx-chat-message)[data-status='pending'] :where(.skdx-chat-message__content) {
-    opacity: var(--skdx-opacity-disabled);
+    opacity: var(--skdx-opacity-muted);
   }
 
   :where(.skdx-chat-message__attachments) {

package/dist/skins-src/components/onboarding-checklist.css

@@ -54,9 +54,15 @@
     gap: var(--skdx-space-3);
   }
 
-  :where(.skdx-onboarding-checklist__item)[data-state='disabled'] {
+  /* The indicator and action fade as disabled controls; the title stays readable text, muted. */
+  :where(.skdx-onboarding-checklist__item)[data-state='disabled']
+    :where(.skdx-onboarding-checklist__indicator, .skdx-onboarding-checklist__action) {
     opacity: var(--skdx-opacity-disabled);
   }
+  :where(.skdx-onboarding-checklist__item)[data-state='disabled']
+    :where(.skdx-onboarding-checklist__item-title) {
+    color: var(--skdx-color-text-muted);
+  }
 
   :where(.skdx-onboarding-checklist__indicator) {
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/docs-kit",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Build-time toolkit for the SKDX documentation site: the shared contracts, the framework table, generated manifests and the source files the docs measure. Not a public API — no semver guarantees, may change in any release.",
   "license": "MIT",
   "homepage": "https://github.com/SkandaDX/ui.skdx/tree/main/internal/docs-kit#readme",
@@ -36,19 +36,19 @@
     "access": "public"
   },
   "devDependencies": {
-    "@skdx/angular": "0.35.0",
-    "@skdx/angular-blocks": "0.35.0",
-    "@skdx/react-blocks": "0.35.0",
-    "@skdx/shared": "0.35.0",
-    "@skdx/svelte": "0.35.0",
-    "@skdx/react": "0.35.0",
-    "@skdx/vue": "0.35.0",
-    "@skdx/skins": "0.35.0",
-    "@skdx/vue-blocks": "0.35.0",
-    "@skdx/tokens": "0.35.0",
-    "@skdx/web-components": "0.35.0",
-    "@skdx/svelte-blocks": "0.35.0",
-    "@skdx/web-components-blocks": "0.35.0"
+    "@skdx/angular": "0.36.0",
+    "@skdx/angular-blocks": "0.36.0",
+    "@skdx/react-blocks": "0.36.0",
+    "@skdx/react": "0.36.0",
+    "@skdx/skins": "0.36.0",
+    "@skdx/svelte-blocks": "0.36.0",
+    "@skdx/shared": "0.36.0",
+    "@skdx/tokens": "0.36.0",
+    "@skdx/svelte": "0.36.0",
+    "@skdx/vue": "0.36.0",
+    "@skdx/vue-blocks": "0.36.0",
+    "@skdx/web-components-blocks": "0.36.0",
+    "@skdx/web-components": "0.36.0"
   },
   "nx": {
     "targets": {