@juwel-development/design-system 2.1.1 → 3.1.0

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-full{width:100%}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-rule{border-color:var(--color-rule)}.bg-backing{background-color:var(--color-backing)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.pt-1{padding-top:var(--spacing)}.pb-1{padding-bottom:var(--spacing)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-primary{font-family:var(--font-primary)}.font-secondary{font-family:var(--font-secondary)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-body{font-size:var(--text-body)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.text-nowrap{text-wrap:nowrap}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-success{color:var(--color-success)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}@media (hover:hover){.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--control-min-width:10.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--tick-length:.9rem;--tick-thickness:1px}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.h-12{height:calc(var(--spacing) * 12)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[360px\]{width:360px}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.bg-backing{background-color:var(--color-backing)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.pt-1{padding-top:var(--spacing)}.pb-1{padding-bottom:var(--spacing)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--tick-length:.9rem;--tick-thickness:1px}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}

package/dist/types/Arrangement/Cluster/Cluster.d.ts

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const cluster: (props?: ({
+    gap?: "stack" | "region" | null | undefined;
+    justify?: "start" | "between" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IClusterProps extends VariantProps<typeof cluster> {
+    /** The clustered matter. Rendered unmodified: `Cluster` imposes no anatomy and wraps nothing in an
+     *  item element. */
+    children?: ReactNode;
+    testId?: string;
+}
+/**
+ * A horizontal arrangement that wraps: children in a row, aligned on their baselines, with a wider
+ * gap along a line than between wrapped lines. It owns one arrangement and nothing else - no
+ * landmark, no band, no join, no gutter, no fill - and takes no outer space, so whatever holds it
+ * owns the rhythm around it.
+ *
+ * @Guarantees — enforced on every render
+ * - It renders a `div` with no landmark role, no `nav` of its own and no margin.
+ * - Children wrap onto further lines rather than overflowing or shrinking, at every prop combination.
+ * - Children are always aligned on their baselines. These rows mix type at different roles — a nav
+ *   link at the label role beside a credit line at the small role — and centring them makes the type
+ *   look mis-set, so this is the arrangement rather than a default to override (docs/adr/0008).
+ * - `gap` selects which space role separates items **along a line**: `region` (the default), the gap
+ *   between one group and the next, or `stack`, the sibling gap between items that belong together.
+ *   Nothing else — neither the band role, which is vertical padding and never a gap, nor the gutter,
+ *   which is measured against the screen where these roles are measured against the type.
+ * - The gap between **wrapped lines** is always `--space-stack` and no prop can change it: a wrapped
+ *   line sitting as far from its neighbour as its items sit from each other stops reading as one group.
+ * - `justify="start"` (the default) runs the row from the start edge; `justify="between"` distributes
+ *   it end to end, which is the row with a group at each end.
+ * - No literal length and no numbered spacing rung appears in the recipe: every value it emits is a
+ *   role the token layer already names, so a second brand re-points all of them.
+ * - `children` render unmodified, and it needs no JavaScript.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - A cluster that navigates is wrapped in — or wraps — the caller's own `<nav aria-label="…">`.
+ *   This component declares no landmark, exactly as `Footer`'s guidance already directs.
+ * - The gutter and the vertical band belong to whatever holds it — a `Section`, a `Footer` — and not
+ *   to a prop here, or two components own one job.
+ *
+ * @UXGuidelines
+ * - `gap="stack"` is the row whose items belong together, as a form's actions do. `gap="region"`
+ *   separates one group from the next; reach for it when the row's items are not a single set.
+ * - `justify="between"` needs two groups to distribute. A row of loose items pushed end to end reads
+ *   as a gap in the middle rather than as a distribution.
+ */
+export declare const Cluster: FunctionComponent<IClusterProps>;
+export {};

package/dist/types/Arrangement/Stack/Stack.d.ts

@@ -0,0 +1,46 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const stack: (props?: ({
+    gap?: "stack" | "region" | null | undefined;
+    measure?: boolean | null | undefined;
+    direction?: "split" | "column" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IStackProps extends VariantProps<typeof stack> {
+    /** The stacked matter. Rendered unmodified: `Stack` imposes no anatomy. */
+    children?: ReactNode;
+    testId?: string;
+}
+/**
+ * A vertical arrangement: children in a column, separated by one named space role and optionally
+ * bounded by the reading measure. It owns one axis and one gap and nothing else - no landmark, no
+ * heading, no band, no join, no gutter, no fill - and takes no outer space, so whatever holds it
+ * owns the rhythm around it.
+ *
+ * @Guarantees — enforced on every render
+ * - It renders a `div` with no landmark role, no heading and no margin of its own.
+ * - `gap` selects which space role separates the children: `stack` (the default), the gap between
+ *   siblings within one block, or `region`, the gap between groups of blocks. Nothing else — a
+ *   spacing neither role expresses is a request for a measurement (docs/adr/0003, docs/adr/0004).
+ * - `measure` bounds the element to `--measure`, the reading column; omitted, the column is
+ *   unbounded, which is right wherever the children are not running text. It sets no font-size, so
+ *   a `ch`-counted measure keeps resolving against inherited body type.
+ * - `direction="column"` (the default) never changes axis. `direction="split"` is the same column
+ *   turning into a row at and above 64rem, its children aligned to their start edge rather than
+ *   stretched. It is the only viewport-dependent behaviour here, and it is named for the job: the
+ *   breakpoint is an implementation detail and is not part of the vocabulary.
+ * - No literal length and no numbered spacing rung appears in the recipe: every value it emits is a
+ *   role the token layer already names, so a second brand re-points all of them.
+ * - `children` render unmodified, and it needs no JavaScript.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - The gutter and the vertical band belong to the `Section` around it —
+ *   `<Section><Stack>…</Stack></Section>` — and not to a prop here, or two components own one job.
+ * - A stack holding running text is a reading block: reach for `Prose` instead, which is this
+ *   arrangement plus the contract that says the content is prose.
+ *
+ * @UXGuidelines
+ * - `gap="region"` separates groups of blocks, not blocks. A region-sized gap between two paragraphs
+ *   reads as missing content — the argument `Section` makes for joining rather than gapping.
+ */
+export declare const Stack: FunctionComponent<IStackProps>;
+export {};

package/dist/types/Display/Figure/Figure.d.ts

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
 declare const figure: (props?: ({
     ratio?: "portrait" | "square" | "landscape" | "wide" | null | undefined;
     focus?: "center" | "top" | "bottom" | "left" | "right" | null | undefined;
@@ -23,6 +23,10 @@ export interface IFigureProps extends VariantProps<typeof figure> {
     };
     /** Names the image. Its presence is what makes this a `figure`. */
     caption?: string;
+    /** A slot over the image frame - the consumer's own decoration, rendered unmodified as a sibling of
+     *  the image inside a positioning context. Having something to render is what makes that context
+     *  exist; where inside it the overlay sits is expressed on the consumer's own element. */
+    overlay?: ReactNode;
     /** Whether this image is visible when the page first paints. Set it on a hero. */
     priority?: boolean;
     testId?: string;
@@ -30,7 +34,9 @@ export interface IFigureProps extends VariantProps<typeof figure> {
 /**
  * An aspect-locked image frame with a focal point and an optional caption. The caption decides the
  * element: with one, the image is wrapped in a `figure` with a `figcaption`; without one, the image
- * renders alone, making no self-contained claim a thumbnail or logo should not make.
+ * renders alone, making no self-contained claim a thumbnail or logo should not make. An `overlay`
+ * decides a second element the same way: with one, the image sits in a positioning context the
+ * overlay can be placed against; without one, there is no wrapper at all.
  *
  * @Guarantees — enforced on every render
  * - Every image reserves its box before it loads: an intrinsic `width`/`height`, and a locked
@@ -39,14 +45,25 @@ export interface IFigureProps extends VariantProps<typeof figure> {
  *   `lazy` otherwise), so an above-the-fold hero is never deferred.
  * - A `figure` element appears only where there is a caption.
  * - `srcset` never ships without `sizes`: `responsive` bundles the two so one cannot go without the other.
+ * - An `overlay` renders unmodified: the component adds no class and no ARIA attribute to it, strips
+ *   nothing from it, and paints nothing on the frame - the wrapper it renders carries the positioning
+ *   context and no other property, so the image fills its container exactly as it does without one.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - A decorative overlay carries the consumer's own `aria-hidden="true"`. The library will not add it:
+ *   a slot it modifies is no longer a slot.
  *
  * @UXGuidelines
  * - Pass a `src` your build's image pipeline produced. One raw source measured 2 MB against 31.6 KB
  *   for the same crop, taking `load` from 0.95 s to 10.3 s. The component cannot check this.
  * - Check a photograph's hue range before putting a brand colour beside it. One frame sat entirely
  *   between hue 14° and 40°, so an amber call-to-action muddied against a terracotta wall - the accent
- *   lives where the photo isn't. `Figure` renders no overlay, so this is about what a page puts next
- *   to a figure, not on it.
+ *   lives where the photo isn't. The component paints nothing over the frame itself, so this is about
+ *   what a page puts next to a figure - and about what it puts in `overlay`, which is the consumer's
+ *   own decoration and answers to the same hue range.
+ * - `overlay` is a place, not a treatment. The library provides somewhere legal for a rim, a ring or a
+ *   plate to go, and provides none of them; positioning it inside the frame is the consumer's, expressed
+ *   on their own absolutely-positioned element.
  */
 export declare const Figure: FunctionComponent<IFigureProps>;
 export {};

package/dist/types/Display/Rail/Rail.d.ts

@@ -29,6 +29,8 @@ interface IRailContentProps {
  *   the label role. Colours are semantic tokens re-pointed by `.dark`, so no class carries a `dark:` prefix.
  * - `number` is optional: omitted, the index renders the name alone and no empty numeral element.
  * - `Content` renders its children unmodified and sets no measure cap - `Prose` owns the reading measure.
+ * - `Content` sets no spacing between those children either - a composed `Stack` owns the gap. The slot
+ *   is opaque, so it cannot see the pieces whose rhythm it would set: the same reason it sets no measure.
  * - No margin, max-width, fill, box or vertical rule; no `tabular-nums` or `font-variant-numeric`.
  * - It needs no JavaScript: `position: sticky` is CSS.
  *
@@ -39,6 +41,10 @@ interface IRailContentProps {
  *   consumer that files a section only in the index leaves it without an accessible name.
  *
  * @UXGuidelines
+ * - The heading `Content` is required to carry and the section's matter beneath it are two pieces in one
+ *   opaque slot, and the slot separates nothing. Compose the column inside it -
+ *   `<Rail.Content><Stack gap="…"><H2>Work</H2>{matter}</Stack></Rail.Content>` - and take the space role
+ *   from `Stack`'s own guidance: `Rail` holds no opinion on which of the two roles this position wants.
  * - An index is an information layer, not a layout remedy. Measured on the page that prompted it, the
  *   filing numeral bought 0px of width across three fallback rungs, and the column it sits in closed only
  *   +224px of a 933px deficit - it widens a composition's span, not its content. If a page sags, the

package/dist/types/Display/Typography/H1/H1.d.ts

@@ -14,11 +14,17 @@ interface IH1Props extends VariantProps<typeof h1> {
  * - Renders an `h1`; its outline level and the display role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-display`, led by `--leading-display` and optically
  *   corrected by `--tracking-optical`, the large-type correction every role from title up carries.
+ * - Bounded at `--measure-display`, the display role's own measure — narrower than the reading column
+ *   because bigger type wants fewer characters per line (docs/adr/0004). The bound is the recipe's,
+ *   not a caller's: the level fixes the role and the role fixes the measure, so there is no `measure`
+ *   prop to select between roles (docs/adr/0008). It holds under every `color`.
  * - `color` selects the `foreground` or `muted` role; nothing else paints text.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is an ordinary page title, and it is also a hero's lead - `display` is the hero role, so a
- *   poster hero's `h1` is this one, placed inside a `Hero` (#17), which renders no heading of its own.
+ *   poster hero's `h1` is this one, placed inside a `Hero` (#17), which renders no heading of its own
+ *   and leaves its slot uncapped — the display measure arrives with this heading rather than with the
+ *   slot, which would cap the mark beside it too (#87).
  * - A subpage head is the exception: `PageHead` renders its own `h1` at the `title` role, the one
  *   sanctioned escape valve from level-fixes-role (docs/adr/0005). Reach for it where it fits.
  * - Heading levels descend without skipping — an `h1` is followed by an `h2`, never an `h3`.

package/dist/types/Display/Typography/Note/Note.d.ts

@@ -0,0 +1,35 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const note: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface INoteProps extends VariantProps<typeof note> {
+    /** The annotation. A `ReactNode` rather than a string, because these lines carry inline links. */
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * A short annotation at the small type role in the secondary family — a routing line above a submit
+ * button, a privacy line at the point of submission, a line beside a control. Not reading matter:
+ * it takes no measure and sits in no reading column, which is what separates it from `Prose.Tail`
+ * at the same size, and it carries neither the tracking nor the weight that make an `Eyebrow`.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
+ * - `color` selects the `foreground` (default) or `muted` role; nothing else paints text.
+ * - Emits no tracking, no font-weight, no measure and no margin under any prop.
+ * - Carries no ARIA role and no live region under any prop.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - The device has three carriers and this primitive is only one: use it for an annotation no other
+ *   component owns. A form's own message belongs to `Form`'s `note` and a table's to its note cell,
+ *   each painted by the component that owns it.
+ * - Do **not** put a `Note` in `Form`'s `note` slot: that nests a `p` in a `p` and paints the text
+ *   twice. The slot takes a node, so pass the wording straight to `Form` and let the links ride
+ *   inside it — inline content only, never a block. `Form` cannot delegate here either — the
+ *   architecture standard's one-way dependency rule is why `Prose` restates `P`'s utilities.
+ * - Where the annotation is a form's status message, `Form` owns `role="status"`/`role="alert"` by
+ *   state; a `Note` announces nothing.
+ */
+export declare const Note: FunctionComponent<INoteProps>;
+export {};

package/dist/types/Interaction/Input/Input.d.ts

@@ -10,6 +10,11 @@ interface IInputProps extends VariantProps<typeof input> {
     /** How the surrounding form reads the value on submit. */
     name: string;
     required?: boolean;
+    /**
+     * How a non-required field says so, in the consuming app's language. Left out, the field carries
+     * no marker at all: the library translates nothing and ships no wording of its own (issue #74).
+     */
+    optionalLabel?: string;
     invalid?: boolean;
     disabled?: boolean;
     defaultValue?: string;

package/dist/types/Interaction/Link/Link.d.ts

@@ -18,10 +18,10 @@ interface ILinkProps extends VariantProps<typeof link> {
 }
 /**
  * A link in one of four treatments. `prose` for running text (told apart by its underline, never by
- * hue), `quiet` for standing navigation (muted, and foreground with an underline on hover),
- * `label-link` for a link acting as a label (inherits its colour, underlines on hover, sets no type
- * of its own), and `graphic` for an anchor whose child is not text (paints nothing, so a mark keeps
- * its own colour). It renders a plain `<a>`, so it works with no hydration.
+ * hue), `quiet` for standing navigation (muted, set in the labelling face, and foreground with an
+ * underline on hover), `label-link` for a link acting as a label (inherits its colour, underlines
+ * on hover, sets no type of its own), and `graphic` for an anchor whose child is not text (paints
+ * nothing, so a mark keeps its own colour). It renders a plain `<a>`, so it works with no hydration.
  */
 export declare const Link: FunctionComponent<ILinkProps>;
 export {};

package/dist/types/Interaction/TextArea/TextArea.d.ts

@@ -6,6 +6,11 @@ interface ITextAreaProps {
     /** How the surrounding form reads the value on submit. */
     name: string;
     required?: boolean;
+    /**
+     * How a non-required field says so, in the consuming app's language. Left out, the field carries
+     * no marker at all: the library translates nothing and ships no wording of its own (issue #74).
+     */
+    optionalLabel?: string;
     invalid?: boolean;
     disabled?: boolean;
     defaultValue?: string;

package/dist/types/Layout/Form/Form.d.ts

@@ -11,8 +11,12 @@ interface IFormProps {
     children?: ReactNode;
     /** The actions row - the consumer supplies its own submit Button. */
     actions?: ReactNode;
-    /** Standing note in `idle`/`sending`; the outcome message in `sent`/`failed`. */
-    note?: string;
+    /** Standing note in `idle`/`sending`; the outcome message in `sent`/`failed`. Inline content: a
+     *  sentence, with a Link or emphasis inside it. Form renders the paragraph the note sits in and
+     *  owns its ARIA role, so a node that brings its own block element - a second `<p>` - is unnested
+     *  by the parser and the text leaves the region carrying that role. A node that renders nothing
+     *  (`null`, `false`, an omitted prop) is no note: the paragraph is not rendered at all. */
+    note?: ReactNode;
     testId?: string;
 }
 /**
@@ -24,8 +28,8 @@ interface IFormProps {
  * `sent` drops the fields and actions so a completed submission cannot be resubmitted, while the
  * `<form>` itself is retained in every state so the DOM shape is stable across a runtime change.
  *
- * The note's text is always the consumer's; Form chooses only its element and ARIA role. `sent` is
- * the outcome message, so a `sent` with no `note` is a programmer error and throws.
+ * The note's content is always the consumer's; Form chooses only its element and ARIA role. `sent`
+ * is the outcome message, so a `sent` with no `note` is a programmer error and throws.
  */
 export declare const Form: FunctionComponent<IFormProps>;
 export {};

package/dist/types/Layout/Header/Header.d.ts

@@ -21,7 +21,14 @@ export interface IHeaderProps extends VariantProps<typeof header> {
  *
  * @Guarantees — enforced on every render
  * - The header is set at the label role and carries no size of its own: `font-secondary text-label
- *   tracking-label text-muted`, so it never grows past that role whatever the page font size.
+ *   leading-label tracking-label text-muted`, so it never grows past that role whatever the page font size.
+ * - The nav's line box is the library's own rather than the consuming document's: the header leads
+ *   itself at the label role, so the height it declares for its slot is the height it renders.
+ * - The standing slot is floored, never fixed: its minimum height is that same line box - the label
+ *   role's size times its leading - its minimum width is `--standing-min-width`, and its contents are
+ *   centred. Standing content inside both floors leaves the bar the same height from route to route,
+ *   so a place name on one page and a mark on another do not move the shell; content past either floor
+ *   grows the slot, on one line, and is never clamped or wrapped.
  * - A nav item marked `aria-current="page"` renders at `foreground` whatever supplied it - the treatment
  *   keys on the attribute, not on `Link`, so it holds against a bare anchor or any component.
  * - The shell's air is one value above, below and between: `--space-region` vertically and between nav
@@ -29,6 +36,18 @@ export interface IHeaderProps extends VariantProps<typeof header> {
  * - It is never sticky and needs no JavaScript: there is no `sticky` variant and nothing to hydrate.
  * - Omitting `navName` emits no `aria-label` at all, not an empty one.
  *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - A mark that should *fill* the standing slot is given a **definite width** by whoever placed it -
+ *   `width: var(--standing-min-width)` on the element wrapping it, so the mark and the floor move
+ *   together when a theme re-points the token. Measured against a `viewBox`-only SVG, the common
+ *   shape: it has no intrinsic width to fill from, and `width: 100%` cannot resolve against the slot's
+ *   indefinite basis - so a mark told to fill that way renders at its intrinsic width instead (300px in
+ *   a slot floored at 120px, against 120px on the place-name route) and the floor stops governing,
+ *   which is the jump between routes the floor exists to remove. A definite width holds at any bar
+ *   width; `flex: 1 1 0; min-width: 0` only collapses the mark when the bar is already out of room, so
+ *   it is not the rule to reach for. The library cannot apply either rule for you: the same width on a
+ *   place name would clamp the name and wrap it.
+ *
  * @UXGuidelines
  * - Name the nav with `navName` once the page has more than one navigation landmark - a footer nav will
  *   be the second, and two unnamed navs are indistinguishable to a screen-reader user.

package/dist/types/Layout/Hero/Hero.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const hero: (props?: ({
-    place?: "center" | "start" | "between" | null | undefined;
+    place?: "start" | "between" | "center" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface IHeroProps extends VariantProps<typeof hero> {
     /** The fold's one opaque slot. Rendered unmodified: a poster composes a mark, an `H1` lead and a foot
@@ -32,12 +32,14 @@ export interface IHeroProps extends VariantProps<typeof hero> {
  *   bleed, the band, the gutter and the region. `Hero` imports no component and adds none of these.
  *
  * @UXGuidelines
- * - Cap the lead at `--measure-display`, not at a caption's width, and apply it to your own lead - not
- *   here, since capping the slot would cap the mark too. Measured on the lockup that prompted this: at
- *   24ch a one-sentence lead set five lines and became a second block competing with the mark; at 36ch it
- *   sets three and reads as the mark's caption. This is the one place where copy length is a layout
- *   parameter - a hero whose lead sentence can vary in length needs its measure chosen against the real
- *   sentence, not a rule of thumb.
+ * - The lead is capped at `--measure-display`, and `H1` is what carries the cap - place one in the slot
+ *   and the bound comes with it (#87). The slot itself stays uncapped, because capping it would cap the
+ *   mark too. Measured on the lockup that prompted this: at 24ch a one-sentence lead set five lines and
+ *   became a second block competing with the mark; at 36ch, where the token sits, it sets three and reads
+ *   as the mark's caption. This is the one place where copy length is a layout parameter, and the token
+ *   is one value for the whole product - so a hero whose lead runs longer than that measurement assumed
+ *   is a reason to re-measure `--measure-display` against the real sentence, which moves every `H1` with
+ *   it, and never a reason to cap that one hero by hand.
  * - A hero built on a wide lockup is a desktop bet by construction. A 15-character lockup can only be as
  *   wide as the phone, so at 390px the scale contrast between mark and lead is capped by the viewport
  *   rather than chosen - roughly 2:1, against roughly 6:1 at 1440.

package/dist/types/Layout/Section/Section.d.ts

@@ -23,10 +23,17 @@ export interface ISectionProps extends VariantProps<typeof section> {
  * - A `bleed="full"` section drops the gutter and runs edge to edge; the vertical band is kept on both
  *   bleed variants, and the join spans the full width of either.
  * - An unnamed section is not a landmark: it emits no `aria-label` and is inert to assistive technology.
+ * - The section is a positioning context, under either bleed, so a consumer may place absolutely-positioned
+ *   decoration against its edges - including the join above it, the one edge only a section knows. It sets
+ *   no offset and no `z-index`, so it is not a stacking context and decoration at a negative `z-index`
+ *   still resolves against an outer one.
  *
  * @CallerMustEnsure
  * - Where `name` is given it matches the section's visible heading. The component labels the region with
  *   that string because it cannot reach the heading's id to reference it with `aria-labelledby` instead.
+ * - A descendant meant to position against an ancestor *outside* the section is given its own positioned
+ *   wrapper, since the section is now the nearer positioned ancestor and takes the anchor. The
+ *   re-anchoring is silent - no error and no warning, only a descendant that lands somewhere else.
  *
  * @UXGuidelines
  * - On a page with no borrowed proof - no logos, no testimonials, no credits - a gap between blocks reads

package/dist/types/Theme/Palette.d.ts

@@ -38,14 +38,35 @@ export type PaletteTokens = {
      *  because a failed image renders its alt text on this plate and that text must stay legible. That
      *  keeps it near `surface` rather than a mid grey. */
     backing: string;
-    /** The main call-to-action fill. */
+    /** The main call-to-action fill. A filled control draws no border, so the fill is the only thing
+     *  separating the control from the surface - what `controlBorder` is for an unfilled one.
+     *  Constraint (WCAG 2.2 SC 1.4.11): at least 3:1 against `surface` in the same theme,
+     *  `primaryHover` included, since a hovered control has to stay identifiable too. A second
+     *  constraint governs this value and `primaryHover` from the other side, stated on
+     *  `primaryForeground` - the ink they carry - rather than restated here. */
     primary: string;
     primaryHover: string;
-    /** Text and icons drawn on top of `primary`. */
+    /** Text and icons drawn on top of `primary`. Constraint (WCAG 2.2 SC 1.4.3): at least 4.5:1
+     *  against both `primary` and `primaryHover` in the same theme, hover included, since a hovered
+     *  control has to stay readable too. Button text is normal-weight at the `body` role, so it takes
+     *  the text threshold rather than the 3:1 large-text allowance. This is what makes the ink follow
+     *  the theme where the fills' own roles do not: a fill light enough to clear 3:1 against a dark
+     *  surface is too light to carry near-white text, so the ink sits at the *surface's* end of the
+     *  neutral range in each theme. Not required against `disabled` or `disabledHover` - a disabled
+     *  control is an inactive user interface component, which SC 1.4.3 exempts. */
     primaryForeground: string;
-    /** The alternative action fill, for choices that sit beside a primary one. */
+    /** The alternative action fill, for choices that sit beside a primary one. Filled like `primary`
+     *  and so identified the same way. Constraint (WCAG 2.2 SC 1.4.11): at least 3:1 against
+     *  `surface` in the same theme, `secondaryHover` included. A second constraint governs this value
+     *  and `secondaryHover` from the other side, stated on `secondaryForeground`. */
     secondary: string;
     secondaryHover: string;
+    /** Text and icons drawn on top of `secondary`. Constraint (WCAG 2.2 SC 1.4.3): at least 4.5:1
+     *  against both `secondary` and `secondaryHover` in the same theme, hover included, since a
+     *  hovered control has to stay readable too. Not required against `disabled` or `disabledHover` -
+     *  a disabled control is an inactive user interface component, which SC 1.4.3 exempts. Why the
+     *  threshold is 4.5 and not 3, and why this makes the ink follow the theme: see
+     *  `primaryForeground`, which carries the same rule for the other ramp. */
     secondaryForeground: string;
     /** The tone a control takes when it cannot be interacted with - its fill, or its border when
      *  the fill is transparent. */
@@ -68,11 +89,39 @@ export type PaletteTokens = {
     error: string;
     info: string;
 };
+/**
+ * The ink follows the theme, and that is what set the eight fill and ink values across both sets
+ * (issue #93). Solve the window a fill has to sit in - at least 3:1 against its surface (#78) and
+ * at least 4.5:1 against the ink drawn on it - and it comes out lopsided: a near-white ink is
+ * unbounded above in light and leaves a window just 1.26x wide in dark, and a near-black ink is the
+ * exact inverse. The reason is structural - in a dark theme a fill has to be light enough to
+ * separate from a near-black surface, and a light fill wants dark text - so pinning the ink
+ * near-white in both themes asks a dark fill to be both at once. That 1.26x has to hold two values,
+ * rest and hover, where what shipped before it stepped 1.35x and 1.23x here and 1.35x and 1.48x in
+ * dark. Letting the ink invert instead puts every value on a stock ramp step, with hover steps of
+ * 1.25x and 1.27x here and 1.56x and 1.48x in dark.
+ *
+ * Two routes were rejected, and they are what a reader arriving here is most likely to re-propose:
+ * - Keep one near-white ink in both themes and move the fills. It clears 4.5:1, but caps the dark
+ *   hover at that same 1.26x - gutting the state #78 constrained hover in order to keep.
+ * - Give each ramp its own ink, the same in both themes. It clears 4.5:1 only against pure black:
+ *   against `#0f172a`, the dark set's own `surface`, sky-600 lands at 4.36 and fails. It also buys
+ *   a light theme with white text on one button and black on the one beside it.
+ */
 export declare const light: PaletteTokens;
 /**
- * Dark reverses the ramp the fills are drawn from: `primary` takes the step that light uses for
- * its hover, and hovering steps *up* into light. That is what the components' old
+ * Dark reverses the direction the fills step: it sits higher up the ramp than light does and hovers
+ * *up* into lighter still, where light sits lower and hovers down. That is what the components' old
  * `dark:bg-primary-600 dark:hover:bg-primary-500` pair encoded, moved here so it is stated once
- * for the whole system instead of repeated per component.
+ * for the whole system instead of repeated per component. The two sets no longer share a step, since
+ * each theme's pair has to clear its own ink as well as its own surface (issue #93).
+ *
+ * The ink inverts with the ramp: slate-950 under these lighter fills, where light takes slate-50
+ * under its darker ones. The pair is the two ends of the one neutral ramp the rest of the palette is
+ * already built from - `#f8fafc` is slate-50, `surface` slate-900, `muted` slate-500 - rather than a
+ * new colour arriving for a single job. `#020617` is also the lightest slate step that still admits
+ * violet-500 and sky-600, which is what leaves this set's `secondary` pair unmoved: slate-900 draws
+ * 4.22 and 4.36 against them and fails. Why the ink follows the theme at all, and the two routes
+ * rejected in getting here: see the light set.
  */
 export declare const dark: PaletteTokens;