@juwel-development/design-system 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/design-system.js +43 -28
  2. package/dist/index.css +1 -1
  3. package/dist/types/Arrangement/Stack/Stack.d.ts +9 -4
  4. package/dist/types/Layout/Cover/Cover.d.ts +48 -0
  5. package/dist/types/index.d.ts +1 -0
  6. package/package.json +1 -1
  7. package/src/Arrangement/Stack/Stack.tsx +17 -11
  8. package/src/Layout/Cover/Cover.tsx +85 -0
  9. package/src/Theme/renderTokens.ts +19 -6
  10. package/src/index.ts +1 -0
  11. package/src/tokens.css +9 -1
  12. package/src/tokens.dark.css +9 -1
  13. package/src/tokens.light.css +9 -1
package/dist/design-system.js CHANGED
@@ -76,7 +76,8 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
76
76
  },
77
77
  measure: {
78
78
  true: "max-w-[var(--measure)]",
79
- false: ""
79
+ false: "",
80
+ action: "w-full max-w-[var(--measure-action)]"
80
81
  },
81
82
  direction: {
82
83
  column: "flex-col",
@@ -532,17 +533,31 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
532
533
  })
533
534
  ]
534
535
  });
535
- }, pe = l("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
536
+ }, pe = l([
537
+ "flex flex-col items-center",
538
+ "min-h-[var(--cover-height)]",
539
+ "px-[var(--gutter)] py-[var(--space-region)]"
540
+ ].join(" ")), me = "my-auto", he = ({ children: n, foot: r, testId: i }) => {
541
+ let a = r != null && typeof r != "boolean";
542
+ return /* @__PURE__ */ t("div", {
543
+ className: pe(),
544
+ "data-testid": i,
545
+ children: [/* @__PURE__ */ e("div", {
546
+ className: me,
547
+ children: n
548
+ }), a && /* @__PURE__ */ e("div", { children: r })]
549
+ });
550
+ }, ge = l("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
536
551
  variants: { edge: {
537
552
  none: "",
538
553
  rule: "border-t border-solid border-rule"
539
554
  } },
540
555
  defaultVariants: { edge: "rule" }
541
- }), me = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
542
- className: pe({ edge: t }),
556
+ }), _e = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
557
+ className: ge({ edge: t }),
543
558
  "data-testid": r,
544
559
  children: n
545
- }), he = l("font-secondary text-small", {
560
+ }), ve = l("font-secondary text-small", {
546
561
  variants: { state: {
547
562
  idle: "text-muted",
548
563
  sending: "text-muted",
@@ -550,13 +565,13 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
550
565
  failed: "text-error"
551
566
  } },
552
567
  defaultVariants: { state: "idle" }
553
- }), ge = {
568
+ }), ye = {
554
569
  sent: "status",
555
570
  failed: "alert"
556
- }, _e = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
571
+ }, be = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
557
572
  let l = s != null && typeof s != "boolean";
558
573
  if (i === "sent" && !l) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
559
- let u = i !== "sent", d = ge[i];
574
+ let u = i !== "sent", d = ye[i];
560
575
  return /* @__PURE__ */ t("form", {
561
576
  action: n,
562
577
  method: r,
@@ -574,12 +589,12 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
574
589
  }),
575
590
  l && /* @__PURE__ */ e("p", {
576
591
  role: d,
577
- className: he({ state: i }),
592
+ className: ve({ state: i }),
578
593
  children: s
579
594
  })
580
595
  ]
581
596
  });
582
- }, ve = l([
597
+ }, xe = l([
583
598
  "flex items-baseline justify-between",
584
599
  "font-secondary text-label leading-label tracking-label text-muted",
585
600
  "py-[var(--space-region)] px-[var(--gutter)]",
@@ -590,50 +605,50 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
590
605
  rule: "border-b border-solid border-rule"
591
606
  } },
592
607
  defaultVariants: { edge: "rule" }
593
- }), ye = [
608
+ }), Se = [
594
609
  "inline-flex shrink-0 items-center",
595
610
  "min-h-[calc(var(--text-label)*var(--leading-label))]",
596
611
  "min-w-[var(--standing-min-width)]"
597
- ].join(" "), be = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
598
- className: ve({ edge: n }),
612
+ ].join(" "), Ce = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
613
+ className: xe({ edge: n }),
599
614
  "data-testid": o,
