@jonmilner/ui 0.3.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/Badge/Badge.css +1 -1
  2. package/dist/Box/Box.css +1 -1
  3. package/dist/Button/Button.css +1 -1
  4. package/dist/Checkbox/Checkbox.css +1 -1
  5. package/dist/Chip/Chip.css +1 -1
  6. package/dist/Clickable/Clickable.css +1 -1
  7. package/dist/Dialog/Dialog.css +1 -1
  8. package/dist/Field/Field.css +1 -1
  9. package/dist/Field/index.d.mts +3 -3
  10. package/dist/Field/index.mjs +50 -59
  11. package/dist/Heading/Heading.css +1 -1
  12. package/dist/Icon/Icon.css +1 -1
  13. package/dist/IconButton/IconButton.css +1 -1
  14. package/dist/Inline/Inline.css +1 -1
  15. package/dist/Menu/Menu.css +1 -1
  16. package/dist/MultiSelect/MultiSelect.css +1 -1
  17. package/dist/SearchField/SearchField.css +1 -1
  18. package/dist/SearchField/client.d.mts +2 -2
  19. package/dist/Stack/Stack.css +1 -1
  20. package/dist/Tabs/Tabs.css +1 -1
  21. package/dist/Tabs/index.d.mts +1 -1
  22. package/dist/Tabs/index.mjs +49 -49
  23. package/dist/Tag/Tag.css +1 -1
  24. package/dist/Text/Text.css +1 -1
  25. package/dist/Toast/Toast.css +1 -1
  26. package/dist/VisuallyHidden/VisuallyHidden.css +2 -0
  27. package/dist/VisuallyHidden/VisuallyHidden.css.mjs +8 -0
  28. package/dist/VisuallyHidden/index.d.mts +6 -0
  29. package/dist/VisuallyHidden/index.mjs +12 -0
  30. package/dist/base.css +1 -1
  31. package/dist/docs/SearchField.md +1 -1
  32. package/dist/docs/VisuallyHidden.md +78 -0
  33. package/dist/docs/lint.md +3 -3
  34. package/dist/docs/llms.txt +1 -0
  35. package/dist/docs/manifest.json +15 -1
  36. package/dist/docs/migrations/0.4.0.md +26 -0
  37. package/dist/index.d.mts +2 -1
  38. package/dist/index.mjs +2 -1
  39. package/dist/lint/index.d.mts +4 -4
  40. package/dist/lint/index.mjs +2 -1
  41. package/dist/styles/atoms.css +1 -1
  42. package/dist/styles/layers.css +1 -1
  43. package/dist/styles/split-text-props.mjs +16 -0
  44. package/package.json +5 -1
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.badge{._1ixfil10{border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}
package/dist/Box/Box.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.box{._11caph0{box-sizing:border-box}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent);--color-danger-fg:var(--color-accent-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.chip{._1l071c80{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}._1l071c80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){background-color:var(--color-accent);color:var(--color-accent-fg);border-color:#0000}._1l071c84{display:none}[aria-pressed=true]>._1l071c84{display:inline-block}@media (hover:hover){._1l071c80:not([aria-disabled=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){._1l071c80{forced-color-adjust:none}._1l071c80:not([aria-disabled=true]):hover{background-image:none}._1l071c80[aria-disabled=true]{color:graytext;border-color:graytext}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){color:highlighttext;background-color:highlight;border-color:highlight}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.clickable{._10dxgnx0{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._10dxgnx0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._10dxgnx0[aria-disabled=true]{cursor:not-allowed}._10dxgnx0[aria-busy=true]{cursor:progress}}@layer reset{._10dxgnx0{appearance:none;font:inherit;color:inherit;text-align:inherit;background:0 0;border:0;padding:0;text-decoration:none}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.dialog{.iyoziv0{background-color:color-mix(in srgb, var(--color-shadow) 40%, transparent);transition:opacity var(--duration-med) var(--easing-standard);inset-block:0;inset-inline:0}.iyoziv0[data-starting-style],.iyoziv0[data-ending-style]{opacity:0}.iyoziv1{max-block-size:calc(100% - 2 * var(--space-16));border:var(--space-1) solid var(--color-border);transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-enter);inset-block:0;inset-inline:0}.iyoziv1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.iyoziv1[data-starting-style],.iyoziv1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}.iyoziv2{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64))}.iyoziv3{inline-size:min(100% - 2 * var(--space-16), 8 * var(--space-64))}.iyoziv4{inline-size:min(100% - 2 * var(--space-16), 10 * var(--space-64))}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.field{._13w7r940[data-disabled]{color:var(--color-fg-muted)}._13w7r941{overflow-wrap:anywhere}._13w7r942{vertical-align:middle;margin-inline-end:var(--space-4);display:inline-block}}
@@ -8,9 +8,9 @@ export type FieldLabelProps = TextPartProps<Field$1.Label.Props>;
8
8
  export type FieldDescriptionProps = TextPartProps<Field$1.Description.Props>;
9
9
  export type FieldErrorProps = TextPartProps<Field$1.Error.Props>;
10
10
  declare function FieldRoot({ display, flexDirection, gap, className, style, ...props }: FieldProps): import("react").JSX.Element;
11
- declare function FieldLabel({ nativeLabel, size, font, weight, leading, truncate, wrap, className, style, ...props }: FieldLabelProps): import("react").JSX.Element;
12
- declare function FieldDescription({ size, font, weight, leading, truncate, wrap, color, className, style, ...props }: FieldDescriptionProps): import("react").JSX.Element;
13
- declare function FieldError({ children, match, size, font, weight, leading, truncate, wrap, color, className, style, ...props }: FieldErrorProps): import("react").JSX.Element;
11
+ declare function FieldLabel({ nativeLabel, size, font, weight, className, style, ...props }: FieldLabelProps): import("react").JSX.Element;
12
+ declare function FieldDescription({ size, color, className, style, ...props }: FieldDescriptionProps): import("react").JSX.Element;
13
+ declare function FieldError({ children, match, size, color, className, style, ...props }: FieldErrorProps): import("react").JSX.Element;
14
14
  export declare const Field: typeof FieldRoot & {
15
15
  Label: typeof FieldLabel;
16
16
  Description: typeof FieldDescription;
@@ -2,17 +2,18 @@ import { join as e } from "../styles/join.mjs";
2
2
  import { splitStyleProps as t } from "../styles/split-style-props.mjs";
3
3
  import { Box as n } from "../Box/index.mjs";
4
4
  import { Text as r } from "../Text/index.mjs";
5
- import { error as i, label as a } from "./Field.css.mjs";
6
- import { FieldErrorMessage as o } from "./client.mjs";
7
- import { jsx as s, jsxs as c } from "react/jsx-runtime";
8
- import { Children as l } from "react";
9
- import { Field as u } from "@base-ui/react/field";
5
+ import { splitTextProps as i } from "../styles/split-text-props.mjs";
6
+ import { error as a, label as o } from "./Field.css.mjs";
7
+ import { FieldErrorMessage as s } from "./client.mjs";
8
+ import { jsx as c, jsxs as l } from "react/jsx-runtime";
9
+ import { Children as u } from "react";
10
+ import { Field as d } from "@base-ui/react/field";
10
11
  //#region src/Field/index.tsx
11
- function d({ display: e = "flex", flexDirection: r = "column", gap: i = "8", className: a, style: o, ...c }) {
12
- let [l, d] = t(c);
13
- return /* @__PURE__ */ s(u.Root, {
14
- ...d,
15
- render: /* @__PURE__ */ s(n, {
12
+ function f({ display: e = "flex", flexDirection: r = "column", gap: i = "8", className: a, style: o, ...s }) {
13
+ let [l, u] = t(s);
14
+ return /* @__PURE__ */ c(d.Root, {
15
+ ...u,
16
+ render: /* @__PURE__ */ c(n, {
16
17
  display: e,
17
18
  flexDirection: r,
18
19
  gap: i,
@@ -22,71 +23,61 @@ function d({ display: e = "flex", flexDirection: r = "column", gap: i = "8", cla
22
23
  })
23
24
  });
24
25
  }
25
- function f({ nativeLabel: n = !0, size: i = "sm", font: o = "label", weight: c = "medium", leading: l, truncate: d, wrap: f, className: p, style: m, ...h }) {
26
- let [g, _] = t(h);
27
- return /* @__PURE__ */ s(u.Label, {
26
+ function p({ nativeLabel: n = !0, size: a = "sm", font: s = "label", weight: l = "medium", className: u, style: f, ...p }) {
27
+ let [m, h] = i(p), [g, _] = t(h);
28
+ return /* @__PURE__ */ c(d.Label, {
28
29
  ..._,
29
30
  nativeLabel: n,
30
- render: /* @__PURE__ */ s(r, {
31
+ render: /* @__PURE__ */ c(r, {
31
32
  as: n ? "label" : "span",
32
- size: i,
33
- font: o,
34
- weight: c,
35
- leading: l,
36
- truncate: d,
37
- wrap: f,
33
+ font: s,
34
+ size: a,
35
+ weight: l,
36
+ ...m,
38
37
  ...g,
39
- className: e(a, p),
40
- style: m
38
+ className: e(o, u),
39
+ style: f
41
40
  })
42
41
  });
43
42
  }
44
- function p({ size: e = "sm", font: n, weight: i, leading: a, truncate: o, wrap: c, color: l = "fgMuted", className: d, style: f, ...p }) {
45
- let [m, h] = t(p);
46
- return /* @__PURE__ */ s(u.Description, {
47
- ...h,
48
- render: /* @__PURE__ */ s(r, {
43
+ function m({ size: e = "sm", color: n = "fgMuted", className: a, style: o, ...s }) {
44
+ let [l, u] = i(s), [f, p] = t(u);
45
+ return /* @__PURE__ */ c(d.Description, {
46
+ ...p,
47
+ render: /* @__PURE__ */ c(r, {
48
+ color: n,
49
49
  size: e,
50
- font: n,
51
- weight: i,
52
- leading: a,
53
- truncate: o,
54
- wrap: c,
55
- color: l,
56
- ...m,
57
- className: d,
58
- style: f
50
+ ...l,
51
+ ...f,
52
+ className: a,
53
+ style: o
59
54
  })
60
55
  });
61
56
  }
62
- function m({ children: n, match: a, size: u = "sm", font: d, weight: f, leading: p, truncate: m, wrap: h, color: g = "danger", className: _, style: v, ...y }) {
63
- let [b, x] = t(y), S = l.toArray(n).some((e) => e !== "");
64
- return /* @__PURE__ */ c(r, {
57
+ function h({ children: n, match: o, size: d = "sm", color: f = "danger", className: p, style: m, ...h }) {
58
+ let [g, _] = i(h), [v, y] = t(_), b = u.toArray(n).some((e) => e !== "");
59
+ return /* @__PURE__ */ l(r, {
65
60
  "aria-atomic": !0,
66
61
  "aria-live": "assertive",
67
62
  as: "div",
68
- size: u,
69
- font: d,
70
- weight: f,
71
- leading: p,
72
- truncate: m,
73
- wrap: h,
74
- color: g,
75
- ...b,
76
- className: e(i, _),
77
- style: v,
78
- children: [/* @__PURE__ */ s(o, {
79
- ...x,
80
- ...S && { children: n },
81
- match: a ?? (S || void 0),
82
- size: u
63
+ color: f,
64
+ size: d,
65
+ ...g,
66
+ ...v,
67
+ className: e(a, p),
68
+ style: m,
69
+ children: [/* @__PURE__ */ c(s, {
70
+ ...y,
71
+ ...b && { children: n },
72
+ match: o ?? (b || void 0),
73
+ size: d
83
74
  }), "​"]
84
75
  });
85
76
  }
86
- var h = Object.assign(d, {
87
- Label: f,
88
- Description: p,
89
- Error: m
77
+ var g = Object.assign(f, {
78
+ Label: p,
79
+ Description: m,
80
+ Error: h
90
81
  });
91
82
  //#endregion
92
- export { h as Field };
83
+ export { g as Field };
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.heading{.yaxwxv0{text-wrap:balance}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.icon{.wz3ei00{flex-shrink:0}.wz3ei01{inline-size:var(--font-size-xs);block-size:var(--font-size-xs)}.wz3ei02{inline-size:var(--font-size-sm);block-size:var(--font-size-sm)}.wz3ei03{inline-size:var(--font-size-med);block-size:var(--font-size-med)}.wz3ei04{inline-size:var(--font-size-lg);block-size:var(--font-size-lg)}.wz3ei05{inline-size:var(--font-size-xl);block-size:var(--font-size-xl)}.wz3ei06{inline-size:var(--font-size-2xl);block-size:var(--font-size-2xl)}.wz3ei07{inline-size:var(--font-size-3xl);block-size:var(--font-size-3xl)}.wz3ei08{inline-size:var(--font-size-4xl);block-size:var(--font-size-4xl)}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.icon-button{.n2fy8x0{border-width:var(--space-1);border-style:solid}.n2fy8x0[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.n2fy8x2{border-color:#0000}.n2fy8x3{border-color:var(--color-border-strong)}@media (hover:hover){.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.n2fy8x0{forced-color-adjust:none}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.n2fy8x0[aria-disabled=true]{color:graytext;border-color:graytext}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.inline;
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.menu{:where(._393eil0[data-closed])>[data-base-ui-focus-guard]{visibility:hidden}._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil2[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);appearance:none;grid-area:1/1;padding-block:0}._1cj8r6g1::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g1::-webkit-search-cancel-button{appearance:none}._1cj8r6g1::-webkit-search-decoration{appearance:none}._1cj8r6g1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g1[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g2{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g3{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g4{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g5{pointer-events:none;color:var(--color-fg-muted);grid-area:1/1;justify-self:start}._1cj8r6g6{margin-inline-start:var(--space-8)}._1cj8r6g7{margin-inline-start:var(--space-12)}._1cj8r6g8{margin-inline-start:var(--space-16)}._1cj8r6g9{border-color:#0000;grid-area:1/1;justify-self:end;margin-inline-end:var(--space-4)}@media (forced-colors:active){._1cj8r6g1:disabled{color:graytext;border-color:graytext}}}
@@ -1,5 +1,5 @@
1
1
  import "./index.mjs";
2
- import { AriaAttributes, ComponentPropsWithRef } from "react";
2
+ import { ComponentPropsWithRef } from "react";
3
3
  //#region src/SearchField/client.d.ts
4
- export type SearchFieldInputProps = Pick<ComponentPropsWithRef<"input">, "ref" | "id" | "autoFocus" | "autoComplete" | "spellCheck" | "enterKeyHint" | "maxLength" | "onKeyDown" | Exclude<keyof AriaAttributes, "aria-label" | "aria-labelledby" | "aria-invalid" | "aria-describedby" | "aria-errormessage" | "aria-disabled" | "aria-required" | "aria-readonly" | "aria-hidden">>;
4
+ export type SearchFieldInputProps = Pick<ComponentPropsWithRef<"input">, "ref" | "id" | "autoFocus" | "autoComplete" | "spellCheck" | "enterKeyHint" | "maxLength" | "onKeyDown" | "aria-atomic" | "aria-busy" | "aria-controls" | "aria-current" | "aria-details" | "aria-flowto" | "aria-keyshortcuts" | "aria-live" | "aria-owns" | "aria-relevant" | "aria-roledescription" | "aria-activedescendant" | "aria-autocomplete" | "aria-placeholder">;
5
5
  //#endregion
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.stack;
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[aria-orientation=vertical]>[role=tab]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}
@@ -9,7 +9,7 @@ export type TabsTabProps = PartProps<Omit<Tabs$1.Tab.Props, keyof TextOwnProps>>
9
9
  export type TabsPanelProps = PartProps<Tabs$1.Panel.Props>;
10
10
  declare function TabsRoot({ orientation, display, flexDirection, flexWrap, gap, className, style, ...props }: TabsProps): import("react").JSX.Element;
11
11
  declare function TabsList({ display, flexWrap, gap, position, className, style, ...props }: TabsListProps): import("react").JSX.Element;
12
- declare function TabsTab({ children, size, font, weight, leading, wrap, paddingInline, justifyContent, minBlockSize, position, color, className, style, ...props }: TabsTabProps): import("react").JSX.Element;
12
+ declare function TabsTab({ children, size, font, weight, paddingInline, justifyContent, minBlockSize, position, color, className, style, ...props }: TabsTabProps): import("react").JSX.Element;
13
13
  declare function TabsPanel({ flexGrow, className, style, ...props }: TabsPanelProps): import("react").JSX.Element;
14
14
  export declare const Tabs: typeof TabsRoot & {
15
15
  List: typeof TabsList;
@@ -3,87 +3,87 @@ import { splitStyleProps as t } from "../styles/split-style-props.mjs";
3
3
  import { Box as n } from "../Box/index.mjs";
4
4
  import { Clickable as r } from "../Clickable/index.mjs";
5
5
  import { Text as i } from "../Text/index.mjs";
6
- import { indicator as a, list as o, panel as s, tab as c } from "./Tabs.css.mjs";
7
- import { jsx as l, jsxs as u } from "react/jsx-runtime";
8
- import { Tabs as d } from "@base-ui/react/tabs";
6
+ import { splitTextProps as a } from "../styles/split-text-props.mjs";
7
+ import { indicator as o, list as s, panel as c, tab as l } from "./Tabs.css.mjs";
8
+ import { jsx as u, jsxs as d } from "react/jsx-runtime";
9
+ import { Tabs as f } from "@base-ui/react/tabs";
9
10
  //#region src/Tabs/index.tsx
10
- function f({ orientation: e = "horizontal", display: r = "flex", flexDirection: i = e === "vertical" ? "row" : "column", flexWrap: a = e === "vertical" ? "wrap" : "nowrap", gap: o = "16", className: s, style: c, ...u }) {
11
- let [f, p] = t(u);
12
- return /* @__PURE__ */ l(d.Root, {
11
+ function p({ orientation: e = "horizontal", display: r = "flex", flexDirection: i = e === "vertical" ? "row" : "column", flexWrap: a = e === "vertical" ? "wrap" : "nowrap", gap: o = "16", className: s, style: c, ...l }) {
12
+ let [d, p] = t(l);
13
+ return /* @__PURE__ */ u(f.Root, {
13
14
  ...p,
14
15
  orientation: e,
15
- render: /* @__PURE__ */ l(n, {
16
+ render: /* @__PURE__ */ u(n, {
16
17
  display: r,
17
18
  flexDirection: i,
18
19
  flexWrap: a,
19
20
  gap: o,
20
- ...f,
21
+ ...d,
21
22
  className: s,
22
23
  style: c
23
24
  })
24
25
  });
25
26
  }
26
- function p({ display: r = "flex", flexWrap: i = "wrap", gap: a = "4", position: s = "relative", className: c, style: u, ...f }) {
27
- let [p, m] = t(f);
28
- return /* @__PURE__ */ l(d.List, {
27
+ function m({ display: r = "flex", flexWrap: i = "wrap", gap: a = "4", position: o = "relative", className: c, style: l, ...d }) {
28
+ let [p, m] = t(d);
29
+ return /* @__PURE__ */ u(f.List, {
29
30
  ...m,
30
- render: /* @__PURE__ */ l(n, {
31
+ render: /* @__PURE__ */ u(n, {
31
32
  display: r,
32
33
  flexWrap: i,
33
34
  gap: a,
34
- position: s,
35
+ position: o,
35
36
  ...p,
36
- className: e(o, c),
37
- style: u
37
+ className: e(s, c),
38
+ style: l
38
39
  })
39
40
  });
40
41
  }
41
- function m({ children: o, size: s = "sm", font: f = "label", weight: p = "medium", leading: m, wrap: h, paddingInline: g = "12", justifyContent: _ = "start", minBlockSize: v = "med", position: y = "relative", color: b = "fgMuted", className: x, style: S, ...C }) {
42
- let [w, T] = t(C);
43
- return /* @__PURE__ */ u(d.Tab, {
44
- ...T,
45
- render: /* @__PURE__ */ l(r, {
46
- color: b,
47
- justifyContent: _,
48
- minBlockSize: v,
49
- paddingInline: g,
50
- position: y,
51
- ...w,
52
- className: e(c, x),
53
- style: S
42
+ function h({ children: s, size: c = "sm", font: p = "label", weight: m = "medium", paddingInline: h = "12", justifyContent: g = "start", minBlockSize: _ = "med", position: v = "relative", color: y = "fgMuted", className: b, style: x, ...S }) {
43
+ let [C, w] = a(S), [T, E] = t(w);
44
+ return /* @__PURE__ */ d(f.Tab, {
45
+ ...E,
46
+ render: /* @__PURE__ */ u(r, {
47
+ color: y,
48
+ justifyContent: g,
49
+ minBlockSize: _,
50
+ paddingInline: h,
51
+ position: v,
52
+ ...T,
53
+ className: e(l, b),
54
+ style: x
54
55
  }),
55
- children: [/* @__PURE__ */ l(i, {
56
+ children: [/* @__PURE__ */ u(i, {
56
57
  as: "span",
57
- size: s,
58
- font: f,
59
- weight: p,
60
- leading: m,
61
- wrap: h,
62
- children: o
63
- }), /* @__PURE__ */ l(n, {
58
+ font: p,
59
+ size: c,
60
+ weight: m,
61
+ ...C,
62
+ children: s
63
+ }), /* @__PURE__ */ u(n, {
64
64
  "aria-hidden": !0,
65
65
  as: "span",
66
- className: a,
66
+ className: o,
67
67
  position: "absolute"
68
68
  })]
69
69
  });
70
70
  }
71
- function h({ flexGrow: r = 1, className: i, style: a, ...o }) {
72
- let [c, u] = t(o);
73
- return /* @__PURE__ */ l(d.Panel, {
74
- ...u,
75
- render: /* @__PURE__ */ l(n, {
71
+ function g({ flexGrow: r = 1, className: i, style: a, ...o }) {
72
+ let [s, l] = t(o);
73
+ return /* @__PURE__ */ u(f.Panel, {
74
+ ...l,
75
+ render: /* @__PURE__ */ u(n, {
76
76
  flexGrow: r,
77
- ...c,
78
- className: e(s, i),
77
+ ...s,
78
+ className: e(c, i),
79
79
  style: a
80
80
  })
81
81
  });
82
82
  }
83
- var g = Object.assign(f, {
84
- List: p,
85
- Tab: m,
86
- Panel: h
83
+ var _ = Object.assign(p, {
84
+ List: m,
85
+ Tab: h,
86
+ Panel: g
87
87
  });
88
88
  //#endregion
89
- export { g as Tabs };
89
+ export { _ as Tabs };
package/dist/Tag/Tag.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqq{white-space:normal;text-overflow:clip}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc2:has([data-swiping],[data-swipe-direction=down]){overflow-y:hidden}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}
@@ -0,0 +1,2 @@
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
+ @layer components.visually-hidden{._1qk18b30{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}}
@@ -0,0 +1,8 @@
1
+ import "../styles/layers.css";
2
+ import "./VisuallyHidden.css";
3
+ /* empty css */
4
+ /* empty css */
5
+ //#region src/VisuallyHidden/VisuallyHidden.css.ts
6
+ var e = "_1qk18b30";
7
+ //#endregion
8
+ export { e as root };
@@ -0,0 +1,6 @@
1
+ import { PolymorphicProps } from "../types.mjs";
2
+ import { ElementType } from "react";
3
+ //#region src/VisuallyHidden/index.d.ts
4
+ export type VisuallyHiddenProps<T extends ElementType = "span"> = PolymorphicProps<T>;
5
+ export declare function VisuallyHidden<T extends ElementType = "span">({ as, className, ...props }: VisuallyHiddenProps<T>): import("react").JSX.Element;
6
+ //#endregion
@@ -0,0 +1,12 @@
1
+ import { join as e } from "../styles/join.mjs";
2
+ import { root as t } from "./VisuallyHidden.css.mjs";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ //#region src/VisuallyHidden/index.tsx
5
+ function r({ as: r, className: i, ...a }) {
6
+ return /* @__PURE__ */ n(r ?? "span", {
7
+ ...a,
8
+ className: e(t, i)
9
+ });
10
+ }
11
+ //#endregion
12
+ export { r as VisuallyHidden };
package/dist/base.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
3
3
 
4
4
  @font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback", sans-serif;--font-heading:"Inter", "Inter Fallback", sans-serif;--font-display:"Inter", "Inter Fallback", sans-serif;--font-label:"Inter", "Inter Fallback", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
@@ -25,7 +25,7 @@ A form field for a search query: an `<input type="search">` (role `searchbox`) w
25
25
  - `disabled` uses the native `disabled`: the input leaves the tab order and does not submit, with a dashed border. `required` sets the native `required`.
26
26
  - `name` submits the query with its form. An uncontrolled field does not follow a native form reset; control it if the form resets.
27
27
  - Style props, `className` and `style` go to the `Field` around the label, input and messages, not to the input.
28
- - `inputProps` reach the input: `ref`, `id`, `autoFocus`, `autoComplete`, `spellCheck`, `enterKeyHint`, `maxLength`, `onKeyDown` and `aria-*` such as `aria-controls` (ADR 0093). `label` owns the name, Field owns `aria-invalid`, `aria-describedby` and `aria-errormessage`, and `disabled` and `required` own their state, so those, `aria-readonly` and `aria-hidden` are not among them.
28
+ - `inputProps` reach the input: `ref`, `id`, `autoFocus`, `autoComplete`, `spellCheck`, `enterKeyHint`, `maxLength`, `onKeyDown`, and only the `aria-*` valid on a search box (ADR 0093, 0108): `aria-controls`, `aria-activedescendant`, `aria-autocomplete`, `aria-placeholder`, `aria-details`, `aria-keyshortcuts`, `aria-owns`, `aria-flowto`, `aria-current`, `aria-roledescription`, `aria-busy`, `aria-live`, `aria-atomic` and `aria-relevant`. `label` owns the name, Field owns `aria-invalid`, `aria-describedby` and `aria-errormessage`, and `disabled` and `required` own their state, so those, `aria-readonly`, `aria-hidden` and the single-line input's `aria-multiline` are not among them. `aria-expanded` and `aria-haspopup` are not either: a search box with a popup list is a Combobox. The type closes the set, so an object literal with another `aria-*` is a type error; nothing strips one at runtime. Hint with `placeholder`, not `aria-placeholder`: the input has a native placeholder.
29
29
  - A consumer `onKeyDown` runs before the field's own. Escape still clears unless that handler called `event.preventDefault()`. A prevented Escape also propagates, so a surrounding Dialog closes on it.
30
30
  - A consumer `ref` gets the input, and the clear button still returns focus to it. A consumer `id` takes over from Field's generated one at hydration, and the label follows it.
31
31
  - Wrapping the field in a search landmark (`<search>` or `role="search"`, with the form around it) is the page's job, not the field's.
@@ -0,0 +1,78 @@
1
+ # VisuallyHidden
2
+
3
+ ## Purpose
4
+
5
+ Text that screen readers read and nobody sees: a 1px clipped box, out of the layout, still in the accessibility tree. Use it for words a sighted user gets from the layout, an icon or a color, never to hide a control or a skip link. One element, chosen with `as`, a `span` by default.
6
+
7
+ ## When to use
8
+
9
+ - Words a sighted user gets from the layout, an icon or a color but a screen reader would miss: "(opens in a new tab)", "3 unread messages" beside a bare count, the unit after a number.
10
+ - A heading that names a region the design shows no title for, so heading navigation still finds it: `<VisuallyHidden as="h2">`.
11
+ - A label for a native control the design leaves unlabelled, with `as="label"` and `htmlFor`.
12
+
13
+ ## When not to use
14
+
15
+ - Naming a control: `IconButton` takes a `label`, `Icon` takes a `label`, `SearchField` and `Field.Label` label their inputs. Use those first.
16
+ - Content that should leave the accessibility tree as well: render nothing, or use `hidden`.
17
+ - Text that appears on keyboard focus, such as a skip link: this is hidden only, with no visible-on-focus mode.
18
+ - Announcing changes: use `useToast`, whose live regions are already in place.
19
+
20
+ ## Rules
21
+
22
+ - It renders the element `as` names, a `span` by default, which fits anywhere text does. Pick a `div` or a heading only outside any `Text`, and never a focusable element, which would take focus while unseen.
23
+ - It is not a Box: it takes no style props, since any of them could only undo the hiding. The consumer's `className` comes last and `style` passes through.
24
+ - Its children are its own text; it renders no `Text`, so put it, as a `span`, inside the `Text` or control it describes. The `ui/no-bare-text` lint passes text inside it (`textComponents` from `@jonmilner/ui/lint` names it).
25
+ - It is absolutely positioned at its place in the text, not pinned to a corner, so a screen reader that scrolls to its cursor stays put. Inside a scroller, give the scroller a `position` (`<Box position="relative">`), or the hidden box sits outside its clip and stretches the page's scroll area.
26
+ - `ref` is a plain prop, typed for the `as` element. No hooks or context, so it renders in a server component.
27
+
28
+ ## Do
29
+
30
+ ```tsx
31
+ <Text>
32
+ 3 <VisuallyHidden>unread messages</VisuallyHidden>
33
+ </Text>
34
+ ```
35
+
36
+ ```tsx
37
+ <Box as="section" aria-labelledby="filters">
38
+ <VisuallyHidden as="h2" id="filters">
39
+ Filters
40
+ </VisuallyHidden>
41
+ …
42
+ </Box>
43
+ ```
44
+
45
+ ## Don't
46
+
47
+ ```tsx
48
+ // A focusable element that takes focus while unseen strands keyboard users.
49
+ <VisuallyHidden as="a" href="#main">
50
+ Skip to content
51
+ </VisuallyHidden>
52
+ ```
53
+
54
+ ```tsx
55
+ // IconButton names itself; a hidden label inside a plain button duplicates that work.
56
+ <button>
57
+ <XIcon />
58
+ <VisuallyHidden>Close</VisuallyHidden>
59
+ </button>
60
+ ```
61
+
62
+ ## Accessibility
63
+
64
+ - The text stays in the accessibility tree and in reading order, where it sits in the source.
65
+ - Screen readers read it as part of the surrounding content; a sighted user sees nothing and the layout does not move.
66
+ - It is clipped with `clip-path`, so it never shows, at any zoom or under forced colors.
67
+
68
+ ## Props
69
+
70
+ Generated from the TypeScript types.
71
+
72
+ ### VisuallyHidden
73
+
74
+ | Prop | Type | Required | Description |
75
+ | --- | --- | --- | --- |
76
+ | `as` | `ElementType` | no | |
77
+
78
+ Also accepts every `<span>` attribute (change the element with `as`).
package/dist/docs/lint.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ## textComponents
6
6
 
7
- The library's components and parts that render their children through `Text`. Pass it as `textComponents`, so documented usage such as `<Tabs.Tab>Privacy</Tabs.Tab>` or `<Field.Label>Email</Field.Label>` passes `ui/no-bare-text`.
7
+ The library's components and parts that render their children through `Text`, plus `VisuallyHidden`, whose children are hidden text. Pass it as `textComponents`, so documented usage such as `<Tabs.Tab>Privacy</Tabs.Tab>`, `<Field.Label>Email</Field.Label>` or `<VisuallyHidden>unread messages</VisuallyHidden>` passes `ui/no-bare-text`.
8
8
 
9
9
  ```ts
10
10
  import { lint, uiLint } from "@jonmilner/oxlint-config";
@@ -12,10 +12,10 @@ import { textComponents } from "@jonmilner/ui/lint";
12
12
  import { defineConfig } from "vite-plus";
13
13
 
14
14
  export default defineConfig({
15
- lint: { ...lint, ...uiLint({ textComponents: [...textComponents, "VisuallyHidden"] }) },
15
+ lint: { ...lint, ...uiLint({ textComponents: [...textComponents, "PageTitle"] }) },
16
16
  });
17
17
  ```
18
18
 
19
- - The option replaces the preset's default list, so add the app's own text components (here `VisuallyHidden`) after the library's.
19
+ - The option replaces the preset's default list, so add the app's own text components (here `PageTitle`) after the library's.
20
20
  - Never copy the list into the app: it changes with the library, and an upgrade brings the new parts.
21
21
  - The rule matches a tag's last segment: `Tabs.Tab` is `Tab`. So `Item` and `Label` pass any component's part of that name, and `Trigger` and `Close` pass even without the look (`variant`, `size`, an icon) that makes them a Button. Give a look-less `Trigger` or `Close` a `Text` child yourself.
@@ -25,6 +25,7 @@
25
25
  - [Tag](Tag.md): A label that puts content in a category: a topic, a label, a user-made category. A `span` with a `bgMuted` fill and an `lg` radius (half a one-line tag's height, so one line reads as a pill and wrapped lines stay inside the fill) around a `Text` in the `label` font. It can be read-only, a link, or removable.
26
26
  - [Text](Text.md): The base of all visible text, and the primitive every text component builds on. Capsize trims the box to the cap height and the baseline, so the gap around text is the visible space. It takes every Box style prop (`color`, `textAlign`, margins), plus `size`, `font`, `weight`, `leading`, `truncate` and `wrap`.
27
27
  - [Toast](Toast.md): Tells the user briefly about the result of an action without interrupting them: "Changes saved", "Message sent", "Couldn't upload the file". Material calls it a snackbar and Atlassian a flag. Built on Base UI's Toast, which owns the queue, the timers and swipe-to-dismiss. The parts add the look: a raised card in a stack at the bottom end corner, an icon per variant, a close button, and a slide-up-and-fade that is a plain fade under reduced motion. A toast never takes focus and moves nothing on the page.
28
+ - [VisuallyHidden](VisuallyHidden.md): Text that screen readers read and nobody sees: a 1px clipped box, out of the layout, still in the accessibility tree. Use it for words a sighted user gets from the layout, an icon or a color, never to hide a control or a skip link. One element, chosen with `as`, a `span` by default.
28
29
 
29
30
  ## Reference
30
31
 
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "./manifest.schema.json",
3
3
  "package": "@jonmilner/ui",
4
- "version": "0.3.2",
4
+ "version": "0.4.0",
5
5
  "components": [
6
6
  {
7
7
  "name": "AlertDialog",
@@ -1882,6 +1882,20 @@
1882
1882
  "exports": [
1883
1883
  "useToast"
1884
1884
  ]
1885
+ },
1886
+ {
1887
+ "name": "VisuallyHidden",
1888
+ "styleProps": false,
1889
+ "props": [
1890
+ {
1891
+ "name": "as",
1892
+ "type": "ElementType",
1893
+ "required": false
1894
+ }
1895
+ ],
1896
+ "element": "span",
1897
+ "parts": [],
1898
+ "exports": []
1885
1899
  }
1886
1900
  ],
1887
1901
  "styleProps": [
@@ -0,0 +1,26 @@
1
+ # 0.4.0
2
+
3
+ `SearchFieldInputProps` accepts only the `aria-*` valid on role `searchbox`, so an `inputProps` that passes any other `aria-*` to `SearchField` no longer type-checks (decision 0108). Most of them already failed axe's `aria-allowed-attr` on the input; `aria-haspopup` (deprecated as a global in ARIA 1.2) and the ARIA 1.3 draft's `aria-description`, `aria-braillelabel` and `aria-brailleroledescription` passed axe but are outside ARIA 1.2's `searchbox`.
4
+
5
+ Still accepted: `aria-controls`, `aria-activedescendant`, `aria-autocomplete`, `aria-placeholder`, `aria-details`, `aria-keyshortcuts`, `aria-owns`, `aria-flowto`, `aria-current`, `aria-roledescription`, `aria-busy`, `aria-live`, `aria-atomic` and `aria-relevant`. Removed: `aria-braillelabel`, `aria-brailleroledescription`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colindextext`, `aria-colspan`, `aria-description`, `aria-dropeffect`, `aria-expanded`, `aria-grabbed`, `aria-haspopup`, `aria-level`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-posinset`, `aria-pressed`, `aria-rowcount`, `aria-rowindex`, `aria-rowindextext`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow` and `aria-valuetext`.
6
+
7
+ ## Find
8
+
9
+ In the app's source (`*.tsx`), every `inputProps` on a `SearchField`, and every object typed `SearchFieldInputProps`: regex `<SearchField\b|SearchFieldInputProps`. In each, and in any variable or helper that builds the `inputProps` object, look for an `aria-*` key outside the accepted list above. The typecheck names one in an inline object literal (`Object literal may only specify known properties, and '"aria-expanded"' does not exist`), but not one in an object built elsewhere and passed by name, so read those by hand.
10
+
11
+ ## Replace
12
+
13
+ Delete the key. A search box that opens a list of suggestions with `aria-expanded` and `aria-haspopup` is a combobox: keep it a plain `SearchField` that points at its results with `aria-controls`, or build it on a combobox.
14
+
15
+ ```tsx
16
+ // before
17
+ <SearchField label="Search" inputProps={{ "aria-controls": "results", "aria-expanded": open }} />
18
+ // after
19
+ <SearchField label="Search" inputProps={{ "aria-controls": "results" }} />
20
+ ```
21
+
22
+ `aria-description` has no replacement in `inputProps`. Pass the text as `description`, which joins the input's `aria-describedby`; it shows below the field, so wrap it in `VisuallyHidden` to keep it for assistive tech only: `description={<VisuallyHidden>Searches titles and numbers</VisuallyHidden>}`.
23
+
24
+ ## Verify
25
+
26
+ Run the app's typecheck (`pnpm typecheck`); it passes with no error naming an `aria-*` key on `inputProps`, and the by-hand read above found none passed by name. Then run the app's axe check on a page with the field; `aria-allowed-attr` reports nothing on it.
package/dist/index.d.mts CHANGED
@@ -23,6 +23,7 @@ import { Tabs, TabsListProps, TabsPanelProps, TabsProps, TabsTabProps } from "./
23
23
  import { Tag, TagProps } from "./Tag/index.mjs";
24
24
  import { ToastOptions, ToastProviderProps, ToastVariant, useToast } from "./Toast/client.mjs";
25
25
  import { Toast } from "./Toast/index.mjs";
26
+ import { VisuallyHidden, VisuallyHiddenProps } from "./VisuallyHidden/index.mjs";
26
27
  import { Theme, defineTheme } from "./theme/define-theme.mjs";
27
28
  import { ThemeProvider, ThemeProviderProps } from "./theme/ThemeProvider.mjs";
28
- export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, defineTheme, useToast };
29
+ export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };
package/dist/index.mjs CHANGED
@@ -22,4 +22,5 @@ import { defineTheme as x } from "./theme/define-theme.mjs";
22
22
  import { ThemeProvider as S } from "./theme/ThemeProvider.mjs";
23
23
  import { useToast as C } from "./Toast/client.mjs";
24
24
  import { Toast as w } from "./Toast/index.mjs";
25
- export { s as AlertDialog, c as Badge, e as Box, i as Button, l as Checkbox, u as Chip, d as ChipGroup, t as Clickable, o as Dialog, f as Field, a as Heading, n as Icon, p as IconButton, m as Inline, h as Menu, g as MultiSelect, _ as SearchField, v as Stack, y as Tabs, b as Tag, r as Text, S as ThemeProvider, w as Toast, x as defineTheme, C as useToast };
25
+ import { VisuallyHidden as T } from "./VisuallyHidden/index.mjs";
26
+ export { s as AlertDialog, c as Badge, e as Box, i as Button, l as Checkbox, u as Chip, d as ChipGroup, t as Clickable, o as Dialog, f as Field, a as Heading, n as Icon, p as IconButton, m as Inline, h as Menu, g as MultiSelect, _ as SearchField, v as Stack, y as Tabs, b as Tag, r as Text, S as ThemeProvider, w as Toast, T as VisuallyHidden, x as defineTheme, C as useToast };
@@ -1,9 +1,9 @@
1
1
  //#region src/lint/index.d.ts
2
2
  /**
3
- * The library's components and parts that render their children through `Text`, for the
4
- * `textComponents` option of `uiLint()` from `@jonmilner/oxlint-config`. A part is named by its
5
- * property (`Tabs.Tab` is `Tab`). Spread it and add the app's own text components; see
6
- * `docs/lint.md`.
3
+ * The library's components and parts that render their children through `Text`, plus
4
+ * `VisuallyHidden`, whose children are hidden text, for the `textComponents` option of `uiLint()`
5
+ * from `@jonmilner/oxlint-config`. A part is named by its property (`Tabs.Tab` is `Tab`). Spread
6
+ * it and add the app's own text components; see `docs/lint.md`.
7
7
  */
8
8
  export declare const textComponents: readonly string[];
9
9
  //#endregion
@@ -12,7 +12,8 @@ var e = Object.freeze([
12
12
  "Error",
13
13
  "Description",
14
14
  "Trigger",
15
- "Close"
15
+ "Close",
16
+ "VisuallyHidden"
16
17
  ]);
17
18
  //#endregion
18
19
  export { e as textComponents };
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer atoms{._1dkxmm00{display:none}._1dkxmm05{display:block}._1dkxmm0a{display:inline}._1dkxmm0f{display:inline-block}._1dkxmm0k{display:flex}._1dkxmm0p{display:inline-flex}._1dkxmm0u{display:grid}._1dkxmm0z{display:contents}._1dkxmm014{flex-direction:row}._1dkxmm019{flex-direction:row-reverse}._1dkxmm01e{flex-direction:column}._1dkxmm01j{flex-direction:column-reverse}._1dkxmm01o{flex-wrap:nowrap}._1dkxmm01t{flex-wrap:wrap}._1dkxmm01y{flex-grow:0}._1dkxmm023{flex-grow:1}._1dkxmm028{flex-shrink:0}._1dkxmm02d{flex-shrink:1}._1dkxmm02i{align-items:start}._1dkxmm02n{align-items:center}._1dkxmm02s{align-items:end}._1dkxmm02x{align-items:stretch}._1dkxmm032{align-items:baseline}._1dkxmm037{align-self:start}._1dkxmm03c{align-self:center}._1dkxmm03h{align-self:end}._1dkxmm03m{align-self:stretch}._1dkxmm03r{align-self:baseline}._1dkxmm03w{justify-content:start}._1dkxmm041{justify-content:center}._1dkxmm046{justify-content:end}._1dkxmm04b{justify-content:space-between}._1dkxmm04g{justify-content:space-around}._1dkxmm04l{justify-content:space-evenly}._1dkxmm04q{gap:var(--space-0)}._1dkxmm04v{gap:var(--space-1)}._1dkxmm050{gap:var(--space-2)}._1dkxmm055{gap:var(--space-4)}._1dkxmm05a{gap:var(--space-6)}._1dkxmm05f{gap:var(--space-8)}._1dkxmm05k{gap:var(--space-12)}._1dkxmm05p{gap:var(--space-16)}._1dkxmm05u{gap:var(--space-20)}._1dkxmm05z{gap:var(--space-24)}._1dkxmm064{gap:var(--space-32)}._1dkxmm069{gap:var(--space-40)}._1dkxmm06e{gap:var(--space-48)}._1dkxmm06j{gap:var(--space-64)}._1dkxmm06o{gap:var(--space-80)}._1dkxmm06t{gap:var(--space-96)}._1dkxmm06y{padding-block-start:var(--space-0)}._1dkxmm073{padding-block-start:var(--space-1)}._1dkxmm078{padding-block-start:var(--space-2)}._1dkxmm07d{padding-block-start:var(--space-4)}._1dkxmm07i{padding-block-start:var(--space-6)}._1dkxmm07n{padding-block-start:var(--space-8)}._1dkxmm07s{padding-block-start:var(--space-12)}._1dkxmm07x{padding-block-start:var(--space-16)}._1dkxmm082{padding-block-start:var(--space-20)}._1dkxmm087{padding-block-start:var(--space-24)}._1dkxmm08c{padding-block-start:var(--space-32)}._1dkxmm08h{padding-block-start:var(--space-40)}._1dkxmm08m{padding-block-start:var(--space-48)}._1dkxmm08r{padding-block-start:var(--space-64)}._1dkxmm08w{padding-block-start:var(--space-80)}._1dkxmm091{padding-block-start:var(--space-96)}._1dkxmm096{padding-block-end:var(--space-0)}._1dkxmm09b{padding-block-end:var(--space-1)}._1dkxmm09g{padding-block-end:var(--space-2)}._1dkxmm09l{padding-block-end:var(--space-4)}._1dkxmm09q{padding-block-end:var(--space-6)}._1dkxmm09v{padding-block-end:var(--space-8)}._1dkxmm0a0{padding-block-end:var(--space-12)}._1dkxmm0a5{padding-block-end:var(--space-16)}._1dkxmm0aa{padding-block-end:var(--space-20)}._1dkxmm0af{padding-block-end:var(--space-24)}._1dkxmm0ak{padding-block-end:var(--space-32)}._1dkxmm0ap{padding-block-end:var(--space-40)}._1dkxmm0au{padding-block-end:var(--space-48)}._1dkxmm0az{padding-block-end:var(--space-64)}._1dkxmm0b4{padding-block-end:var(--space-80)}._1dkxmm0b9{padding-block-end:var(--space-96)}._1dkxmm0be{padding-inline-start:var(--space-0)}._1dkxmm0bj{padding-inline-start:var(--space-1)}._1dkxmm0bo{padding-inline-start:var(--space-2)}._1dkxmm0bt{padding-inline-start:var(--space-4)}._1dkxmm0by{padding-inline-start:var(--space-6)}._1dkxmm0c3{padding-inline-start:var(--space-8)}._1dkxmm0c8{padding-inline-start:var(--space-12)}._1dkxmm0cd{padding-inline-start:var(--space-16)}._1dkxmm0ci{padding-inline-start:var(--space-20)}._1dkxmm0cn{padding-inline-start:var(--space-24)}._1dkxmm0cs{padding-inline-start:var(--space-32)}._1dkxmm0cx{padding-inline-start:var(--space-40)}._1dkxmm0d2{padding-inline-start:var(--space-48)}._1dkxmm0d7{padding-inline-start:var(--space-64)}._1dkxmm0dc{padding-inline-start:var(--space-80)}._1dkxmm0dh{padding-inline-start:var(--space-96)}._1dkxmm0dm{padding-inline-end:var(--space-0)}._1dkxmm0dr{padding-inline-end:var(--space-1)}._1dkxmm0dw{padding-inline-end:var(--space-2)}._1dkxmm0e1{padding-inline-end:var(--space-4)}._1dkxmm0e6{padding-inline-end:var(--space-6)}._1dkxmm0eb{padding-inline-end:var(--space-8)}._1dkxmm0eg{padding-inline-end:var(--space-12)}._1dkxmm0el{padding-inline-end:var(--space-16)}._1dkxmm0eq{padding-inline-end:var(--space-20)}._1dkxmm0ev{padding-inline-end:var(--space-24)}._1dkxmm0f0{padding-inline-end:var(--space-32)}._1dkxmm0f5{padding-inline-end:var(--space-40)}._1dkxmm0fa{padding-inline-end:var(--space-48)}._1dkxmm0ff{padding-inline-end:var(--space-64)}._1dkxmm0fk{padding-inline-end:var(--space-80)}._1dkxmm0fp{padding-inline-end:var(--space-96)}._1dkxmm0fu{margin-block-start:var(--space-0)}._1dkxmm0fz{margin-block-start:var(--space-1)}._1dkxmm0g4{margin-block-start:var(--space-2)}._1dkxmm0g9{margin-block-start:var(--space-4)}._1dkxmm0ge{margin-block-start:var(--space-6)}._1dkxmm0gj{margin-block-start:var(--space-8)}._1dkxmm0go{margin-block-start:var(--space-12)}._1dkxmm0gt{margin-block-start:var(--space-16)}._1dkxmm0gy{margin-block-start:var(--space-20)}._1dkxmm0h3{margin-block-start:var(--space-24)}._1dkxmm0h8{margin-block-start:var(--space-32)}._1dkxmm0hd{margin-block-start:var(--space-40)}._1dkxmm0hi{margin-block-start:var(--space-48)}._1dkxmm0hn{margin-block-start:var(--space-64)}._1dkxmm0hs{margin-block-start:var(--space-80)}._1dkxmm0hx{margin-block-start:var(--space-96)}._1dkxmm0i2{margin-block-start:auto}._1dkxmm0i7{margin-block-end:var(--space-0)}._1dkxmm0ic{margin-block-end:var(--space-1)}._1dkxmm0ih{margin-block-end:var(--space-2)}._1dkxmm0im{margin-block-end:var(--space-4)}._1dkxmm0ir{margin-block-end:var(--space-6)}._1dkxmm0iw{margin-block-end:var(--space-8)}._1dkxmm0j1{margin-block-end:var(--space-12)}._1dkxmm0j6{margin-block-end:var(--space-16)}._1dkxmm0jb{margin-block-end:var(--space-20)}._1dkxmm0jg{margin-block-end:var(--space-24)}._1dkxmm0jl{margin-block-end:var(--space-32)}._1dkxmm0jq{margin-block-end:var(--space-40)}._1dkxmm0jv{margin-block-end:var(--space-48)}._1dkxmm0k0{margin-block-end:var(--space-64)}._1dkxmm0k5{margin-block-end:var(--space-80)}._1dkxmm0ka{margin-block-end:var(--space-96)}._1dkxmm0kf{margin-block-end:auto}._1dkxmm0kk{margin-inline-start:var(--space-0)}._1dkxmm0kp{margin-inline-start:var(--space-1)}._1dkxmm0ku{margin-inline-start:var(--space-2)}._1dkxmm0kz{margin-inline-start:var(--space-4)}._1dkxmm0l4{margin-inline-start:var(--space-6)}._1dkxmm0l9{margin-inline-start:var(--space-8)}._1dkxmm0le{margin-inline-start:var(--space-12)}._1dkxmm0lj{margin-inline-start:var(--space-16)}._1dkxmm0lo{margin-inline-start:var(--space-20)}._1dkxmm0lt{margin-inline-start:var(--space-24)}._1dkxmm0ly{margin-inline-start:var(--space-32)}._1dkxmm0m3{margin-inline-start:var(--space-40)}._1dkxmm0m8{margin-inline-start:var(--space-48)}._1dkxmm0md{margin-inline-start:var(--space-64)}._1dkxmm0mi{margin-inline-start:var(--space-80)}._1dkxmm0mn{margin-inline-start:var(--space-96)}._1dkxmm0ms{margin-inline-start:auto}._1dkxmm0mx{margin-inline-end:var(--space-0)}._1dkxmm0n2{margin-inline-end:var(--space-1)}._1dkxmm0n7{margin-inline-end:var(--space-2)}._1dkxmm0nc{margin-inline-end:var(--space-4)}._1dkxmm0nh{margin-inline-end:var(--space-6)}._1dkxmm0nm{margin-inline-end:var(--space-8)}._1dkxmm0nr{margin-inline-end:var(--space-12)}._1dkxmm0nw{margin-inline-end:var(--space-16)}._1dkxmm0o1{margin-inline-end:var(--space-20)}._1dkxmm0o6{margin-inline-end:var(--space-24)}._1dkxmm0ob{margin-inline-end:var(--space-32)}._1dkxmm0og{margin-inline-end:var(--space-40)}._1dkxmm0ol{margin-inline-end:var(--space-48)}._1dkxmm0oq{margin-inline-end:var(--space-64)}._1dkxmm0ov{margin-inline-end:var(--space-80)}._1dkxmm0p0{margin-inline-end:var(--space-96)}._1dkxmm0p5{margin-inline-end:auto}._1dkxmm0pa{inline-size:var(--size-xs)}._1dkxmm0pf{inline-size:var(--size-sm)}._1dkxmm0pk{inline-size:var(--size-med)}._1dkxmm0pp{inline-size:var(--size-lg)}._1dkxmm0pu{inline-size:var(--size-xl)}._1dkxmm0pz{inline-size:auto}._1dkxmm0q4{inline-size:100%}._1dkxmm0q9{inline-size:fit-content}._1dkxmm0qe{inline-size:min-content}._1dkxmm0qj{inline-size:max-content}._1dkxmm0qo{inline-size:var(--container-prose)}._1dkxmm0qt{inline-size:var(--container-page)}._1dkxmm0qy{inline-size:var(--container-wide)}._1dkxmm0r3{block-size:var(--size-xs)}._1dkxmm0r8{block-size:var(--size-sm)}._1dkxmm0rd{block-size:var(--size-med)}._1dkxmm0ri{block-size:var(--size-lg)}._1dkxmm0rn{block-size:var(--size-xl)}._1dkxmm0rs{block-size:auto}._1dkxmm0rx{block-size:100%}._1dkxmm0s2{block-size:fit-content}._1dkxmm0s7{block-size:min-content}._1dkxmm0sc{block-size:max-content}._1dkxmm0sh{min-inline-size:var(--size-xs)}._1dkxmm0sm{min-inline-size:var(--size-sm)}._1dkxmm0sr{min-inline-size:var(--size-med)}._1dkxmm0sw{min-inline-size:var(--size-lg)}._1dkxmm0t1{min-inline-size:var(--size-xl)}._1dkxmm0t6{min-inline-size:auto}._1dkxmm0tb{min-inline-size:100%}._1dkxmm0tg{min-inline-size:fit-content}._1dkxmm0tl{min-inline-size:min-content}._1dkxmm0tq{min-inline-size:max-content}._1dkxmm0tv{min-inline-size:var(--container-prose)}._1dkxmm0u0{min-inline-size:var(--container-page)}._1dkxmm0u5{min-inline-size:var(--container-wide)}._1dkxmm0ua{max-inline-size:var(--size-xs)}._1dkxmm0uf{max-inline-size:var(--size-sm)}._1dkxmm0uk{max-inline-size:var(--size-med)}._1dkxmm0up{max-inline-size:var(--size-lg)}._1dkxmm0uu{max-inline-size:var(--size-xl)}._1dkxmm0uz{max-inline-size:auto}._1dkxmm0v4{max-inline-size:100%}._1dkxmm0v9{max-inline-size:fit-content}._1dkxmm0ve{max-inline-size:min-content}._1dkxmm0vj{max-inline-size:max-content}._1dkxmm0vo{max-inline-size:var(--container-prose)}._1dkxmm0vt{max-inline-size:var(--container-page)}._1dkxmm0vy{max-inline-size:var(--container-wide)}._1dkxmm0w3{min-block-size:var(--size-xs)}._1dkxmm0w8{min-block-size:var(--size-sm)}._1dkxmm0wd{min-block-size:var(--size-med)}._1dkxmm0wi{min-block-size:var(--size-lg)}._1dkxmm0wn{min-block-size:var(--size-xl)}._1dkxmm0ws{min-block-size:auto}._1dkxmm0wx{min-block-size:100%}._1dkxmm0x2{min-block-size:fit-content}._1dkxmm0x7{min-block-size:min-content}._1dkxmm0xc{min-block-size:max-content}._1dkxmm0xh{max-block-size:var(--size-xs)}._1dkxmm0xm{max-block-size:var(--size-sm)}._1dkxmm0xr{max-block-size:var(--size-med)}._1dkxmm0xw{max-block-size:var(--size-lg)}._1dkxmm0y1{max-block-size:var(--size-xl)}._1dkxmm0y6{max-block-size:auto}._1dkxmm0yb{max-block-size:100%}._1dkxmm0yg{max-block-size:fit-content}._1dkxmm0yl{max-block-size:min-content}._1dkxmm0yq{max-block-size:max-content}._1dkxmm0yv{color:var(--color-bg)}._1dkxmm0yw{color:var(--color-bg-muted)}._1dkxmm0yx{color:var(--color-bg-raised)}._1dkxmm0yy{color:var(--color-fg)}._1dkxmm0yz{color:var(--color-fg-muted)}._1dkxmm0z0{color:var(--color-border)}._1dkxmm0z1{color:var(--color-border-strong)}._1dkxmm0z2{color:var(--color-accent)}._1dkxmm0z3{color:var(--color-accent-fg)}._1dkxmm0z4{color:var(--color-danger)}._1dkxmm0z5{color:var(--color-danger-fg)}._1dkxmm0z6{color:var(--color-success)}._1dkxmm0z7{color:var(--color-success-fg)}._1dkxmm0z8{color:var(--color-warning)}._1dkxmm0z9{color:var(--color-warning-fg)}._1dkxmm0za{color:var(--color-focus)}._1dkxmm0zb{background-color:var(--color-bg)}._1dkxmm0zc{background-color:var(--color-bg-muted)}._1dkxmm0zd{background-color:var(--color-bg-raised)}._1dkxmm0ze{background-color:var(--color-fg)}._1dkxmm0zf{background-color:var(--color-fg-muted)}._1dkxmm0zg{background-color:var(--color-border)}._1dkxmm0zh{background-color:var(--color-border-strong)}._1dkxmm0zi{background-color:var(--color-accent)}._1dkxmm0zj{background-color:var(--color-accent-fg)}._1dkxmm0zk{background-color:var(--color-danger)}._1dkxmm0zl{background-color:var(--color-danger-fg)}._1dkxmm0zm{background-color:var(--color-success)}._1dkxmm0zn{background-color:var(--color-success-fg)}._1dkxmm0zo{background-color:var(--color-warning)}._1dkxmm0zp{background-color:var(--color-warning-fg)}._1dkxmm0zq{background-color:var(--color-focus)}._1dkxmm0zr{border-radius:var(--radius-none)}._1dkxmm0zs{border-radius:var(--radius-sm)}._1dkxmm0zt{border-radius:var(--radius-med)}._1dkxmm0zu{border-radius:var(--radius-lg)}._1dkxmm0zv{border-radius:var(--radius-xl)}._1dkxmm0zw{border-radius:var(--radius-full)}._1dkxmm0zx{box-shadow:var(--shadow-sm)}._1dkxmm0zy{box-shadow:var(--shadow-med)}._1dkxmm0zz{box-shadow:var(--shadow-lg)}._1dkxmm0100{position:static}._1dkxmm0101{position:relative}._1dkxmm0102{position:absolute}._1dkxmm0103{position:fixed}._1dkxmm0104{position:sticky}._1dkxmm0105{z-index:var(--z-index-base)}._1dkxmm0106{z-index:var(--z-index-raised)}._1dkxmm0107{z-index:var(--z-index-dropdown)}._1dkxmm0108{z-index:var(--z-index-sticky)}._1dkxmm0109{z-index:var(--z-index-overlay)}._1dkxmm010a{z-index:var(--z-index-modal)}._1dkxmm010b{z-index:var(--z-index-popover)}._1dkxmm010c{z-index:var(--z-index-toast)}._1dkxmm010d{z-index:var(--z-index-tooltip)}._1dkxmm010e{overflow:visible}._1dkxmm010f{overflow:hidden}._1dkxmm010g{overflow:clip}._1dkxmm010h{overflow:auto}._1dkxmm010i{text-align:start}._1dkxmm010j{text-align:center}._1dkxmm010k{text-align:end}@media (width>=40em){._1dkxmm01{display:none}._1dkxmm06{display:block}._1dkxmm0b{display:inline}._1dkxmm0g{display:inline-block}._1dkxmm0l{display:flex}._1dkxmm0q{display:inline-flex}._1dkxmm0v{display:grid}._1dkxmm010{display:contents}._1dkxmm015{flex-direction:row}._1dkxmm01a{flex-direction:row-reverse}._1dkxmm01f{flex-direction:column}._1dkxmm01k{flex-direction:column-reverse}._1dkxmm01p{flex-wrap:nowrap}._1dkxmm01u{flex-wrap:wrap}._1dkxmm01z{flex-grow:0}._1dkxmm024{flex-grow:1}._1dkxmm029{flex-shrink:0}._1dkxmm02e{flex-shrink:1}._1dkxmm02j{align-items:start}._1dkxmm02o{align-items:center}._1dkxmm02t{align-items:end}._1dkxmm02y{align-items:stretch}._1dkxmm033{align-items:baseline}._1dkxmm038{align-self:start}._1dkxmm03d{align-self:center}._1dkxmm03i{align-self:end}._1dkxmm03n{align-self:stretch}._1dkxmm03s{align-self:baseline}._1dkxmm03x{justify-content:start}._1dkxmm042{justify-content:center}._1dkxmm047{justify-content:end}._1dkxmm04c{justify-content:space-between}._1dkxmm04h{justify-content:space-around}._1dkxmm04m{justify-content:space-evenly}._1dkxmm04r{gap:var(--space-0)}._1dkxmm04w{gap:var(--space-1)}._1dkxmm051{gap:var(--space-2)}._1dkxmm056{gap:var(--space-4)}._1dkxmm05b{gap:var(--space-6)}._1dkxmm05g{gap:var(--space-8)}._1dkxmm05l{gap:var(--space-12)}._1dkxmm05q{gap:var(--space-16)}._1dkxmm05v{gap:var(--space-20)}._1dkxmm060{gap:var(--space-24)}._1dkxmm065{gap:var(--space-32)}._1dkxmm06a{gap:var(--space-40)}._1dkxmm06f{gap:var(--space-48)}._1dkxmm06k{gap:var(--space-64)}._1dkxmm06p{gap:var(--space-80)}._1dkxmm06u{gap:var(--space-96)}._1dkxmm06z{padding-block-start:var(--space-0)}._1dkxmm074{padding-block-start:var(--space-1)}._1dkxmm079{padding-block-start:var(--space-2)}._1dkxmm07e{padding-block-start:var(--space-4)}._1dkxmm07j{padding-block-start:var(--space-6)}._1dkxmm07o{padding-block-start:var(--space-8)}._1dkxmm07t{padding-block-start:var(--space-12)}._1dkxmm07y{padding-block-start:var(--space-16)}._1dkxmm083{padding-block-start:var(--space-20)}._1dkxmm088{padding-block-start:var(--space-24)}._1dkxmm08d{padding-block-start:var(--space-32)}._1dkxmm08i{padding-block-start:var(--space-40)}._1dkxmm08n{padding-block-start:var(--space-48)}._1dkxmm08s{padding-block-start:var(--space-64)}._1dkxmm08x{padding-block-start:var(--space-80)}._1dkxmm092{padding-block-start:var(--space-96)}._1dkxmm097{padding-block-end:var(--space-0)}._1dkxmm09c{padding-block-end:var(--space-1)}._1dkxmm09h{padding-block-end:var(--space-2)}._1dkxmm09m{padding-block-end:var(--space-4)}._1dkxmm09r{padding-block-end:var(--space-6)}._1dkxmm09w{padding-block-end:var(--space-8)}._1dkxmm0a1{padding-block-end:var(--space-12)}._1dkxmm0a6{padding-block-end:var(--space-16)}._1dkxmm0ab{padding-block-end:var(--space-20)}._1dkxmm0ag{padding-block-end:var(--space-24)}._1dkxmm0al{padding-block-end:var(--space-32)}._1dkxmm0aq{padding-block-end:var(--space-40)}._1dkxmm0av{padding-block-end:var(--space-48)}._1dkxmm0b0{padding-block-end:var(--space-64)}._1dkxmm0b5{padding-block-end:var(--space-80)}._1dkxmm0ba{padding-block-end:var(--space-96)}._1dkxmm0bf{padding-inline-start:var(--space-0)}._1dkxmm0bk{padding-inline-start:var(--space-1)}._1dkxmm0bp{padding-inline-start:var(--space-2)}._1dkxmm0bu{padding-inline-start:var(--space-4)}._1dkxmm0bz{padding-inline-start:var(--space-6)}._1dkxmm0c4{padding-inline-start:var(--space-8)}._1dkxmm0c9{padding-inline-start:var(--space-12)}._1dkxmm0ce{padding-inline-start:var(--space-16)}._1dkxmm0cj{padding-inline-start:var(--space-20)}._1dkxmm0co{padding-inline-start:var(--space-24)}._1dkxmm0ct{padding-inline-start:var(--space-32)}._1dkxmm0cy{padding-inline-start:var(--space-40)}._1dkxmm0d3{padding-inline-start:var(--space-48)}._1dkxmm0d8{padding-inline-start:var(--space-64)}._1dkxmm0dd{padding-inline-start:var(--space-80)}._1dkxmm0di{padding-inline-start:var(--space-96)}._1dkxmm0dn{padding-inline-end:var(--space-0)}._1dkxmm0ds{padding-inline-end:var(--space-1)}._1dkxmm0dx{padding-inline-end:var(--space-2)}._1dkxmm0e2{padding-inline-end:var(--space-4)}._1dkxmm0e7{padding-inline-end:var(--space-6)}._1dkxmm0ec{padding-inline-end:var(--space-8)}._1dkxmm0eh{padding-inline-end:var(--space-12)}._1dkxmm0em{padding-inline-end:var(--space-16)}._1dkxmm0er{padding-inline-end:var(--space-20)}._1dkxmm0ew{padding-inline-end:var(--space-24)}._1dkxmm0f1{padding-inline-end:var(--space-32)}._1dkxmm0f6{padding-inline-end:var(--space-40)}._1dkxmm0fb{padding-inline-end:var(--space-48)}._1dkxmm0fg{padding-inline-end:var(--space-64)}._1dkxmm0fl{padding-inline-end:var(--space-80)}._1dkxmm0fq{padding-inline-end:var(--space-96)}._1dkxmm0fv{margin-block-start:var(--space-0)}._1dkxmm0g0{margin-block-start:var(--space-1)}._1dkxmm0g5{margin-block-start:var(--space-2)}._1dkxmm0ga{margin-block-start:var(--space-4)}._1dkxmm0gf{margin-block-start:var(--space-6)}._1dkxmm0gk{margin-block-start:var(--space-8)}._1dkxmm0gp{margin-block-start:var(--space-12)}._1dkxmm0gu{margin-block-start:var(--space-16)}._1dkxmm0gz{margin-block-start:var(--space-20)}._1dkxmm0h4{margin-block-start:var(--space-24)}._1dkxmm0h9{margin-block-start:var(--space-32)}._1dkxmm0he{margin-block-start:var(--space-40)}._1dkxmm0hj{margin-block-start:var(--space-48)}._1dkxmm0ho{margin-block-start:var(--space-64)}._1dkxmm0ht{margin-block-start:var(--space-80)}._1dkxmm0hy{margin-block-start:var(--space-96)}._1dkxmm0i3{margin-block-start:auto}._1dkxmm0i8{margin-block-end:var(--space-0)}._1dkxmm0id{margin-block-end:var(--space-1)}._1dkxmm0ii{margin-block-end:var(--space-2)}._1dkxmm0in{margin-block-end:var(--space-4)}._1dkxmm0is{margin-block-end:var(--space-6)}._1dkxmm0ix{margin-block-end:var(--space-8)}._1dkxmm0j2{margin-block-end:var(--space-12)}._1dkxmm0j7{margin-block-end:var(--space-16)}._1dkxmm0jc{margin-block-end:var(--space-20)}._1dkxmm0jh{margin-block-end:var(--space-24)}._1dkxmm0jm{margin-block-end:var(--space-32)}._1dkxmm0jr{margin-block-end:var(--space-40)}._1dkxmm0jw{margin-block-end:var(--space-48)}._1dkxmm0k1{margin-block-end:var(--space-64)}._1dkxmm0k6{margin-block-end:var(--space-80)}._1dkxmm0kb{margin-block-end:var(--space-96)}._1dkxmm0kg{margin-block-end:auto}._1dkxmm0kl{margin-inline-start:var(--space-0)}._1dkxmm0kq{margin-inline-start:var(--space-1)}._1dkxmm0kv{margin-inline-start:var(--space-2)}._1dkxmm0l0{margin-inline-start:var(--space-4)}._1dkxmm0l5{margin-inline-start:var(--space-6)}._1dkxmm0la{margin-inline-start:var(--space-8)}._1dkxmm0lf{margin-inline-start:var(--space-12)}._1dkxmm0lk{margin-inline-start:var(--space-16)}._1dkxmm0lp{margin-inline-start:var(--space-20)}._1dkxmm0lu{margin-inline-start:var(--space-24)}._1dkxmm0lz{margin-inline-start:var(--space-32)}._1dkxmm0m4{margin-inline-start:var(--space-40)}._1dkxmm0m9{margin-inline-start:var(--space-48)}._1dkxmm0me{margin-inline-start:var(--space-64)}._1dkxmm0mj{margin-inline-start:var(--space-80)}._1dkxmm0mo{margin-inline-start:var(--space-96)}._1dkxmm0mt{margin-inline-start:auto}._1dkxmm0my{margin-inline-end:var(--space-0)}._1dkxmm0n3{margin-inline-end:var(--space-1)}._1dkxmm0n8{margin-inline-end:var(--space-2)}._1dkxmm0nd{margin-inline-end:var(--space-4)}._1dkxmm0ni{margin-inline-end:var(--space-6)}._1dkxmm0nn{margin-inline-end:var(--space-8)}._1dkxmm0ns{margin-inline-end:var(--space-12)}._1dkxmm0nx{margin-inline-end:var(--space-16)}._1dkxmm0o2{margin-inline-end:var(--space-20)}._1dkxmm0o7{margin-inline-end:var(--space-24)}._1dkxmm0oc{margin-inline-end:var(--space-32)}._1dkxmm0oh{margin-inline-end:var(--space-40)}._1dkxmm0om{margin-inline-end:var(--space-48)}._1dkxmm0or{margin-inline-end:var(--space-64)}._1dkxmm0ow{margin-inline-end:var(--space-80)}._1dkxmm0p1{margin-inline-end:var(--space-96)}._1dkxmm0p6{margin-inline-end:auto}._1dkxmm0pb{inline-size:var(--size-xs)}._1dkxmm0pg{inline-size:var(--size-sm)}._1dkxmm0pl{inline-size:var(--size-med)}._1dkxmm0pq{inline-size:var(--size-lg)}._1dkxmm0pv{inline-size:var(--size-xl)}._1dkxmm0q0{inline-size:auto}._1dkxmm0q5{inline-size:100%}._1dkxmm0qa{inline-size:fit-content}._1dkxmm0qf{inline-size:min-content}._1dkxmm0qk{inline-size:max-content}._1dkxmm0qp{inline-size:var(--container-prose)}._1dkxmm0qu{inline-size:var(--container-page)}._1dkxmm0qz{inline-size:var(--container-wide)}._1dkxmm0r4{block-size:var(--size-xs)}._1dkxmm0r9{block-size:var(--size-sm)}._1dkxmm0re{block-size:var(--size-med)}._1dkxmm0rj{block-size:var(--size-lg)}._1dkxmm0ro{block-size:var(--size-xl)}._1dkxmm0rt{block-size:auto}._1dkxmm0ry{block-size:100%}._1dkxmm0s3{block-size:fit-content}._1dkxmm0s8{block-size:min-content}._1dkxmm0sd{block-size:max-content}._1dkxmm0si{min-inline-size:var(--size-xs)}._1dkxmm0sn{min-inline-size:var(--size-sm)}._1dkxmm0ss{min-inline-size:var(--size-med)}._1dkxmm0sx{min-inline-size:var(--size-lg)}._1dkxmm0t2{min-inline-size:var(--size-xl)}._1dkxmm0t7{min-inline-size:auto}._1dkxmm0tc{min-inline-size:100%}._1dkxmm0th{min-inline-size:fit-content}._1dkxmm0tm{min-inline-size:min-content}._1dkxmm0tr{min-inline-size:max-content}._1dkxmm0tw{min-inline-size:var(--container-prose)}._1dkxmm0u1{min-inline-size:var(--container-page)}._1dkxmm0u6{min-inline-size:var(--container-wide)}._1dkxmm0ub{max-inline-size:var(--size-xs)}._1dkxmm0ug{max-inline-size:var(--size-sm)}._1dkxmm0ul{max-inline-size:var(--size-med)}._1dkxmm0uq{max-inline-size:var(--size-lg)}._1dkxmm0uv{max-inline-size:var(--size-xl)}._1dkxmm0v0{max-inline-size:auto}._1dkxmm0v5{max-inline-size:100%}._1dkxmm0va{max-inline-size:fit-content}._1dkxmm0vf{max-inline-size:min-content}._1dkxmm0vk{max-inline-size:max-content}._1dkxmm0vp{max-inline-size:var(--container-prose)}._1dkxmm0vu{max-inline-size:var(--container-page)}._1dkxmm0vz{max-inline-size:var(--container-wide)}._1dkxmm0w4{min-block-size:var(--size-xs)}._1dkxmm0w9{min-block-size:var(--size-sm)}._1dkxmm0we{min-block-size:var(--size-med)}._1dkxmm0wj{min-block-size:var(--size-lg)}._1dkxmm0wo{min-block-size:var(--size-xl)}._1dkxmm0wt{min-block-size:auto}._1dkxmm0wy{min-block-size:100%}._1dkxmm0x3{min-block-size:fit-content}._1dkxmm0x8{min-block-size:min-content}._1dkxmm0xd{min-block-size:max-content}._1dkxmm0xi{max-block-size:var(--size-xs)}._1dkxmm0xn{max-block-size:var(--size-sm)}._1dkxmm0xs{max-block-size:var(--size-med)}._1dkxmm0xx{max-block-size:var(--size-lg)}._1dkxmm0y2{max-block-size:var(--size-xl)}._1dkxmm0y7{max-block-size:auto}._1dkxmm0yc{max-block-size:100%}._1dkxmm0yh{max-block-size:fit-content}._1dkxmm0ym{max-block-size:min-content}._1dkxmm0yr{max-block-size:max-content}}@media (width>=48em){._1dkxmm02{display:none}._1dkxmm07{display:block}._1dkxmm0c{display:inline}._1dkxmm0h{display:inline-block}._1dkxmm0m{display:flex}._1dkxmm0r{display:inline-flex}._1dkxmm0w{display:grid}._1dkxmm011{display:contents}._1dkxmm016{flex-direction:row}._1dkxmm01b{flex-direction:row-reverse}._1dkxmm01g{flex-direction:column}._1dkxmm01l{flex-direction:column-reverse}._1dkxmm01q{flex-wrap:nowrap}._1dkxmm01v{flex-wrap:wrap}._1dkxmm020{flex-grow:0}._1dkxmm025{flex-grow:1}._1dkxmm02a{flex-shrink:0}._1dkxmm02f{flex-shrink:1}._1dkxmm02k{align-items:start}._1dkxmm02p{align-items:center}._1dkxmm02u{align-items:end}._1dkxmm02z{align-items:stretch}._1dkxmm034{align-items:baseline}._1dkxmm039{align-self:start}._1dkxmm03e{align-self:center}._1dkxmm03j{align-self:end}._1dkxmm03o{align-self:stretch}._1dkxmm03t{align-self:baseline}._1dkxmm03y{justify-content:start}._1dkxmm043{justify-content:center}._1dkxmm048{justify-content:end}._1dkxmm04d{justify-content:space-between}._1dkxmm04i{justify-content:space-around}._1dkxmm04n{justify-content:space-evenly}._1dkxmm04s{gap:var(--space-0)}._1dkxmm04x{gap:var(--space-1)}._1dkxmm052{gap:var(--space-2)}._1dkxmm057{gap:var(--space-4)}._1dkxmm05c{gap:var(--space-6)}._1dkxmm05h{gap:var(--space-8)}._1dkxmm05m{gap:var(--space-12)}._1dkxmm05r{gap:var(--space-16)}._1dkxmm05w{gap:var(--space-20)}._1dkxmm061{gap:var(--space-24)}._1dkxmm066{gap:var(--space-32)}._1dkxmm06b{gap:var(--space-40)}._1dkxmm06g{gap:var(--space-48)}._1dkxmm06l{gap:var(--space-64)}._1dkxmm06q{gap:var(--space-80)}._1dkxmm06v{gap:var(--space-96)}._1dkxmm070{padding-block-start:var(--space-0)}._1dkxmm075{padding-block-start:var(--space-1)}._1dkxmm07a{padding-block-start:var(--space-2)}._1dkxmm07f{padding-block-start:var(--space-4)}._1dkxmm07k{padding-block-start:var(--space-6)}._1dkxmm07p{padding-block-start:var(--space-8)}._1dkxmm07u{padding-block-start:var(--space-12)}._1dkxmm07z{padding-block-start:var(--space-16)}._1dkxmm084{padding-block-start:var(--space-20)}._1dkxmm089{padding-block-start:var(--space-24)}._1dkxmm08e{padding-block-start:var(--space-32)}._1dkxmm08j{padding-block-start:var(--space-40)}._1dkxmm08o{padding-block-start:var(--space-48)}._1dkxmm08t{padding-block-start:var(--space-64)}._1dkxmm08y{padding-block-start:var(--space-80)}._1dkxmm093{padding-block-start:var(--space-96)}._1dkxmm098{padding-block-end:var(--space-0)}._1dkxmm09d{padding-block-end:var(--space-1)}._1dkxmm09i{padding-block-end:var(--space-2)}._1dkxmm09n{padding-block-end:var(--space-4)}._1dkxmm09s{padding-block-end:var(--space-6)}._1dkxmm09x{padding-block-end:var(--space-8)}._1dkxmm0a2{padding-block-end:var(--space-12)}._1dkxmm0a7{padding-block-end:var(--space-16)}._1dkxmm0ac{padding-block-end:var(--space-20)}._1dkxmm0ah{padding-block-end:var(--space-24)}._1dkxmm0am{padding-block-end:var(--space-32)}._1dkxmm0ar{padding-block-end:var(--space-40)}._1dkxmm0aw{padding-block-end:var(--space-48)}._1dkxmm0b1{padding-block-end:var(--space-64)}._1dkxmm0b6{padding-block-end:var(--space-80)}._1dkxmm0bb{padding-block-end:var(--space-96)}._1dkxmm0bg{padding-inline-start:var(--space-0)}._1dkxmm0bl{padding-inline-start:var(--space-1)}._1dkxmm0bq{padding-inline-start:var(--space-2)}._1dkxmm0bv{padding-inline-start:var(--space-4)}._1dkxmm0c0{padding-inline-start:var(--space-6)}._1dkxmm0c5{padding-inline-start:var(--space-8)}._1dkxmm0ca{padding-inline-start:var(--space-12)}._1dkxmm0cf{padding-inline-start:var(--space-16)}._1dkxmm0ck{padding-inline-start:var(--space-20)}._1dkxmm0cp{padding-inline-start:var(--space-24)}._1dkxmm0cu{padding-inline-start:var(--space-32)}._1dkxmm0cz{padding-inline-start:var(--space-40)}._1dkxmm0d4{padding-inline-start:var(--space-48)}._1dkxmm0d9{padding-inline-start:var(--space-64)}._1dkxmm0de{padding-inline-start:var(--space-80)}._1dkxmm0dj{padding-inline-start:var(--space-96)}._1dkxmm0do{padding-inline-end:var(--space-0)}._1dkxmm0dt{padding-inline-end:var(--space-1)}._1dkxmm0dy{padding-inline-end:var(--space-2)}._1dkxmm0e3{padding-inline-end:var(--space-4)}._1dkxmm0e8{padding-inline-end:var(--space-6)}._1dkxmm0ed{padding-inline-end:var(--space-8)}._1dkxmm0ei{padding-inline-end:var(--space-12)}._1dkxmm0en{padding-inline-end:var(--space-16)}._1dkxmm0es{padding-inline-end:var(--space-20)}._1dkxmm0ex{padding-inline-end:var(--space-24)}._1dkxmm0f2{padding-inline-end:var(--space-32)}._1dkxmm0f7{padding-inline-end:var(--space-40)}._1dkxmm0fc{padding-inline-end:var(--space-48)}._1dkxmm0fh{padding-inline-end:var(--space-64)}._1dkxmm0fm{padding-inline-end:var(--space-80)}._1dkxmm0fr{padding-inline-end:var(--space-96)}._1dkxmm0fw{margin-block-start:var(--space-0)}._1dkxmm0g1{margin-block-start:var(--space-1)}._1dkxmm0g6{margin-block-start:var(--space-2)}._1dkxmm0gb{margin-block-start:var(--space-4)}._1dkxmm0gg{margin-block-start:var(--space-6)}._1dkxmm0gl{margin-block-start:var(--space-8)}._1dkxmm0gq{margin-block-start:var(--space-12)}._1dkxmm0gv{margin-block-start:var(--space-16)}._1dkxmm0h0{margin-block-start:var(--space-20)}._1dkxmm0h5{margin-block-start:var(--space-24)}._1dkxmm0ha{margin-block-start:var(--space-32)}._1dkxmm0hf{margin-block-start:var(--space-40)}._1dkxmm0hk{margin-block-start:var(--space-48)}._1dkxmm0hp{margin-block-start:var(--space-64)}._1dkxmm0hu{margin-block-start:var(--space-80)}._1dkxmm0hz{margin-block-start:var(--space-96)}._1dkxmm0i4{margin-block-start:auto}._1dkxmm0i9{margin-block-end:var(--space-0)}._1dkxmm0ie{margin-block-end:var(--space-1)}._1dkxmm0ij{margin-block-end:var(--space-2)}._1dkxmm0io{margin-block-end:var(--space-4)}._1dkxmm0it{margin-block-end:var(--space-6)}._1dkxmm0iy{margin-block-end:var(--space-8)}._1dkxmm0j3{margin-block-end:var(--space-12)}._1dkxmm0j8{margin-block-end:var(--space-16)}._1dkxmm0jd{margin-block-end:var(--space-20)}._1dkxmm0ji{margin-block-end:var(--space-24)}._1dkxmm0jn{margin-block-end:var(--space-32)}._1dkxmm0js{margin-block-end:var(--space-40)}._1dkxmm0jx{margin-block-end:var(--space-48)}._1dkxmm0k2{margin-block-end:var(--space-64)}._1dkxmm0k7{margin-block-end:var(--space-80)}._1dkxmm0kc{margin-block-end:var(--space-96)}._1dkxmm0kh{margin-block-end:auto}._1dkxmm0km{margin-inline-start:var(--space-0)}._1dkxmm0kr{margin-inline-start:var(--space-1)}._1dkxmm0kw{margin-inline-start:var(--space-2)}._1dkxmm0l1{margin-inline-start:var(--space-4)}._1dkxmm0l6{margin-inline-start:var(--space-6)}._1dkxmm0lb{margin-inline-start:var(--space-8)}._1dkxmm0lg{margin-inline-start:var(--space-12)}._1dkxmm0ll{margin-inline-start:var(--space-16)}._1dkxmm0lq{margin-inline-start:var(--space-20)}._1dkxmm0lv{margin-inline-start:var(--space-24)}._1dkxmm0m0{margin-inline-start:var(--space-32)}._1dkxmm0m5{margin-inline-start:var(--space-40)}._1dkxmm0ma{margin-inline-start:var(--space-48)}._1dkxmm0mf{margin-inline-start:var(--space-64)}._1dkxmm0mk{margin-inline-start:var(--space-80)}._1dkxmm0mp{margin-inline-start:var(--space-96)}._1dkxmm0mu{margin-inline-start:auto}._1dkxmm0mz{margin-inline-end:var(--space-0)}._1dkxmm0n4{margin-inline-end:var(--space-1)}._1dkxmm0n9{margin-inline-end:var(--space-2)}._1dkxmm0ne{margin-inline-end:var(--space-4)}._1dkxmm0nj{margin-inline-end:var(--space-6)}._1dkxmm0no{margin-inline-end:var(--space-8)}._1dkxmm0nt{margin-inline-end:var(--space-12)}._1dkxmm0ny{margin-inline-end:var(--space-16)}._1dkxmm0o3{margin-inline-end:var(--space-20)}._1dkxmm0o8{margin-inline-end:var(--space-24)}._1dkxmm0od{margin-inline-end:var(--space-32)}._1dkxmm0oi{margin-inline-end:var(--space-40)}._1dkxmm0on{margin-inline-end:var(--space-48)}._1dkxmm0os{margin-inline-end:var(--space-64)}._1dkxmm0ox{margin-inline-end:var(--space-80)}._1dkxmm0p2{margin-inline-end:var(--space-96)}._1dkxmm0p7{margin-inline-end:auto}._1dkxmm0pc{inline-size:var(--size-xs)}._1dkxmm0ph{inline-size:var(--size-sm)}._1dkxmm0pm{inline-size:var(--size-med)}._1dkxmm0pr{inline-size:var(--size-lg)}._1dkxmm0pw{inline-size:var(--size-xl)}._1dkxmm0q1{inline-size:auto}._1dkxmm0q6{inline-size:100%}._1dkxmm0qb{inline-size:fit-content}._1dkxmm0qg{inline-size:min-content}._1dkxmm0ql{inline-size:max-content}._1dkxmm0qq{inline-size:var(--container-prose)}._1dkxmm0qv{inline-size:var(--container-page)}._1dkxmm0r0{inline-size:var(--container-wide)}._1dkxmm0r5{block-size:var(--size-xs)}._1dkxmm0ra{block-size:var(--size-sm)}._1dkxmm0rf{block-size:var(--size-med)}._1dkxmm0rk{block-size:var(--size-lg)}._1dkxmm0rp{block-size:var(--size-xl)}._1dkxmm0ru{block-size:auto}._1dkxmm0rz{block-size:100%}._1dkxmm0s4{block-size:fit-content}._1dkxmm0s9{block-size:min-content}._1dkxmm0se{block-size:max-content}._1dkxmm0sj{min-inline-size:var(--size-xs)}._1dkxmm0so{min-inline-size:var(--size-sm)}._1dkxmm0st{min-inline-size:var(--size-med)}._1dkxmm0sy{min-inline-size:var(--size-lg)}._1dkxmm0t3{min-inline-size:var(--size-xl)}._1dkxmm0t8{min-inline-size:auto}._1dkxmm0td{min-inline-size:100%}._1dkxmm0ti{min-inline-size:fit-content}._1dkxmm0tn{min-inline-size:min-content}._1dkxmm0ts{min-inline-size:max-content}._1dkxmm0tx{min-inline-size:var(--container-prose)}._1dkxmm0u2{min-inline-size:var(--container-page)}._1dkxmm0u7{min-inline-size:var(--container-wide)}._1dkxmm0uc{max-inline-size:var(--size-xs)}._1dkxmm0uh{max-inline-size:var(--size-sm)}._1dkxmm0um{max-inline-size:var(--size-med)}._1dkxmm0ur{max-inline-size:var(--size-lg)}._1dkxmm0uw{max-inline-size:var(--size-xl)}._1dkxmm0v1{max-inline-size:auto}._1dkxmm0v6{max-inline-size:100%}._1dkxmm0vb{max-inline-size:fit-content}._1dkxmm0vg{max-inline-size:min-content}._1dkxmm0vl{max-inline-size:max-content}._1dkxmm0vq{max-inline-size:var(--container-prose)}._1dkxmm0vv{max-inline-size:var(--container-page)}._1dkxmm0w0{max-inline-size:var(--container-wide)}._1dkxmm0w5{min-block-size:var(--size-xs)}._1dkxmm0wa{min-block-size:var(--size-sm)}._1dkxmm0wf{min-block-size:var(--size-med)}._1dkxmm0wk{min-block-size:var(--size-lg)}._1dkxmm0wp{min-block-size:var(--size-xl)}._1dkxmm0wu{min-block-size:auto}._1dkxmm0wz{min-block-size:100%}._1dkxmm0x4{min-block-size:fit-content}._1dkxmm0x9{min-block-size:min-content}._1dkxmm0xe{min-block-size:max-content}._1dkxmm0xj{max-block-size:var(--size-xs)}._1dkxmm0xo{max-block-size:var(--size-sm)}._1dkxmm0xt{max-block-size:var(--size-med)}._1dkxmm0xy{max-block-size:var(--size-lg)}._1dkxmm0y3{max-block-size:var(--size-xl)}._1dkxmm0y8{max-block-size:auto}._1dkxmm0yd{max-block-size:100%}._1dkxmm0yi{max-block-size:fit-content}._1dkxmm0yn{max-block-size:min-content}._1dkxmm0ys{max-block-size:max-content}}@media (width>=64em){._1dkxmm03{display:none}._1dkxmm08{display:block}._1dkxmm0d{display:inline}._1dkxmm0i{display:inline-block}._1dkxmm0n{display:flex}._1dkxmm0s{display:inline-flex}._1dkxmm0x{display:grid}._1dkxmm012{display:contents}._1dkxmm017{flex-direction:row}._1dkxmm01c{flex-direction:row-reverse}._1dkxmm01h{flex-direction:column}._1dkxmm01m{flex-direction:column-reverse}._1dkxmm01r{flex-wrap:nowrap}._1dkxmm01w{flex-wrap:wrap}._1dkxmm021{flex-grow:0}._1dkxmm026{flex-grow:1}._1dkxmm02b{flex-shrink:0}._1dkxmm02g{flex-shrink:1}._1dkxmm02l{align-items:start}._1dkxmm02q{align-items:center}._1dkxmm02v{align-items:end}._1dkxmm030{align-items:stretch}._1dkxmm035{align-items:baseline}._1dkxmm03a{align-self:start}._1dkxmm03f{align-self:center}._1dkxmm03k{align-self:end}._1dkxmm03p{align-self:stretch}._1dkxmm03u{align-self:baseline}._1dkxmm03z{justify-content:start}._1dkxmm044{justify-content:center}._1dkxmm049{justify-content:end}._1dkxmm04e{justify-content:space-between}._1dkxmm04j{justify-content:space-around}._1dkxmm04o{justify-content:space-evenly}._1dkxmm04t{gap:var(--space-0)}._1dkxmm04y{gap:var(--space-1)}._1dkxmm053{gap:var(--space-2)}._1dkxmm058{gap:var(--space-4)}._1dkxmm05d{gap:var(--space-6)}._1dkxmm05i{gap:var(--space-8)}._1dkxmm05n{gap:var(--space-12)}._1dkxmm05s{gap:var(--space-16)}._1dkxmm05x{gap:var(--space-20)}._1dkxmm062{gap:var(--space-24)}._1dkxmm067{gap:var(--space-32)}._1dkxmm06c{gap:var(--space-40)}._1dkxmm06h{gap:var(--space-48)}._1dkxmm06m{gap:var(--space-64)}._1dkxmm06r{gap:var(--space-80)}._1dkxmm06w{gap:var(--space-96)}._1dkxmm071{padding-block-start:var(--space-0)}._1dkxmm076{padding-block-start:var(--space-1)}._1dkxmm07b{padding-block-start:var(--space-2)}._1dkxmm07g{padding-block-start:var(--space-4)}._1dkxmm07l{padding-block-start:var(--space-6)}._1dkxmm07q{padding-block-start:var(--space-8)}._1dkxmm07v{padding-block-start:var(--space-12)}._1dkxmm080{padding-block-start:var(--space-16)}._1dkxmm085{padding-block-start:var(--space-20)}._1dkxmm08a{padding-block-start:var(--space-24)}._1dkxmm08f{padding-block-start:var(--space-32)}._1dkxmm08k{padding-block-start:var(--space-40)}._1dkxmm08p{padding-block-start:var(--space-48)}._1dkxmm08u{padding-block-start:var(--space-64)}._1dkxmm08z{padding-block-start:var(--space-80)}._1dkxmm094{padding-block-start:var(--space-96)}._1dkxmm099{padding-block-end:var(--space-0)}._1dkxmm09e{padding-block-end:var(--space-1)}._1dkxmm09j{padding-block-end:var(--space-2)}._1dkxmm09o{padding-block-end:var(--space-4)}._1dkxmm09t{padding-block-end:var(--space-6)}._1dkxmm09y{padding-block-end:var(--space-8)}._1dkxmm0a3{padding-block-end:var(--space-12)}._1dkxmm0a8{padding-block-end:var(--space-16)}._1dkxmm0ad{padding-block-end:var(--space-20)}._1dkxmm0ai{padding-block-end:var(--space-24)}._1dkxmm0an{padding-block-end:var(--space-32)}._1dkxmm0as{padding-block-end:var(--space-40)}._1dkxmm0ax{padding-block-end:var(--space-48)}._1dkxmm0b2{padding-block-end:var(--space-64)}._1dkxmm0b7{padding-block-end:var(--space-80)}._1dkxmm0bc{padding-block-end:var(--space-96)}._1dkxmm0bh{padding-inline-start:var(--space-0)}._1dkxmm0bm{padding-inline-start:var(--space-1)}._1dkxmm0br{padding-inline-start:var(--space-2)}._1dkxmm0bw{padding-inline-start:var(--space-4)}._1dkxmm0c1{padding-inline-start:var(--space-6)}._1dkxmm0c6{padding-inline-start:var(--space-8)}._1dkxmm0cb{padding-inline-start:var(--space-12)}._1dkxmm0cg{padding-inline-start:var(--space-16)}._1dkxmm0cl{padding-inline-start:var(--space-20)}._1dkxmm0cq{padding-inline-start:var(--space-24)}._1dkxmm0cv{padding-inline-start:var(--space-32)}._1dkxmm0d0{padding-inline-start:var(--space-40)}._1dkxmm0d5{padding-inline-start:var(--space-48)}._1dkxmm0da{padding-inline-start:var(--space-64)}._1dkxmm0df{padding-inline-start:var(--space-80)}._1dkxmm0dk{padding-inline-start:var(--space-96)}._1dkxmm0dp{padding-inline-end:var(--space-0)}._1dkxmm0du{padding-inline-end:var(--space-1)}._1dkxmm0dz{padding-inline-end:var(--space-2)}._1dkxmm0e4{padding-inline-end:var(--space-4)}._1dkxmm0e9{padding-inline-end:var(--space-6)}._1dkxmm0ee{padding-inline-end:var(--space-8)}._1dkxmm0ej{padding-inline-end:var(--space-12)}._1dkxmm0eo{padding-inline-end:var(--space-16)}._1dkxmm0et{padding-inline-end:var(--space-20)}._1dkxmm0ey{padding-inline-end:var(--space-24)}._1dkxmm0f3{padding-inline-end:var(--space-32)}._1dkxmm0f8{padding-inline-end:var(--space-40)}._1dkxmm0fd{padding-inline-end:var(--space-48)}._1dkxmm0fi{padding-inline-end:var(--space-64)}._1dkxmm0fn{padding-inline-end:var(--space-80)}._1dkxmm0fs{padding-inline-end:var(--space-96)}._1dkxmm0fx{margin-block-start:var(--space-0)}._1dkxmm0g2{margin-block-start:var(--space-1)}._1dkxmm0g7{margin-block-start:var(--space-2)}._1dkxmm0gc{margin-block-start:var(--space-4)}._1dkxmm0gh{margin-block-start:var(--space-6)}._1dkxmm0gm{margin-block-start:var(--space-8)}._1dkxmm0gr{margin-block-start:var(--space-12)}._1dkxmm0gw{margin-block-start:var(--space-16)}._1dkxmm0h1{margin-block-start:var(--space-20)}._1dkxmm0h6{margin-block-start:var(--space-24)}._1dkxmm0hb{margin-block-start:var(--space-32)}._1dkxmm0hg{margin-block-start:var(--space-40)}._1dkxmm0hl{margin-block-start:var(--space-48)}._1dkxmm0hq{margin-block-start:var(--space-64)}._1dkxmm0hv{margin-block-start:var(--space-80)}._1dkxmm0i0{margin-block-start:var(--space-96)}._1dkxmm0i5{margin-block-start:auto}._1dkxmm0ia{margin-block-end:var(--space-0)}._1dkxmm0if{margin-block-end:var(--space-1)}._1dkxmm0ik{margin-block-end:var(--space-2)}._1dkxmm0ip{margin-block-end:var(--space-4)}._1dkxmm0iu{margin-block-end:var(--space-6)}._1dkxmm0iz{margin-block-end:var(--space-8)}._1dkxmm0j4{margin-block-end:var(--space-12)}._1dkxmm0j9{margin-block-end:var(--space-16)}._1dkxmm0je{margin-block-end:var(--space-20)}._1dkxmm0jj{margin-block-end:var(--space-24)}._1dkxmm0jo{margin-block-end:var(--space-32)}._1dkxmm0jt{margin-block-end:var(--space-40)}._1dkxmm0jy{margin-block-end:var(--space-48)}._1dkxmm0k3{margin-block-end:var(--space-64)}._1dkxmm0k8{margin-block-end:var(--space-80)}._1dkxmm0kd{margin-block-end:var(--space-96)}._1dkxmm0ki{margin-block-end:auto}._1dkxmm0kn{margin-inline-start:var(--space-0)}._1dkxmm0ks{margin-inline-start:var(--space-1)}._1dkxmm0kx{margin-inline-start:var(--space-2)}._1dkxmm0l2{margin-inline-start:var(--space-4)}._1dkxmm0l7{margin-inline-start:var(--space-6)}._1dkxmm0lc{margin-inline-start:var(--space-8)}._1dkxmm0lh{margin-inline-start:var(--space-12)}._1dkxmm0lm{margin-inline-start:var(--space-16)}._1dkxmm0lr{margin-inline-start:var(--space-20)}._1dkxmm0lw{margin-inline-start:var(--space-24)}._1dkxmm0m1{margin-inline-start:var(--space-32)}._1dkxmm0m6{margin-inline-start:var(--space-40)}._1dkxmm0mb{margin-inline-start:var(--space-48)}._1dkxmm0mg{margin-inline-start:var(--space-64)}._1dkxmm0ml{margin-inline-start:var(--space-80)}._1dkxmm0mq{margin-inline-start:var(--space-96)}._1dkxmm0mv{margin-inline-start:auto}._1dkxmm0n0{margin-inline-end:var(--space-0)}._1dkxmm0n5{margin-inline-end:var(--space-1)}._1dkxmm0na{margin-inline-end:var(--space-2)}._1dkxmm0nf{margin-inline-end:var(--space-4)}._1dkxmm0nk{margin-inline-end:var(--space-6)}._1dkxmm0np{margin-inline-end:var(--space-8)}._1dkxmm0nu{margin-inline-end:var(--space-12)}._1dkxmm0nz{margin-inline-end:var(--space-16)}._1dkxmm0o4{margin-inline-end:var(--space-20)}._1dkxmm0o9{margin-inline-end:var(--space-24)}._1dkxmm0oe{margin-inline-end:var(--space-32)}._1dkxmm0oj{margin-inline-end:var(--space-40)}._1dkxmm0oo{margin-inline-end:var(--space-48)}._1dkxmm0ot{margin-inline-end:var(--space-64)}._1dkxmm0oy{margin-inline-end:var(--space-80)}._1dkxmm0p3{margin-inline-end:var(--space-96)}._1dkxmm0p8{margin-inline-end:auto}._1dkxmm0pd{inline-size:var(--size-xs)}._1dkxmm0pi{inline-size:var(--size-sm)}._1dkxmm0pn{inline-size:var(--size-med)}._1dkxmm0ps{inline-size:var(--size-lg)}._1dkxmm0px{inline-size:var(--size-xl)}._1dkxmm0q2{inline-size:auto}._1dkxmm0q7{inline-size:100%}._1dkxmm0qc{inline-size:fit-content}._1dkxmm0qh{inline-size:min-content}._1dkxmm0qm{inline-size:max-content}._1dkxmm0qr{inline-size:var(--container-prose)}._1dkxmm0qw{inline-size:var(--container-page)}._1dkxmm0r1{inline-size:var(--container-wide)}._1dkxmm0r6{block-size:var(--size-xs)}._1dkxmm0rb{block-size:var(--size-sm)}._1dkxmm0rg{block-size:var(--size-med)}._1dkxmm0rl{block-size:var(--size-lg)}._1dkxmm0rq{block-size:var(--size-xl)}._1dkxmm0rv{block-size:auto}._1dkxmm0s0{block-size:100%}._1dkxmm0s5{block-size:fit-content}._1dkxmm0sa{block-size:min-content}._1dkxmm0sf{block-size:max-content}._1dkxmm0sk{min-inline-size:var(--size-xs)}._1dkxmm0sp{min-inline-size:var(--size-sm)}._1dkxmm0su{min-inline-size:var(--size-med)}._1dkxmm0sz{min-inline-size:var(--size-lg)}._1dkxmm0t4{min-inline-size:var(--size-xl)}._1dkxmm0t9{min-inline-size:auto}._1dkxmm0te{min-inline-size:100%}._1dkxmm0tj{min-inline-size:fit-content}._1dkxmm0to{min-inline-size:min-content}._1dkxmm0tt{min-inline-size:max-content}._1dkxmm0ty{min-inline-size:var(--container-prose)}._1dkxmm0u3{min-inline-size:var(--container-page)}._1dkxmm0u8{min-inline-size:var(--container-wide)}._1dkxmm0ud{max-inline-size:var(--size-xs)}._1dkxmm0ui{max-inline-size:var(--size-sm)}._1dkxmm0un{max-inline-size:var(--size-med)}._1dkxmm0us{max-inline-size:var(--size-lg)}._1dkxmm0ux{max-inline-size:var(--size-xl)}._1dkxmm0v2{max-inline-size:auto}._1dkxmm0v7{max-inline-size:100%}._1dkxmm0vc{max-inline-size:fit-content}._1dkxmm0vh{max-inline-size:min-content}._1dkxmm0vm{max-inline-size:max-content}._1dkxmm0vr{max-inline-size:var(--container-prose)}._1dkxmm0vw{max-inline-size:var(--container-page)}._1dkxmm0w1{max-inline-size:var(--container-wide)}._1dkxmm0w6{min-block-size:var(--size-xs)}._1dkxmm0wb{min-block-size:var(--size-sm)}._1dkxmm0wg{min-block-size:var(--size-med)}._1dkxmm0wl{min-block-size:var(--size-lg)}._1dkxmm0wq{min-block-size:var(--size-xl)}._1dkxmm0wv{min-block-size:auto}._1dkxmm0x0{min-block-size:100%}._1dkxmm0x5{min-block-size:fit-content}._1dkxmm0xa{min-block-size:min-content}._1dkxmm0xf{min-block-size:max-content}._1dkxmm0xk{max-block-size:var(--size-xs)}._1dkxmm0xp{max-block-size:var(--size-sm)}._1dkxmm0xu{max-block-size:var(--size-med)}._1dkxmm0xz{max-block-size:var(--size-lg)}._1dkxmm0y4{max-block-size:var(--size-xl)}._1dkxmm0y9{max-block-size:auto}._1dkxmm0ye{max-block-size:100%}._1dkxmm0yj{max-block-size:fit-content}._1dkxmm0yo{max-block-size:min-content}._1dkxmm0yt{max-block-size:max-content}}@media (width>=80em){._1dkxmm04{display:none}._1dkxmm09{display:block}._1dkxmm0e{display:inline}._1dkxmm0j{display:inline-block}._1dkxmm0o{display:flex}._1dkxmm0t{display:inline-flex}._1dkxmm0y{display:grid}._1dkxmm013{display:contents}._1dkxmm018{flex-direction:row}._1dkxmm01d{flex-direction:row-reverse}._1dkxmm01i{flex-direction:column}._1dkxmm01n{flex-direction:column-reverse}._1dkxmm01s{flex-wrap:nowrap}._1dkxmm01x{flex-wrap:wrap}._1dkxmm022{flex-grow:0}._1dkxmm027{flex-grow:1}._1dkxmm02c{flex-shrink:0}._1dkxmm02h{flex-shrink:1}._1dkxmm02m{align-items:start}._1dkxmm02r{align-items:center}._1dkxmm02w{align-items:end}._1dkxmm031{align-items:stretch}._1dkxmm036{align-items:baseline}._1dkxmm03b{align-self:start}._1dkxmm03g{align-self:center}._1dkxmm03l{align-self:end}._1dkxmm03q{align-self:stretch}._1dkxmm03v{align-self:baseline}._1dkxmm040{justify-content:start}._1dkxmm045{justify-content:center}._1dkxmm04a{justify-content:end}._1dkxmm04f{justify-content:space-between}._1dkxmm04k{justify-content:space-around}._1dkxmm04p{justify-content:space-evenly}._1dkxmm04u{gap:var(--space-0)}._1dkxmm04z{gap:var(--space-1)}._1dkxmm054{gap:var(--space-2)}._1dkxmm059{gap:var(--space-4)}._1dkxmm05e{gap:var(--space-6)}._1dkxmm05j{gap:var(--space-8)}._1dkxmm05o{gap:var(--space-12)}._1dkxmm05t{gap:var(--space-16)}._1dkxmm05y{gap:var(--space-20)}._1dkxmm063{gap:var(--space-24)}._1dkxmm068{gap:var(--space-32)}._1dkxmm06d{gap:var(--space-40)}._1dkxmm06i{gap:var(--space-48)}._1dkxmm06n{gap:var(--space-64)}._1dkxmm06s{gap:var(--space-80)}._1dkxmm06x{gap:var(--space-96)}._1dkxmm072{padding-block-start:var(--space-0)}._1dkxmm077{padding-block-start:var(--space-1)}._1dkxmm07c{padding-block-start:var(--space-2)}._1dkxmm07h{padding-block-start:var(--space-4)}._1dkxmm07m{padding-block-start:var(--space-6)}._1dkxmm07r{padding-block-start:var(--space-8)}._1dkxmm07w{padding-block-start:var(--space-12)}._1dkxmm081{padding-block-start:var(--space-16)}._1dkxmm086{padding-block-start:var(--space-20)}._1dkxmm08b{padding-block-start:var(--space-24)}._1dkxmm08g{padding-block-start:var(--space-32)}._1dkxmm08l{padding-block-start:var(--space-40)}._1dkxmm08q{padding-block-start:var(--space-48)}._1dkxmm08v{padding-block-start:var(--space-64)}._1dkxmm090{padding-block-start:var(--space-80)}._1dkxmm095{padding-block-start:var(--space-96)}._1dkxmm09a{padding-block-end:var(--space-0)}._1dkxmm09f{padding-block-end:var(--space-1)}._1dkxmm09k{padding-block-end:var(--space-2)}._1dkxmm09p{padding-block-end:var(--space-4)}._1dkxmm09u{padding-block-end:var(--space-6)}._1dkxmm09z{padding-block-end:var(--space-8)}._1dkxmm0a4{padding-block-end:var(--space-12)}._1dkxmm0a9{padding-block-end:var(--space-16)}._1dkxmm0ae{padding-block-end:var(--space-20)}._1dkxmm0aj{padding-block-end:var(--space-24)}._1dkxmm0ao{padding-block-end:var(--space-32)}._1dkxmm0at{padding-block-end:var(--space-40)}._1dkxmm0ay{padding-block-end:var(--space-48)}._1dkxmm0b3{padding-block-end:var(--space-64)}._1dkxmm0b8{padding-block-end:var(--space-80)}._1dkxmm0bd{padding-block-end:var(--space-96)}._1dkxmm0bi{padding-inline-start:var(--space-0)}._1dkxmm0bn{padding-inline-start:var(--space-1)}._1dkxmm0bs{padding-inline-start:var(--space-2)}._1dkxmm0bx{padding-inline-start:var(--space-4)}._1dkxmm0c2{padding-inline-start:var(--space-6)}._1dkxmm0c7{padding-inline-start:var(--space-8)}._1dkxmm0cc{padding-inline-start:var(--space-12)}._1dkxmm0ch{padding-inline-start:var(--space-16)}._1dkxmm0cm{padding-inline-start:var(--space-20)}._1dkxmm0cr{padding-inline-start:var(--space-24)}._1dkxmm0cw{padding-inline-start:var(--space-32)}._1dkxmm0d1{padding-inline-start:var(--space-40)}._1dkxmm0d6{padding-inline-start:var(--space-48)}._1dkxmm0db{padding-inline-start:var(--space-64)}._1dkxmm0dg{padding-inline-start:var(--space-80)}._1dkxmm0dl{padding-inline-start:var(--space-96)}._1dkxmm0dq{padding-inline-end:var(--space-0)}._1dkxmm0dv{padding-inline-end:var(--space-1)}._1dkxmm0e0{padding-inline-end:var(--space-2)}._1dkxmm0e5{padding-inline-end:var(--space-4)}._1dkxmm0ea{padding-inline-end:var(--space-6)}._1dkxmm0ef{padding-inline-end:var(--space-8)}._1dkxmm0ek{padding-inline-end:var(--space-12)}._1dkxmm0ep{padding-inline-end:var(--space-16)}._1dkxmm0eu{padding-inline-end:var(--space-20)}._1dkxmm0ez{padding-inline-end:var(--space-24)}._1dkxmm0f4{padding-inline-end:var(--space-32)}._1dkxmm0f9{padding-inline-end:var(--space-40)}._1dkxmm0fe{padding-inline-end:var(--space-48)}._1dkxmm0fj{padding-inline-end:var(--space-64)}._1dkxmm0fo{padding-inline-end:var(--space-80)}._1dkxmm0ft{padding-inline-end:var(--space-96)}._1dkxmm0fy{margin-block-start:var(--space-0)}._1dkxmm0g3{margin-block-start:var(--space-1)}._1dkxmm0g8{margin-block-start:var(--space-2)}._1dkxmm0gd{margin-block-start:var(--space-4)}._1dkxmm0gi{margin-block-start:var(--space-6)}._1dkxmm0gn{margin-block-start:var(--space-8)}._1dkxmm0gs{margin-block-start:var(--space-12)}._1dkxmm0gx{margin-block-start:var(--space-16)}._1dkxmm0h2{margin-block-start:var(--space-20)}._1dkxmm0h7{margin-block-start:var(--space-24)}._1dkxmm0hc{margin-block-start:var(--space-32)}._1dkxmm0hh{margin-block-start:var(--space-40)}._1dkxmm0hm{margin-block-start:var(--space-48)}._1dkxmm0hr{margin-block-start:var(--space-64)}._1dkxmm0hw{margin-block-start:var(--space-80)}._1dkxmm0i1{margin-block-start:var(--space-96)}._1dkxmm0i6{margin-block-start:auto}._1dkxmm0ib{margin-block-end:var(--space-0)}._1dkxmm0ig{margin-block-end:var(--space-1)}._1dkxmm0il{margin-block-end:var(--space-2)}._1dkxmm0iq{margin-block-end:var(--space-4)}._1dkxmm0iv{margin-block-end:var(--space-6)}._1dkxmm0j0{margin-block-end:var(--space-8)}._1dkxmm0j5{margin-block-end:var(--space-12)}._1dkxmm0ja{margin-block-end:var(--space-16)}._1dkxmm0jf{margin-block-end:var(--space-20)}._1dkxmm0jk{margin-block-end:var(--space-24)}._1dkxmm0jp{margin-block-end:var(--space-32)}._1dkxmm0ju{margin-block-end:var(--space-40)}._1dkxmm0jz{margin-block-end:var(--space-48)}._1dkxmm0k4{margin-block-end:var(--space-64)}._1dkxmm0k9{margin-block-end:var(--space-80)}._1dkxmm0ke{margin-block-end:var(--space-96)}._1dkxmm0kj{margin-block-end:auto}._1dkxmm0ko{margin-inline-start:var(--space-0)}._1dkxmm0kt{margin-inline-start:var(--space-1)}._1dkxmm0ky{margin-inline-start:var(--space-2)}._1dkxmm0l3{margin-inline-start:var(--space-4)}._1dkxmm0l8{margin-inline-start:var(--space-6)}._1dkxmm0ld{margin-inline-start:var(--space-8)}._1dkxmm0li{margin-inline-start:var(--space-12)}._1dkxmm0ln{margin-inline-start:var(--space-16)}._1dkxmm0ls{margin-inline-start:var(--space-20)}._1dkxmm0lx{margin-inline-start:var(--space-24)}._1dkxmm0m2{margin-inline-start:var(--space-32)}._1dkxmm0m7{margin-inline-start:var(--space-40)}._1dkxmm0mc{margin-inline-start:var(--space-48)}._1dkxmm0mh{margin-inline-start:var(--space-64)}._1dkxmm0mm{margin-inline-start:var(--space-80)}._1dkxmm0mr{margin-inline-start:var(--space-96)}._1dkxmm0mw{margin-inline-start:auto}._1dkxmm0n1{margin-inline-end:var(--space-0)}._1dkxmm0n6{margin-inline-end:var(--space-1)}._1dkxmm0nb{margin-inline-end:var(--space-2)}._1dkxmm0ng{margin-inline-end:var(--space-4)}._1dkxmm0nl{margin-inline-end:var(--space-6)}._1dkxmm0nq{margin-inline-end:var(--space-8)}._1dkxmm0nv{margin-inline-end:var(--space-12)}._1dkxmm0o0{margin-inline-end:var(--space-16)}._1dkxmm0o5{margin-inline-end:var(--space-20)}._1dkxmm0oa{margin-inline-end:var(--space-24)}._1dkxmm0of{margin-inline-end:var(--space-32)}._1dkxmm0ok{margin-inline-end:var(--space-40)}._1dkxmm0op{margin-inline-end:var(--space-48)}._1dkxmm0ou{margin-inline-end:var(--space-64)}._1dkxmm0oz{margin-inline-end:var(--space-80)}._1dkxmm0p4{margin-inline-end:var(--space-96)}._1dkxmm0p9{margin-inline-end:auto}._1dkxmm0pe{inline-size:var(--size-xs)}._1dkxmm0pj{inline-size:var(--size-sm)}._1dkxmm0po{inline-size:var(--size-med)}._1dkxmm0pt{inline-size:var(--size-lg)}._1dkxmm0py{inline-size:var(--size-xl)}._1dkxmm0q3{inline-size:auto}._1dkxmm0q8{inline-size:100%}._1dkxmm0qd{inline-size:fit-content}._1dkxmm0qi{inline-size:min-content}._1dkxmm0qn{inline-size:max-content}._1dkxmm0qs{inline-size:var(--container-prose)}._1dkxmm0qx{inline-size:var(--container-page)}._1dkxmm0r2{inline-size:var(--container-wide)}._1dkxmm0r7{block-size:var(--size-xs)}._1dkxmm0rc{block-size:var(--size-sm)}._1dkxmm0rh{block-size:var(--size-med)}._1dkxmm0rm{block-size:var(--size-lg)}._1dkxmm0rr{block-size:var(--size-xl)}._1dkxmm0rw{block-size:auto}._1dkxmm0s1{block-size:100%}._1dkxmm0s6{block-size:fit-content}._1dkxmm0sb{block-size:min-content}._1dkxmm0sg{block-size:max-content}._1dkxmm0sl{min-inline-size:var(--size-xs)}._1dkxmm0sq{min-inline-size:var(--size-sm)}._1dkxmm0sv{min-inline-size:var(--size-med)}._1dkxmm0t0{min-inline-size:var(--size-lg)}._1dkxmm0t5{min-inline-size:var(--size-xl)}._1dkxmm0ta{min-inline-size:auto}._1dkxmm0tf{min-inline-size:100%}._1dkxmm0tk{min-inline-size:fit-content}._1dkxmm0tp{min-inline-size:min-content}._1dkxmm0tu{min-inline-size:max-content}._1dkxmm0tz{min-inline-size:var(--container-prose)}._1dkxmm0u4{min-inline-size:var(--container-page)}._1dkxmm0u9{min-inline-size:var(--container-wide)}._1dkxmm0ue{max-inline-size:var(--size-xs)}._1dkxmm0uj{max-inline-size:var(--size-sm)}._1dkxmm0uo{max-inline-size:var(--size-med)}._1dkxmm0ut{max-inline-size:var(--size-lg)}._1dkxmm0uy{max-inline-size:var(--size-xl)}._1dkxmm0v3{max-inline-size:auto}._1dkxmm0v8{max-inline-size:100%}._1dkxmm0vd{max-inline-size:fit-content}._1dkxmm0vi{max-inline-size:min-content}._1dkxmm0vn{max-inline-size:max-content}._1dkxmm0vs{max-inline-size:var(--container-prose)}._1dkxmm0vx{max-inline-size:var(--container-page)}._1dkxmm0w2{max-inline-size:var(--container-wide)}._1dkxmm0w7{min-block-size:var(--size-xs)}._1dkxmm0wc{min-block-size:var(--size-sm)}._1dkxmm0wh{min-block-size:var(--size-med)}._1dkxmm0wm{min-block-size:var(--size-lg)}._1dkxmm0wr{min-block-size:var(--size-xl)}._1dkxmm0ww{min-block-size:auto}._1dkxmm0x1{min-block-size:100%}._1dkxmm0x6{min-block-size:fit-content}._1dkxmm0xb{min-block-size:min-content}._1dkxmm0xg{min-block-size:max-content}._1dkxmm0xl{max-block-size:var(--size-xs)}._1dkxmm0xq{max-block-size:var(--size-sm)}._1dkxmm0xv{max-block-size:var(--size-med)}._1dkxmm0y0{max-block-size:var(--size-lg)}._1dkxmm0y5{max-block-size:var(--size-xl)}._1dkxmm0ya{max-block-size:auto}._1dkxmm0yf{max-block-size:100%}._1dkxmm0yk{max-block-size:fit-content}._1dkxmm0yp{max-block-size:min-content}._1dkxmm0yu{max-block-size:max-content}}}
@@ -1,2 +1,2 @@
1
- @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
1
+ @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
2
2
  @layer tokens,reset,atoms,components;
@@ -0,0 +1,16 @@
1
+ //#region src/styles/split-text-props.ts
2
+ var e = [
3
+ "font",
4
+ "leading",
5
+ "size",
6
+ "truncate",
7
+ "weight",
8
+ "wrap"
9
+ ], t = new Set(e);
10
+ function n(e) {
11
+ let n = {}, r = {};
12
+ for (let [i, a] of Object.entries(e)) (t.has(i) ? n : r)[i] = a;
13
+ return [n, r];
14
+ }
15
+ //#endregion
16
+ export { e as TEXT_PROP_NAMES, n as splitTextProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jonmilner/ui",
3
- "version": "0.3.2",
3
+ "version": "0.4.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "THIRD_PARTY_NOTICES.md"
@@ -70,6 +70,10 @@
70
70
  "types": "./dist/Toast/index.d.mts",
71
71
  "default": "./dist/Toast/index.mjs"
72
72
  },
73
+ "./VisuallyHidden": {
74
+ "types": "./dist/VisuallyHidden/index.d.mts",
75
+ "default": "./dist/VisuallyHidden/index.mjs"
76
+ },
73
77
  "./Dialog": {
74
78
  "types": "./dist/Dialog/index.d.mts",
75
79
  "default": "./dist/Dialog/index.mjs"