@juwel-development/design-system 3.2.0 → 3.4.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.
- package/README.md +32 -0
- package/dist/design-system.js +390 -138
- package/dist/index.css +1 -1
- package/dist/types/Arrangement/Stack/Stack.d.ts +19 -6
- package/dist/types/Display/Collection/Collection.d.ts +30 -0
- package/dist/types/Display/Meter/Meter.d.ts +59 -0
- package/dist/types/Display/Meter/MeterConfigurationError.d.ts +3 -0
- package/dist/types/Interaction/Slider/Slider.d.ts +41 -0
- package/dist/types/Interaction/Slider/SliderConfigurationError.d.ts +3 -0
- package/dist/types/Interaction/Tabs/Tabs.d.ts +79 -0
- package/dist/types/Interaction/Tabs/TabsCompositionError.d.ts +3 -0
- package/dist/types/Layout/Sidebar/Sidebar.d.ts +69 -0
- package/dist/types/Theme/Palette.d.ts +13 -0
- package/dist/types/index.d.ts +5 -0
- package/package.json +1 -1
- package/src/Arrangement/Stack/Stack.tsx +30 -10
- package/src/Display/Collection/Collection.tsx +58 -0
- package/src/Display/Meter/Meter.tsx +136 -0
- package/src/Display/Meter/MeterConfigurationError.ts +6 -0
- package/src/Interaction/Slider/Slider.tsx +125 -0
- package/src/Interaction/Slider/SliderConfigurationError.ts +6 -0
- package/src/Interaction/Tabs/Tabs.tsx +284 -0
- package/src/Interaction/Tabs/TabsCompositionError.ts +6 -0
- package/src/Layout/Cover/Cover.tsx +3 -3
- package/src/Layout/Sidebar/Sidebar.tsx +224 -0
- package/src/Theme/Palette.ts +20 -0
- package/src/Theme/renderTokens.ts +54 -0
- package/src/index.ts +5 -0
- package/src/tokens.css +31 -0
- package/src/tokens.dark.css +29 -0
- package/src/tokens.light.css +29 -0
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-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:""}
|
|
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-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--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}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.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)}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.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-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance: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}.overflow-x-auto{overflow-x:auto}.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-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.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)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.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)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.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)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.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-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.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}.text-start{text-align:start}.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-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.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-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem 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)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\: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}}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}@media (width>=64rem){.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-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--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-meter-fill:#f8fafc;--color-meter-track:#334155;--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;--space-collection-item:1em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--meter-track-thickness:.5rem}@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:""}
|
|
@@ -3,6 +3,7 @@ import type { FunctionComponent, ReactNode } from 'react';
|
|
|
3
3
|
declare const stack: (props?: ({
|
|
4
4
|
gap?: "stack" | "region" | null | undefined;
|
|
5
5
|
measure?: boolean | "action" | null | undefined;
|
|
6
|
+
align?: "start" | "center" | null | undefined;
|
|
6
7
|
direction?: "split" | "column" | null | undefined;
|
|
7
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
9
|
export interface IStackProps extends VariantProps<typeof stack> {
|
|
@@ -12,12 +13,14 @@ export interface IStackProps extends VariantProps<typeof stack> {
|
|
|
12
13
|
}
|
|
13
14
|
/**
|
|
14
15
|
* 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
|
|
16
|
-
*
|
|
17
|
-
*
|
|
16
|
+
* bounded by the reading measure or the action column, with optional inherited text alignment.
|
|
17
|
+
* It owns no landmark, heading, band, join, gutter or fill and takes no outer space, so whatever
|
|
18
|
+
* holds it owns the rhythm around it.
|
|
18
19
|
*
|
|
19
20
|
* @Guarantees — enforced on every render
|
|
20
|
-
* - It renders a `div` with no landmark role, no heading and no margin of its own
|
|
21
|
+
* - It renders a `div` with no landmark role, no heading and no margin of its own - the one
|
|
22
|
+
* exception the action column's auto inline margins, which name no space role and take no space:
|
|
23
|
+
* they only centre the bound column inside a holder wider than the bound.
|
|
21
24
|
* - `gap` selects which space role separates the children: `stack` (the default), the gap between
|
|
22
25
|
* siblings within one block, or `region`, the gap between groups of blocks. Nothing else — a
|
|
23
26
|
* spacing neither role expresses is a request for a measurement (docs/adr/0003, docs/adr/0004).
|
|
@@ -25,14 +28,24 @@ export interface IStackProps extends VariantProps<typeof stack> {
|
|
|
25
28
|
* unbounded, which is right wherever the children are not running text. It sets no font-size, so
|
|
26
29
|
* a `ch`-counted measure keeps resolving against inherited body type.
|
|
27
30
|
* - `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
|
|
29
|
-
*
|
|
31
|
+
* stack of full-width controls fills, so they read as one unit and their labels align. The column
|
|
32
|
+
* asks for that bound as its own definite width, capped at its holder's, so it reaches the bound
|
|
33
|
+
* even inside a shrink-to-fit frame that sizes from its content - `Cover`'s slot - independently
|
|
34
|
+
* of what its siblings measure, and its auto inline margins keep it centred in a holder that
|
|
35
|
+
* stays wider. (#99, correcting #97's reasoning: `w-full` fills a containing slot but cannot
|
|
36
|
+
* raise a shrink-to-fit ancestor's intrinsic width, so it never guaranteed the bound.) The two
|
|
30
37
|
* options answer different questions about what the column holds - text or controls - never how
|
|
31
38
|
* wide it should be (docs/adr/0008, Amendments).
|
|
32
39
|
* - `direction="column"` (the default) never changes axis. `direction="split"` is the same column
|
|
33
40
|
* turning into a row at and above 64rem, its children aligned to their start edge rather than
|
|
34
41
|
* stretched. It is the only viewport-dependent behaviour here, and it is named for the job: the
|
|
35
42
|
* breakpoint is an implementation detail and is not part of the vocabulary.
|
|
43
|
+
* - `align="center"` centres inline text within each receiving text block; `align="start"`
|
|
44
|
+
* resets it to the logical start edge in LTR or RTL. Omission sets no alignment, so nested
|
|
45
|
+
* Stacks inherit. Descendants that declare their own alignment retain it.
|
|
46
|
+
* - Alignment never moves or resizes child boxes or changes gap, measure, direction, wrapping or
|
|
47
|
+
* overflow. A narrower text block centres within itself, not on its holder's axis; an unbroken
|
|
48
|
+
* word wider than its block is outside the centring guarantee, including in split arrangements.
|
|
36
49
|
* - No literal length and no numbered spacing rung appears in the recipe: every value it emits is a
|
|
37
50
|
* role the token layer already names, so a second brand re-points all of them.
|
|
38
51
|
* - `children` render unmodified, and it needs no JavaScript.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { FunctionComponent, ReactNode } from 'react';
|
|
2
|
+
export interface ICollectionRootProps {
|
|
3
|
+
/** Collection.Item children, including mapped items and conditional omissions. */
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
testId?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ICollectionItemProps {
|
|
8
|
+
/** Freely composed content; its typography, arrangement and interaction remain its own. */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
testId?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* A vertical group of freely composed items with internal hairlines and open outer edges.
|
|
14
|
+
* The library owns spacing and separation; the consumer owns content, arrangement and interaction.
|
|
15
|
+
*
|
|
16
|
+
* @Guarantees
|
|
17
|
+
* - Root is a semantic list and Item a list item, with no visual markers or horizontal indent.
|
|
18
|
+
* - Each item takes vertical padding from --space-collection-item; adjacent items share one
|
|
19
|
+
* hairline in the border colour role. Empty and single-item roots have no rules or placeholder.
|
|
20
|
+
* - Children render in supplied order, retaining their own typography and arrangement.
|
|
21
|
+
* - Neither member adds focus stops, interaction, or responsive content rearrangement.
|
|
22
|
+
*
|
|
23
|
+
* @CallerMustEnsure
|
|
24
|
+
* - Supply Collection.Item as Root's rendered children, directly or through fragments and maps.
|
|
25
|
+
* - Compose each item's content with typography, arrangements and controls for the jobs it contains.
|
|
26
|
+
*/
|
|
27
|
+
export declare const Collection: {
|
|
28
|
+
readonly Root: FunctionComponent<ICollectionRootProps>;
|
|
29
|
+
readonly Item: FunctionComponent<ICollectionItemProps>;
|
|
30
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import type { FunctionComponent } from 'react';
|
|
3
|
+
declare const meterFill: (props?: ({
|
|
4
|
+
treatment?: "neutral" | "depleting" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export interface IMeterProps extends VariantProps<typeof meterFill> {
|
|
7
|
+
/** The current level. Must lie inside `[min, max]`; an outside value throws
|
|
8
|
+
* {@link MeterConfigurationError} rather than clamping - a wrong number must not render as a
|
|
9
|
+
* plausible level. */
|
|
10
|
+
value: number;
|
|
11
|
+
/** The bottom of the scale. Defaults to `0`. */
|
|
12
|
+
min?: number;
|
|
13
|
+
/** The top of the scale. Must exceed `min`. */
|
|
14
|
+
max: number;
|
|
15
|
+
/** The meter's accessible name - what the level measures. Required, and never rendered visibly:
|
|
16
|
+
* the component shows a filled track and nothing else. Its wording is the consumer's. */
|
|
17
|
+
label: string;
|
|
18
|
+
/** Optional `aria-valuetext`, so a screen reader hears the consumer's wording ("strained")
|
|
19
|
+
* instead of a bare number. Omitted, the numeric value is announced. */
|
|
20
|
+
valueText?: string;
|
|
21
|
+
testId?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* A read-only display of one numeric level within a bounded scale, shown as a filled share of a
|
|
25
|
+
* whole: a short track, a fill from inline-start, no text. It states an amount - not an operation's
|
|
26
|
+
* completion, and unlike a Slider it cannot be operated.
|
|
27
|
+
*
|
|
28
|
+
* @Guarantees — enforced on every render
|
|
29
|
+
* - The root carries `role="meter"`, `aria-valuenow`/`aria-valuemin`/`aria-valuemax`, the `label`
|
|
30
|
+
* as its accessible name, and `aria-valuetext` exactly when `valueText` is supplied. It is not
|
|
31
|
+
* focusable, and the visual fill is hidden from the accessibility tree.
|
|
32
|
+
* - The filled share is `(value - min) / (max - min)` of the container and begins at logical
|
|
33
|
+
* inline-start under both LTR and RTL direction.
|
|
34
|
+
* - Neutral paints the fill with `meterFill`; `depleting` maps the normalized level linearly
|
|
35
|
+
* through OKLab from `meterFill` at the maximum to `error` at the minimum - no threshold, no
|
|
36
|
+
* wording, no icon (docs/adr/0010-meter-depletion-is-a-treatment.md).
|
|
37
|
+
* - A value change lands instantly: no width or colour animation.
|
|
38
|
+
* - The track fills its container, reads `--meter-track-thickness`, keeps square corners (no
|
|
39
|
+
* radius token - Meter is not a control), and draws a persistent one-pixel `rule` line that
|
|
40
|
+
* identifies the whole capacity against the surface.
|
|
41
|
+
* - Invalid numeric configuration throws {@link MeterConfigurationError}: non-finite `value`,
|
|
42
|
+
* `min` or `max`, `min >= max`, or a value outside the inclusive range. Nothing is clamped.
|
|
43
|
+
* - No visible wording of its own, no numeric readout, no caption slot, no `className`/`style`
|
|
44
|
+
* passthrough.
|
|
45
|
+
*
|
|
46
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
47
|
+
* - `label` carries meaningful wording; the component renders it to assistive technology only and
|
|
48
|
+
* does not inspect it.
|
|
49
|
+
* - When `depleting` is selected, surrounding visible content explains why nearing the minimum
|
|
50
|
+
* matters - the colour walk reinforces a stated consequence and must not be its only carrier.
|
|
51
|
+
*
|
|
52
|
+
* @UXGuidelines
|
|
53
|
+
* - Place any visible caption or readout yourself with typography; the Meter deliberately carries
|
|
54
|
+
* none, so what the level measures stays the consumer's wording.
|
|
55
|
+
* - Reach for `depleting` only where a low value is genuinely more erroneous - some quantities
|
|
56
|
+
* become safer toward their minimum, which is why the treatment is opt-in.
|
|
57
|
+
*/
|
|
58
|
+
export declare const Meter: FunctionComponent<IMeterProps>;
|
|
59
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
|
2
|
+
import type { Subject } from 'rxjs';
|
|
3
|
+
export interface ISliderProps {
|
|
4
|
+
/** The operating range's lower bound - interaction geometry, not a content rule (ADR 0009). */
|
|
5
|
+
min: number;
|
|
6
|
+
/** The operating range's upper bound. */
|
|
7
|
+
max: number;
|
|
8
|
+
/**
|
|
9
|
+
* The increment a movement produces. Defaults to 1: whole-step movement. Keeping `value` and
|
|
10
|
+
* `max` on the step grid is the caller's obligation - Slider neither rejects nor repairs an
|
|
11
|
+
* off-grid value, and the native control's own conduct stays observable: inside a surrounding
|
|
12
|
+
* form, misalignment counts as a `stepMismatch` against that form's validity.
|
|
13
|
+
*/
|
|
14
|
+
step?: number;
|
|
15
|
+
/** The current value. Controlled - the consumer holds it and passes it back in. */
|
|
16
|
+
value: number;
|
|
17
|
+
/**
|
|
18
|
+
* Emits the new value on every native input event. Required, not optional: the control is
|
|
19
|
+
* controlled and takes no part in form submission, so a consumer that did not listen here
|
|
20
|
+
* could never read a value at all.
|
|
21
|
+
*/
|
|
22
|
+
onInput$: Subject<number>;
|
|
23
|
+
/** The control's accessible name. */
|
|
24
|
+
label: string;
|
|
25
|
+
/**
|
|
26
|
+
* How the value is announced, in the consumer's wording ("$60 a week"). Left out, assistive
|
|
27
|
+
* technology reads the bare number: the library ships no wording of its own.
|
|
28
|
+
*/
|
|
29
|
+
valueText?: string;
|
|
30
|
+
/** The explicit non-operable state: native disabled conduct, no emissions, disabled paint. */
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
testId?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* A control that sets one numeric value by moving one thumb along a fixed, visible operating
|
|
36
|
+
* range. Controlled: the consumer holds the value and passes it back in, and a value it does not
|
|
37
|
+
* pass back is never adopted. It renders the value nowhere - the consumer sets any figures beside
|
|
38
|
+
* it with typography - and it fills its container's width the way `Input` does. `disabled` is the
|
|
39
|
+
* explicit non-operable state.
|
|
40
|
+
*/
|
|
41
|
+
export declare const Slider: FunctionComponent<ISliderProps>;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { type FunctionComponent, type ReactNode } from 'react';
|
|
2
|
+
import type { Subject } from 'rxjs';
|
|
3
|
+
export interface ITabsRootProps {
|
|
4
|
+
/** The key of the active tab. Must name a declared tab/panel pair; the consumer owns it. */
|
|
5
|
+
active: string;
|
|
6
|
+
/** Emits the selected key on click and on arrow navigation. Tabs never selects on its own. */
|
|
7
|
+
onSelect$: Subject<string>;
|
|
8
|
+
/** The tab list's accessible name. */
|
|
9
|
+
label: string;
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
testId?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface ITabsListProps {
|
|
14
|
+
children: ReactNode;
|
|
15
|
+
testId?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface ITabsTabProps {
|
|
18
|
+
/** The stable identity connecting this tab to its panel and emitted by selection requests.
|
|
19
|
+
* Not React's `key`, and never inferred from the label or the position. */
|
|
20
|
+
value: string;
|
|
21
|
+
/** The visible text label. Text only - no icons, no per-tab markup. */
|
|
22
|
+
children: string;
|
|
23
|
+
testId?: string;
|
|
24
|
+
}
|
|
25
|
+
export interface ITabsPanelProps {
|
|
26
|
+
/** The tab this panel belongs to - exactly one panel per tab value within a Root. */
|
|
27
|
+
value: string;
|
|
28
|
+
/** Mounted only while active; departure unmounts it, return mounts it fresh. */
|
|
29
|
+
children: ReactNode;
|
|
30
|
+
testId?: string;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* A few named views sharing one surface: a horizontal tab list over exactly one visible panel,
|
|
34
|
+
* following the WAI-ARIA tabs pattern. Controlled - the consumer owns the active key and all
|
|
35
|
+
* content; Tabs owns the controls and the panels that present it. Composed from four members:
|
|
36
|
+
* `Root` carries the contract, `List` the scrolling row, `Tab` one control, `Panel` one view.
|
|
37
|
+
*
|
|
38
|
+
* @Guarantees — enforced on every render
|
|
39
|
+
* - Renders `role="tablist"`/`tab`/`tabpanel` with `aria-selected`, `aria-controls` and
|
|
40
|
+
* `aria-labelledby` wired per pair; ids are namespaced per instance, so two Tabs on one page
|
|
41
|
+
* cannot collide and associations survive rerenders.
|
|
42
|
+
* - Selection is the value of `active`, nothing else: a selection request that goes unanswered
|
|
43
|
+
* changes nothing, and no fallback selection is invented or emitted - ever.
|
|
44
|
+
* - Only the active panel mounts its children; inactive panels stay hidden and empty, so departure
|
|
45
|
+
* unmounts a view and returning mounts it fresh, with no cache and no preserved state.
|
|
46
|
+
* - Left/Right move focus to the neighbouring tab, wrapping at either end, and request selection
|
|
47
|
+
* immediately; focus stays on the operated tab. Up/Down are left to the browser.
|
|
48
|
+
* - Roving tabindex: Tab enters the list at the active tab, then the active panel - a consistent
|
|
49
|
+
* Tab stop whether or not its content is focusable. Inactive panels add no stop.
|
|
50
|
+
* - The row scrolls horizontally on overflow - one line, no wrap, no shrink - and holds its own
|
|
51
|
+
* ring room, so the focused tab's ring survives the scroll clip.
|
|
52
|
+
* - Selection is marked by a persistent line under the active tab: `--tab-marker-thickness` in
|
|
53
|
+
* `foreground`, constant thickness in both states, so switching shifts no widths and no weights.
|
|
54
|
+
* Keyboard focus is the separate shared focus ring. Colour moves on the one motion token.
|
|
55
|
+
*
|
|
56
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
57
|
+
* - One List with Tab elements as direct DOM children (arrays and fragments are supported),
|
|
58
|
+
* and sibling Panels under Root. Do not wrap tabs in host elements.
|
|
59
|
+
* - At least two tabs, each `value` unique and stable, each with exactly one matching `Panel`
|
|
60
|
+
* under the same `Root`, and `active` naming a declared pair. Invalid input is a contract
|
|
61
|
+
* violation, not a request for a fallback.
|
|
62
|
+
* - An update removing the active tab supplies a valid replacement `active` and the matching
|
|
63
|
+
* composition in the same update.
|
|
64
|
+
* - The newly selected view renders without noticeable delay - slower data belongs inside the
|
|
65
|
+
* immediately displayed view. Any state shared or preserved across views is the consumer's.
|
|
66
|
+
*
|
|
67
|
+
* @UXGuidelines
|
|
68
|
+
* - Labels are short names for views, not actions; the consuming app words and translates them.
|
|
69
|
+
* - This is not a router: no location, no history, no deep links. Wire `onSelect$` to whatever
|
|
70
|
+
* owns the active key and pass that key back in.
|
|
71
|
+
* - The panel is an opaque slot: compose the view's own rhythm inside it - a `Stack`, a `Prose` -
|
|
72
|
+
* as the view owns it; Tabs sets no spacing between the row and the panel.
|
|
73
|
+
*/
|
|
74
|
+
export declare const Tabs: {
|
|
75
|
+
readonly Root: FunctionComponent<ITabsRootProps>;
|
|
76
|
+
readonly List: FunctionComponent<ITabsListProps>;
|
|
77
|
+
readonly Tab: FunctionComponent<ITabsTabProps>;
|
|
78
|
+
readonly Panel: FunctionComponent<ITabsPanelProps>;
|
|
79
|
+
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import type { FunctionComponent, ReactNode } from 'react';
|
|
2
|
+
import type { Subject } from 'rxjs';
|
|
3
|
+
export interface ISidebarRootProps {
|
|
4
|
+
/** The key of the active entry. The caller supplies a key identifying one non-inert entry;
|
|
5
|
+
* Sidebar renders what it is given and never selects a fallback for an invalid key. */
|
|
6
|
+
active: string;
|
|
7
|
+
/** The nav landmark's accessible name. */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Emits the selected entry's key when a usable inactive entry is activated. The active and inert
|
|
10
|
+
* entries emit nothing, and neither does any render. */
|
|
11
|
+
onSelect$: Subject<string>;
|
|
12
|
+
/** Direct `Sidebar.Item` children in display order, then one `Sidebar.Content`. */
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
testId?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface ISidebarItemProps {
|
|
17
|
+
/** Identifies the entry to the application - what `onSelect$` emits and `active` names. React's
|
|
18
|
+
* reserved `key` is not the entry identifier. */
|
|
19
|
+
entryKey: string;
|
|
20
|
+
/** The entry's visible text. Text-only by type: an entry is a label, never arbitrary markup. */
|
|
21
|
+
children: string;
|
|
22
|
+
/** Present in the order but unavailable: muted, semantically disabled, skipped by Tab. */
|
|
23
|
+
inert?: boolean;
|
|
24
|
+
testId?: string;
|
|
25
|
+
}
|
|
26
|
+
export interface ISidebarContentProps {
|
|
27
|
+
children?: ReactNode;
|
|
28
|
+
testId?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* The standing application navigation beside the active section's content: a `nav` landmark named by
|
|
32
|
+
* `label`, listing text entries as plain buttons, and a `Content` track for the section the
|
|
33
|
+
* application shows. Selection is a request - activating a usable inactive entry emits its key through
|
|
34
|
+
* `onSelect$` - and the application answers by rerendering with a new `active`. Composed from `Root`,
|
|
35
|
+
* `Item` and `Content`; Root assembles its direct Items into the list, in order, and places Content
|
|
36
|
+
* beside them at 64rem or below them under it.
|
|
37
|
+
*
|
|
38
|
+
* @Guarantees — enforced on every render
|
|
39
|
+
* - For valid caller input, the active entry alone carries `aria-current="true"`. Sidebar owns no
|
|
40
|
+
* selection, URL, history or fallback: it renders the key it is given; a missing key marks nothing.
|
|
41
|
+
* - Activating the active entry or an inert one emits nothing; no render emits anything. Entries are
|
|
42
|
+
* non-submitting `type="button"` buttons with native Tab/Enter/Space behaviour - no tabs/menu model.
|
|
43
|
+
* - An inert entry stays visible but muted and disabled, so Tab skips it and activation is inert too.
|
|
44
|
+
* - At and above 64rem the nav is a fixed 12rem track, sticky at the top of the scrolling area with no
|
|
45
|
+
* assumed top-bar offset, capped to the screen/scrolling-area height with independent entry scrolling.
|
|
46
|
+
* Content sits beside it in `minmax(0,1fr)`, so wide content cannot displace the track.
|
|
47
|
+
* - Below 64rem the whole list lies above the content in normal flow - no stickiness, no cap, no
|
|
48
|
+
* drawer. Sidebar sets no viewport-height minimum and grows with its content.
|
|
49
|
+
* - It separates the tracks itself (the region space role and a `border` hairline) but gives the
|
|
50
|
+
* content track no padding and no landmark - the consumer owns everything inside `Content`.
|
|
51
|
+
*
|
|
52
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
53
|
+
* - Entry keys are unique and `active` names one non-inert entry. Sidebar corrects nothing.
|
|
54
|
+
* - Items and the one Content are direct children of `Root` - Root assembles only what it can see,
|
|
55
|
+
* and an Item rendered outside a Root has no selection to derive its treatment from.
|
|
56
|
+
* - Focus after the content changes belongs to the application; Sidebar leaves it on the activated
|
|
57
|
+
* entry.
|
|
58
|
+
*
|
|
59
|
+
* @UXGuidelines
|
|
60
|
+
* - Entries are section labels: short, parallel, text-only. A destination that is a URL belongs to
|
|
61
|
+
* `Link` in a `Header` or `Footer`, not here - Sidebar requests sections, it does not navigate.
|
|
62
|
+
* - Keep inert entries listed: a section that exists but holds nothing yet keeps its place in the
|
|
63
|
+
* order, which is the point of inertness being a visual state rather than an absence.
|
|
64
|
+
*/
|
|
65
|
+
export declare const Sidebar: {
|
|
66
|
+
readonly Root: FunctionComponent<ISidebarRootProps>;
|
|
67
|
+
readonly Item: FunctionComponent<ISidebarItemProps>;
|
|
68
|
+
readonly Content: FunctionComponent<ISidebarContentProps>;
|
|
69
|
+
};
|
|
@@ -38,6 +38,19 @@ export type PaletteTokens = {
|
|
|
38
38
|
* because a failed image renders its alt text on this plate and that text must stay legible. That
|
|
39
39
|
* keeps it near `surface` rather than a mid grey. */
|
|
40
40
|
backing: string;
|
|
41
|
+
/** The colour of a Meter's filled share when it states an amount without judgment - neither an
|
|
42
|
+
* action fill nor text ink. The depletion treatment mixes it toward `error` in OKLab, so the
|
|
43
|
+
* constraint covers the whole path (WCAG 2.2 SC 1.4.11): this value, `error`, and every colour
|
|
44
|
+
* the mix produces between them stay at least 3:1 against `meterTrack` in the same theme. A
|
|
45
|
+
* distinct role even while its shipped value matches `foreground` - a consumer re-points either
|
|
46
|
+
* without moving the other. See docs/adr/0010-meter-depletion-is-a-treatment.md. */
|
|
47
|
+
meterFill: string;
|
|
48
|
+
/** The colour of a Meter's whole capacity behind its filled share. It makes the scale visible
|
|
49
|
+
* without turning it into a boundary - the persistent one-pixel `rule` outline is what
|
|
50
|
+
* identifies the capacity against `surface`, so this role carries no floor of its own; the
|
|
51
|
+
* 3:1 floor is stated from the fill side, on `meterFill`. A distinct role even while its
|
|
52
|
+
* shipped value matches `border`. See docs/adr/0010-meter-depletion-is-a-treatment.md. */
|
|
53
|
+
meterTrack: string;
|
|
41
54
|
/** The main call-to-action fill. A filled control draws no border, so the fill is the only thing
|
|
42
55
|
* separating the control from the surface - what `controlBorder` is for an unfilled one.
|
|
43
56
|
* Constraint (WCAG 2.2 SC 1.4.11): at least 3:1 against `surface` in the same theme,
|
package/dist/types/index.d.ts
CHANGED
|
@@ -3,8 +3,10 @@ export { Cluster } from 'Arrangement/Cluster/Cluster';
|
|
|
3
3
|
export { Stack } from 'Arrangement/Stack/Stack';
|
|
4
4
|
export { Brandmark } from 'Display/Brandmark/Brandmark';
|
|
5
5
|
export { Checklist } from 'Display/Checklist/Checklist';
|
|
6
|
+
export { Collection } from 'Display/Collection/Collection';
|
|
6
7
|
export { DefinitionList } from 'Display/DefinitionList/DefinitionList';
|
|
7
8
|
export { Figure } from 'Display/Figure/Figure';
|
|
9
|
+
export { Meter } from 'Display/Meter/Meter';
|
|
8
10
|
export { Rail } from 'Display/Rail/Rail';
|
|
9
11
|
export { Table } from 'Display/Table/Table';
|
|
10
12
|
export { Eyebrow } from 'Display/Typography/Eyebrow/Eyebrow';
|
|
@@ -20,6 +22,8 @@ export { Prose } from 'Display/Typography/Prose/Prose';
|
|
|
20
22
|
export { Button } from 'Interaction/Button/Button';
|
|
21
23
|
export { Input } from 'Interaction/Input/Input';
|
|
22
24
|
export { Link } from 'Interaction/Link/Link';
|
|
25
|
+
export { Slider } from 'Interaction/Slider/Slider';
|
|
26
|
+
export { Tabs } from 'Interaction/Tabs/Tabs';
|
|
23
27
|
export { TextArea } from 'Interaction/TextArea/TextArea';
|
|
24
28
|
export { Cover } from 'Layout/Cover/Cover';
|
|
25
29
|
export { Footer } from 'Layout/Footer/Footer';
|
|
@@ -29,5 +33,6 @@ export { Header } from 'Layout/Header/Header';
|
|
|
29
33
|
export { Hero } from 'Layout/Hero/Hero';
|
|
30
34
|
export { PageHead } from 'Layout/PageHead/PageHead';
|
|
31
35
|
export { Section } from 'Layout/Section/Section';
|
|
36
|
+
export { Sidebar } from 'Layout/Sidebar/Sidebar';
|
|
32
37
|
export type { PaletteTokens } from 'Theme/Palette';
|
|
33
38
|
export { dark, light } from 'Theme/Palette';
|