600
615
  children: [/* @__PURE__ */ e("div", {
601
- className: ye,
616
+ className: Se,
602
617
  children: r
603
618
  }), /* @__PURE__ */ e("nav", {
604
619
  "aria-label": i,
605
620
  className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
606
621
  children: a
607
622
  })]
608
- }), $ = l("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
623
+ }), we = l("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
609
624
  variants: { place: {
610
625
  start: "justify-start",
611
626
  center: "justify-center",
612
627
  between: "justify-between"
613
628
  } },
614
629
  defaultVariants: { place: "center" }
615
- }), xe = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
616
- className: $({ place: t }),
630
+ }), Te = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
631
+ className: we({ place: t }),
617
632
  "data-testid": r,
618
633
  children: n
619
- }), Se = l("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), Ce = l("font-primary text-title leading-title tracking-optical text-foreground"), we = l("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), Te = l("font-primary text-small text-muted max-w-[var(--measure)]"), Ee = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
620
- className: Se(),
634
+ }), Ee = l("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), De = l("font-primary text-title leading-title tracking-optical text-foreground"), $ = l("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), Oe = l("font-primary text-small text-muted max-w-[var(--measure)]"), ke = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
635
+ className: Ee(),
621
636
  "data-testid": a,
622
637
  children: [
623
638
  /* @__PURE__ */ e("h1", {
624
- className: Ce(),
639
+ className: De(),
625
640
  children: n
626
641
  }),
627
642
  r !== void 0 && /* @__PURE__ */ e("p", {
628
- className: we(),
643
+ className: $(),
629
644
  children: r
630
645
  }),
631
646
  i !== void 0 && /* @__PURE__ */ e("p", {
632
- className: Te(),
647
+ className: Oe(),
633
648
  children: i
634
649
  })
635
650
  ]
636
- }), De = l([
651
+ }), Ae = l([
637
652
  "relative",
638
653
  "py-[var(--space-band)]",
639
654
  "[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
@@ -643,13 +658,13 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
643
658
  full: ""
644
659
  } },
645
660
  defaultVariants: { bleed: "inset" }
646
- }), Oe = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
661
+ }), je = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
647
662
  "data-section": "",
648
- className: De({ bleed: t }),
663
+ className: Ae({ bleed: t }),
649
664
  "aria-label": n,
650
665
  "data-testid": i,
651
666
  children: r
652
- }), ke = {
667
+ }), Me = {
653
668
  surface: "#ffffff",
654
669
  foreground: "#0f172a",
655
670
  muted: "#64748b",
@@ -671,7 +686,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
671
686
  warning: "#f59e0b",
672
687
  error: "#d63384",
673
688
  info: "#06b6d4"
674
- }, Ae = {
689
+ }, Ne = {
675
690
  surface: "#0f172a",
676
691
  foreground: "#f8fafc",
677
692
  muted: "#94a3b8",
@@ -695,4 +710,4 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
695
710
  info: "#22d3ee"
696
711
  };
697
712
  //#endregion
