@adia-ai/web-components 0.8.6 → 0.8.7

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.7] — 2026-07-19
+
+### Changed
+- **`dist/theme-provider.min.js`, `dist/web-components.min.js` rebuilt** (`npm run build:bundle-js`) — both had drifted stale relative to source; regenerated as part of 0.8.7 release pre-flight. No source change; `patterns/` also joins the package's published `files` (see `package.json`) so a consumer install resolves pattern source from `node_modules` (`adia-patterns` skill, `adia-ui-factory` `CHANGELOG.md`).
+
 ## [0.8.6] — 2026-07-18
 
 ### Fixed

package/dist/theme-provider.min.js

@@ -1,4 +1,4 @@
-var pa=Object.defineProperty;var E=(a,r)=>()=>(a&&(r=a(a=0)),r);var O=(a,r)=>{for(var e in r)pa(a,e,{get:r[e],enumerable:!0})};var V={};O(V,{constructSheet:()=>G,default:()=>ha});function G(){return typeof CSSStyleSheet>"u"?null:(w||(w=new CSSStyleSheet,w.replaceSync(ua)),w)}var ua,w,ha,D=E(()=>{"use strict";ua="@layer context{[data-scheme=light]{color-scheme:light}[data-scheme=dark]{color-scheme:dark}[data-scheme=system]{color-scheme:light dark}[theme=default]{--a-neutral-hue:225;--a-neutral-c-min:.01;--a-brand-hue:225;--a-primary-hue:225;--a-success-hue:145;--a-warning-hue:65;--a-danger-hue:25;--a-info-hue:200;--a-radius-k:1;--a-density:1;--a-shadow-intensity:1}[theme=ocean]{--a-neutral-hue:210;--a-neutral-c-min:.02;--a-brand-hue:200;--a-primary-hue:200;--a-success-hue:160;--a-warning-hue:55;--a-danger-hue:15;--a-info-hue:190;--a-primary-c-max:.2;--a-brand-c-max:.2;--a-radius-k:1.5;--a-density:1.1}[theme=forest]{--a-neutral-hue:150;--a-neutral-c-min:.018;--a-neutral-c-max:.03;--a-brand-hue:140;--a-primary-hue:140;--a-success-hue:145;--a-warning-hue:60;--a-danger-hue:20;--a-info-hue:180;--a-primary-c-max:.14;--a-brand-c-max:.14;--a-radius-k:.5;--a-density:.9}[theme=sunset]{--a-neutral-hue:30;--a-neutral-c-min:.022;--a-brand-hue:20;--a-primary-hue:20;--a-success-hue:145;--a-warning-hue:50;--a-danger-hue:10;--a-info-hue:200;--a-primary-c-max:.22;--a-brand-c-max:.22;--a-radius-k:.25;--a-density:1.1}[theme=lavender]{--a-neutral-hue:280;--a-neutral-c-min:.018;--a-brand-hue:270;--a-primary-hue:270;--a-success-hue:145;--a-warning-hue:65;--a-danger-hue:25;--a-info-hue:220;--a-primary-c-max:.15;--a-brand-c-max:.15;--a-radius-k:2;--a-density:1.1}[theme=rose]{--a-neutral-hue:350;--a-neutral-c-min:.016;--a-brand-hue:340;--a-primary-hue:340;--a-success-hue:145;--a-warning-hue:55;--a-danger-hue:15;--a-info-hue:200;--a-primary-c-max:.17;--a-brand-c-max:.17;--a-radius-k:.75;--a-density:1}[theme=slate]{--a-neutral-hue:220;--a-neutral-c-min:.008;--a-neutral-c-max:.015;--a-brand-hue:220;--a-primary-hue:220;--a-success-hue:145;--a-warning-hue:65;--a-danger-hue:25;--a-info-hue:200;--a-primary-c-max:.1;--a-brand-c-max:.1;--a-radius-k:.35;--a-density:.85;--a-shadow-intensity:.5}[theme=midnight]{--a-neutral-hue:250;--a-neutral-c-min:.02;--a-brand-hue:240;--a-primary-hue:240;--a-success-hue:150;--a-warning-hue:60;--a-danger-hue:20;--a-info-hue:210;--a-primary-c-max:.22;--a-brand-c-max:.22;--a-radius-k:1.25;--a-density:1.1}}",w=null;ha=G});var U={};O(U,{constructSheet:()=>W,default:()=>ba});function W(){return typeof CSSStyleSheet>"u"?null:(z||(z=new CSSStyleSheet,z.replaceSync(fa)),z)}var fa,z,ba,K=E(()=>{"use strict";fa="@layer context{[verse]{--a-inset-sm:var(--a-space-2-5);--a-inset-md:var(--a-space-3);--a-inset-lg:var(--a-space-3-5);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-2) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-2-5) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-3-5) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-4) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-radius-min:.25rem;--a-radius-max:.75rem;--a-radius-xs:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-size-sm:calc(var(--a-density) * 1.25rem);--a-size-md:calc(var(--a-density) * 1.5rem);--a-size-lg:calc(var(--a-density) * 1.75rem);--a-size:var(--a-size-md);--a-icon-size:16px;--a-caret-size:14px;--a-toggle-size:var(--a-space-5);--a-display-sm:18px;--a-display-md:23px;--a-display-lg:29px;--a-title-sm:16px;--a-title-md:19px;--a-title-lg:22px;--a-heading-sm:13px;--a-heading-md:14px;--a-heading-lg:15px;--a-section-sm:13px;--a-section-md:14px;--a-section-lg:16px;--a-subsection-sm:12px;--a-subsection-md:13px;--a-subsection-lg:14px;--a-body-sm:11px;--a-body-md:12px;--a-body-lg:13px;--a-deck-sm:14px;--a-deck-md:15px;--a-deck-lg:16px;--a-caption-sm:10px;--a-caption-md:11px;--a-caption-lg:12px;--a-kicker-sm:10px;--a-kicker-md:10px;--a-kicker-lg:11px;--a-label-sm:10px;--a-label-md:10px;--a-label-lg:11px;--a-metric-sm:19px;--a-metric-md:25px;--a-metric-lg:34px;--a-code-sm:11px;--a-code-md:12px;--a-code-lg:13px;--a-ui-px:var(--a-space-2);--a-ui-py:var(--a-space-1);--a-ui-sm:11px;--a-ui-md:12px;--a-ui-lg:13px}[verse]:not([size]){--a-display-size:var(--a-display-md);--a-title-size:var(--a-title-md);--a-heading-size:var(--a-heading-md);--a-section-size:var(--a-section-md);--a-subsection-size:var(--a-subsection-md);--a-body-size:var(--a-body-md);--a-deck-size:var(--a-deck-md);--a-caption-size:var(--a-caption-md);--a-kicker-size:var(--a-kicker-md);--a-label-size:var(--a-label-md);--a-metric-size:var(--a-metric-md);--a-code-size:var(--a-code-md);--a-ui-size:var(--a-ui-md)}[verse][size=lg],[verse] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-icon-size:18px;--a-caret-size:16px;--a-toggle-size:var(--a-space-6)}[verse][size=sm],[verse] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-icon-size:14px;--a-caret-size:12px;--a-toggle-size:var(--a-space-4)}}",z=null;ba=W});var J={};O(J,{constructSheet:()=>X,default:()=>xa});function X(){return typeof CSSStyleSheet>"u"?null:(_||(_=new CSSStyleSheet,_.replaceSync(ya)),_)}var ya,_,xa,Q=E(()=>{"use strict";ya="@layer context{[prose]{--a-radius-min:.375rem;--a-radius-max:1.75rem;--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-inset-sm:var(--a-space-8);--a-inset-md:var(--a-space-10);--a-inset-lg:var(--a-space-12);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-4) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-5) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-6) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-7) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-size-sm:calc(var(--a-density) * 1.75rem);--a-size-md:calc(var(--a-density) * 2.25rem);--a-size-lg:calc(var(--a-density) * 2.75rem);--a-size:var(--a-size-md);--a-display-sm:clamp(24px, 20px + 1.5vw, 36px);--a-display-md:clamp(32px, 24px + 3vw, 56px);--a-display-lg:clamp(40px, 32px + 4vw, 80px);--a-display-size:var(--a-display-md);--a-title-sm:clamp(18px, 16px + .75vw, 24px);--a-title-md:clamp(24px, 20px + 1.5vw, 36px);--a-title-lg:clamp(28px, 24px + 2vw, 48px);--a-title-size:var(--a-title-md);--a-heading-sm:16px;--a-heading-md:20px;--a-heading-lg:24px;--a-heading-size:var(--a-heading-md);--a-section-sm:14px;--a-section-md:17px;--a-section-lg:20px;--a-section-size:var(--a-section-md);--a-subsection-sm:13px;--a-subsection-md:15px;--a-subsection-lg:17px;--a-subsection-size:var(--a-subsection-md);--a-body-sm:14px;--a-body-md:16px;--a-body-lg:18px;--a-body-size:var(--a-body-md);--a-deck-sm:15px;--a-deck-md:18px;--a-deck-lg:20px;--a-deck-size:var(--a-deck-md);--a-caption-sm:14px;--a-caption-md:15px;--a-caption-lg:16px;--a-caption-size:var(--a-caption-md);--a-kicker-sm:14px;--a-kicker-md:15px;--a-kicker-lg:16px;--a-kicker-size:var(--a-kicker-md);--a-label-sm:12px;--a-label-md:13px;--a-label-lg:14px;--a-label-size:var(--a-label-md);--a-metric-sm:clamp(20px, 16px + 1.5vw, 32px);--a-metric-md:clamp(28px, 24px + 2vw, 48px);--a-metric-lg:clamp(40px, 32px + 4vw, 72px);--a-metric-size:var(--a-metric-md);--a-code-sm:14px;--a-code-md:15px;--a-code-lg:16px;--a-code-size:var(--a-code-md);--a-ui-px:var(--a-space-3);--a-ui-py:var(--a-space-2);--a-ui-sm:14px;--a-ui-md:15px;--a-ui-lg:16px;--a-ui-size:var(--a-ui-md);--prose-max-width-sm:55ch;--prose-max-width-md:65ch;--prose-max-width-lg:75ch;--prose-max-width:var(--prose-max-width-md)}[prose][size=lg],[prose] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-radius:var(--a-radius-lg)}[prose][size=sm],[prose] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-radius:var(--a-radius-sm)}[prose]>:is(p,ul,ol,blockquote,pre,table,dl){max-width:var(--prose-max-width)}[prose] :is(ul,ol){margin-block:.75em;padding-inline-start:1.75em}[prose] li+li{margin-block-start:.375em}[prose] blockquote{padding:var(--a-space-4) var(--a-space-6);font-size:var(--a-body-size);border-inline-start-width:4px}[prose] hr{margin-block:var(--a-space-6)}[prose] table{border:1px solid var(--a-border-subtle);border-radius:var(--a-radius-md);overflow:hidden}[prose] th{background:var(--a-bg-muted)}[prose] pre{padding:var(--a-space-5)}[prose] img{border-radius:var(--a-radius-lg)}}",_=null;xa=X});function Ra(a,r){customElements.define(a,r)}function H(a,r){return customElements.get(a)?!1:(customElements.define(a,r),!0)}function Fa(a){return!!customElements.get(a)}var j=Symbol("signal"),v=null,g=null,S=!1;function Z(a){for(let r of a){if(r.disposed){a.delete(r);continue}r.dirty=!0,g||(g=new Set,S||queueMicrotask(aa)),g.add(r)}}function aa(){let a,r=0;for(;a=g;){if(++r>100){g=null,console.error("signals: drain loop exceeded 100 iterations");break}g=null;for(let e of a)if(!e.disposed&&e.dirty){e.dirty=!1;try{e.run()}catch(o){e.onError?e.onError(o):(e.disposed=!0,queueMicrotask(()=>{throw o}))}}}}function ka(a){if(S){a();return}S=!0;try{a()}finally{S=!1,g&&aa()}}function M(a){let r=v;v=null;try{return a()}finally{v=r}}function u(a){let r=new Set;return{[j]:!0,get value(){return v&&r.add(v),a},set value(e){Object.is(a,e)||(a=e,Z(r))},peek(){return a}}}function $(a){let r=new Set,e,o=!0,t={dirty:!1,disposed:!1,run(){o=!0,Z(r)}};return{[j]:!0,get value(){if(v&&r.add(v),o){let i=v;v=t;try{e=a(),o=!1}finally{v=i}}return e},peek(){return e}}}function p(a,r){let e={dirty:!1,disposed:!1,host:r?.host??null,onError:r?.onError??null,run(){let o=v;v=e;try{a()}finally{v=o}}};return e.run(),()=>{e.disposed=!0}}function L(a){return a!=null&&typeof a=="object"&&a[j]===!0}var[P,f]=[Symbol(),Symbol()];function wa(a,...r){return{strings:a,values:r}}function za(a,...r){let e="";for(let t=0;t<a.length;t++)e+=a[t],t<r.length&&(e+=r[t]);let o=new CSSStyleSheet;return o.replaceSync(e),o}var ra=new WeakMap;function _a(a){let r=0,e=0,o=0;for(;o<a.length;){if(r===0&&a.charCodeAt(o)===60&&a.charCodeAt(o+1)===33&&a.charCodeAt(o+2)===45&&a.charCodeAt(o+3)===45){let i=a.indexOf("-->",o+4);if(i===-1){e=0;break}o=i+3,e=0;continue}let t=a.charCodeAt(o);r?t===(r===1?39:34)&&(r=0):t===39?r=1:t===34?r=2:t===60?e=1:t===62&&(e=0),o++}return e===1}function ja(a){let r=ra.get(a);if(r)return r;let e="";for(let o=0;o<a.length;o++)e+=a[o],o<a.length-1&&(e+=_a(e)?`{{p:${o}}}`:`<!--p:${o}-->`);return r=document.createElement("template"),r.innerHTML=e,ra.set(a,r),r}var ea={classname:"className",innertext:"innerText",innerhtml:"innerHTML",outerhtml:"outerHTML",textcontent:"textContent",tabindex:"tabIndex",arialabel:"ariaLabel",ariadescribedby:"ariaDescribedBy",arialabelledby:"ariaLabelledBy",ariarole:"role",contenteditable:"contentEditable",readonly:"readOnly",maxlength:"maxLength",minlength:"minLength",colspan:"colSpan",rowspan:"rowSpan",cellpadding:"cellPadding",cellspacing:"cellSpacing",usemap:"useMap",ismap:"isMap",accesskey:"accessKey",defaultchecked:"defaultChecked",defaultvalue:"defaultValue",defaultselected:"defaultSelected"};function oa(a,r){if(ea[r])return ea[r];let e=Object.getOwnPropertyNames(a);for(let t=0;t<e.length;t++){let i=e[t];if(i!==r&&i.toLowerCase()===r)return i}let o=Object.getPrototypeOf(a);for(;o&&o!==Object.prototype;){let t=Object.getOwnPropertyNames(o);for(let i=0;i<t.length;i++){let c=t[i];if(c!==r&&c.toLowerCase()===r)return c}o=Object.getPrototypeOf(o)}return r}function h(a,r){let e=r._i;(!e||e.s!==a.strings)&&(e&&C(e.p),e=Sa(a,r),r._i=e),Ta(e.p,a.values)}function Sa(a,r){let{strings:e}=a,t=ja(e).content.cloneNode(!0),i=qa(r);i&&(t=Ca(t,i));let c=Aa(t,a.values.length);return r.replaceChildren(t),{s:e,p:c}}var q="http://www.w3.org/2000/svg",b="http://www.w3.org/1998/Math/MathML",ta="http://www.w3.org/1999/xhtml";function qa(a){if(!a||a.nodeType!==1)return null;if(a.namespaceURI===q)return q;if(a.namespaceURI===b)return b;if(typeof a.closest!="function")return null;let r=a.closest("svg, math, foreignObject, annotation-xml");if(!r)return null;let e=r.localName;if(e==="foreignobject"||e==="foreignObject")return null;if(e==="annotation-xml"){let o=(r.getAttribute("encoding")||"").toLowerCase();return o==="text/html"||o==="application/xhtml+xml"?null:b}return e==="svg"?q:e==="math"?b:null}function Ca(a,r){let e=document.createDocumentFragment();return ia(a,e,r),e}function ia(a,r,e){for(let o of[...a.childNodes])if(o.nodeType===1){let i=document.createElementNS(e,o.localName);for(let n of o.attributes)n.namespaceURI?i.setAttributeNS(n.namespaceURI,n.name,n.value):i.setAttribute(n.name,n.value);r.appendChild(i);let c=o.localName,l=e;if(e===q&&(c==="foreignObject"||c==="foreignobject"))l=ta;else if(e===b&&c==="annotation-xml"){let n=(o.getAttribute("encoding")||"").toLowerCase();(n==="text/html"||n==="application/xhtml+xml")&&(l=ta)}ia(o,i,l)}else r.appendChild(o.cloneNode(!0))}function Aa(a,r){let e=new Array(r),o=document.createTreeWalker(a,129),t;for(;t=o.nextNode();)if(t.nodeType===8){let i=t.data.match(/^p:(\d+)$/);if(i){let c=document.createTextNode("");t.replaceWith(c),o.currentNode=c,e[+i[1]]={t:"n",n:c,c:void 0,_fx:null}}}else if(t.nodeType===1)for(let i of[...t.attributes]){let c=i.value.match(/^\{\{p:(\d+)\}\}$/);if(!c){if(i.value.includes("{{p:")){let s=i.name,d=s==="class"?'    class="${expression}"      \u2190 full replacement (whole class string is the expression)\n    .className=${expression}  \u2190 writes to the className property (resolved camelCase since FB-55 fix)\n':s==="style"?'    style="${expression}"      \u2190 full replacement of the style string\n    .style.cssText=${expression}  \u2190 write CSS text via the style.cssText accessor\n':`    ${s}="\${expression}"      \u2190 full replacement (whole attr is the placeholder)
+var pa=Object.defineProperty;var E=(a,r,e)=>()=>{if(e)throw e[0];try{return a&&(r=a(a=0)),r}catch(o){throw e=[o],o}};var O=(a,r)=>{for(var e in r)pa(a,e,{get:r[e],enumerable:!0})};var V={};O(V,{constructSheet:()=>G,default:()=>ha});function G(){return typeof CSSStyleSheet>"u"?null:(w||(w=new CSSStyleSheet,w.replaceSync(ua)),w)}var ua,w,ha,D=E(()=>{"use strict";ua="@layer context{[data-scheme=light]{color-scheme:light}[data-scheme=dark]{color-scheme:dark}[data-scheme=system]{color-scheme:light dark}[theme=default]{--a-neutral-hue:225;--a-neutral-c-min:.01;--a-brand-hue:225;--a-primary-hue:225;--a-success-hue:145;--a-warning-hue:65;--a-danger-hue:25;--a-info-hue:200;--a-radius-k:1;--a-density:1;--a-shadow-intensity:1}[theme=ocean]{--a-neutral-hue:210;--a-neutral-c-min:.02;--a-brand-hue:200;--a-primary-hue:200;--a-success-hue:160;--a-warning-hue:55;--a-danger-hue:15;--a-info-hue:190;--a-primary-c-max:.2;--a-brand-c-max:.2;--a-radius-k:1.5;--a-density:1.1}[theme=forest]{--a-neutral-hue:150;--a-neutral-c-min:.018;--a-neutral-c-max:.03;--a-brand-hue:140;--a-primary-hue:140;--a-success-hue:145;--a-warning-hue:60;--a-danger-hue:20;--a-info-hue:180;--a-primary-c-max:.14;--a-brand-c-max:.14;--a-radius-k:.5;--a-density:.9}[theme=sunset]{--a-neutral-hue:30;--a-neutral-c-min:.022;--a-brand-hue:20;--a-primary-hue:20;--a-success-hue:145;--a-warning-hue:50;--a-danger-hue:10;--a-info-hue:200;--a-primary-c-max:.22;--a-brand-c-max:.22;--a-radius-k:.25;--a-density:1.1}[theme=lavender]{--a-neutral-hue:280;--a-neutral-c-min:.018;--a-brand-hue:270;--a-primary-hue:270;--a-success-hue:145;--a-warning-hue:65;--a-danger-hue:25;--a-info-hue:220;--a-primary-c-max:.15;--a-brand-c-max:.15;--a-radius-k:2;--a-density:1.1}[theme=rose]{--a-neutral-hue:350;--a-neutral-c-min:.016;--a-brand-hue:340;--a-primary-hue:340;--a-success-hue:145;--a-warning-hue:55;--a-danger-hue:15;--a-info-hue:200;--a-primary-c-max:.17;--a-brand-c-max:.17;--a-radius-k:.75;--a-density:1}[theme=slate]{--a-neutral-hue:220;--a-neutral-c-min:.008;--a-neutral-c-max:.015;--a-brand-hue:220;--a-primary-hue:220;--a-success-hue:145;--a-warning-hue:65;--a-danger-hue:25;--a-info-hue:200;--a-primary-c-max:.1;--a-brand-c-max:.1;--a-radius-k:.35;--a-density:.85;--a-shadow-intensity:.5}[theme=midnight]{--a-neutral-hue:250;--a-neutral-c-min:.02;--a-brand-hue:240;--a-primary-hue:240;--a-success-hue:150;--a-warning-hue:60;--a-danger-hue:20;--a-info-hue:210;--a-primary-c-max:.22;--a-brand-c-max:.22;--a-radius-k:1.25;--a-density:1.1}}",w=null;ha=G});var U={};O(U,{constructSheet:()=>W,default:()=>ba});function W(){return typeof CSSStyleSheet>"u"?null:(z||(z=new CSSStyleSheet,z.replaceSync(fa)),z)}var fa,z,ba,K=E(()=>{"use strict";fa="@layer context{[verse]{--a-inset-sm:var(--a-space-2-5);--a-inset-md:var(--a-space-3);--a-inset-lg:var(--a-space-3-5);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-2) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-2-5) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-3-5) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-4) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-radius-min:.25rem;--a-radius-max:.75rem;--a-radius-xs:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-size-sm:calc(var(--a-density) * 1.25rem);--a-size-md:calc(var(--a-density) * 1.5rem);--a-size-lg:calc(var(--a-density) * 1.75rem);--a-size:var(--a-size-md);--a-icon-size:16px;--a-caret-size:14px;--a-toggle-size:var(--a-space-5);--a-display-sm:18px;--a-display-md:23px;--a-display-lg:29px;--a-title-sm:16px;--a-title-md:19px;--a-title-lg:22px;--a-heading-sm:13px;--a-heading-md:14px;--a-heading-lg:15px;--a-section-sm:13px;--a-section-md:14px;--a-section-lg:16px;--a-subsection-sm:12px;--a-subsection-md:13px;--a-subsection-lg:14px;--a-body-sm:11px;--a-body-md:12px;--a-body-lg:13px;--a-deck-sm:14px;--a-deck-md:15px;--a-deck-lg:16px;--a-caption-sm:10px;--a-caption-md:11px;--a-caption-lg:12px;--a-kicker-sm:10px;--a-kicker-md:10px;--a-kicker-lg:11px;--a-label-sm:10px;--a-label-md:10px;--a-label-lg:11px;--a-metric-sm:19px;--a-metric-md:25px;--a-metric-lg:34px;--a-code-sm:11px;--a-code-md:12px;--a-code-lg:13px;--a-ui-px:var(--a-space-2);--a-ui-py:var(--a-space-1);--a-ui-sm:11px;--a-ui-md:12px;--a-ui-lg:13px}[verse]:not([size]){--a-display-size:var(--a-display-md);--a-title-size:var(--a-title-md);--a-heading-size:var(--a-heading-md);--a-section-size:var(--a-section-md);--a-subsection-size:var(--a-subsection-md);--a-body-size:var(--a-body-md);--a-deck-size:var(--a-deck-md);--a-caption-size:var(--a-caption-md);--a-kicker-size:var(--a-kicker-md);--a-label-size:var(--a-label-md);--a-metric-size:var(--a-metric-md);--a-code-size:var(--a-code-md);--a-ui-size:var(--a-ui-md)}[verse][size=lg],[verse] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-icon-size:18px;--a-caret-size:16px;--a-toggle-size:var(--a-space-6)}[verse][size=sm],[verse] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-icon-size:14px;--a-caret-size:12px;--a-toggle-size:var(--a-space-4)}}",z=null;ba=W});var J={};O(J,{constructSheet:()=>X,default:()=>xa});function X(){return typeof CSSStyleSheet>"u"?null:(_||(_=new CSSStyleSheet,_.replaceSync(ya)),_)}var ya,_,xa,Q=E(()=>{"use strict";ya="@layer context{[prose]{--a-radius-min:.375rem;--a-radius-max:1.75rem;--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-inset-sm:var(--a-space-8);--a-inset-md:var(--a-space-10);--a-inset-lg:var(--a-space-12);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-4) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-5) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-6) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-7) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-size-sm:calc(var(--a-density) * 1.75rem);--a-size-md:calc(var(--a-density) * 2.25rem);--a-size-lg:calc(var(--a-density) * 2.75rem);--a-size:var(--a-size-md);--a-display-sm:clamp(24px, 20px + 1.5vw, 36px);--a-display-md:clamp(32px, 24px + 3vw, 56px);--a-display-lg:clamp(40px, 32px + 4vw, 80px);--a-display-size:var(--a-display-md);--a-title-sm:clamp(18px, 16px + .75vw, 24px);--a-title-md:clamp(24px, 20px + 1.5vw, 36px);--a-title-lg:clamp(28px, 24px + 2vw, 48px);--a-title-size:var(--a-title-md);--a-heading-sm:16px;--a-heading-md:20px;--a-heading-lg:24px;--a-heading-size:var(--a-heading-md);--a-section-sm:14px;--a-section-md:17px;--a-section-lg:20px;--a-section-size:var(--a-section-md);--a-subsection-sm:13px;--a-subsection-md:15px;--a-subsection-lg:17px;--a-subsection-size:var(--a-subsection-md);--a-body-sm:14px;--a-body-md:16px;--a-body-lg:18px;--a-body-size:var(--a-body-md);--a-deck-sm:15px;--a-deck-md:18px;--a-deck-lg:20px;--a-deck-size:var(--a-deck-md);--a-caption-sm:14px;--a-caption-md:15px;--a-caption-lg:16px;--a-caption-size:var(--a-caption-md);--a-kicker-sm:14px;--a-kicker-md:15px;--a-kicker-lg:16px;--a-kicker-size:var(--a-kicker-md);--a-label-sm:12px;--a-label-md:13px;--a-label-lg:14px;--a-label-size:var(--a-label-md);--a-metric-sm:clamp(20px, 16px + 1.5vw, 32px);--a-metric-md:clamp(28px, 24px + 2vw, 48px);--a-metric-lg:clamp(40px, 32px + 4vw, 72px);--a-metric-size:var(--a-metric-md);--a-code-sm:14px;--a-code-md:15px;--a-code-lg:16px;--a-code-size:var(--a-code-md);--a-ui-px:var(--a-space-3);--a-ui-py:var(--a-space-2);--a-ui-sm:14px;--a-ui-md:15px;--a-ui-lg:16px;--a-ui-size:var(--a-ui-md);--prose-max-width-sm:55ch;--prose-max-width-md:65ch;--prose-max-width-lg:75ch;--prose-max-width:var(--prose-max-width-md)}[prose][size=lg],[prose] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-radius:var(--a-radius-lg)}[prose][size=sm],[prose] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-radius:var(--a-radius-sm)}[prose]>:is(p,ul,ol,blockquote,pre,table,dl){max-width:var(--prose-max-width)}[prose] :is(ul,ol){margin-block:.75em;padding-inline-start:1.75em}[prose] li+li{margin-block-start:.375em}[prose] blockquote{padding:var(--a-space-4) var(--a-space-6);font-size:var(--a-body-size);border-inline-start-width:4px}[prose] hr{margin-block:var(--a-space-6)}[prose] table{border:1px solid var(--a-border-subtle);border-radius:var(--a-radius-md);overflow:hidden}[prose] th{background:var(--a-bg-muted)}[prose] pre{padding:var(--a-space-5)}[prose] img{border-radius:var(--a-radius-lg)}}",_=null;xa=X});function Ra(a,r){customElements.define(a,r)}function H(a,r){return customElements.get(a)?!1:(customElements.define(a,r),!0)}function Fa(a){return!!customElements.get(a)}var j=Symbol("signal"),v=null,g=null,S=!1;function Z(a){for(let r of a){if(r.disposed){a.delete(r);continue}r.dirty=!0,g||(g=new Set,S||queueMicrotask(aa)),g.add(r)}}function aa(){let a,r=0;for(;a=g;){if(++r>100){g=null,console.error("signals: drain loop exceeded 100 iterations");break}g=null;for(let e of a)if(!e.disposed&&e.dirty){e.dirty=!1;try{e.run()}catch(o){e.onError?e.onError(o):(e.disposed=!0,queueMicrotask(()=>{throw o}))}}}}function ka(a){if(S){a();return}S=!0;try{a()}finally{S=!1,g&&aa()}}function M(a){let r=v;v=null;try{return a()}finally{v=r}}function u(a){let r=new Set;return{[j]:!0,get value(){return v&&r.add(v),a},set value(e){Object.is(a,e)||(a=e,Z(r))},peek(){return a}}}function $(a){let r=new Set,e,o=!0,t={dirty:!1,disposed:!1,run(){o=!0,Z(r)}};return{[j]:!0,get value(){if(v&&r.add(v),o){let i=v;v=t;try{e=a(),o=!1}finally{v=i}}return e},peek(){return e}}}function p(a,r){let e={dirty:!1,disposed:!1,host:r?.host??null,onError:r?.onError??null,run(){let o=v;v=e;try{a()}finally{v=o}}};return e.run(),()=>{e.disposed=!0}}function L(a){return a!=null&&typeof a=="object"&&a[j]===!0}var[P,f]=[Symbol(),Symbol()];function wa(a,...r){return{strings:a,values:r}}function za(a,...r){let e="";for(let t=0;t<a.length;t++)e+=a[t],t<r.length&&(e+=r[t]);let o=new CSSStyleSheet;return o.replaceSync(e),o}var ra=new WeakMap;function _a(a){let r=0,e=0,o=0;for(;o<a.length;){if(r===0&&a.charCodeAt(o)===60&&a.charCodeAt(o+1)===33&&a.charCodeAt(o+2)===45&&a.charCodeAt(o+3)===45){let i=a.indexOf("-->",o+4);if(i===-1){e=0;break}o=i+3,e=0;continue}let t=a.charCodeAt(o);r?t===(r===1?39:34)&&(r=0):t===39?r=1:t===34?r=2:t===60?e=1:t===62&&(e=0),o++}return e===1}function ja(a){let r=ra.get(a);if(r)return r;let e="";for(let o=0;o<a.length;o++)e+=a[o],o<a.length-1&&(e+=_a(e)?`{{p:${o}}}`:`<!--p:${o}-->`);return r=document.createElement("template"),r.innerHTML=e,ra.set(a,r),r}var ea={classname:"className",innertext:"innerText",innerhtml:"innerHTML",outerhtml:"outerHTML",textcontent:"textContent",tabindex:"tabIndex",arialabel:"ariaLabel",ariadescribedby:"ariaDescribedBy",arialabelledby:"ariaLabelledBy",ariarole:"role",contenteditable:"contentEditable",readonly:"readOnly",maxlength:"maxLength",minlength:"minLength",colspan:"colSpan",rowspan:"rowSpan",cellpadding:"cellPadding",cellspacing:"cellSpacing",usemap:"useMap",ismap:"isMap",accesskey:"accessKey",defaultchecked:"defaultChecked",defaultvalue:"defaultValue",defaultselected:"defaultSelected"};function oa(a,r){if(ea[r])return ea[r];let e=Object.getOwnPropertyNames(a);for(let t=0;t<e.length;t++){let i=e[t];if(i!==r&&i.toLowerCase()===r)return i}let o=Object.getPrototypeOf(a);for(;o&&o!==Object.prototype;){let t=Object.getOwnPropertyNames(o);for(let i=0;i<t.length;i++){let c=t[i];if(c!==r&&c.toLowerCase()===r)return c}o=Object.getPrototypeOf(o)}return r}function h(a,r){let e=r._i;(!e||e.s!==a.strings)&&(e&&C(e.p),e=Sa(a,r),r._i=e),Ta(e.p,a.values)}function Sa(a,r){let{strings:e}=a,t=ja(e).content.cloneNode(!0),i=qa(r);i&&(t=Ca(t,i));let c=Aa(t,a.values.length);return r.replaceChildren(t),{s:e,p:c}}var q="http://www.w3.org/2000/svg",b="http://www.w3.org/1998/Math/MathML",ta="http://www.w3.org/1999/xhtml";function qa(a){if(!a||a.nodeType!==1)return null;if(a.namespaceURI===q)return q;if(a.namespaceURI===b)return b;if(typeof a.closest!="function")return null;let r=a.closest("svg, math, foreignObject, annotation-xml");if(!r)return null;let e=r.localName;if(e==="foreignobject"||e==="foreignObject")return null;if(e==="annotation-xml"){let o=(r.getAttribute("encoding")||"").toLowerCase();return o==="text/html"||o==="application/xhtml+xml"?null:b}return e==="svg"?q:e==="math"?b:null}function Ca(a,r){let e=document.createDocumentFragment();return ia(a,e,r),e}function ia(a,r,e){for(let o of[...a.childNodes])if(o.nodeType===1){let i=document.createElementNS(e,o.localName);for(let n of o.attributes)n.namespaceURI?i.setAttributeNS(n.namespaceURI,n.name,n.value):i.setAttribute(n.name,n.value);r.appendChild(i);let c=o.localName,l=e;if(e===q&&(c==="foreignObject"||c==="foreignobject"))l=ta;else if(e===b&&c==="annotation-xml"){let n=(o.getAttribute("encoding")||"").toLowerCase();(n==="text/html"||n==="application/xhtml+xml")&&(l=ta)}ia(o,i,l)}else r.appendChild(o.cloneNode(!0))}function Aa(a,r){let e=new Array(r),o=document.createTreeWalker(a,129),t;for(;t=o.nextNode();)if(t.nodeType===8){let i=t.data.match(/^p:(\d+)$/);if(i){let c=document.createTextNode("");t.replaceWith(c),o.currentNode=c,e[+i[1]]={t:"n",n:c,c:void 0,_fx:null}}}else if(t.nodeType===1)for(let i of[...t.attributes]){let c=i.value.match(/^\{\{p:(\d+)\}\}$/);if(!c){if(i.value.includes("{{p:")){let s=i.name,d=s==="class"?'    class="${expression}"      \u2190 full replacement (whole class string is the expression)\n    .className=${expression}  \u2190 writes to the className property (resolved camelCase since FB-55 fix)\n':s==="style"?'    style="${expression}"      \u2190 full replacement of the style string\n    .style.cssText=${expression}  \u2190 write CSS text via the style.cssText accessor\n':`    ${s}="\${expression}"      \u2190 full replacement (whole attr is the placeholder)
     .${s}=\${expression}        \u2190 property assignment (preferred for objects/functions)
 `;console.warn(`[template] Partial attribute interpolation is not supported.
   Element: <${t.tagName.toLowerCase()}>

package/dist/web-components.min.js

@@ -1,4 +1,4 @@
-var lA=Object.defineProperty;var V=(s,t)=>()=>(s&&(t=s(s=0)),t);var Ft=(s,t)=>{for(var e in t)lA(s,e,{get:t[e],enumerable:!0})};function VO(s){for(let t of s){if(t.disposed){s.delete(t);continue}t.dirty=!0,rs||(rs=new Set,Yl||queueMicrotask(jO)),rs.add(t)}}function jO(){let s,t=0;for(;s=rs;){if(++t>100){rs=null,console.error("signals: drain loop exceeded 100 iterations");break}rs=null;for(let e of s)if(!e.disposed&&e.dirty){e.dirty=!1;try{e.run()}catch(i){e.onError?e.onError(i):(e.disposed=!0,queueMicrotask(()=>{throw i}))}}}}function fA(s){if(Yl){s();return}Yl=!0;try{s()}finally{Yl=!1,rs&&jO()}}function Mt(s){let t=ye;ye=null;try{return s()}finally{ye=t}}function Xi(s){let t=new Set;return{[Wl]:!0,get value(){return ye&&t.add(ye),s},set value(e){Object.is(s,e)||(s=e,VO(t))},peek(){return s}}}function Wu(s){let t=new Set,e,i=!0,n={dirty:!1,disposed:!1,run(){i=!0,VO(t)}};return{[Wl]:!0,get value(){if(ye&&t.add(ye),i){let r=ye;ye=n;try{e=s(),i=!1}finally{ye=r}}return e},peek(){return e}}}function os(s,t){let e={dirty:!1,disposed:!1,host:t?.host??null,onError:t?.onError??null,run(){let i=ye;ye=e;try{s()}finally{ye=i}}};return e.run(),()=>{e.disposed=!0}}function Yu(s){return s!=null&&typeof s=="object"&&s[Wl]===!0}var Wl,ye,rs,Yl,_e=V(()=>{"use strict";Wl=Symbol("signal"),ye=null,rs=null,Yl=!1});function Et(s,...t){return{strings:s,values:t}}function pA(s,...t){let e="";for(let n=0;n<s.length;n++)e+=s[n],n<t.length&&(e+=t[n]);let i=new CSSStyleSheet;return i.replaceSync(e),i}function mA(s){let t=0,e=0,i=0;for(;i<s.length;){if(t===0&&s.charCodeAt(i)===60&&s.charCodeAt(i+1)===33&&s.charCodeAt(i+2)===45&&s.charCodeAt(i+3)===45){let r=s.indexOf("-->",i+4);if(r===-1){e=0;break}i=r+3,e=0;continue}let n=s.charCodeAt(i);t?n===(t===1?39:34)&&(t=0):n===39?t=1:n===34?t=2:n===60?e=1:n===62&&(e=0),i++}return e===1}function gA(s){let t=_O.get(s);if(t)return t;let e="";for(let i=0;i<s.length;i++)e+=s[i],i<s.length-1&&(e+=mA(e)?`{{p:${i}}}`:`<!--p:${i}-->`);return t=document.createElement("template"),t.innerHTML=e,_O.set(s,t),t}function YO(s,t){if(WO[t])return WO[t];let e=Object.getOwnPropertyNames(s);for(let n=0;n<e.length;n++){let r=e[n];if(r!==t&&r.toLowerCase()===t)return r}let i=Object.getPrototypeOf(s);for(;i&&i!==Object.prototype;){let n=Object.getOwnPropertyNames(i);for(let r=0;r<n.length;r++){let o=n[r];if(o!==t&&o.toLowerCase()===t)return o}i=Object.getPrototypeOf(i)}return t}function Ks(s,t){let e=t._i;(!e||e.s!==s.strings)&&(e&&Ul(e.p),e=OA(s,t),t._i=e),xA(e.p,s.values)}function OA(s,t){let{strings:e}=s,n=gA(e).content.cloneNode(!0),r=bA(t);r&&(n=yA(n,r));let o=vA(n,s.values.length);return t.replaceChildren(n),{s:e,p:o}}function bA(s){if(!s||s.nodeType!==1)return null;if(s.namespaceURI===Fl)return Fl;if(s.namespaceURI===ga)return ga;if(typeof s.closest!="function")return null;let t=s.closest("svg, math, foreignObject, annotation-xml");if(!t)return null;let e=t.localName;if(e==="foreignobject"||e==="foreignObject")return null;if(e==="annotation-xml"){let i=(t.getAttribute("encoding")||"").toLowerCase();return i==="text/html"||i==="application/xhtml+xml"?null:ga}return e==="svg"?Fl:e==="math"?ga:null}function yA(s,t){let e=document.createDocumentFragment();return UO(s,e,t),e}function UO(s,t,e){for(let i of[...s.childNodes])if(i.nodeType===1){let r=document.createElementNS(e,i.localName);for(let l of i.attributes)l.namespaceURI?r.setAttributeNS(l.namespaceURI,l.name,l.value):r.setAttribute(l.name,l.value);t.appendChild(r);let o=i.localName,a=e;if(e===Fl&&(o==="foreignObject"||o==="foreignobject"))a=FO;else if(e===ga&&o==="annotation-xml"){let l=(i.getAttribute("encoding")||"").toLowerCase();(l==="text/html"||l==="application/xhtml+xml")&&(a=FO)}UO(i,r,a)}else t.appendChild(i.cloneNode(!0))}function vA(s,t){let e=new Array(t),i=document.createTreeWalker(s,129),n;for(;n=i.nextNode();)if(n.nodeType===8){let r=n.data.match(/^p:(\d+)$/);if(r){let o=document.createTextNode("");n.replaceWith(o),i.currentNode=o,e[+r[1]]={t:"n",n:o,c:void 0,_fx:null}}}else if(n.nodeType===1)for(let r of[...n.attributes]){let o=r.value.match(/^\{\{p:(\d+)\}\}$/);if(!o){if(r.value.includes("{{p:")){let h=r.name,c=h==="class"?'    class="${expression}"      \u2190 full replacement (whole class string is the expression)\n    .className=${expression}  \u2190 writes to the className property (resolved camelCase since FB-55 fix)\n':h==="style"?'    style="${expression}"      \u2190 full replacement of the style string\n    .style.cssText=${expression}  \u2190 write CSS text via the style.cssText accessor\n':`    ${h}="\${expression}"      \u2190 full replacement (whole attr is the placeholder)
+var lA=Object.defineProperty;var V=(s,t,e)=>()=>{if(e)throw e[0];try{return s&&(t=s(s=0)),t}catch(i){throw e=[i],i}};var Ft=(s,t)=>{for(var e in t)lA(s,e,{get:t[e],enumerable:!0})};function VO(s){for(let t of s){if(t.disposed){s.delete(t);continue}t.dirty=!0,rs||(rs=new Set,Yl||queueMicrotask(jO)),rs.add(t)}}function jO(){let s,t=0;for(;s=rs;){if(++t>100){rs=null,console.error("signals: drain loop exceeded 100 iterations");break}rs=null;for(let e of s)if(!e.disposed&&e.dirty){e.dirty=!1;try{e.run()}catch(i){e.onError?e.onError(i):(e.disposed=!0,queueMicrotask(()=>{throw i}))}}}}function fA(s){if(Yl){s();return}Yl=!0;try{s()}finally{Yl=!1,rs&&jO()}}function Mt(s){let t=ye;ye=null;try{return s()}finally{ye=t}}function Xi(s){let t=new Set;return{[Wl]:!0,get value(){return ye&&t.add(ye),s},set value(e){Object.is(s,e)||(s=e,VO(t))},peek(){return s}}}function Wu(s){let t=new Set,e,i=!0,n={dirty:!1,disposed:!1,run(){i=!0,VO(t)}};return{[Wl]:!0,get value(){if(ye&&t.add(ye),i){let r=ye;ye=n;try{e=s(),i=!1}finally{ye=r}}return e},peek(){return e}}}function os(s,t){let e={dirty:!1,disposed:!1,host:t?.host??null,onError:t?.onError??null,run(){let i=ye;ye=e;try{s()}finally{ye=i}}};return e.run(),()=>{e.disposed=!0}}function Yu(s){return s!=null&&typeof s=="object"&&s[Wl]===!0}var Wl,ye,rs,Yl,_e=V(()=>{"use strict";Wl=Symbol("signal"),ye=null,rs=null,Yl=!1});function Et(s,...t){return{strings:s,values:t}}function pA(s,...t){let e="";for(let n=0;n<s.length;n++)e+=s[n],n<t.length&&(e+=t[n]);let i=new CSSStyleSheet;return i.replaceSync(e),i}function mA(s){let t=0,e=0,i=0;for(;i<s.length;){if(t===0&&s.charCodeAt(i)===60&&s.charCodeAt(i+1)===33&&s.charCodeAt(i+2)===45&&s.charCodeAt(i+3)===45){let r=s.indexOf("-->",i+4);if(r===-1){e=0;break}i=r+3,e=0;continue}let n=s.charCodeAt(i);t?n===(t===1?39:34)&&(t=0):n===39?t=1:n===34?t=2:n===60?e=1:n===62&&(e=0),i++}return e===1}function gA(s){let t=_O.get(s);if(t)return t;let e="";for(let i=0;i<s.length;i++)e+=s[i],i<s.length-1&&(e+=mA(e)?`{{p:${i}}}`:`<!--p:${i}-->`);return t=document.createElement("template"),t.innerHTML=e,_O.set(s,t),t}function YO(s,t){if(WO[t])return WO[t];let e=Object.getOwnPropertyNames(s);for(let n=0;n<e.length;n++){let r=e[n];if(r!==t&&r.toLowerCase()===t)return r}let i=Object.getPrototypeOf(s);for(;i&&i!==Object.prototype;){let n=Object.getOwnPropertyNames(i);for(let r=0;r<n.length;r++){let o=n[r];if(o!==t&&o.toLowerCase()===t)return o}i=Object.getPrototypeOf(i)}return t}function Ks(s,t){let e=t._i;(!e||e.s!==s.strings)&&(e&&Ul(e.p),e=OA(s,t),t._i=e),xA(e.p,s.values)}function OA(s,t){let{strings:e}=s,n=gA(e).content.cloneNode(!0),r=bA(t);r&&(n=yA(n,r));let o=vA(n,s.values.length);return t.replaceChildren(n),{s:e,p:o}}function bA(s){if(!s||s.nodeType!==1)return null;if(s.namespaceURI===Fl)return Fl;if(s.namespaceURI===ga)return ga;if(typeof s.closest!="function")return null;let t=s.closest("svg, math, foreignObject, annotation-xml");if(!t)return null;let e=t.localName;if(e==="foreignobject"||e==="foreignObject")return null;if(e==="annotation-xml"){let i=(t.getAttribute("encoding")||"").toLowerCase();return i==="text/html"||i==="application/xhtml+xml"?null:ga}return e==="svg"?Fl:e==="math"?ga:null}function yA(s,t){let e=document.createDocumentFragment();return UO(s,e,t),e}function UO(s,t,e){for(let i of[...s.childNodes])if(i.nodeType===1){let r=document.createElementNS(e,i.localName);for(let l of i.attributes)l.namespaceURI?r.setAttributeNS(l.namespaceURI,l.name,l.value):r.setAttribute(l.name,l.value);t.appendChild(r);let o=i.localName,a=e;if(e===Fl&&(o==="foreignObject"||o==="foreignobject"))a=FO;else if(e===ga&&o==="annotation-xml"){let l=(i.getAttribute("encoding")||"").toLowerCase();(l==="text/html"||l==="application/xhtml+xml")&&(a=FO)}UO(i,r,a)}else t.appendChild(i.cloneNode(!0))}function vA(s,t){let e=new Array(t),i=document.createTreeWalker(s,129),n;for(;n=i.nextNode();)if(n.nodeType===8){let r=n.data.match(/^p:(\d+)$/);if(r){let o=document.createTextNode("");n.replaceWith(o),i.currentNode=o,e[+r[1]]={t:"n",n:o,c:void 0,_fx:null}}}else if(n.nodeType===1)for(let r of[...n.attributes]){let o=r.value.match(/^\{\{p:(\d+)\}\}$/);if(!o){if(r.value.includes("{{p:")){let h=r.name,c=h==="class"?'    class="${expression}"      \u2190 full replacement (whole class string is the expression)\n    .className=${expression}  \u2190 writes to the className property (resolved camelCase since FB-55 fix)\n':h==="style"?'    style="${expression}"      \u2190 full replacement of the style string\n    .style.cssText=${expression}  \u2190 write CSS text via the style.cssText accessor\n':`    ${h}="\${expression}"      \u2190 full replacement (whole attr is the placeholder)
     .${h}=\${expression}        \u2190 property assignment (preferred for objects/functions)
 `;console.warn(`[template] Partial attribute interpolation is not supported.
   Element: <${n.tagName.toLowerCase()}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -88,6 +88,7 @@
     "color/",
     "components/",
     "dist/",
+    "patterns/",
     "!components/**/*.html",
     "!components/**/*.examples.js",
     "components/**/*.examples.md",

package/patterns/access-requests/access-requests.examples.html

@@ -0,0 +1,132 @@
+<header>
+  <div>
+    <h1>Access requests</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
+    </div>
+  </div>
+  <p>The "Request access" path when a user lacks permission for a resource. Three connected surfaces: the access-denied state with a Request CTA, the request form, and the pending-status follow-up. Sub-flavor of approvals (13d) — same async-gate semantics, different entry point.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    When a user clicks a link or opens a resource they don't have
+    permission to see. Hard-403 the resource but offer a path to
+    ask the owner — better UX than a dead end. The owner gets a
+    notification (15d) + an entry in their approval queue (13d);
+    the requester gets a pending state until the request resolves.
+  </p>
+</section>
+
+<section data-section data-property="access-denied-cta">
+  <h2 variant="section">Access denied — with Request CTA</h2>
+  <p data-note>The standard access-denied state (cross-ref 36d) augmented with a "Request access" primary action. <code>alert-ui variant="warning"</code> carries the explanation; the CTA opens the request form.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="access denied with request">
+      <card-ui data-chunk="access-denied-with-request" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">You don't have access to this</span>
+        </header>
+        <section>
+          <alert-ui variant="warning" icon="lock">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>Q4 product roadmap is restricted.</text-ui>
+              <text-ui>Owned by Avery Chen. Ask them for access, or check if your team has a different version.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Go back" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Request access" variant="primary" icon-leading="paper-plane-tilt"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="request-form">
+  <h2 variant="section">Request form</h2>
+  <p data-note>The form the requester fills. Pre-fills the resource being requested; user picks the role they need + optional reason. Submit fires a notification to the owner.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="access request form">
+      <card-ui data-chunk="access-request-form" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Request access</span>
+          <text-ui slot="description" color="subtle">Avery Chen will be notified</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Resource">
+              <input-ui name="resource" value="Q4 product roadmap" readonly></input-ui>
+            </field-ui>
+            <field-ui label="Role you need" required>
+              <select-ui name="role">
+                <option value="viewer" selected>Viewer — read only</option>
+                <option value="commenter">Commenter — read + comment</option>
+                <option value="editor">Editor — read + edit</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Why do you need access?" hint="Optional but speeds up approval">
+              <textarea-ui name="reason" rows="3" placeholder="e.g., I'm reviewing the Q4 plan for the engineering breakdown."></textarea-ui>
+            </field-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Send request" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="request-pending">
+  <h2 variant="section">Pending status</h2>
+  <p data-note>The state the requester sees after submission. <code>alert-ui variant="info"</code> with the reviewer name + reasonable ETA. "Cancel request" + "View other resources" actions.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="access request pending">
+      <card-ui data-chunk="access-request-pending" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">Request sent</span>
+          <tag-ui slot="action" variant="warning">Pending</tag-ui>
+        </header>
+        <section>
+          <alert-ui variant="info" icon="clock-counter-clockwise">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>Avery Chen has been notified.</text-ui>
+              <text-ui>You'll get an email when they approve or decline. Most requests are answered within a business day.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel request" variant="ghost"></button-ui>
+          <button-ui slot="action" text="View other resources" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Always show the owner's name</strong> — "ask Avery" reads as a real path; "ask the owner" reads as a system error. The owner identity comes from the same authorization data that produced the 403.</li>
+    <li><strong>Pre-fill the resource</strong> — never make the user re-type the resource name. The link they clicked is the request payload.</li>
+    <li><strong>Default role = least-privilege</strong> — Viewer is the default; the user can escalate. This is the same posture the role-picker (36a) uses for new members.</li>
+    <li><strong>Reason is optional but encouraged</strong> — a one-line reason cuts approval lag. Frame the hint around speed, not surveillance.</li>
+    <li><strong>Pending state shows the reviewer + ETA</strong> — "Avery Chen has been notified · most requests answered within a business day" beats a generic "request sent" toast. The requester can plan around the wait.</li>
+    <li><strong>Cancel-request is reversible</strong> — let the user pull the request back without contacting the owner. This is a polite-by-default convention.</li>
+    <li><strong>Don't auto-grant after timeout</strong> — pending should stay pending forever (or until manually canceled). Auto-grant is a security smell.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/patterns/approvals">approvals</a> — the owner-side surface (13d). Access requests appear in the approval queue.</li>
+    <li><a href="/site/components/alert">alert-ui</a> — explanation copy on all three surfaces.</li>
+    <li><a href="/site/components/field">field-ui</a> · <a href="/site/components/select">select-ui</a> · <a href="/site/components/textarea">textarea-ui</a> — request form primitives.</li>
+    <li><a href="/site/patterns/permissions-role-picker">permissions-role-picker</a> — same role vocabulary as the role select.</li>
+  </ul>
+</section>

package/patterns/access-requests/access-requests.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Access requests (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/alert/alert.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <link rel="stylesheet" href="../../components/textarea/textarea.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/alert/alert.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <script type="module" src="../../components/textarea/textarea.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./access-requests.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load access-requests.examples.html — ${err.message}</p>`;
+      console.error('[access-requests.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/patterns/admin-keys-and-export/admin-keys-and-export.examples.html

@@ -0,0 +1,236 @@
+<header>
+  <div>
+    <h1>API keys, webhooks &amp; data export</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">input-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui>
+    </div>
+  </div>
+  <p>Two adjacent admin surfaces: API key + webhook management (04g), and data-export / account-portability (04i). Both compose existing primitives — the patterns are in the wiring, the security copy, and the destructive-action flow.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    API keys: programmatic access to your account — server-side
+    integrations, scripts, CI. Distinct from per-user OAuth tokens
+    (account login flow); these are long-lived bearer tokens scoped
+    to a workspace. Webhooks deliver events to a URL.
+    Data export: GDPR / CCPA / SOC-2 compliance + workspace
+    migration. The user requests, the system queues, an email
+    arrives with a download link.
+  </p>
+</section>
+
+<section data-section data-property="api-keys-list">
+  <h2 variant="section">API keys list</h2>
+  <p data-note>The active-keys list. Each row carries a name, prefix (last 4 chars only — never the full secret), scope tag, last-used time, and a kebab menu (Rotate / Revoke). "Create key" header action.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="api keys list">
+      <card-ui data-chunk="api-keys-list">
+        <header>
+          <span slot="heading" variant="section">API keys</span>
+          <text-ui slot="description" color="subtle">3 active · last rotated 12 days ago</text-ui>
+          <button-ui slot="action" text="Create key" variant="primary" size="sm" icon-leading="plus"></button-ui>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui text="Production — backend">
+              <icon-ui slot="icon" name="key" size="sm"></icon-ui>
+              <span slot="description"><code>sk_live_…A4F2</code> · last used 4 minutes ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="primary">read · write</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="CI — read-only">
+              <icon-ui slot="icon" name="key" size="sm"></icon-ui>
+              <span slot="description"><code>sk_live_…9821</code> · last used 2 hours ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm">read</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="Local dev — kim">
+              <icon-ui slot="icon" name="key" size="sm"></icon-ui>
+              <span slot="description"><code>sk_test_…7f0e</code> · last used 18 days ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="muted">test</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="api-keys-create">
+  <h2 variant="section">Create key — one-time reveal</h2>
+  <p data-note>The just-created key shown once. After this view closes, the secret is not retrievable; only the prefix shows in the list. Copy button + alert explaining the one-shot semantics.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="key one-time reveal">
+      <card-ui data-chunk="api-keys-create" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Your new API key</span>
+          <text-ui slot="description" color="subtle">Copy it now — it won't be shown again</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Production — backend">
+              <input-ui name="api_key" value="sk_live_4f8b2e7c91d2a48fA4F2" readonly icon-trailing="copy"></input-ui>
+            </field-ui>
+            <alert-ui variant="warning" icon="warning">
+              <col-ui slot="content" gap="0-5">
+                <text-ui strong>This is the only time we'll show this key.</text-ui>
+                <text-ui>Store it in your secrets manager now. If you lose it, you'll need to revoke this key and create a new one.</text-ui>
+              </col-ui>
+            </alert-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="I've stored it safely" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="webhooks-list">
+  <h2 variant="section">Webhooks list</h2>
+  <p data-note>Endpoints + the events they subscribe to + last delivery status. Failed deliveries surface as a danger tag with a "Retry" affordance per row.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="webhooks list">
+      <card-ui data-chunk="webhooks-list">
+        <header>
+          <span slot="heading" variant="section">Webhooks</span>
+          <text-ui slot="description" color="subtle">2 endpoints · 1 failing</text-ui>
+          <button-ui slot="action" text="Add endpoint" variant="primary" size="sm" icon-leading="plus"></button-ui>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui text="https://api.example.com/adia/events">
+              <icon-ui slot="icon" name="webhooks-logo" size="sm"></icon-ui>
+              <span slot="description">5 events · last delivery 3 minutes ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="success">200 OK</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="https://hooks.zapier.com/…/abc123/">
+              <icon-ui slot="icon" name="webhooks-logo" size="sm"></icon-ui>
+              <span slot="description">3 events · last attempt 2 hours ago · 3 retries</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="danger">503</tag-ui>
+                <button-ui text="Retry" variant="ghost" size="sm"></button-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="data-export-request">
+  <h2 variant="section">Data export — request</h2>
+  <p data-note>Compliance / portability flow. User picks scope (full workspace vs. just my data) + format, the system queues the job, an email arrives with a download link. Async, not synchronous.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="data export request">
+      <card-ui data-chunk="data-export-request" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Export your data</span>
+          <text-ui slot="description" color="subtle">We'll email you when the archive is ready</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="What to include" required>
+              <select-ui name="scope">
+                <option value="self">Just my data (GDPR Article 15)</option>
+                <option value="workspace" selected>Entire workspace (admin only)</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Format" required>
+              <select-ui name="format">
+                <option value="json" selected>JSON archive (.zip)</option>
+                <option value="ndjson">NDJSON (line-delimited)</option>
+                <option value="csv">CSV per table</option>
+              </select-ui>
+            </field-ui>
+            <alert-ui variant="info" icon="clock">
+              <col-ui slot="content" gap="0-5">
+                <text-ui strong>Exports are usually ready within 1 hour.</text-ui>
+                <text-ui>Large workspaces (≥ 1M records) can take up to 24 hours. We'll email <code>kim@example.com</code> with a download link valid for 7 days.</text-ui>
+              </col-ui>
+            </alert-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Request export" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="data-export-history">
+  <h2 variant="section">Export history</h2>
+  <p data-note>The user's recent export jobs. Status tags (Queued / Running / Ready / Expired). "Ready" rows show a Download button until the link expires; expired rows are still visible for audit but disabled.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="export history">
+      <card-ui data-chunk="data-export-history">
+        <header>
+          <span slot="heading" variant="section">Recent exports</span>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui text="Workspace · JSON">
+              <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
+              <span slot="description">Requested 12 minutes ago · 1.2M records</span>
+              <tag-ui slot="action" size="sm" variant="warning">Running</tag-ui>
+            </list-item-ui>
+            <list-item-ui text="My data · CSV">
+              <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
+              <span slot="description">Ready 2 hours ago · 4.2 MB · expires in 6 days</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="success">Ready</tag-ui>
+                <button-ui text="Download" variant="primary" size="sm" icon-leading="download-simple"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="Workspace · JSON">
+              <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
+              <span slot="description">Ready 14 days ago · link expired</span>
+              <tag-ui slot="action" size="sm" variant="muted">Expired</tag-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Show the prefix, never the full key</strong> — the list view always renders <code>sk_live_…A4F2</code>. The full secret only ever appears in the one-time reveal card; if the user lost it, they have to revoke + recreate. Storing the full key in the DB plaintext is the smell this convention prevents.</li>
+    <li><strong>One-time reveal needs a confirmation gate</strong> — the "I've stored it safely" button is the user's acknowledgment that they grabbed the key. Closing the modal/page without clicking it should still hide the secret (security default).</li>
+    <li><strong>Webhook failures are first-class</strong> — a 503 tag + Retry button is the canonical row. Hiding failures in a sub-page guarantees they get ignored.</li>
+    <li><strong>Data export is async, not sync</strong> — never block the UI on a "Generate now" call. Queue the job; email the link. Users with 1M-record workspaces shouldn't see a spinner.</li>
+    <li><strong>Download links expire</strong> — 7 days is typical; longer for SOC-2 retention requirements. The UI shows the expiry and the "Expired" state retains audit visibility (don't delete the row).</li>
+    <li><strong>Scope selection is policy-aware</strong> — "Entire workspace" must be admin-gated; non-admins see only "Just my data" (GDPR Article 15). Don't show the option then 403 the request.</li>
+    <li><strong>Format choices match the consumer</strong> — JSON archive for re-import, NDJSON for streaming consumers, CSV for spreadsheets. Three is enough; PDF or XLSX adds support tickets without value.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/field">field-ui</a> · <a href="/site/components/input">input-ui</a> · <a href="/site/components/select">select-ui</a> — form primitives.</li>
+    <li><a href="/site/components/alert">alert-ui</a> — security + scheduling copy.</li>
+    <li><a href="/site/components/tag">tag-ui</a> — status (200 OK / 503 / Running / Ready / Expired).</li>
+    <li><a href="/site/patterns/permissions-sharing">permissions-sharing</a> — adjacent (API key scopes overlap with sharing scopes).</li>
+    <li><a href="/site/patterns/profile-public-and-verification">profile + verification</a> — adjacent (KYC also gates high-value API actions per 16e).</li>
+  </ul>
+</section>