@cueplusplus/ui 0.18.0 → 0.18.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/chat/message.js +1 -1
- package/dist/color/color-field.d.ts +7 -0
- package/dist/configurator/_overrides.js +7 -4
- package/dist/layout/link.d.ts +1 -1
- package/dist/layout/link.js +1 -1
- package/dist/primitives/button.d.ts +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/system/_paint-glass.js +1 -1
- package/dist/system/_paint-glow.js +1 -1
- package/dist/system/_storage.js +25 -0
- package/dist/system/_style-accordion-rule.js +1 -1
- package/dist/system/_style-app-bar.js +2 -2
- package/dist/system/_style-body-weight.js +1 -1
- package/dist/system/_style-control.js +2 -2
- package/dist/system/_style-eyebrow.js +1 -1
- package/dist/system/_style-footer-rule.js +2 -2
- package/dist/system/_style-label-case.js +2 -2
- package/dist/system/_style-label-weight.js +2 -2
- package/dist/system/_style-link.js +1 -1
- package/dist/system/_style-nav-voice.js +2 -2
- package/dist/system/_style-page-title.js +2 -2
- package/dist/system/_style-segmented-control.js +2 -2
- package/dist/system/_style-title.js +1 -1
- package/dist/system/theme-provider.js +7 -4
- package/manifest/components/color-field.json +10 -0
- package/manifest/fixtures.json +30 -0
- package/manifest/manifest.json +3 -3
- package/manifest/tokens.json +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @cueplusplus/ui
|
|
2
2
|
|
|
3
|
+
## 0.18.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 17b9bf1: Prose no longer ships CSS. `styles.css` hands `dist` to a consumer's Tailwind with `@source "./"`, and `dist` keeps its comments. Thirty-four of them elided an arbitrary value inside the brackets — `font-[number:…]`, `shadow-[…]` — and the scanner built each into a rule whose declaration was the elision itself. That meant thirty-four junk rules in every consumer stylesheet. The three inside a `var()` also printed "Found 3 warnings while optimizing generated CSS" in the consumer's build. Those comments now put a space inside the brackets, so the scanner can't take them as candidates. A test builds every candidate-shaped elision in `src` the way a consumer's Tailwind would, and fails if any declaration comes back holding one.
|
|
8
|
+
- 1e06f0e: `ThemeProvider` and `ThemeConfigurator` no longer throw inside a sandboxed frame. An iframe sandboxed without `allow-same-origin` has an opaque origin, and there the `localStorage` accessor itself throws a `SecurityError` instead of answering `undefined`. Both components probed it with `typeof localStorage` outside the `try` that absorbs storage failures, so a provider that persists its preferences, or a configurator restoring its panel, threw on its first render. The probe now runs inside the `try`, and both degrade to "nothing stored" there, the way a private window's full quota already did.
|
|
9
|
+
- @cueplusplus/tokens@0.18.2
|
|
10
|
+
|
|
11
|
+
## 0.18.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 59deac9: `ColorField` documents `aria-label`. The field draws no visible label, so it needs a name from `aria-label` or from `aria-labelledby` pointing at a label of your own — without either the input has none. The prop was always accepted (it comes from React Aria); it is now in the component's documentation and manifest, so whoever builds one — a person or an agent reading the manifest — is told.
|
|
16
|
+
- 2dd4248: The manifest's fixture catalogue (`manifest/fixtures.json`) names six more values a tool can place in a prop: `children.toggles`, three toggles for a `ToggleGroup`; `layout.show-crumbs-long` and `layout.patch-steps-long`, breadcrumbs and steps with long words; and `agent.permission-scopes`, `agent.permission-rules` and `agent.permission-dirs`, the scopes, command rule and directory a `PermissionScopes` grant is written with. No component changes.
|
|
17
|
+
- @cueplusplus/tokens@0.18.1
|
|
18
|
+
|
|
3
19
|
## 0.18.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/dist/chat/message.js
CHANGED
|
@@ -13,7 +13,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
* The tight corner is the tail, and it points at whoever is speaking: bottom
|
|
14
14
|
* right for the right-aligned user turn, bottom left for the agent's. Written
|
|
15
15
|
* as the overlay rung with one corner overridden to the control rung, rather
|
|
16
|
-
* than a `[border-radius
|
|
16
|
+
* than a `[border-radius: …]` arbitrary value reading `var(--radius-*)`
|
|
17
17
|
* directly — a `--radius-*` reader bypasses the compiled bridge utilities
|
|
18
18
|
* `rounded-control`/`rounded-overlay` resolve to, so it neither shows up in
|
|
19
19
|
* the class-token scan that guards this bridge nor tightens with
|
|
@@ -4,6 +4,13 @@ import * as React from "react";
|
|
|
4
4
|
import { ColorFieldProps, InputProps } from "react-aria-components";
|
|
5
5
|
//#region src/color/color-field.d.ts
|
|
6
6
|
interface ColorFieldProps$1 extends Omit<ColorFieldProps, "children"> {
|
|
7
|
+
/**
|
|
8
|
+
* The field's accessible name. `ColorField` draws no visible label — React
|
|
9
|
+
* Aria's label slot is left empty — so name it here, or point
|
|
10
|
+
* `aria-labelledby` at a label of your own. Without either the input has no
|
|
11
|
+
* name at all.
|
|
12
|
+
*/
|
|
13
|
+
"aria-label"?: string;
|
|
7
14
|
/** Rung of the control ladder. Defaults to `"md"`. */
|
|
8
15
|
size?: FormControlSize;
|
|
9
16
|
/** Extra classes for the input itself. */
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { localStore } from "../system/_storage.js";
|
|
1
2
|
import { THEME_NAME_PATTERN as THEME_NAME_PATTERN$1, assertCssValue, followerSelector, serializeSystemModeAliases, serializeThemeBlock, themeFollowerSelector, tokenProperty } from "../theming/serialize.js";
|
|
2
3
|
import { DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS } from "../theming/create-theme.js";
|
|
3
4
|
import { resolve } from "@cueplusplus/theme-base";
|
|
@@ -506,10 +507,11 @@ function defaultSnapshot() {
|
|
|
506
507
|
* @returns The snapshot, or `null` when there is nothing usable stored.
|
|
507
508
|
*/
|
|
508
509
|
function readSnapshot(storageKey) {
|
|
509
|
-
|
|
510
|
+
const store = localStore();
|
|
511
|
+
if (store === null) return null;
|
|
510
512
|
let parsed;
|
|
511
513
|
try {
|
|
512
|
-
const raw =
|
|
514
|
+
const raw = store.getItem(storageKey);
|
|
513
515
|
if (raw === null) return null;
|
|
514
516
|
parsed = JSON.parse(raw);
|
|
515
517
|
} catch {
|
|
@@ -541,9 +543,10 @@ function readSnapshot(storageKey) {
|
|
|
541
543
|
* @param snapshot - What to store.
|
|
542
544
|
*/
|
|
543
545
|
function writeSnapshot(storageKey, snapshot) {
|
|
544
|
-
|
|
546
|
+
const store = localStore();
|
|
547
|
+
if (store === null) return;
|
|
545
548
|
try {
|
|
546
|
-
|
|
549
|
+
store.setItem(storageKey, JSON.stringify(snapshot));
|
|
547
550
|
} catch {}
|
|
548
551
|
}
|
|
549
552
|
//#endregion
|
package/dist/layout/link.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
20
20
|
* through every link's, so a set that inks all links inks prose links too.
|
|
21
21
|
*
|
|
22
22
|
* **Each variant carries its own ink, and the base carries none.** The two
|
|
23
|
-
* inks are two `text-[color
|
|
23
|
+
* inks are two `text-[color: …]` utilities, and `linkVariants()` is exported to
|
|
24
24
|
* be spread onto an anchor without `cn()`: were the plain ink in the base and
|
|
25
25
|
* the prose ink in the variant, an underlined link would carry both, and which
|
|
26
26
|
* one painted would be decided by the order Tailwind happened to emit them in.
|
package/dist/layout/link.js
CHANGED
|
@@ -26,7 +26,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
26
26
|
* through every link's, so a set that inks all links inks prose links too.
|
|
27
27
|
*
|
|
28
28
|
* **Each variant carries its own ink, and the base carries none.** The two
|
|
29
|
-
* inks are two `text-[color
|
|
29
|
+
* inks are two `text-[color: …]` utilities, and `linkVariants()` is exported to
|
|
30
30
|
* be spread onto an anchor without `cn()`: were the plain ink in the base and
|
|
31
31
|
* the prose ink in the variant, an underlined link would carry both, and which
|
|
32
32
|
* one painted would be decided by the order Tailwind happened to emit them in.
|
|
@@ -10,7 +10,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
10
10
|
* A class concatenated onto it — by a template string, `clsx`, or that option —
|
|
11
11
|
* does not replace the recipe's own; the two compete by the order Tailwind
|
|
12
12
|
* emits them in, which is not a contract. The inline padding in particular is
|
|
13
|
-
* a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
|
|
13
|
+
* a `px-[ calc(…) ]` reader of the style set's `style-control-pad`, and Tailwind
|
|
14
14
|
* emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
|
|
15
15
|
* the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
|
|
16
16
|
* class of the recipe, pass `className` to `Button` itself, which merges, or
|
|
@@ -72,7 +72,7 @@ const buttonTones = {
|
|
|
72
72
|
* A class concatenated onto it — by a template string, `clsx`, or that option —
|
|
73
73
|
* does not replace the recipe's own; the two compete by the order Tailwind
|
|
74
74
|
* emits them in, which is not a contract. The inline padding in particular is
|
|
75
|
-
* a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
|
|
75
|
+
* a `px-[ calc(…) ]` reader of the style set's `style-control-pad`, and Tailwind
|
|
76
76
|
* emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
|
|
77
77
|
* the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
|
|
78
78
|
* class of the recipe, pass `className` to `Button` itself, which merges, or
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* **Why this writes `--tw-backdrop-blur` instead of `backdrop-filter`.** Spec
|
|
6
6
|
* §13.5, decided on measurements. Tailwind composes every backdrop utility into
|
|
7
7
|
* ONE declaration — `backdrop-filter: var(--tw-backdrop-blur,)
|
|
8
|
-
* var(--tw-backdrop-brightness,) …` — so a raw `[backdrop-filter:var(…)]` here
|
|
8
|
+
* var(--tw-backdrop-brightness,) …` — so a raw `[backdrop-filter: var(…)]` here
|
|
9
9
|
* is a second, competing declaration. Measured: a consumer passing
|
|
10
10
|
* `backdrop-brightness-50` through `className` then computes
|
|
11
11
|
* `brightness(0.5)` and **no blur at all**. The glass does not narrow, it
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
* adoption additive. The `outline` tone does carry one — `REST_SHADE_CLASS`,
|
|
28
28
|
* the resting shade (fidelity plan R3) — so it must not also take
|
|
29
29
|
* `GLOW_CLASSES`: one of the two would be dropped in silence. A halo there
|
|
30
|
-
* would compose both into one `shadow-[…]` list instead.
|
|
30
|
+
* would compose both into one `shadow-[ … ]` list instead.
|
|
31
31
|
*
|
|
32
32
|
* @internal Not part of the public API.
|
|
33
33
|
*/
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
//#region src/system/_storage.ts
|
|
2
|
+
/**
|
|
3
|
+
* The page's `localStorage`, or `null` where there is none this code may use.
|
|
4
|
+
*
|
|
5
|
+
* `typeof localStorage === "undefined"` is not a safe probe. In a document with
|
|
6
|
+
* an opaque origin — a frame sandboxed without `allow-same-origin`, which is
|
|
7
|
+
* what the studio's canvas is — the accessor on `window` throws a
|
|
8
|
+
* `SecurityError` instead of answering `undefined`, and a `typeof` written
|
|
9
|
+
* outside a `try` throws with it, before the `try` meant to absorb storage
|
|
10
|
+
* failures is ever entered. The probe is taken inside one here, so every reader
|
|
11
|
+
* and writer of a preference degrades to "nothing stored", the way a private
|
|
12
|
+
* window's full quota already did.
|
|
13
|
+
*
|
|
14
|
+
* @returns The storage, or `null` on a server, under an opaque origin, or
|
|
15
|
+
* anywhere else reading the accessor throws.
|
|
16
|
+
*/
|
|
17
|
+
function localStore() {
|
|
18
|
+
try {
|
|
19
|
+
return typeof localStorage === "undefined" ? null : localStorage;
|
|
20
|
+
} catch {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
//#endregion
|
|
25
|
+
export { localStore };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* `Accordion.Item` draws the rule with `border-t`, which writes
|
|
7
7
|
* `border-top-style: var(--tw-border-style)`, a slot Tailwind registers with
|
|
8
8
|
* `inherits: false` and `initial-value: solid`, so the section fills that slot
|
|
9
|
-
* rather than a raw `[border-top-style
|
|
9
|
+
* rather than a raw `[border-top-style: …]` — the footer's reason
|
|
10
10
|
* (`_style-footer-rule.ts`): a caller's own `border-dotted` still wins. The
|
|
11
11
|
* fallback is the slot's `solid`. stripe.com's accordion draws its rules 1px
|
|
12
12
|
* dashed in the quiet border ink (`:where(.hds-accordion) .hds-details`), so
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
* **The hover ground yields to a caller's own ground.** It is the one
|
|
28
28
|
* declaration here the link never had: `Link` sets no background in any state,
|
|
29
29
|
* so `<AppBar.Link className="bg-surface-2">` kept its ground under the pointer.
|
|
30
|
-
* A plain `hover:bg-[…]` is `(0,2,0)` and would paint over it; this is written
|
|
30
|
+
* A plain `hover:bg-[ … ]` is `(0,2,0)` and would paint over it; this is written
|
|
31
31
|
* `[@media(hover:hover)]:[:where(&:hover)]:`, which is `hover:` — the same
|
|
32
32
|
* media query, the same state — at zero specificity, so any class a caller
|
|
33
33
|
* passes for the ground still wins, hovered or not. The hover INK replaced
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
* `@property` with `inherits: false` and `initial-value: solid` — which is the
|
|
44
44
|
* solid rule the bar always drew. Filling that slot keeps the one declaration,
|
|
45
45
|
* for the reason `_paint-glass.ts` fills `--tw-backdrop-blur`: a raw
|
|
46
|
-
* `[border-bottom-style
|
|
46
|
+
* `[border-bottom-style: …]` would be a second, competing declaration, and
|
|
47
47
|
* Tailwind emits it after `border-dashed`, so it would beat a caller's own
|
|
48
48
|
* `border-dotted`. Through the slot a caller's style class still wins, because
|
|
49
49
|
* it writes `border-style` itself, after `border-b`. The fallback is the
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
*
|
|
16
16
|
* **Optional** (spec §3.0): declared on no `:root` and left at the shared
|
|
17
17
|
* `[data-style]` reset by every shipped set. `_style-page-title.ts` says why a
|
|
18
|
-
* weight reader is `font-[number
|
|
18
|
+
* weight reader is `font-[number: …]`.
|
|
19
19
|
*
|
|
20
20
|
* @internal Not part of the public API.
|
|
21
21
|
*/
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
* no set and under every set that declines a name the reader is a no-op:
|
|
16
16
|
*
|
|
17
17
|
* - `CONTROL_WEIGHT` is `font-medium`'s 500. It is spelt
|
|
18
|
-
* `font-[number
|
|
18
|
+
* `font-[number: …]`: a bare `font-[ … ]` is read as a family, and the
|
|
19
19
|
* `number` label makes it a weight to Tailwind (which emits exactly what
|
|
20
20
|
* `font-medium` emitted, `--tw-font-weight` included) and to `twMerge`, so a
|
|
21
21
|
* caller's `className="font-semibold"` still replaces it. Spelt as an
|
|
22
|
-
* arbitrary `[font-weight
|
|
22
|
+
* arbitrary `[font-weight: …]` property instead, it would survive the merge
|
|
23
23
|
* and win the cascade: Tailwind emits it after `font-semibold`.
|
|
24
24
|
* - `CONTROL_TRACKING`, `CONTROL_TRIM` and `CONTROL_CASE` fall back to
|
|
25
25
|
* `normal`, `normal` and `none`, the spec's fallbacks: the chassis set none
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* - size: `var(--cue-style-label-size, var(--cue-text-label))`, the label size's chain;
|
|
20
20
|
* - ink: `var(--cue-accent)`, what `text-accent` compiled to;
|
|
21
21
|
* - weight: `inherit` — the eyebrow declared none (see `_style-label-weight.ts`
|
|
22
|
-
* on why a literal `400` would not be a no-op, and on the `font-[number
|
|
22
|
+
* on why a literal `400` would not be a no-op, and on the `font-[number: …]`
|
|
23
23
|
* spelling);
|
|
24
24
|
* - glyph: `inline`, the slashes' own display. A flex item is blockified either
|
|
25
25
|
* way, so under no set it computes what it computed before; `none` removes it.
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
* **The line style fills Tailwind's own slot** (`style-footer-rule-style`,
|
|
17
17
|
* round 5 of plan V.2: `tender` dashes both rules, T120 and T121). Both of
|
|
18
18
|
* the footer's rules are written by width utilities — the band rule by
|
|
19
|
-
* `border-t-[length
|
|
19
|
+
* `border-t-[length: …]` above, the fine print's by `border-t` — and each
|
|
20
20
|
* writes `border-top-style: var(--tw-border-style)`, a slot Tailwind
|
|
21
21
|
* registers as `@property` with `inherits: false` and `initial-value: solid`,
|
|
22
22
|
* which is the solid rule the footer always drew. So `Footer` spends
|
|
23
23
|
* {@link FOOTER_RULE_STYLE} on both elements, as `_style-app-bar.ts` fills the
|
|
24
24
|
* same slot for the bar's rule: one declaration each, rather than a raw
|
|
25
|
-
* `[border-top-style
|
|
25
|
+
* `[border-top-style: …]` that Tailwind would emit after `border-dotted` and
|
|
26
26
|
* that would beat a caller's own style class. Through the slot, a caller's
|
|
27
27
|
* `className="border-dotted"` still wins on the landmark, because a style
|
|
28
28
|
* utility writes `border-style` itself and is emitted after the width
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
* every shipped set but a sans-voiced one restates `uppercase`, which
|
|
20
20
|
* `@cueplusplus/tokens` refuses to build otherwise for `console`.
|
|
21
21
|
*
|
|
22
|
-
* Written as a bare arbitrary property (`[text-transform
|
|
22
|
+
* Written as a bare arbitrary property (`[text-transform: …]`) rather than a
|
|
23
23
|
* named Tailwind utility because none of Tailwind's `uppercase` / `lowercase`
|
|
24
24
|
* / `capitalize` / `normal-case` utilities take a dynamic value — the same
|
|
25
|
-
* reason `_paint-*` readers reach for `[mask-image
|
|
25
|
+
* reason `_paint-*` readers reach for `[mask-image: …]` and `[background-*: …]`
|
|
26
26
|
* instead of a utility that does not exist for a `var()`-driven keyword.
|
|
27
27
|
*
|
|
28
28
|
* **Its own module**, for the reason `_style-control-face.ts` gives: one
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
* inherits from a heavier parent today, which a fallback may not do (the R
|
|
18
18
|
* lanes' rule: the fallback is the site's current value).
|
|
19
19
|
*
|
|
20
|
-
* **Written `font-[number
|
|
20
|
+
* **Written `font-[number: …]`, not as a bare `[font-weight: …]` property.** The
|
|
21
21
|
* `number:` hint is what makes Tailwind emit `font-weight` (and not a family)
|
|
22
22
|
* for a `var()`, and it is also what `tailwind-merge` reads as a font weight: a
|
|
23
23
|
* caller's `className="font-medium"` replaces this class, as it replaced
|
|
24
|
-
* `font-normal`. A bare `[font-weight
|
|
24
|
+
* `font-normal`. A bare `[font-weight: …]` would not merge, and Tailwind sorts
|
|
25
25
|
* it AFTER every named `font-*` utility (measured: a named weight declares
|
|
26
26
|
* `--tw-font-weight` too, and a rule with more declarations sorts first), so
|
|
27
27
|
* the caller's weight would silently lose — against every `className` prop's
|
|
@@ -35,7 +35,7 @@ const LINK_RULE = "decoration-[color:var(--cue-style-link-rule,var(--cue-border)
|
|
|
35
35
|
const LINK_OFFSET = "underline-offset-[var(--cue-style-link-offset,4px)]";
|
|
36
36
|
/**
|
|
37
37
|
* Every link's weight: its parent's, or the set's `style-link-weight`.
|
|
38
|
-
* `font-[number
|
|
38
|
+
* `font-[number: …]` rather than an arbitrary `[font-weight: …]`, so a caller's
|
|
39
39
|
* `font-*` weight still replaces it through `twMerge` — `_style-control.ts`'s
|
|
40
40
|
* `CONTROL_WEIGHT` says why.
|
|
41
41
|
*/
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
* weight were inherited, and computed `none`, `normal` and `400` at both
|
|
20
20
|
* readers under every shipped set — spec §3.8's three fallbacks.
|
|
21
21
|
*
|
|
22
|
-
* **Weight is written `font-[number
|
|
22
|
+
* **Weight is written `font-[number: …]`.** A bare `font-[ var(…) ]` is read as a
|
|
23
23
|
* family (plan §R1), and the `number` label makes it a weight to Tailwind —
|
|
24
24
|
* which emits exactly what `font-medium` emits, `--tw-font-weight` included —
|
|
25
25
|
* and to `tailwind-merge`, so a caller's `className="font-medium"` replaces it
|
|
26
|
-
* through `cn()`. Spelt as an arbitrary `[font-weight
|
|
26
|
+
* through `cn()`. Spelt as an arbitrary `[font-weight: …]` property it survived
|
|
27
27
|
* the merge beside the caller's class and won the cascade, because Tailwind
|
|
28
28
|
* emits it after `font-medium`: `<AppBar.Link className="font-medium">` drew
|
|
29
29
|
* 400. Case is an arbitrary property for the reason `_style-label-case.ts`
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
* the h1 itself — the value the old class computed there, under every set and in
|
|
28
28
|
* every density island.
|
|
29
29
|
*
|
|
30
|
-
* **Weight is `font-[number
|
|
30
|
+
* **Weight is `font-[number: …]`**, the typed form: a bare `font-[ var(…) ]` is
|
|
31
31
|
* read as a family by `tailwind-merge`, and the arbitrary property
|
|
32
|
-
* `[font-weight
|
|
32
|
+
* `[font-weight: …]` is in no `tailwind-merge` group at all, so a caller's
|
|
33
33
|
* `font-bold` would no longer replace it — and it sorts after `font-bold` in the
|
|
34
34
|
* built stylesheet, so it would win. `number:` keeps both Tailwind and
|
|
35
35
|
* `tailwind-merge` reading a weight.
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
* glaze;
|
|
36
36
|
* - the corners: `rounded-control`'s own value (below).
|
|
37
37
|
*
|
|
38
|
-
* **The edge and the rest shade are one `shadow-[…]` list**, and it is written
|
|
38
|
+
* **The edge and the rest shade are one `shadow-[ … ]` list**, and it is written
|
|
39
39
|
* out in full rather than built from `REST_SHADE`: Tailwind finds a class by
|
|
40
40
|
* scanning source text, so a class assembled at runtime is a class it never
|
|
41
41
|
* generates (`_focus-ring.ts` records the failure). `test/system/style-navigation.test.tsx`
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
* the others. A `data-[pressed]:` utility is `(0,2,0)` and would beat such a
|
|
52
52
|
* class on the pressed segment alone, so these are written
|
|
53
53
|
* `[:where(&[data-pressed])]:` — the same state at zero specificity — and a
|
|
54
|
-
* caller's class wins in every state again. The weight is `font-[number
|
|
54
|
+
* caller's class wins in every state again. The weight is `font-[number: …]`
|
|
55
55
|
* for `_style-nav-voice.ts`'s reason.
|
|
56
56
|
*
|
|
57
57
|
* **The segment's radius nests in the track's inset**:
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
* not the size, the tracking or the leading, so it is `_style-overlay-title.ts`
|
|
29
29
|
* and not an import of this: docgen would publish every name in this file as a
|
|
30
30
|
* token of every overlay. `_style-page-title.ts` says why the weight is
|
|
31
|
-
* `font-[number
|
|
31
|
+
* `font-[number: …]` and why the size comes before the leading.
|
|
32
32
|
*
|
|
33
33
|
* @internal Not part of the public API.
|
|
34
34
|
*/
|
|
@@ -5,6 +5,7 @@ import { published, usePublish, useRead } from "./published.js";
|
|
|
5
5
|
import { AmbientThemeContext, DeferRestateContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes, useFollowedAxes, useMountedWhen, useRestateReady } from "./density.js";
|
|
6
6
|
import { buildRegistry, isPaint, isStyleSet, vocabulary, warnOnce } from "./vocabulary.js";
|
|
7
7
|
import { OverridesContext, followerColorsCss, inlineOverrides, overridesCss, reportOverrides } from "./overrides.js";
|
|
8
|
+
import { localStore } from "./_storage.js";
|
|
8
9
|
import { DEFAULT_STORAGE_KEY } from "./prepaint.js";
|
|
9
10
|
import { ThemeRegistryContext } from "./theme-registry.js";
|
|
10
11
|
import * as React from "react";
|
|
@@ -99,9 +100,10 @@ function isOneOf(allowed, value) {
|
|
|
99
100
|
return typeof value === "string" && allowed.includes(value);
|
|
100
101
|
}
|
|
101
102
|
function readPreferences(storageKey) {
|
|
102
|
-
|
|
103
|
+
const store = localStore();
|
|
104
|
+
if (store === null) return {};
|
|
103
105
|
try {
|
|
104
|
-
const raw =
|
|
106
|
+
const raw = store.getItem(storageKey);
|
|
105
107
|
if (raw === null) return {};
|
|
106
108
|
const parsed = JSON.parse(raw);
|
|
107
109
|
if (parsed === null || typeof parsed !== "object") return {};
|
|
@@ -157,7 +159,8 @@ function acceptedPreferences(vocab, stored, fallback) {
|
|
|
157
159
|
};
|
|
158
160
|
}
|
|
159
161
|
function writePreferences(storageKey, preferences) {
|
|
160
|
-
|
|
162
|
+
const store = localStore();
|
|
163
|
+
if (store === null) return;
|
|
161
164
|
const { styleSet, paint, ...axes } = preferences;
|
|
162
165
|
const withStyle = styleSet === null ? axes : {
|
|
163
166
|
...axes,
|
|
@@ -168,7 +171,7 @@ function writePreferences(storageKey, preferences) {
|
|
|
168
171
|
paint
|
|
169
172
|
};
|
|
170
173
|
try {
|
|
171
|
-
|
|
174
|
+
store.setItem(storageKey, JSON.stringify(payload));
|
|
172
175
|
} catch {}
|
|
173
176
|
}
|
|
174
177
|
/**
|
|
@@ -9,6 +9,16 @@
|
|
|
9
9
|
"clientOnly": true,
|
|
10
10
|
"description": "A typed colour value — the whole colour as hex, or one channel as a number.\n\nWraps React Aria's `ColorField`, so parsing, arrow-key stepping and the\ncommit-on-blur behaviour are the library's; the input rides the same recessed\nchassis as every other text control.\n\nReact Aria only parses sRGB notations, so it edits **hex**. For a field that\nalso accepts `oklch()` — the notation this system's tokens are authored in —\nuse `ColorPicker`, which owns the conversion.\n\n`react-aria-components` is an **optional peer**: import this from\n`@cueplusplus/ui/color`.",
|
|
11
11
|
"props": [
|
|
12
|
+
{
|
|
13
|
+
"name": "aria-label",
|
|
14
|
+
"type": "string",
|
|
15
|
+
"required": false,
|
|
16
|
+
"defaultValue": null,
|
|
17
|
+
"description": "The field's accessible name. `ColorField` draws no visible label — React\nAria's label slot is left empty — so name it here, or point\n`aria-labelledby` at a label of your own. Without either the input has no\nname at all.",
|
|
18
|
+
"control": {
|
|
19
|
+
"kind": "string"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
12
22
|
{
|
|
13
23
|
"name": "size",
|
|
14
24
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
package/manifest/fixtures.json
CHANGED
|
@@ -32,6 +32,11 @@
|
|
|
32
32
|
"kind": "node",
|
|
33
33
|
"label": "A search glyph"
|
|
34
34
|
},
|
|
35
|
+
{
|
|
36
|
+
"id": "children.toggles",
|
|
37
|
+
"kind": "node",
|
|
38
|
+
"label": "Three toggles"
|
|
39
|
+
},
|
|
35
40
|
{
|
|
36
41
|
"id": "bento.tiles",
|
|
37
42
|
"kind": "node",
|
|
@@ -197,6 +202,16 @@
|
|
|
197
202
|
"readonly StepperStep[]"
|
|
198
203
|
]
|
|
199
204
|
},
|
|
205
|
+
{
|
|
206
|
+
"id": "layout.show-crumbs-long",
|
|
207
|
+
"kind": "array",
|
|
208
|
+
"label": "3 long breadcrumbs"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"id": "layout.patch-steps-long",
|
|
212
|
+
"kind": "array",
|
|
213
|
+
"label": "3 long steps"
|
|
214
|
+
},
|
|
200
215
|
{
|
|
201
216
|
"id": "instruments.patch-groups",
|
|
202
217
|
"kind": "array",
|
|
@@ -330,6 +345,21 @@
|
|
|
330
345
|
"readonly TraceSpan[]"
|
|
331
346
|
]
|
|
332
347
|
},
|
|
348
|
+
{
|
|
349
|
+
"id": "agent.permission-scopes",
|
|
350
|
+
"kind": "array",
|
|
351
|
+
"label": "2 grant scopes"
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
"id": "agent.permission-rules",
|
|
355
|
+
"kind": "array",
|
|
356
|
+
"label": "1 command rule"
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"id": "agent.permission-dirs",
|
|
360
|
+
"kind": "array",
|
|
361
|
+
"label": "1 directory"
|
|
362
|
+
},
|
|
333
363
|
{
|
|
334
364
|
"id": "thread.days",
|
|
335
365
|
"kind": "array",
|
package/manifest/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 2,
|
|
3
3
|
"library": "@cueplusplus/ui",
|
|
4
|
-
"version": "0.18.
|
|
4
|
+
"version": "0.18.2",
|
|
5
5
|
"generatedAt": "1970-01-01T00:00:00.000Z",
|
|
6
6
|
"themes": [
|
|
7
7
|
"cue",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
],
|
|
35
35
|
"tokens": {
|
|
36
36
|
"path": "./tokens.json",
|
|
37
|
-
"sha256": "
|
|
37
|
+
"sha256": "b4f33269f4d28a34d3ab0b29047aa6d00c096cc9816365ff83268e6b43029015"
|
|
38
38
|
},
|
|
39
39
|
"systemApis": [
|
|
40
40
|
{
|
|
@@ -747,7 +747,7 @@
|
|
|
747
747
|
"mdUrl": "/docs/components/color-field.md",
|
|
748
748
|
"jsonUrl": "/r/components/color-field.json",
|
|
749
749
|
"path": "./components/color-field.json",
|
|
750
|
-
"sha256": "
|
|
750
|
+
"sha256": "abafbd0de33c542fcd598e21e0a037cc0c4096d3e41e3f21c879c3e5963b38cb"
|
|
751
751
|
},
|
|
752
752
|
{
|
|
753
753
|
"name": "ColorPicker",
|
package/manifest/tokens.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cueplusplus/ui",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.2",
|
|
4
4
|
"description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
"culori": "^4.0.2",
|
|
147
147
|
"tailwind-merge": "^3.6.0",
|
|
148
148
|
"@cueplusplus/theme-base": "^1.1.0",
|
|
149
|
-
"@cueplusplus/tokens": "0.18.
|
|
149
|
+
"@cueplusplus/tokens": "0.18.2"
|
|
150
150
|
},
|
|
151
151
|
"peerDependencies": {
|
|
152
152
|
"@assistant-ui/react": "^0.15.16",
|
|
@@ -260,9 +260,9 @@
|
|
|
260
260
|
"tsdown": "0.22.14",
|
|
261
261
|
"typescript": "^5.7.0",
|
|
262
262
|
"vitest": "^4.1.10",
|
|
263
|
+
"@repo/docgen": "0.0.0",
|
|
263
264
|
"@cueplusplus/theme-tools": "1.1.0",
|
|
264
265
|
"@repo/eslint-config": "0.0.0",
|
|
265
|
-
"@repo/docgen": "0.0.0",
|
|
266
266
|
"@repo/typescript-config": "0.0.0"
|
|
267
267
|
},
|
|
268
268
|
"scripts": {
|