@unisim/sdk 0.142.2 → 0.142.3
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/dist/Chip.d.ts +6 -2
- package/dist/Chip.d.ts.map +1 -1
- package/dist/Chip.js +11 -2
- package/dist/Chip.js.map +1 -1
- package/dist/chipStyles.js +3 -3
- package/package.json +1 -1
package/dist/Chip.d.ts
CHANGED
|
@@ -13,14 +13,18 @@ export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
13
13
|
}
|
|
14
14
|
/** An Orbit chip: a feature point, a tag, a label. Not interactive — see {@link ChipToggle}. */
|
|
15
15
|
export declare function Chip({ icon, tone, ground, size, className, children, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export interface ChipToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed'> {
|
|
16
|
+
export interface ChipToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed' | 'aria-checked'> {
|
|
17
17
|
selected: boolean;
|
|
18
18
|
/** Shown while unselected; a tick replaces it once selected, so the width holds. */
|
|
19
19
|
icon?: ReactNode;
|
|
20
20
|
ground?: ChipGround;
|
|
21
21
|
size?: ChipSize;
|
|
22
22
|
}
|
|
23
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* An Orbit filter chip. Selecting it sweeps the arc round and tints the fill.
|
|
25
|
+
* It reports `aria-pressed` — or `aria-checked` when given a checkable `role`
|
|
26
|
+
* (radio, checkbox, switch), so it can sit in a radio group.
|
|
27
|
+
*/
|
|
24
28
|
export declare function ChipToggle({ selected, icon, ground, size, className, children, type, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
25
29
|
export interface ValueChipProps extends HTMLAttributes<HTMLSpanElement> {
|
|
26
30
|
/**
|
package/dist/Chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAe1G,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAA;AACzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAA;AAWlC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IAChE,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gFAAgF;IAChF,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,+FAA+F;IAC/F,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED,gGAAgG;AAChG,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAahG;
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAe1G,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAA;AACzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAA;AAWlC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IAChE,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gFAAgF;IAChF,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,+FAA+F;IAC/F,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED,gGAAgG;AAChG,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAahG;AAOD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,cAAc,GAAG,cAAc,CAAC;IACrH,QAAQ,EAAE,OAAO,CAAA;IACjB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,IAAW,EACX,SAAS,EACT,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,eAAe,2CAiBjB;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,eAAe,CAAC;IACrE;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED,yEAAyE;AACzE,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAiB3G"}
|
package/dist/Chip.js
CHANGED
|
@@ -13,11 +13,20 @@ export function Chip({ icon, tone, ground, size = 'md', className, children, ...
|
|
|
13
13
|
useChipStyles();
|
|
14
14
|
return (_jsxs("span", { ...rest, className: cx('u-chip', size === 'sm' && 'u-chip--sm', className), "data-tone": tone, "data-u-ground": ground, children: [icon != null && _jsx("span", { className: "u-chip__icon", "aria-hidden": "true", children: icon }), children] }));
|
|
15
15
|
}
|
|
16
|
-
|
|
16
|
+
// Roles whose state is "checked", not "pressed". A toggle inside a radio group
|
|
17
|
+
// (QR's type picker) carries role="radio"; aria-pressed on top of it is an
|
|
18
|
+
// attribute that role doesn't allow, and axe flags it (0.142.3).
|
|
19
|
+
const CHECKABLE_ROLES = new Set(['radio', 'checkbox', 'switch', 'menuitemradio', 'menuitemcheckbox']);
|
|
20
|
+
/**
|
|
21
|
+
* An Orbit filter chip. Selecting it sweeps the arc round and tints the fill.
|
|
22
|
+
* It reports `aria-pressed` — or `aria-checked` when given a checkable `role`
|
|
23
|
+
* (radio, checkbox, switch), so it can sit in a radio group.
|
|
24
|
+
*/
|
|
17
25
|
export function ChipToggle({ selected, icon, ground, size = 'md', className, children, type = 'button', ...rest }) {
|
|
18
26
|
useChipStyles();
|
|
19
27
|
const glyph = selected ? _jsx(Tick, {}) : icon;
|
|
20
|
-
|
|
28
|
+
const checkable = rest.role != null && CHECKABLE_ROLES.has(rest.role);
|
|
29
|
+
return (_jsxs("button", { ...rest, type: type, "aria-pressed": checkable ? undefined : selected, "aria-checked": checkable ? selected : undefined, className: cx('u-chip', 'u-chip--pick', size === 'sm' && 'u-chip--sm', className), "data-u-ground": ground, children: [glyph != null && _jsx("span", { className: "u-chip__icon", "aria-hidden": "true", children: glyph }), children] }));
|
|
21
30
|
}
|
|
22
31
|
/** A Value chip: a solid key and a value. Read aloud as "key: value". */
|
|
23
32
|
export function ValueChip({ label, tone, ground, size = 'md', className, children, ...rest }) {
|
package/dist/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAkE,MAAM,OAAO,CAAA;AAC1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAkBnD,4DAA4D;AAC5D,SAAS,aAAa;IACpB,kBAAkB,CAAC,GAAG,EAAE;QACtB,iBAAiB,EAAE,CAAA;IACrB,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC;AAED,MAAM,EAAE,GAAG,CAAC,GAAG,KAAqC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAYxF,gGAAgG;AAChG,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAa;IAC/F,aAAa,EAAE,CAAA;IACf,OAAO,CACL,mBACM,IAAI,EACR,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,IAAI,YAAY,EAAE,SAAS,CAAC,eACtD,IAAI,mBACA,MAAM,aAEpB,IAAI,IAAI,IAAI,IAAI,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,YAAE,IAAI,GAAQ,EAC/E,QAAQ,IACJ,CACR,CAAA;AACH,CAAC;
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"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"}
|
package/dist/chipStyles.js
CHANGED
|
@@ -165,12 +165,12 @@ export const CHIP_CSS = `
|
|
|
165
165
|
|
|
166
166
|
button.u-chip, .u-chip--pick { cursor: pointer; appearance: none; -webkit-appearance: none; }
|
|
167
167
|
a.u-chip:hover::before, .u-chip--pick:hover::before { --u-chip-sweep: 82%; }
|
|
168
|
-
.u-chip--pick[aria-pressed="true"] {
|
|
168
|
+
.u-chip--pick[aria-pressed="true"], .u-chip--pick[aria-checked="true"] {
|
|
169
169
|
background: color-mix(in srgb, var(--_accent) 8%, var(--_base));
|
|
170
170
|
color: var(--_accent-text);
|
|
171
171
|
}
|
|
172
|
-
.u-chip--pick[aria-pressed="true"]::before { --u-chip-sweep: 100%; }
|
|
173
|
-
.u-chip--pick[aria-pressed="true"] .u-chip__icon { color: var(--_accent-text); }
|
|
172
|
+
.u-chip--pick[aria-pressed="true"]::before, .u-chip--pick[aria-checked="true"]::before { --u-chip-sweep: 100%; }
|
|
173
|
+
.u-chip--pick[aria-pressed="true"] .u-chip__icon, .u-chip--pick[aria-checked="true"] .u-chip__icon { color: var(--_accent-text); }
|
|
174
174
|
.u-chip--pick:disabled { cursor: default; opacity: 0.5; }
|
|
175
175
|
.u-chip:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
|
|
176
176
|
|
package/package.json
CHANGED