698
- export { h as Brandmark, oe as Button, v as Checklist, d as Cluster, S as DefinitionList, P as Eyebrow, w as Figure, me as Footer, _e as Form, I as H1, R as H2, B as H3, H as H4, W as H5, K as H6, be as Header, xe as Hero, ce as Input, ue as Link, J as Note, X as P, Ee as PageHead, ie as Prose, D as Rail, Oe as Section, p as Stack, M as Table, fe as TextArea, Ae as dark, ke as light };
713
+ export { h as Brandmark, oe as Button, v as Checklist, d as Cluster, he as Cover, S as DefinitionList, P as Eyebrow, w as Figure, _e as Footer, be as Form, I as H1, R as H2, B as H3, H as H4, W as H5, K as H6, Ce as Header, Te as Hero, ce as Input, ue as Link, J as Note, X as P, ke as PageHead, ie as Prose, D as Rail, je as Section, p as Stack, M as Table, fe as TextArea, Ne as dark, Me as light };
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}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.h-12{height:calc(var(--spacing) * 12)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[360px\]{width:360px}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.bg-backing{background-color:var(--color-backing)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.pt-1{padding-top:var(--spacing)}.pb-1{padding-bottom:var(--spacing)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--tick-length:.9rem;--tick-thickness:1px}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
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:""}
package/dist/types/Arrangement/Stack/Stack.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { VariantProps } from 'class-variance-authority';
2
2
  import type { FunctionComponent, ReactNode } from 'react';
3
3
  declare const stack: (props?: ({
4
4
  gap?: "stack" | "region" | null | undefined;
5
- measure?: boolean | null | undefined;
5
+ measure?: boolean | "action" | null | undefined;
6
6
  direction?: "split" | "column" | null | undefined;
7
7
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
8
  export interface IStackProps extends VariantProps<typeof stack> {
@@ -12,9 +12,9 @@ export interface IStackProps extends VariantProps<typeof stack> {
12
12
  }
13
13
  /**
14
14
  * A vertical arrangement: children in a column, separated by one named space role and optionally
15
- * bounded by the reading measure. It owns one axis and one gap and nothing else - no landmark, no
16
- * heading, no band, no join, no gutter, no fill - and takes no outer space, so whatever holds it
17
- * owns the rhythm around it.
15
+ * bounded by the reading measure or the action column. It owns one axis and one gap and nothing
16
+ * else - no landmark, no heading, no band, no join, no gutter, no fill - and takes no outer space,
17
+ * so whatever holds it owns the rhythm around it.
18
18
  *
19
19
  * @Guarantees — enforced on every render
20
20
  * - It renders a `div` with no landmark role, no heading and no margin of its own.
@@ -24,6 +24,11 @@ export interface IStackProps extends VariantProps<typeof stack> {
24
24
  * - `measure` bounds the element to `--measure`, the reading column; omitted, the column is
25
25
  * unbounded, which is right wherever the children are not running text. It sets no font-size, so
26
26
  * a `ch`-counted measure keeps resolving against inherited body type.
27
+ * - `measure="action"` bounds the element to `--measure-action`, the action column - the width a
28
+ * stack of full-width controls fills, so they read as one unit and their labels align - and fills
29
+ * its slot up to that bound, so a centering frame cannot shrink it to its widest label. The two
30
+ * options answer different questions about what the column holds - text or controls - never how
31
+ * wide it should be (docs/adr/0008, Amendments).
27
32
  * - `direction="column"` (the default) never changes axis. `direction="split"` is the same column
28
33
  * turning into a row at and above 64rem, its children aligned to their start edge rather than
29
34
  * stretched. It is the only viewport-dependent behaviour here, and it is named for the job: the
package/dist/types/Layout/Cover/Cover.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import type { FunctionComponent, ReactNode } from 'react';
2
+ export interface ICoverProps {
3
+ /** The screen's one opaque slot, centred on both axes. Rendered unmodified: a menu composes a title,
4
+ * a tagline and a stack of actions here; a sign-in composes a form. `Cover` imposes no anatomy. */
5
+ children: ReactNode;
6
+ /** The line on the screen's bottom edge - a version line, a legal line - centred on the inline axis.
7
+ * Omitted - or given nothing: `null`, a flag's `false` - nothing renders: no empty container
8
+ * holds its place. */
9
+ foot?: ReactNode;
10
+ testId?: string;
11
+ }
12
+ /**
13
+ * A whole screen's frame: a plain container at least the cover height tall that centres one column in
14
+ * the leftover space, on both axes, with an optional foot pinned to the bottom edge. It is the fold's
15
+ * counterpart (CONTEXT.md): a menu, a sign-in, a splash is the entire app for a moment, and nothing
16
+ * follows it - so where `Hero` deliberately stops short of the viewport to say the page continues, a
17
+ * cover reaches it, because stopping short would signal a continuation that does not exist. It renders
18
+ * no heading and no landmark: whatever the screen says is composed in the slot.
19
+ *
20
+ * @Guarantees — enforced on every render
21
+ * - It is at least `--cover-height` tall: a `min-height` floor, not a fixed height, so content longer
22
+ * than the viewport grows the frame rather than overflowing it.
23
+ * - `children` sit in the middle of the leftover space, centred on both axes; the centring is fixed,
24
+ * with no distribution to choose.
25
+ * - `foot` renders on the frame's bottom edge, centred on the inline axis, and renders nothing - not
26
+ * even an empty container - when not given or given nothing to render (`null`, a flag's `false`).
27
+ * - `children` and `foot` render unmodified; the component adds nothing to and strips nothing from
28
+ * them, and sets no colour, no heading and no landmark of its own.
29
+ * - It owns its own inset - `--gutter` on the inline axis, `--space-region` on the block axis - the
30
+ * deliberate exception to "`Section` owns the gutter": the frame equals the viewport, so it cannot
31
+ * sit inside a `Section` band without overflowing it, and there is no band around it to carry one.
32
+ * - It is never sticky or fixed and needs no JavaScript, so it renders identically server-side.
33
+ *
34
+ * @CallerMustEnsure — the component cannot see these and does not check them
35
+ * - The cover stands on its own, never inside a `Section`: the band's vertical air would push the
36
+ * frame past the viewport it exists to equal. A page that continues past its first screen wants
37
+ * `Section` and `Hero` instead - the fold, not the screen.
38
+ * - Anything the page must announce - a landmark, a heading - is composed in the slot; the frame
39
+ * declares nothing over it.
40
+ *
41
+ * @UXGuidelines
42
+ * - A cover is for a page that is the whole app for a moment - a menu, a sign-in, a splash. The
43
+ * moment content follows on the same page, the screen has become a fold and stopping short of the
44
+ * viewport is the honest signal: reach for `Hero` inside a `Section` instead.
45
+ * - The foot is a quiet line, not a footer: a version, a legal notice. Content a viewer must reach
46
+ * belongs in the slot, where it sits in the column the screen is actually about.
47
+ */
48
+ export declare const Cover: FunctionComponent<ICoverProps>;
package/dist/types/index.d.ts CHANGED
@@ -21,6 +21,7 @@ export { Button } from 'Interaction/Button/Button';
21
21
  export { Input } from 'Interaction/Input/Input';
22
22
  export { Link } from 'Interaction/Link/Link';
23
23
  export { TextArea } from 'Interaction/TextArea/TextArea';
24
+ export { Cover } from 'Layout/Cover/Cover';
24
25
  export { Footer } from 'Layout/Footer/Footer';
25
26
  export type { FormState } from 'Layout/Form/Form';
26
27
  export { Form } from 'Layout/Form/Form';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juwel-development/design-system",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "type": "module",
5
5
  "description": "Shared design system: tokens and components.",
6
6
  "license": "MIT",
package/src/Arrangement/Stack/Stack.tsx CHANGED
@@ -2,20 +2,21 @@ import type { VariantProps } from 'class-variance-authority';
2
2
  import { cva } from 'class-variance-authority';
3
3
  import type { FunctionComponent, ReactNode } from 'react';
4
4
 
5
- // One recipe on a plain <div>, its variants declared in the order the prop table reads. Six existing
6
- // components hand-write this same set of utilities and the spec pins each against it - they cannot
7
- // import this one (architecture standard, the import test) - but that pinning compares the utilities
8
- // as a set, so nothing here is ordered to satisfy a test. The roster is the evidence and not the
9
- // token family: `band` is vertical padding and never a gap, and only `--measure` has ever bounded a
10
- // container, so the bound is on-or-off rather than a set of named measures (docs/adr/0008).
11
- // `split` turns at `lg`, the threshold Rail and DefinitionList already use.
5
+ // One recipe on a plain <div>. Six components hand-write this same utility set and their specs pin
6
+ // it as a set, not an order (architecture standard, the import test). `band` is vertical padding,
7
+ // never a gap; the bound holds exactly the two container roles docs/adr/0008's Amendments attest
8
+ // (#97), which argue the `w-full` pairing. `split` turns at `lg`, the Rail/DefinitionList threshold.
12
9
  const stack = cva('flex', {
13
10
  variants: {
14
11
  gap: {
15
12
  stack: 'gap-[var(--space-stack)]',
16
13
  region: 'gap-[var(--space-region)]',
17
14
  },
18
- measure: { true: 'max-w-[var(--measure)]', false: '' },
15
+ measure: {
16
+ true: 'max-w-[var(--measure)]',
17
+ false: '',
18
+ action: 'w-full max-w-[var(--measure-action)]',
19
+ },
19
20
  direction: {
20
21
  column: 'flex-col',
21
22
  split: 'flex-col lg:flex-row lg:items-start',
@@ -32,9 +33,9 @@ export interface IStackProps extends VariantProps<typeof stack> {
32
33
 
33
34
  /**
34
35
  * A vertical arrangement: children in a column, separated by one named space role and optionally
35
- * bounded by the reading measure. It owns one axis and one gap and nothing else - no landmark, no
36
- * heading, no band, no join, no gutter, no fill - and takes no outer space, so whatever holds it
37
- * owns the rhythm around it.
36
+ * bounded by the reading measure or the action column. It owns one axis and one gap and nothing
37
+ * else - no landmark, no heading, no band, no join, no gutter, no fill - and takes no outer space,
38
+ * so whatever holds it owns the rhythm around it.
38
39
  *
39
40
  * @Guarantees — enforced on every render
40
41
  * - It renders a `div` with no landmark role, no heading and no margin of its own.
@@ -44,6 +45,11 @@ export interface IStackProps extends VariantProps<typeof stack> {
44
45
  * - `measure` bounds the element to `--measure`, the reading column; omitted, the column is
45
46
  * unbounded, which is right wherever the children are not running text. It sets no font-size, so
46
47
  * a `ch`-counted measure keeps resolving against inherited body type.
48
+ * - `measure="action"` bounds the element to `--measure-action`, the action column - the width a
49
+ * stack of full-width controls fills, so they read as one unit and their labels align - and fills
50
+ * its slot up to that bound, so a centering frame cannot shrink it to its widest label. The two
51
+ * options answer different questions about what the column holds - text or controls - never how
52
+ * wide it should be (docs/adr/0008, Amendments).
47
53
  * - `direction="column"` (the default) never changes axis. `direction="split"` is the same column
48
54
  * turning into a row at and above 64rem, its children aligned to their start edge rather than
49
55
  * stretched. It is the only viewport-dependent behaviour here, and it is named for the job: the
package/src/Layout/Cover/Cover.tsx ADDED
@@ -0,0 +1,85 @@
1
+ import { cva } from 'class-variance-authority';
2
+ import type { FunctionComponent, ReactNode } from 'react';
3
+
4
+ // One recipe, no variants: both-axes centring is the component's whole job (#96), so there is nothing
5
+ // to choose - a distribution axis waits for evidence under ADR 0008's test. items-center centres the
6
+ // inline axis, the slot's auto margins (below) the block axis; alone among the composables it carries
7
+ // its own inset - the deliberate exception to "Section owns the gutter" (CONTEXT.md: Cover).
8
+ const cover = cva(
9
+ [
10
+ 'flex flex-col items-center',
11
+ 'min-h-[var(--cover-height)]',
12
+ 'px-[var(--gutter)] py-[var(--space-region)]',
13
+ ].join(' '),
14
+ );
15
+
16
+ // Not a second recipe - the slot has nothing to vary, and the standard allows one cva()
17
+ // (design-system-components.md §4), the frame's own above. Block-axis auto margins split the leftover
18
+ // space equally, so a foot after the slot still lands on the bottom edge - justify-center on the
19
+ // frame would centre slot and foot as one group and lift the foot off that edge.
20
+ const slot = 'my-auto';
21
+
22
+ export interface ICoverProps {
23
+ /** The screen's one opaque slot, centred on both axes. Rendered unmodified: a menu composes a title,
24
+ * a tagline and a stack of actions here; a sign-in composes a form. `Cover` imposes no anatomy. */
25
+ children: ReactNode;
26
+ /** The line on the screen's bottom edge - a version line, a legal line - centred on the inline axis.
27
+ * Omitted - or given nothing: `null`, a flag's `false` - nothing renders: no empty container
28
+ * holds its place. */
29
+ foot?: ReactNode;
30
+ testId?: string;
31
+ }
32
+
33
+ /**
34
+ * A whole screen's frame: a plain container at least the cover height tall that centres one column in
35
+ * the leftover space, on both axes, with an optional foot pinned to the bottom edge. It is the fold's
36
+ * counterpart (CONTEXT.md): a menu, a sign-in, a splash is the entire app for a moment, and nothing
37
+ * follows it - so where `Hero` deliberately stops short of the viewport to say the page continues, a
38
+ * cover reaches it, because stopping short would signal a continuation that does not exist. It renders
39
+ * no heading and no landmark: whatever the screen says is composed in the slot.
40
+ *
41
+ * @Guarantees — enforced on every render
42
+ * - It is at least `--cover-height` tall: a `min-height` floor, not a fixed height, so content longer
43
+ * than the viewport grows the frame rather than overflowing it.
44
+ * - `children` sit in the middle of the leftover space, centred on both axes; the centring is fixed,
45
+ * with no distribution to choose.
46
+ * - `foot` renders on the frame's bottom edge, centred on the inline axis, and renders nothing - not
47
+ * even an empty container - when not given or given nothing to render (`null`, a flag's `false`).
48
+ * - `children` and `foot` render unmodified; the component adds nothing to and strips nothing from
49
+ * them, and sets no colour, no heading and no landmark of its own.
50
+ * - It owns its own inset - `--gutter` on the inline axis, `--space-region` on the block axis - the
51
+ * deliberate exception to "`Section` owns the gutter": the frame equals the viewport, so it cannot
52
+ * sit inside a `Section` band without overflowing it, and there is no band around it to carry one.
53
+ * - It is never sticky or fixed and needs no JavaScript, so it renders identically server-side.
54
+ *
55
+ * @CallerMustEnsure — the component cannot see these and does not check them
56
+ * - The cover stands on its own, never inside a `Section`: the band's vertical air would push the
57
+ * frame past the viewport it exists to equal. A page that continues past its first screen wants
58
+ * `Section` and `Hero` instead - the fold, not the screen.
59
+ * - Anything the page must announce - a landmark, a heading - is composed in the slot; the frame
60
+ * declares nothing over it.
61
+ *
62
+ * @UXGuidelines
63
+ * - A cover is for a page that is the whole app for a moment - a menu, a sign-in, a splash. The
64
+ * moment content follows on the same page, the screen has become a fold and stopping short of the
65
+ * viewport is the honest signal: reach for `Hero` inside a `Section` instead.
66
+ * - The foot is a quiet line, not a footer: a version, a legal notice. Content a viewer must reach
67
+ * belongs in the slot, where it sits in the column the screen is actually about.
68
+ */
69
+ export const Cover: FunctionComponent<ICoverProps> = ({
70
+ children,
71
+ foot,
72
+ testId,
73
+ }) => {
74
+ // Absence, not falsiness, after Form's note guard: `foot={showLegal && <p/>}` hands over `false`,
75
+ // and an empty <div> would still be a flex item sitting on the bottom edge.
76
+ const hasFoot =
77
+ foot !== undefined && foot !== null && typeof foot !== 'boolean';
78
+
79
+ return (
80
+ <div className={cover()} data-testid={testId}>
81
+ <div className={slot}>{children}</div>
82
+ {hasFoot && <div>{foot}</div>}
83
+ </div>
84
+ );
85
+ };
package/src/Theme/renderTokens.ts CHANGED
@@ -129,15 +129,15 @@ const TYPOGRAPHY = `@theme {
129
129
  --tracking-optical: -0.02em;
130
130
  }`;
131
131
 
132
- /* The reading measure is in ch, not rem, so the character count stays held when the body size moves
133
- under it; --measure-display is narrower because bigger type wants fewer characters per line, and
134
- --measure-wide slightly wider - the standfirst of a page head (PageHead #18) is an opening statement,
135
- not a reading column, so it runs a little past the reading measure by design. All three in ch and,
136
- having no Tailwind namespace, in :root beside radius, read as max-w-[var(--measure)]. */
132
+ /* The reading measures are in ch so the character count holds when the body size moves under them:
133
+ --measure-display narrower because bigger type wants fewer characters per line, --measure-wide a
134
+ little past the reading column for the page-head standfirst (PageHead #18). --measure-action is
135
+ the action column, in rem (docs/adr/0008, Amendments, #97); 20rem clears --control-min-width. */
137
136
  const MEASURE = `:root {
138
137
  --measure: 66ch;
139
138
  --measure-display: 36ch;
140
139
  --measure-wide: 72ch;
140
+ --measure-action: 20rem;
141
141
  }`;
142
142
 
143
143
  /* Three spacing roles, not a ladder: --space-stack is the sibling gap in a stack, --space-region the air
@@ -173,6 +173,14 @@ const FOLD = `:root {
173
173
  --fold-height: min(70vh, 40rem);
174
174
  }`;
175
175
 
176
+ /* The least height a whole screen takes (CONTEXT.md: Cover) - measured against the screen like the
177
+ fold, in :root beside it with no Tailwind namespace, read as min-h-[var(--cover-height)]. In svh so
178
+ a mobile browser's collapsing chrome never hides a foot pinned to the bottom edge. A floor and
179
+ never a ceiling, so overflowing content grows the frame; enforced per ADR 0004. */
180
+ const COVER = `:root {
181
+ --cover-height: 100svh;
182
+ }`;
183
+
176
184
  /* Four aspect roles in a @theme block like typography: --aspect-* is a Tailwind 4 namespace, so it
177
185
  generates the aspect-portrait utilities Figure reaches rather than a :root value. Named shapes, not
178
186
  a ladder - ADR 0003/0004 rejected a radius and spacing scale (see SPACING) because a scale lets a
@@ -254,7 +262,9 @@ ${TYPOGRAPHY}
254
262
  after it and are not carried in @theme inline with the palette. */
255
263
  ${ASPECT}
256
264
 
257
- /* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
265
+ /* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
266
+ are in ch against the type; the action column is in rem against the root, since it bounds a stack
267
+ of controls rather than a reading line (docs/adr/0008, Amendments). */
258
268
  ${MEASURE}
259
269
 
260
270
  /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -267,6 +277,9 @@ ${GUTTER}
267
277
  /* The fold height has no Tailwind namespace either, so it sits in :root beside the gutter. */
268
278
  ${FOLD}
269
279
 
280
+ /* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
281
+ ${COVER}
282
+
270
283
  /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
271
284
  ${TICK}
272
285
  `;
package/src/index.ts CHANGED
@@ -22,6 +22,7 @@ export { Button } from 'Interaction/Button/Button';
22
22
  export { Input } from 'Interaction/Input/Input';
23
23
  export { Link } from 'Interaction/Link/Link';
24
24
  export { TextArea } from 'Interaction/TextArea/TextArea';
25
+ export { Cover } from 'Layout/Cover/Cover';
25
26
  export { Footer } from 'Layout/Footer/Footer';
26
27
  export type { FormState } from 'Layout/Form/Form';
27
28
  export { Form } from 'Layout/Form/Form';
package/src/tokens.css CHANGED
@@ -177,11 +177,14 @@
177
177
  --aspect-wide: 16 / 9;
178
178
  }
179
179
 
180
- /* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
180
+ /* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
181
+ are in ch against the type; the action column is in rem against the root, since it bounds a stack
182
+ of controls rather than a reading line (docs/adr/0008, Amendments). */
181
183
  :root {
182
184
  --measure: 66ch;
183
185
  --measure-display: 36ch;
184
186
  --measure-wide: 72ch;
187
+ --measure-action: 20rem;
185
188
  }
186
189
 
187
190
  /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -202,6 +205,11 @@
202
205
  --fold-height: min(70vh, 40rem);
203
206
  }
204
207
 
208
+ /* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
209
+ :root {
210
+ --cover-height: 100svh;
211
+ }
212
+
205
213
  /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
206
214
  :root {
207
215
  --tick-length: 0.9rem;
package/src/tokens.dark.css CHANGED
@@ -148,11 +148,14 @@
148
148
  --aspect-wide: 16 / 9;
149
149
  }
150
150
 
151
- /* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
151
+ /* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
152
+ are in ch against the type; the action column is in rem against the root, since it bounds a stack
153
+ of controls rather than a reading line (docs/adr/0008, Amendments). */
152
154
  :root {
153
155
  --measure: 66ch;
154
156
  --measure-display: 36ch;
155
157
  --measure-wide: 72ch;
158
+ --measure-action: 20rem;
156
159
  }
157
160
 
158
161
  /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -173,6 +176,11 @@
173
176
  --fold-height: min(70vh, 40rem);
174
177
  }
175
178
 
179
+ /* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
180
+ :root {
181
+ --cover-height: 100svh;
182
+ }
183
+
176
184
  /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
177
185
  :root {
178
186
  --tick-length: 0.9rem;
package/src/tokens.light.css CHANGED
@@ -148,11 +148,14 @@
148
148
  --aspect-wide: 16 / 9;
149
149
  }
150
150
 
151
- /* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
151
+ /* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
152
+ are in ch against the type; the action column is in rem against the root, since it bounds a stack
153
+ of controls rather than a reading line (docs/adr/0008, Amendments). */
152
154
  :root {
153
155
  --measure: 66ch;
154
156
  --measure-display: 36ch;
155
157
  --measure-wide: 72ch;
158
+ --measure-action: 20rem;
156
159
  }
157
160
 
158
161
  /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -173,6 +176,11 @@
173
176
  --fold-height: min(70vh, 40rem);
174
177
  }
175
178
 
179
+ /* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
180
+ :root {
181
+ --cover-height: 100svh;
182
+ }
183
+
176
184
  /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
177
185
  :root {
178
186
  --tick-length: 0.9rem;