@unisim/sdk 0.142.3 → 0.142.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -0
- package/dist/chipStyles.d.ts.map +1 -1
- package/dist/chipStyles.js +18 -0
- package/dist/chipStyles.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -251,6 +251,11 @@ import { Chip, ChipToggle, ValueChip } from '@unisim/sdk'
|
|
|
251
251
|
- `--u-chip-accent` / `--u-chip-accent-text` (and their `-dark` twins) re-tint the arc
|
|
252
252
|
and the selected label for a tenant. Pass `brand_color_accessible`, never `brand_color`.
|
|
253
253
|
- `size="sm"` for tight spots: table cells, card corners.
|
|
254
|
+
- ⚠️ The chip CSS is unlayered and injected after the app's own CSS, so in a Tailwind v4
|
|
255
|
+
app it beats utilities on the properties it sets. `px-4`, `text-sm` or
|
|
256
|
+
`hidden sm:inline-flex` on a chip do nothing. Put layout and visibility classes on a
|
|
257
|
+
wrapper. Margins (since 0.142.2) and the `hidden` attribute (since 0.142.4) do work.
|
|
258
|
+
`chipStyles.ts` explains why a cascade layer isn't the fix.
|
|
254
259
|
- `npm run test:chips` measures every label's contrast on both grounds and checks the
|
|
255
260
|
sweep, the grounds and the geometry. A negative control proves the ring check can fail.
|
|
256
261
|
|
package/dist/chipStyles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chipStyles.d.ts","sourceRoot":"","sources":["../src/chipStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"chipStyles.d.ts","sourceRoot":"","sources":["../src/chipStyles.ts"],"names":[],"mappings":"AAyGA,sEAAsE;AACtE,eAAO,MAAM,aAAa,oBAAoB,CAAA;AAE9C;;;;GAIG;AACH,eAAO,MAAM,QAAQ,QAyJpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,GAAE,QAAQ,GAAG,SAAkE,GAAG,IAAI,CAM1H"}
|
package/dist/chipStyles.js
CHANGED
|
@@ -30,6 +30,17 @@
|
|
|
30
30
|
// that, every app with a dark mode showed light chips on its dark pages, and
|
|
31
31
|
// each one would have had to mirror its theme into `data-u-ground` by hand.
|
|
32
32
|
//
|
|
33
|
+
// ── Cascade ────────────────────────────────────────────────────────────────
|
|
34
|
+
// This sheet is UNLAYERED on purpose, and injected after the app's CSS. In a
|
|
35
|
+
// Tailwind v4 app that means it outranks every utility on the properties it
|
|
36
|
+
// sets — display, padding, font, colours — so `hidden sm:inline-flex` or
|
|
37
|
+
// `px-4` on a chip does nothing. Put layout and visibility classes on a
|
|
38
|
+
// wrapper; the `hidden` attribute works (0.142.4), and margins are the app's
|
|
39
|
+
// (0.142.2). A cascade layer is NOT the fix: Tailwind v3 and plain-CSS apps
|
|
40
|
+
// emit unlayered resets (`button { padding: 0; background: transparent }`),
|
|
41
|
+
// and unlayered beats layered whatever the specificity, so a layered chip
|
|
42
|
+
// would lose its padding and fill in half the suite.
|
|
43
|
+
//
|
|
33
44
|
// ── Knobs ──────────────────────────────────────────────────────────────────
|
|
34
45
|
// --u-chip-accent / --u-chip-accent-dark the arc + selected tint
|
|
35
46
|
// --u-chip-accent-text / --u-chip-accent-text-dark a selected chip's label
|
|
@@ -165,6 +176,10 @@ export const CHIP_CSS = `
|
|
|
165
176
|
|
|
166
177
|
button.u-chip, .u-chip--pick { cursor: pointer; appearance: none; -webkit-appearance: none; }
|
|
167
178
|
a.u-chip:hover::before, .u-chip--pick:hover::before { --u-chip-sweep: 82%; }
|
|
179
|
+
/* A plain clickable chip (a suggestion to add, say) sweeps too (0.142.5).
|
|
180
|
+
:not(.u-chip--pick), or this would outrank a SELECTED toggle's 100% and
|
|
181
|
+
shrink its arc under the pointer. */
|
|
182
|
+
button.u-chip:not(.u-chip--pick):hover::before { --u-chip-sweep: 82%; }
|
|
168
183
|
.u-chip--pick[aria-pressed="true"], .u-chip--pick[aria-checked="true"] {
|
|
169
184
|
background: color-mix(in srgb, var(--_accent) 8%, var(--_base));
|
|
170
185
|
color: var(--_accent-text);
|
|
@@ -237,6 +252,9 @@ a.u-chip:hover::before, .u-chip--pick:hover::before { --u-chip-sweep: 82%; }
|
|
|
237
252
|
.u-vchip--sm .u-vchip__value { padding: 2px 8px 2px 7px; }
|
|
238
253
|
.u-vchip--sm .u-vchip__key:empty { width: 6px; padding: 0; }
|
|
239
254
|
|
|
255
|
+
/* The display rules above would otherwise beat the UA's [hidden] rule (0.142.4). */
|
|
256
|
+
.u-chip[hidden], .u-vchip[hidden] { display: none; }
|
|
257
|
+
|
|
240
258
|
@media (prefers-reduced-motion: reduce) {
|
|
241
259
|
.u-chip::before { transition: none; }
|
|
242
260
|
}
|
package/dist/chipStyles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chipStyles.js","sourceRoot":"","sources":["../src/chipStyles.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,EAAE;AACF,oEAAoE;AACpE,EAAE;AACF,6EAA6E;AAC7E,yEAAyE;AACzE,4EAA4E;AAC5E,2EAA2E;AAC3E,2EAA2E;AAC3E,8EAA8E;AAC9E,8EAA8E;AAC9E,gFAAgF;AAChF,mDAAmD;AACnD,EAAE;AACF,yEAAyE;AACzE,8EAA8E;AAC9E,8EAA8E;AAC9E,EAAE;AACF,2EAA2E;AAC3E,sEAAsE;AACtE,wDAAwD;AACxD,EAAE;AACF,8EAA8E;AAC9E,uEAAuE;AACvE,4EAA4E;AAC5E,0EAA0E;AAC1E,EAAE;AACF,4EAA4E;AAC5E,gFAAgF;AAChF,6EAA6E;AAC7E,4EAA4E;AAC5E,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,0EAA0E;AAC1E,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,8EAA8E;AAC9E,2EAA2E;AAC3E,2EAA2E;AAC3E,6EAA6E;AAC7E,uBAAuB;AACvB,4EAA4E;AAC5E,qDAAqD;AAErD,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,6BAA6B;IACnC,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,+BAA+B;IACvC,aAAa,EAAE,oCAAoC;IACnD,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,GAAG,EAAE,SAAS;IACd,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;CACtB,CAAA;AAED,MAAM,IAAI,GAAuC;IAC/C,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,2BAA2B;IACjC,IAAI,EAAE,sCAAsC;IAC5C,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,oCAAoC;IAC5C,aAAa,EAAE,yCAAyC;IACxD,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,GAAG,EAAE,SAAS;IACd,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;CACtB,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,MAA8B,EAAE,EAAE,CAC9C,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEpE,sEAAsE;AACtE,MAAM,CAAC,MAAM,aAAa,GAAG,iBAAiB,CAAA;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;;;sBAGF,IAAI,CAAC,KAAK,CAAC;;;8DAG6B,IAAI,CAAC,IAAI,CAAC;oEACJ,IAAI,CAAC,KAAK,CAAC;kEACb,IAAI,CAAC,IAAI,CAAC
|
|
1
|
+
{"version":3,"file":"chipStyles.js","sourceRoot":"","sources":["../src/chipStyles.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED