@juwel-development/design-system 1.0.0 → 2.0.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-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-duration:initial}}}@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-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-lg:.5rem;--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-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-primary-ring:var(--color-primary-ring);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-secondary-ring:var(--color-secondary-ring);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-ring:var(--color-ring);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info)}}@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{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.block{display:block}.contents{display:contents}.inline{display:inline}.inline-flex{display:inline-flex}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--color-border)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-nowrap{text-wrap:nowrap}.text-foreground{color:var(--color-foreground)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.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)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.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}.select-none{-webkit-user-select:none;user-select:none}@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\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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)}.focus-visible\:ring-primary-ring:focus-visible{--tw-ring-color:var(--color-primary-ring)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-secondary-ring:focus-visible{--tw-ring-color:var(--color-secondary-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-ring:#94a3b8;--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-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#475569;--color-disabled-hover:#334155;--color-ring:#64748b;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@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-duration{syntax:"*";inherits:false}
+@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)}.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\.7em\]:before{content:var(--tw-content);margin-top:.7em}.before\:h-\[var\(--tick-thickness\)\]:before{content:var(--tw-content);height:var(--tick-thickness)}.before\:w-\[var\(--tick-length\)\]:before{content:var(--tw-content);width:var(--tick-length)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.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;--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:""}

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

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const brandmark: (props?: ({
+    cut?: "full" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IBrandmarkProps extends VariantProps<typeof brandmark> {
+    /**
+     * What the mark says. Required so the decision is forced at the call site. Empty string is a
+     * legitimate value - a mark beside the product name already set as text - and is not rejected.
+     */
+    name: string;
+    /** The consumer's inline SVG. */
+    children?: ReactNode;
+    testId?: string;
+}
+/**
+ * Names a consumer-supplied inline mark and makes its cut explicit. It hosts no asset: the SVG is the
+ * consumer's, passed as `children` and rendered unmodified. A brand mark is text that has stopped
+ * being text - drawn as outlines, it carries no accessible name of its own - so naming it is the job,
+ * and the one thing a consumer most reliably gets wrong.
+ *
+ * `role="img"` makes the element a leaf in the accessibility tree, so nothing inside the SVG - a stray
+ * `<title>`, `<text>` or `<desc>` - contributes, and the mark is announced exactly once.
+ *
+ * @Guarantees — enforced on every render
+ * - A named mark (`name` non-empty) renders `role="img"` and `aria-label={name}`, announced exactly
+ *   once and never through its SVG's own contents.
+ * - A decorative mark (`name=""`) renders `aria-hidden="true"` with no `role` and no `aria-label`, so
+ *   it leaves the accessibility tree entirely - an unnamed `role="img"` would be worse than absent.
+ * - The cut in use is always stated and always readable from the DOM, via required `cut` -> `data-cut`.
+ * - `children` renders unmodified; the component adds nothing to and strips nothing from the SVG, and
+ *   sets no colour, dimension, margin or link of its own.
+ *
+ * @UXGuidelines
+ * - One mark is not one asset - do the reduction row before you accept a mark. Measured on the lockup
+ *   that prompted this: a 15-character full lockup is illegible at 32px, while its accent dot survives
+ *   to 17px. A single SVG used at every size is the default and it is usually wrong. Expect at least
+ *   two cuts out of any mark, which is why `cut` is required. There is no width-based swapping and no
+ *   threshold token: a threshold is one wordmark's measurement, and keeping both cuts in the DOM to
+ *   swap in CSS doubles the payload of the element inlined to keep LCP off the network. The component
+ *   renders whichever single cut it is given; which slot it is in is known by whoever places it.
+ * - The sanctioned accent, and how narrow it is. A fill-only colour that fails 3:1 as text may sit
+ *   inside a letterform only where it carries no information and the glyph reads without it - a lifted
+ *   `i`-dot qualifies because the `i` keeps its stem. The library sets no fill inside a consumer's
+ *   mark and cannot check this; it is guidance to whoever draws the mark, not a token constraint.
+ * - Inline the SVG rather than requesting it where the mark is the largest object on the first screen
+ *   and therefore the LCP element - inlining means LCP depends on no font and no network round-trip.
+ */
+export declare const Brandmark: FunctionComponent<IBrandmarkProps>;
+export {};

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

@@ -0,0 +1,26 @@
+import type { FunctionComponent, ReactNode } from 'react';
+interface IChecklistRootProps {
+    children?: ReactNode;
+    testId?: string;
+}
+interface IChecklistItemProps {
+    children?: ReactNode;
+}
+/**
+ * A list of things to confirm or prepare, composed from its two members. Each item is hairline-separated
+ * and marked by a short rule sitting in the left indent - never a checkbox, bullet, dingbat or icon.
+ * This is a reading device, not a form control: it renders no interactive checkbox and owns no state.
+ *
+ * @Guarantees — enforced on every render
+ * - `Root` renders a `ul` carrying `role="list"`; `Item` renders an `li`. Works with JavaScript off.
+ * - The marker is a `::before` rule reading `--color-rule`, `--tick-length` and `--tick-thickness` - no
+ *   glyph, character, dingbat, icon or `::marker` content, and nothing is announced on each item.
+ * - Items render at the body type role in `foreground`; they are content, not annotation.
+ * - Hairlines in `border` separate items, with no rule above the first or below the last, so the list
+ *   is open at both ends. The between-item gap reads `--space-stack`.
+ */
+export declare const Checklist: {
+    readonly Root: FunctionComponent<IChecklistRootProps>;
+    readonly Item: FunctionComponent<IChecklistItemProps>;
+};
+export {};

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

@@ -0,0 +1,41 @@
+import type { FunctionComponent, ReactNode } from 'react';
+interface IDefinitionListRootProps {
+    children?: ReactNode;
+    testId?: string;
+}
+interface IDefinitionListItemProps {
+    children?: ReactNode;
+    testId?: string;
+}
+interface IDefinitionListTermProps {
+    children?: ReactNode;
+}
+interface IDefinitionListDescriptionProps {
+    children?: ReactNode;
+}
+/**
+ * A typeset list of terms and their descriptions, where the rules are the layout. The consumer
+ * composes the list from the four members; no member takes a data array. `Root` renders `<dl>`,
+ * `Item` the grouping `<div>` (valid inside `<dl>` for exactly this purpose), `Term` a `<dt>`,
+ * `Description` a `<dd>`.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders semantic `dl`/`div`/`dt`/`dd`, and works with JavaScript off.
+ * - The term is fixed to the subtitle type role and exposes no size prop or variant (docs/adr/0005).
+ * - The description is body, muted, and capped at `--measure`; the term carries no measure cap.
+ * - A hairline sits above the first item and below every item, in `border`, and the block closes at
+ *   the foot. No card, box, fill, icon or bullet - it reads from the rules alone.
+ * - Single column below 64rem with the term above its description; two columns at and above it with a
+ *   fixed term track and baseline-aligned rows. The switch is a media query, not a prop.
+ *
+ * @UXGuidelines
+ * - Several `Term`s may share one `Description`; keep them inside one `Item` so the term column
+ *   stays intact.
+ */
+export declare const DefinitionList: {
+    readonly Root: FunctionComponent<IDefinitionListRootProps>;
+    readonly Item: FunctionComponent<IDefinitionListItemProps>;
+    readonly Term: FunctionComponent<IDefinitionListTermProps>;
+    readonly Description: FunctionComponent<IDefinitionListDescriptionProps>;
+};
+export {};

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

@@ -0,0 +1,52 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent } from 'react';
+declare const figure: (props?: ({
+    ratio?: "portrait" | "square" | "landscape" | "wide" | null | undefined;
+    focus?: "center" | "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IFigureProps extends VariantProps<typeof figure> {
+    /** The image source. Produce it through the consuming build's image pipeline - see @UXGuidelines. */
+    src: string;
+    /** The image's text alternative. Empty string when the image is decorative, or when `caption`
+     *  already names it - a non-empty alt beside a caption reads the same content to a screen reader
+     *  twice. */
+    alt: string;
+    /** The source's intrinsic pixel width. */
+    width: number;
+    /** The source's intrinsic pixel height. */
+    height: number;
+    /** Responsive delivery. One decision with two parts, so they are one prop: a `srcSet` with `w`
+     *  descriptors and no `sizes` makes the browser assume 100vw and download the largest candidate. */
+    responsive?: {
+        srcSet: string;
+        sizes: string;
+    };
+    /** Names the image. Its presence is what makes this a `figure`. */
+    caption?: string;
+    /** Whether this image is visible when the page first paints. Set it on a hero. */
+    priority?: boolean;
+    testId?: string;
+}
+/**
+ * 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.
+ *
+ * @Guarantees — enforced on every render
+ * - Every image reserves its box before it loads: an intrinsic `width`/`height`, and a locked
+ *   `aspect-ratio` once a `ratio` is given.
+ * - `decoding="async"` always; `loading` follows `priority` (`eager`+`fetchpriority="high"` when set,
+ *   `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.
+ *
+ * @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.
+ */
+export declare const Figure: FunctionComponent<IFigureProps>;
+export {};

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

@@ -0,0 +1,54 @@
+import type { FunctionComponent, ReactNode } from 'react';
+interface IRailRootProps {
+    children?: ReactNode;
+    testId?: string;
+}
+interface IRailIndexProps {
+    /** The filing numeral as a string - `02`, not `2`. Zero-padding is a brand decision, so the caller
+     *  writes the exact glyphs. Omitted, the index renders its name alone with no empty numeral element. */
+    number?: string;
+    children?: ReactNode;
+    testId?: string;
+}
+interface IRailContentProps {
+    children?: ReactNode;
+    testId?: string;
+}
+/**
+ * A section filed beside a sticky index: the section's matter in the wide track and, at and above 64rem,
+ * a persistent index in the narrow one. Composed from three members - `Root` renders the two-track grid,
+ * `Index` the sticky filing device, `Content` the opaque slot for the matter. `Root` is a `div` with no
+ * landmark; the section's heading lives in `Content`, and `Index` repeats it only as a visual marker.
+ *
+ * @Guarantees — enforced on every render
+ * - `Index` persists beside its section at and above 64rem and reads as a filed heading above the text
+ *   below it. The switch is a media query, not a prop.
+ * - `Index` is decorative to assistive technology (`aria-hidden`): it repeats the heading the content
+ *   track carries and does not replace it.
+ * - The index numeral is muted with a hairline under it in `border`; the name is foreground; both sit at
+ *   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.
+ * - No margin, max-width, fill, box or vertical rule; no `tabular-nums` or `font-variant-numeric`.
+ * - It needs no JavaScript: `position: sticky` is CSS.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - `Rail.Index` is a direct child of `Rail.Root`: `position: sticky` positions against the grid
+ *   container, so the index sticks for the height of its row only when Root is its parent.
+ * - The section's heading lives in `Rail.Content`. `Index` is aria-hidden and carries no heading, so a
+ *   consumer that files a section only in the index leaves it without an accessible name.
+ *
+ * @UXGuidelines
+ * - 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
+ *   answer is a column; whether that column should also be an index is a separate decision.
+ * - Do not place a rail on a hero or a full-bleed section. A bleeding section drops the gutter, so there
+ *   is no inset for an index track to stand in, and a poster is not a filed section.
+ */
+export declare const Rail: {
+    readonly Root: FunctionComponent<IRailRootProps>;
+    readonly Index: FunctionComponent<IRailIndexProps>;
+    readonly Content: FunctionComponent<IRailContentProps>;
+};
+export {};

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

@@ -0,0 +1,61 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const tableCell: (props?: ({
+    variant?: "note" | "value" | null | undefined;
+    align?: "center" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableHeaderCell: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ITableRootProps {
+    /** The table's accessible name. Rendered as the first child; always present. */
+    caption: string;
+    /** What the note column is. Governs narrow-viewport behaviour; omit when there is none. */
+    notes?: 'supplementary' | 'content';
+    children?: ReactNode;
+    testId?: string;
+}
+interface ITableSectionProps {
+    children?: ReactNode;
+}
+interface ITableRowProps {
+    children?: ReactNode;
+    testId?: string;
+}
+interface ITableCellProps extends VariantProps<typeof tableCell> {
+    children?: ReactNode;
+}
+interface ITableHeaderCellProps extends VariantProps<typeof tableHeaderCell> {
+    /** Explicit, never inferred from Head/Body position - inference would need render-time context. */
+    scope: 'row' | 'col';
+    children?: ReactNode;
+}
+/**
+ * A composable data table where the rules are the layout. The consumer composes the table from the
+ * seven members; no member takes a data array. A specification / details table is the shape it is
+ * built for - a row label, a value in tabular figures, and a note.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders semantic `table`/`thead`/`tbody`/`tfoot`/`tr`/`th`/`td`, and works with JavaScript off.
+ * - `Root` renders its required `caption` as the table's first child, so every table is named.
+ * - The block reads as a table from two rule weights alone: the heavier `rule` above the first row,
+ *   `border` hairlines between rows, and no bottom rule on the last. No cell borders, fill, zebra or hover.
+ * - `Cell variant="value"` sets tabular figures; `variant="note"` does not. Both at the 15px small role.
+ * - `HeaderCell` emits the `scope` it is given; none is inferred.
+ *
+ * @UXGuidelines
+ * - `align` is a cell property but reads as a column one: set the same `align` on a `HeaderCell` and
+ *   every `Cell` beneath it, and keep them in sync - the component cannot align a column for you.
+ * - Choose `notes` by what the note column *is*: `"supplementary"` drops it below 48rem for everyone
+ *   (out of the accessibility tree too); `"content"` stacks each row; omit it when there is no note.
+ */
+export declare const Table: {
+    readonly Root: FunctionComponent<ITableRootProps>;
+    readonly Head: FunctionComponent<ITableSectionProps>;
+    readonly Body: FunctionComponent<ITableSectionProps>;
+    readonly Footer: FunctionComponent<ITableSectionProps>;
+    readonly Row: FunctionComponent<ITableRowProps>;
+    readonly HeaderCell: FunctionComponent<ITableHeaderCellProps>;
+    readonly Cell: FunctionComponent<ITableCellProps>;
+};
+export {};

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

@@ -0,0 +1,26 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const eyebrow: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IEyebrowProps extends VariantProps<typeof eyebrow> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * The eyebrow / caption device, a `p` at the label type role: the secondary family, the label size
+ * and a fixed +0.14em tracking, muted. The single primitive for the one *unowned* use of the device
+ * — a short tracked line standing above a section heading.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders a `p`, reading `--font-secondary`, sized by `--text-label` and tracked by
+ *   `--tracking-label`, at weight 500.
+ * - `color` selects the `muted` (default) or `foreground` role; nothing else paints text.
+ * - Sets neither `font-variant-caps` nor `font-variant-numeric` under any prop.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - This is **not a form label**: it renders no `htmlFor` and labels no control. A labelled control
+ *   uses `Input`/`TextArea`, which label themselves.
+ */
+export declare const Eyebrow: FunctionComponent<IEyebrowProps>;
+export {};

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

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const h1: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IH1Props extends VariantProps<typeof h1> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * The page-title heading, an `h1` at the display type role.
+ *
+ * @Guarantees — enforced on every render
+ * - 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.
+ * - `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.
+ * - 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`.
+ */
+export declare const H1: FunctionComponent<IH1Props>;
+export {};

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

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const h2: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IH2Props extends VariantProps<typeof h2> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * The section heading, an `h2` at the title type role.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders an `h2`; its outline level and the title role are one choice, not two (docs/adr/0005).
+ * - Reads `--font-primary`, sized by `--text-title`, led by `--leading-title` and optically corrected
+ *   by `--tracking-optical` — the title role is the smallest role that carries it, so `H3` and below
+ *   take none.
+ * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Heading levels descend without skipping — an `h2` sits under an `h1`, not under an `h3`.
+ */
+export declare const H2: FunctionComponent<IH2Props>;
+export {};

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

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const h3: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IH3Props extends VariantProps<typeof h3> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * The subsection heading, an `h3` at the subtitle type role. The last of the three sized steps;
+ * levels below it share the body size and separate by weight.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders an `h3`; its outline level and the subtitle role are one choice, not two (docs/adr/0005).
+ * - Reads `--font-primary`, sized by `--text-subtitle` and led by `--leading-subtitle`.
+ * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Heading levels descend without skipping — an `h3` sits under an `h2`, not under an `h1`.
+ */
+export declare const H3: FunctionComponent<IH3Props>;
+export {};

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

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const h4: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IH4Props extends VariantProps<typeof h4> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * The first of the weight-separated headings, an `h4` at the body size, rendered bold.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders an `h4`; its outline level and the body role are one choice, not two (docs/adr/0005).
+ * - Reads `--font-primary`, sized by `--text-body`, and is bold so it stands apart from a paragraph.
+ * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Heading levels descend without skipping — an `h4` sits under an `h3`, not under an `h2`.
+ */
+export declare const H4: FunctionComponent<IH4Props>;
+export {};

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

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const h5: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IH5Props extends VariantProps<typeof h5> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * A weight-separated heading, an `h5` at the body size, rendered semibold — one step lighter than
+ * `h4`.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders an `h5`; its outline level and the body role are one choice, not two (docs/adr/0005).
+ * - Reads `--font-primary`, sized by `--text-body`, semibold so it stands apart from a paragraph.
+ * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Heading levels descend without skipping — an `h5` sits under an `h4`, not under an `h3`.
+ */
+export declare const H5: FunctionComponent<IH5Props>;
+export {};

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

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const h6: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IH6Props extends VariantProps<typeof h6> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * The lightest heading, an `h6` at the body size, rendered medium — the deepest level the ladder
+ * offers, because the weight lever runs out here.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders an `h6`; its outline level and the body role are one choice, not two (docs/adr/0005).
+ * - Reads `--font-primary`, sized by `--text-body`, medium so it stands apart from a paragraph.
+ * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Heading levels descend without skipping — an `h6` sits under an `h5`, not under an `h4`.
+ */
+export declare const H6: FunctionComponent<IH6Props>;
+export {};

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

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const p: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IPProps extends VariantProps<typeof p> {
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * A paragraph of body copy, a `p` at the body type role. Unbounded — usable in a form, a card or a
+ * table cell — because the reading measure belongs to whatever owns the reading column (Prose #21).
+ *
+ * @Guarantees — enforced on every render
+ * - Renders a `p`, reading `--font-primary`, sized by `--text-body` and led by `--leading-body`.
+ * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Where line length matters, place the paragraph inside whatever bounds the reading measure; `P`
+ *   does not constrain its own width.
+ * - For a paragraph inside a reading column, reach for `Prose.Body`, which is measure-bounded by its
+ *   `Prose.Root`; `P` is for a paragraph with no reading column around it.
+ */
+export declare const P: FunctionComponent<IPProps>;
+export {};

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

@@ -0,0 +1,42 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode } from 'react';
+declare const proseBody: (props?: ({
+    color?: "foreground" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface IProseRootProps {
+    children?: ReactNode;
+    testId?: string;
+}
+interface IProseLedeProps {
+    children?: ReactNode;
+}
+interface IProseBodyProps extends VariantProps<typeof proseBody> {
+    children?: ReactNode;
+}
+interface IProseTailProps {
+    children?: ReactNode;
+}
+/**
+ * A measure-bounded reading block: a lede, body paragraphs and an optional stepped-down muted tail,
+ * all capped at the reading measure - including inside a wider grid cell, which follows from `Root`
+ * bounding the column. Composed from the four members; the consumer supplies the copy.
+ *
+ * @Guarantees — enforced on every render
+ * - `Root` renders a `div` (never a `section`: it owns no landmark and no heading), capped at
+ *   `--measure`, setting no font-size so the `ch` measure resolves against inherited body type.
+ * - `Root` stacks its children on `--space-stack` and takes no outer margin: the page owns the
+ *   rhythm around the block, and the air the block wants is at its edges and inside the type.
+ * - `Lede` renders a `p` at the lede role; `Body` at the body role with a `foreground`/`muted`
+ *   `color`; `Tail` at the small role, muted. No drop cap or other invented device.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Use `Prose.Body` for a paragraph inside this reading column; for a paragraph with no reading
+ *   column around it - in a form, a card, a table cell - use `P` instead.
+ */
+export declare const Prose: {
+    readonly Root: FunctionComponent<IProseRootProps>;
+    readonly Lede: FunctionComponent<IProseLedeProps>;
+    readonly Body: FunctionComponent<IProseBodyProps>;
+    readonly Tail: FunctionComponent<IProseTailProps>;
+};
+export {};