@juwel-development/design-system 3.0.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +31 -0
  2. package/dist/design-system.js +219 -128
  3. package/dist/index.css +1 -1
  4. package/dist/types/Arrangement/Cluster/Cluster.d.ts +50 -0
  5. package/dist/types/Arrangement/Stack/Stack.d.ts +51 -0
  6. package/dist/types/Display/Figure/Figure.d.ts +21 -4
  7. package/dist/types/Display/Rail/Rail.d.ts +6 -0
  8. package/dist/types/Display/Typography/H1/H1.d.ts +7 -1
  9. package/dist/types/Display/Typography/Note/Note.d.ts +35 -0
  10. package/dist/types/Interaction/Link/Link.d.ts +4 -4
  11. package/dist/types/Layout/Cover/Cover.d.ts +48 -0
  12. package/dist/types/Layout/Form/Form.d.ts +8 -4
  13. package/dist/types/Layout/Header/Header.d.ts +20 -1
  14. package/dist/types/Layout/Hero/Hero.d.ts +9 -7
  15. package/dist/types/Layout/Section/Section.d.ts +7 -0
  16. package/dist/types/Theme/Palette.d.ts +55 -6
  17. package/dist/types/index.d.ts +4 -0
  18. package/package.json +1 -1
  19. package/src/Arrangement/Cluster/Cluster.tsx +80 -0
  20. package/src/Arrangement/Stack/Stack.tsx +81 -0
  21. package/src/Display/Figure/Figure.tsx +48 -7
  22. package/src/Display/Rail/Rail.tsx +6 -0
  23. package/src/Display/Typography/H1/H1.tsx +17 -7
  24. package/src/Display/Typography/Note/Note.tsx +56 -0
  25. package/src/Interaction/Button/Button.tsx +4 -1
  26. package/src/Interaction/Input/Input.tsx +17 -6
  27. package/src/Interaction/Link/Link.tsx +9 -5
  28. package/src/Interaction/TextArea/TextArea.tsx +17 -6
  29. package/src/Layout/Cover/Cover.tsx +85 -0
  30. package/src/Layout/Form/Form.tsx +24 -8
  31. package/src/Layout/Header/Header.tsx +37 -4
  32. package/src/Layout/Hero/Hero.tsx +10 -6
  33. package/src/Layout/PageHead/PageHead.tsx +2 -0
  34. package/src/Layout/Section/Section.tsx +11 -0
  35. package/src/Theme/Palette.ts +63 -14
  36. package/src/Theme/renderTokens.ts +37 -7
  37. package/src/index.ts +4 -0
  38. package/src/tokens.css +29 -10
  39. package/src/tokens.dark.css +25 -6
  40. package/src/tokens.light.css +25 -6
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
- @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-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);--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;--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}.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-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-full{width:100%}.max-w-5xl{max-width:var(--container-5xl)}.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)}.shrink{flex-shrink:1}.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)}: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)))}.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-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--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-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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.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-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-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-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-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:""}
2
+ @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}.my-auto{margin-block: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\(--cover-height\)\]{min-height:var(--cover-height)}.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-action\)\]{max-width:var(--measure-action)}.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;--measure-action:20rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--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:""}
@@ -0,0 +1,50 @@
1
+ import type { VariantProps } from 'class-variance-authority';
2
+ import type { FunctionComponent, ReactNode } from 'react';
3
+ declare const cluster: (props?: ({
4
+ gap?: "stack" | "region" | null | undefined;
5
+ justify?: "start" | "between" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ export interface IClusterProps extends VariantProps<typeof cluster> {
8
+ /** The clustered matter. Rendered unmodified: `Cluster` imposes no anatomy and wraps nothing in an
9
+ * item element. */
10
+ children?: ReactNode;
11
+ testId?: string;
12
+ }
13
+ /**
14
+ * A horizontal arrangement that wraps: children in a row, aligned on their baselines, with a wider
15
+ * gap along a line than between wrapped lines. It owns one arrangement and nothing else - no
16
+ * landmark, no band, no join, no gutter, no fill - and takes no outer space, so whatever holds it
17
+ * owns the rhythm around it.
18
+ *
19
+ * @Guarantees — enforced on every render
20
+ * - It renders a `div` with no landmark role, no `nav` of its own and no margin.
21
+ * - Children wrap onto further lines rather than overflowing or shrinking, at every prop combination.
22
+ * - Children are always aligned on their baselines. These rows mix type at different roles — a nav
23
+ * link at the label role beside a credit line at the small role — and centring them makes the type
24
+ * look mis-set, so this is the arrangement rather than a default to override (docs/adr/0008).
25
+ * - `gap` selects which space role separates items **along a line**: `region` (the default), the gap
26
+ * between one group and the next, or `stack`, the sibling gap between items that belong together.
27
+ * Nothing else — neither the band role, which is vertical padding and never a gap, nor the gutter,
28
+ * which is measured against the screen where these roles are measured against the type.
29
+ * - The gap between **wrapped lines** is always `--space-stack` and no prop can change it: a wrapped
30
+ * line sitting as far from its neighbour as its items sit from each other stops reading as one group.
31
+ * - `justify="start"` (the default) runs the row from the start edge; `justify="between"` distributes
32
+ * it end to end, which is the row with a group at each end.
33
+ * - No literal length and no numbered spacing rung appears in the recipe: every value it emits is a
34
+ * role the token layer already names, so a second brand re-points all of them.
35
+ * - `children` render unmodified, and it needs no JavaScript.
36
+ *
37
+ * @CallerMustEnsure — the component cannot see these and does not check them
38
+ * - A cluster that navigates is wrapped in — or wraps — the caller's own `<nav aria-label="…">`.
39
+ * This component declares no landmark, exactly as `Footer`'s guidance already directs.
40
+ * - The gutter and the vertical band belong to whatever holds it — a `Section`, a `Footer` — and not
41
+ * to a prop here, or two components own one job.
42
+ *
43
+ * @UXGuidelines
44
+ * - `gap="stack"` is the row whose items belong together, as a form's actions do. `gap="region"`
45
+ * separates one group from the next; reach for it when the row's items are not a single set.
46
+ * - `justify="between"` needs two groups to distribute. A row of loose items pushed end to end reads
47
+ * as a gap in the middle rather than as a distribution.
48
+ */
49
+ export declare const Cluster: FunctionComponent<IClusterProps>;
50
+ export {};
@@ -0,0 +1,51 @@
1
+ import type { VariantProps } from 'class-variance-authority';
2
+ import type { FunctionComponent, ReactNode } from 'react';
3
+ declare const stack: (props?: ({
4
+ gap?: "stack" | "region" | null | undefined;
5
+ measure?: boolean | "action" | null | undefined;
6
+ direction?: "split" | "column" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ export interface IStackProps extends VariantProps<typeof stack> {
9
+ /** The stacked matter. Rendered unmodified: `Stack` imposes no anatomy. */
10
+ children?: ReactNode;
11
+ testId?: string;
12
+ }
13
+ /**
14
+ * A vertical arrangement: children in a column, separated by one named space role and optionally
15
+ * bounded by the reading measure or the action column. It owns one axis and one gap and nothing
16
+ * else - no landmark, no heading, no band, no join, no gutter, no fill - and takes no outer space,
17
+ * so whatever holds it owns the rhythm around it.
18
+ *
19
+ * @Guarantees — enforced on every render
20
+ * - It renders a `div` with no landmark role, no heading and no margin of its own.
21
+ * - `gap` selects which space role separates the children: `stack` (the default), the gap between
22
+ * siblings within one block, or `region`, the gap between groups of blocks. Nothing else — a
23
+ * spacing neither role expresses is a request for a measurement (docs/adr/0003, docs/adr/0004).
24
+ * - `measure` bounds the element to `--measure`, the reading column; omitted, the column is
25
+ * unbounded, which is right wherever the children are not running text. It sets no font-size, so
26
+ * a `ch`-counted measure keeps resolving against inherited body type.
27
+ * - `measure="action"` bounds the element to `--measure-action`, the action column - the width a
28
+ * stack of full-width controls fills, so they read as one unit and their labels align - and fills
29
+ * its slot up to that bound, so a centering frame cannot shrink it to its widest label. The two
30
+ * options answer different questions about what the column holds - text or controls - never how
31
+ * wide it should be (docs/adr/0008, Amendments).
32
+ * - `direction="column"` (the default) never changes axis. `direction="split"` is the same column
33
+ * turning into a row at and above 64rem, its children aligned to their start edge rather than
34
+ * stretched. It is the only viewport-dependent behaviour here, and it is named for the job: the
35
+ * breakpoint is an implementation detail and is not part of the vocabulary.
36
+ * - No literal length and no numbered spacing rung appears in the recipe: every value it emits is a
37
+ * role the token layer already names, so a second brand re-points all of them.
38
+ * - `children` render unmodified, and it needs no JavaScript.
39
+ *
40
+ * @CallerMustEnsure — the component cannot see these and does not check them
41
+ * - The gutter and the vertical band belong to the `Section` around it —
42
+ * `<Section><Stack>…</Stack></Section>` — and not to a prop here, or two components own one job.
43
+ * - A stack holding running text is a reading block: reach for `Prose` instead, which is this
44
+ * arrangement plus the contract that says the content is prose.
45
+ *
46
+ * @UXGuidelines
47
+ * - `gap="region"` separates groups of blocks, not blocks. A region-sized gap between two paragraphs
48
+ * reads as missing content — the argument `Section` makes for joining rather than gapping.
49
+ */
50
+ export declare const Stack: FunctionComponent<IStackProps>;
51
+ export {};
@@ -1,5 +1,5 @@
1
1
  import type { VariantProps } from 'class-variance-authority';
2
- import type { FunctionComponent } from 'react';
2
+ import type { FunctionComponent, ReactNode } from 'react';
3
3
  declare const figure: (props?: ({
4
4
  ratio?: "portrait" | "square" | "landscape" | "wide" | null | undefined;
5
5
  focus?: "center" | "top" | "bottom" | "left" | "right" | null | undefined;
@@ -23,6 +23,10 @@ export interface IFigureProps extends VariantProps<typeof figure> {
23
23
  };
24
24
  /** Names the image. Its presence is what makes this a `figure`. */
25
25
  caption?: string;
26
+ /** A slot over the image frame - the consumer's own decoration, rendered unmodified as a sibling of
27
+ * the image inside a positioning context. Having something to render is what makes that context
28
+ * exist; where inside it the overlay sits is expressed on the consumer's own element. */
29
+ overlay?: ReactNode;
26
30
  /** Whether this image is visible when the page first paints. Set it on a hero. */
27
31
  priority?: boolean;
28
32
  testId?: string;
@@ -30,7 +34,9 @@ export interface IFigureProps extends VariantProps<typeof figure> {
30
34
  /**
31
35
  * An aspect-locked image frame with a focal point and an optional caption. The caption decides the
32
36
  * element: with one, the image is wrapped in a `figure` with a `figcaption`; without one, the image
33
- * renders alone, making no self-contained claim a thumbnail or logo should not make.
37
+ * renders alone, making no self-contained claim a thumbnail or logo should not make. An `overlay`
38
+ * decides a second element the same way: with one, the image sits in a positioning context the
39
+ * overlay can be placed against; without one, there is no wrapper at all.
34
40
  *
35
41
  * @Guarantees — enforced on every render
36
42
  * - 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> {
39
45
  * `lazy` otherwise), so an above-the-fold hero is never deferred.
40
46
  * - A `figure` element appears only where there is a caption.
41
47
  * - `srcset` never ships without `sizes`: `responsive` bundles the two so one cannot go without the other.
48
+ * - An `overlay` renders unmodified: the component adds no class and no ARIA attribute to it, strips
49
+ * nothing from it, and paints nothing on the frame - the wrapper it renders carries the positioning
50
+ * context and no other property, so the image fills its container exactly as it does without one.
51
+ *
52
+ * @CallerMustEnsure — the component cannot see these and does not check them
53
+ * - A decorative overlay carries the consumer's own `aria-hidden="true"`. The library will not add it:
54
+ * a slot it modifies is no longer a slot.
42
55
  *
43
56
  * @UXGuidelines
44
57
  * - Pass a `src` your build's image pipeline produced. One raw source measured 2 MB against 31.6 KB
45
58
  * for the same crop, taking `load` from 0.95 s to 10.3 s. The component cannot check this.
46
59
  * - Check a photograph's hue range before putting a brand colour beside it. One frame sat entirely
47
60
  * between hue 14° and 40°, so an amber call-to-action muddied against a terracotta wall - the accent
48
- * lives where the photo isn't. `Figure` renders no overlay, so this is about what a page puts next
49
- * to a figure, not on it.
61
+ * lives where the photo isn't. The component paints nothing over the frame itself, so this is about
62
+ * what a page puts next to a figure - and about what it puts in `overlay`, which is the consumer's
63
+ * own decoration and answers to the same hue range.
64
+ * - `overlay` is a place, not a treatment. The library provides somewhere legal for a rim, a ring or a
65
+ * plate to go, and provides none of them; positioning it inside the frame is the consumer's, expressed
66
+ * on their own absolutely-positioned element.
50
67
  */
51
68
  export declare const Figure: FunctionComponent<IFigureProps>;
52
69
  export {};
@@ -29,6 +29,8 @@ interface IRailContentProps {
29
29
  * the label role. Colours are semantic tokens re-pointed by `.dark`, so no class carries a `dark:` prefix.
30
30
  * - `number` is optional: omitted, the index renders the name alone and no empty numeral element.
31
31
  * - `Content` renders its children unmodified and sets no measure cap - `Prose` owns the reading measure.
32
+ * - `Content` sets no spacing between those children either - a composed `Stack` owns the gap. The slot
33
+ * is opaque, so it cannot see the pieces whose rhythm it would set: the same reason it sets no measure.
32
34
  * - No margin, max-width, fill, box or vertical rule; no `tabular-nums` or `font-variant-numeric`.
33
35
  * - It needs no JavaScript: `position: sticky` is CSS.
34
36
  *
@@ -39,6 +41,10 @@ interface IRailContentProps {
39
41
  * consumer that files a section only in the index leaves it without an accessible name.
40
42
  *
41
43
  * @UXGuidelines
44
+ * - The heading `Content` is required to carry and the section's matter beneath it are two pieces in one
45
+ * opaque slot, and the slot separates nothing. Compose the column inside it -
46
+ * `<Rail.Content><Stack gap="…"><H2>Work</H2>{matter}</Stack></Rail.Content>` - and take the space role
47
+ * from `Stack`'s own guidance: `Rail` holds no opinion on which of the two roles this position wants.
42
48
  * - An index is an information layer, not a layout remedy. Measured on the page that prompted it, the
43
49
  * filing numeral bought 0px of width across three fallback rungs, and the column it sits in closed only
44
50
  * +224px of a 933px deficit - it widens a composition's span, not its content. If a page sags, the
@@ -14,11 +14,17 @@ interface IH1Props extends VariantProps<typeof h1> {
14
14
  * - Renders an `h1`; its outline level and the display role are one choice, not two (docs/adr/0005).
15
15
  * - Reads `--font-primary`, sized by `--text-display`, led by `--leading-display` and optically
16
16
  * corrected by `--tracking-optical`, the large-type correction every role from title up carries.
17
+ * - Bounded at `--measure-display`, the display role's own measure — narrower than the reading column
18
+ * because bigger type wants fewer characters per line (docs/adr/0004). The bound is the recipe's,
19
+ * not a caller's: the level fixes the role and the role fixes the measure, so there is no `measure`
20
+ * prop to select between roles (docs/adr/0008). It holds under every `color`.
17
21
  * - `color` selects the `foreground` or `muted` role; nothing else paints text.
18
22
  *
19
23
  * @CallerMustEnsure — the component cannot see these and does not check them
20
24
  * - This is an ordinary page title, and it is also a hero's lead - `display` is the hero role, so a
21
- * poster hero's `h1` is this one, placed inside a `Hero` (#17), which renders no heading of its own.
25
+ * poster hero's `h1` is this one, placed inside a `Hero` (#17), which renders no heading of its own
26
+ * and leaves its slot uncapped — the display measure arrives with this heading rather than with the
27
+ * slot, which would cap the mark beside it too (#87).
22
28
  * - A subpage head is the exception: `PageHead` renders its own `h1` at the `title` role, the one
23
29
  * sanctioned escape valve from level-fixes-role (docs/adr/0005). Reach for it where it fits.
24
30
  * - Heading levels descend without skipping — an `h1` is followed by an `h2`, never an `h3`.
@@ -0,0 +1,35 @@
1
+ import type { VariantProps } from 'class-variance-authority';
2
+ import type { FunctionComponent, ReactNode } from 'react';
3
+ declare const note: (props?: ({
4
+ color?: "foreground" | "muted" | null | undefined;
5
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
+ export interface INoteProps extends VariantProps<typeof note> {
7
+ /** The annotation. A `ReactNode` rather than a string, because these lines carry inline links. */
8
+ children: ReactNode;
9
+ testId?: string;
10
+ }
11
+ /**
12
+ * A short annotation at the small type role in the secondary family — a routing line above a submit
13
+ * button, a privacy line at the point of submission, a line beside a control. Not reading matter:
14
+ * it takes no measure and sits in no reading column, which is what separates it from `Prose.Tail`
15
+ * at the same size, and it carries neither the tracking nor the weight that make an `Eyebrow`.
16
+ *
17
+ * @Guarantees — enforced on every render
18
+ * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
19
+ * - `color` selects the `foreground` (default) or `muted` role; nothing else paints text.
20
+ * - Emits no tracking, no font-weight, no measure and no margin under any prop.
21
+ * - Carries no ARIA role and no live region under any prop.
22
+ *
23
+ * @CallerMustEnsure — the component cannot see these and does not check them
24
+ * - The device has three carriers and this primitive is only one: use it for an annotation no other
25
+ * component owns. A form's own message belongs to `Form`'s `note` and a table's to its note cell,
26
+ * each painted by the component that owns it.
27
+ * - Do **not** put a `Note` in `Form`'s `note` slot: that nests a `p` in a `p` and paints the text
28
+ * twice. The slot takes a node, so pass the wording straight to `Form` and let the links ride
29
+ * inside it — inline content only, never a block. `Form` cannot delegate here either — the
30
+ * architecture standard's one-way dependency rule is why `Prose` restates `P`'s utilities.
31
+ * - Where the annotation is a form's status message, `Form` owns `role="status"`/`role="alert"` by
32
+ * state; a `Note` announces nothing.
33
+ */
34
+ export declare const Note: FunctionComponent<INoteProps>;
35
+ export {};
@@ -18,10 +18,10 @@ interface ILinkProps extends VariantProps<typeof link> {
18
18
  }
19
19
  /**
20
20
  * A link in one of four treatments. `prose` for running text (told apart by its underline, never by
21
- * hue), `quiet` for standing navigation (muted, and foreground with an underline on hover),
22
- * `label-link` for a link acting as a label (inherits its colour, underlines on hover, sets no type
23
- * of its own), and `graphic` for an anchor whose child is not text (paints nothing, so a mark keeps
24
- * its own colour). It renders a plain `<a>`, so it works with no hydration.
21
+ * hue), `quiet` for standing navigation (muted, set in the labelling face, and foreground with an
22
+ * underline on hover), `label-link` for a link acting as a label (inherits its colour, underlines
23
+ * on hover, sets no type of its own), and `graphic` for an anchor whose child is not text (paints
24
+ * nothing, so a mark keeps its own colour). It renders a plain `<a>`, so it works with no hydration.
25
25
  */
26
26
  export declare const Link: FunctionComponent<ILinkProps>;
27
27
  export {};
@@ -0,0 +1,48 @@
1
+ import type { FunctionComponent, ReactNode } from 'react';
2
+ export interface ICoverProps {
3
+ /** The screen's one opaque slot, centred on both axes. Rendered unmodified: a menu composes a title,
4
+ * a tagline and a stack of actions here; a sign-in composes a form. `Cover` imposes no anatomy. */
5
+ children: ReactNode;
6
+ /** The line on the screen's bottom edge - a version line, a legal line - centred on the inline axis.
7
+ * Omitted - or given nothing: `null`, a flag's `false` - nothing renders: no empty container
8
+ * holds its place. */
9
+ foot?: ReactNode;
10
+ testId?: string;
11
+ }
12
+ /**
13
+ * A whole screen's frame: a plain container at least the cover height tall that centres one column in
14
+ * the leftover space, on both axes, with an optional foot pinned to the bottom edge. It is the fold's
15
+ * counterpart (CONTEXT.md): a menu, a sign-in, a splash is the entire app for a moment, and nothing
16
+ * follows it - so where `Hero` deliberately stops short of the viewport to say the page continues, a
17
+ * cover reaches it, because stopping short would signal a continuation that does not exist. It renders
18
+ * no heading and no landmark: whatever the screen says is composed in the slot.
19
+ *
20
+ * @Guarantees — enforced on every render
21
+ * - It is at least `--cover-height` tall: a `min-height` floor, not a fixed height, so content longer
22
+ * than the viewport grows the frame rather than overflowing it.
23
+ * - `children` sit in the middle of the leftover space, centred on both axes; the centring is fixed,
24
+ * with no distribution to choose.
25
+ * - `foot` renders on the frame's bottom edge, centred on the inline axis, and renders nothing - not
26
+ * even an empty container - when not given or given nothing to render (`null`, a flag's `false`).
27
+ * - `children` and `foot` render unmodified; the component adds nothing to and strips nothing from
28
+ * them, and sets no colour, no heading and no landmark of its own.
29
+ * - It owns its own inset - `--gutter` on the inline axis, `--space-region` on the block axis - the
30
+ * deliberate exception to "`Section` owns the gutter": the frame equals the viewport, so it cannot
31
+ * sit inside a `Section` band without overflowing it, and there is no band around it to carry one.
32
+ * - It is never sticky or fixed and needs no JavaScript, so it renders identically server-side.
33
+ *
34
+ * @CallerMustEnsure — the component cannot see these and does not check them
35
+ * - The cover stands on its own, never inside a `Section`: the band's vertical air would push the
36
+ * frame past the viewport it exists to equal. A page that continues past its first screen wants
37
+ * `Section` and `Hero` instead - the fold, not the screen.
38
+ * - Anything the page must announce - a landmark, a heading - is composed in the slot; the frame
39
+ * declares nothing over it.
40
+ *
41
+ * @UXGuidelines
42
+ * - A cover is for a page that is the whole app for a moment - a menu, a sign-in, a splash. The
43
+ * moment content follows on the same page, the screen has become a fold and stopping short of the
44
+ * viewport is the honest signal: reach for `Hero` inside a `Section` instead.
45
+ * - The foot is a quiet line, not a footer: a version, a legal notice. Content a viewer must reach
46
+ * belongs in the slot, where it sits in the column the screen is actually about.
47
+ */
48
+ export declare const Cover: FunctionComponent<ICoverProps>;
@@ -11,8 +11,12 @@ interface IFormProps {
11
11
  children?: ReactNode;
12
12
  /** The actions row - the consumer supplies its own submit Button. */
13
13
  actions?: ReactNode;
14
- /** Standing note in `idle`/`sending`; the outcome message in `sent`/`failed`. */
15
- note?: string;
14
+ /** Standing note in `idle`/`sending`; the outcome message in `sent`/`failed`. Inline content: a
15
+ * sentence, with a Link or emphasis inside it. Form renders the paragraph the note sits in and
16
+ * owns its ARIA role, so a node that brings its own block element - a second `<p>` - is unnested
17
+ * by the parser and the text leaves the region carrying that role. A node that renders nothing
18
+ * (`null`, `false`, an omitted prop) is no note: the paragraph is not rendered at all. */
19
+ note?: ReactNode;
16
20
  testId?: string;
17
21
  }
18
22
  /**
@@ -24,8 +28,8 @@ interface IFormProps {
24
28
  * `sent` drops the fields and actions so a completed submission cannot be resubmitted, while the
25
29
  * `<form>` itself is retained in every state so the DOM shape is stable across a runtime change.
26
30
  *
27
- * The note's text is always the consumer's; Form chooses only its element and ARIA role. `sent` is
28
- * the outcome message, so a `sent` with no `note` is a programmer error and throws.
31
+ * The note's content is always the consumer's; Form chooses only its element and ARIA role. `sent`
32
+ * is the outcome message, so a `sent` with no `note` is a programmer error and throws.
29
33
  */
30
34
  export declare const Form: FunctionComponent<IFormProps>;
31
35
  export {};
@@ -21,7 +21,14 @@ export interface IHeaderProps extends VariantProps<typeof header> {
21
21
  *
22
22
  * @Guarantees — enforced on every render
23
23
  * - The header is set at the label role and carries no size of its own: `font-secondary text-label
24
- * tracking-label text-muted`, so it never grows past that role whatever the page font size.
24
+ * leading-label tracking-label text-muted`, so it never grows past that role whatever the page font size.
25
+ * - The nav's line box is the library's own rather than the consuming document's: the header leads
26
+ * itself at the label role, so the height it declares for its slot is the height it renders.
27
+ * - The standing slot is floored, never fixed: its minimum height is that same line box - the label
28
+ * role's size times its leading - its minimum width is `--standing-min-width`, and its contents are
29
+ * centred. Standing content inside both floors leaves the bar the same height from route to route,
30
+ * so a place name on one page and a mark on another do not move the shell; content past either floor
31
+ * grows the slot, on one line, and is never clamped or wrapped.
25
32
  * - A nav item marked `aria-current="page"` renders at `foreground` whatever supplied it - the treatment
26
33
  * keys on the attribute, not on `Link`, so it holds against a bare anchor or any component.
27
34
  * - 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> {
29
36
  * - It is never sticky and needs no JavaScript: there is no `sticky` variant and nothing to hydrate.
30
37
  * - Omitting `navName` emits no `aria-label` at all, not an empty one.
31
38
  *
39
+ * @CallerMustEnsure — the component cannot see these and does not check them
40
+ * - A mark that should *fill* the standing slot is given a **definite width** by whoever placed it -
41
+ * `width: var(--standing-min-width)` on the element wrapping it, so the mark and the floor move
42
+ * together when a theme re-points the token. Measured against a `viewBox`-only SVG, the common
43
+ * shape: it has no intrinsic width to fill from, and `width: 100%` cannot resolve against the slot's
44
+ * indefinite basis - so a mark told to fill that way renders at its intrinsic width instead (300px in
45
+ * a slot floored at 120px, against 120px on the place-name route) and the floor stops governing,
46
+ * which is the jump between routes the floor exists to remove. A definite width holds at any bar
47
+ * width; `flex: 1 1 0; min-width: 0` only collapses the mark when the bar is already out of room, so
48
+ * it is not the rule to reach for. The library cannot apply either rule for you: the same width on a
49
+ * place name would clamp the name and wrap it.
50
+ *
32
51
  * @UXGuidelines
33
52
  * - Name the nav with `navName` once the page has more than one navigation landmark - a footer nav will
34
53
  * be the second, and two unnamed navs are indistinguishable to a screen-reader user.
@@ -1,7 +1,7 @@
1
1
  import type { VariantProps } from 'class-variance-authority';
2
2
  import type { FunctionComponent, ReactNode } from 'react';
3
3
  declare const hero: (props?: ({
4
- place?: "center" | "start" | "between" | null | undefined;
4
+ place?: "start" | "between" | "center" | null | undefined;
5
5
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
6
  export interface IHeroProps extends VariantProps<typeof hero> {
7
7
  /** 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> {
32
32
  * bleed, the band, the gutter and the region. `Hero` imports no component and adds none of these.
33
33
  *
34
34
  * @UXGuidelines
35
- * - Cap the lead at `--measure-display`, not at a caption's width, and apply it to your own lead - not
36
- * here, since capping the slot would cap the mark too. Measured on the lockup that prompted this: at
37
- * 24ch a one-sentence lead set five lines and became a second block competing with the mark; at 36ch it
38
- * sets three and reads as the mark's caption. This is the one place where copy length is a layout
39
- * parameter - a hero whose lead sentence can vary in length needs its measure chosen against the real
40
- * sentence, not a rule of thumb.
35
+ * - The lead is capped at `--measure-display`, and `H1` is what carries the cap - place one in the slot
36
+ * and the bound comes with it (#87). The slot itself stays uncapped, because capping it would cap the
37
+ * mark too. Measured on the lockup that prompted this: at 24ch a one-sentence lead set five lines and
38
+ * became a second block competing with the mark; at 36ch, where the token sits, it sets three and reads
39
+ * as the mark's caption. This is the one place where copy length is a layout parameter, and the token
40
+ * is one value for the whole product - so a hero whose lead runs longer than that measurement assumed
41
+ * is a reason to re-measure `--measure-display` against the real sentence, which moves every `H1` with
42
+ * it, and never a reason to cap that one hero by hand.
41
43
  * - A hero built on a wide lockup is a desktop bet by construction. A 15-character lockup can only be as
42
44
  * wide as the phone, so at 390px the scale contrast between mark and lead is capped by the viewport
43
45
  * rather than chosen - roughly 2:1, against roughly 6:1 at 1440.
@@ -23,10 +23,17 @@ export interface ISectionProps extends VariantProps<typeof section> {
23
23
  * - A `bleed="full"` section drops the gutter and runs edge to edge; the vertical band is kept on both
24
24
  * bleed variants, and the join spans the full width of either.
25
25
  * - An unnamed section is not a landmark: it emits no `aria-label` and is inert to assistive technology.
26
+ * - The section is a positioning context, under either bleed, so a consumer may place absolutely-positioned
27
+ * decoration against its edges - including the join above it, the one edge only a section knows. It sets
28
+ * no offset and no `z-index`, so it is not a stacking context and decoration at a negative `z-index`
29
+ * still resolves against an outer one.
26
30
  *
27
31
  * @CallerMustEnsure
28
32
  * - Where `name` is given it matches the section's visible heading. The component labels the region with
29
33
  * that string because it cannot reach the heading's id to reference it with `aria-labelledby` instead.
34
+ * - A descendant meant to position against an ancestor *outside* the section is given its own positioned
35
+ * wrapper, since the section is now the nearer positioned ancestor and takes the anchor. The
36
+ * re-anchoring is silent - no error and no warning, only a descendant that lands somewhere else.
30
37
  *
31
38
  * @UXGuidelines
32
39
  * - On a page with no borrowed proof - no logos, no testimonials, no credits - a gap between blocks reads