@astryxdesign/core 0.6.2-canary.8112fcc → 0.6.2-canary.82eeea2
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/Chat/ChatComposerDrawer.d.ts +12 -4
- package/dist/Chat/ChatComposerDrawer.d.ts.map +1 -1
- package/dist/Chat/ChatComposerDrawer.js +19 -14
- package/dist/Field/InputClearButton.d.ts +4 -2
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +4 -2
- package/dist/Selector/Selector.d.ts +9 -7
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +6 -4
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +14 -4
- package/dist/ToggleButton/ToggleButton.d.ts +7 -5
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +8 -26
- package/dist/astryx.css +1 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +10 -0
- package/locales/af-ZA.json +530 -1
- package/locales/ar-SA.json +490 -1
- package/locales/ca-ES.json +514 -1
- package/locales/cs-CZ.json +498 -1
- package/locales/da-DK.json +522 -1
- package/locales/de-DE.json +522 -1
- package/locales/el-GR.json +498 -1
- package/locales/es-ES.json +510 -1
- package/locales/fi-FI.json +498 -1
- package/locales/fr-FR.json +534 -1
- package/locales/he-IL.json +498 -1
- package/locales/hu-HU.json +498 -1
- package/locales/it-IT.json +510 -1
- package/locales/ja-JP.json +490 -1
- package/locales/ko-KR.json +498 -1
- package/locales/nl-NL.json +534 -1
- package/locales/no-NO.json +510 -1
- package/locales/pl-PL.json +506 -1
- package/locales/pt-BR.json +506 -1
- package/locales/pt-PT.json +506 -1
- package/locales/ro-RO.json +506 -1
- package/locales/ru-RU.json +498 -1
- package/locales/sr-SP.json +498 -1
- package/locales/sv-SE.json +502 -1
- package/locales/tr-TR.json +498 -1
- package/locales/uk-UA.json +498 -1
- package/locales/vi-VN.json +502 -1
- package/locales/zh-CN.json +490 -1
- package/locales/zh-TW.json +490 -1
- package/package.json +3 -3
- package/src/Chat/ChatComposerDrawer.doc.mjs +12 -5
- package/src/Chat/ChatComposerDrawer.spec.md +176 -72
- package/src/Chat/ChatComposerDrawer.test.tsx +46 -0
- package/src/Chat/ChatComposerDrawer.tsx +25 -7
- package/src/Dialog/modules/DialogHeader.spec.md +75 -38
- package/src/Field/InputClearButton.test.tsx +17 -3
- package/src/Field/InputClearButton.tsx +5 -2
- package/src/Selector/Selector.doc.mjs +2 -2
- package/src/Selector/Selector.spec.md +49 -50
- package/src/Selector/Selector.test.tsx +61 -55
- package/src/Selector/Selector.tsx +17 -13
- package/src/Slider/Slider.doc.mjs +6 -3
- package/src/Slider/Slider.test.tsx +94 -1
- package/src/Slider/Slider.tsx +15 -2
- package/src/ToggleButton/ToggleButton.doc.mjs +3 -3
- package/src/ToggleButton/ToggleButton.test.tsx +166 -4
- package/src/ToggleButton/ToggleButton.tsx +17 -31
- package/src/ToggleButton/ToggleButtonGroup.doc.mjs +3 -3
- package/src/theme/generateThemeRules.test.ts +30 -0
- package/src/theme/generateThemeRules.ts +10 -0
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* @input Uses React, StyleX, theme tokens
|
|
4
4
|
* @output Exports ChatComposerDrawer component
|
|
5
5
|
* @position Collapsible drawer panel for ChatComposer.
|
|
6
|
-
* Supports expanded (full content) and collapsed (
|
|
7
|
-
* with fade animation and grid-template-rows height transition.
|
|
6
|
+
* Supports expanded (full content) and collapsed (default or caller-composed
|
|
7
|
+
* summary) states with fade animation and grid-template-rows height transition.
|
|
8
8
|
* The collapse toggle exposes aria-expanded + aria-controls linking it to
|
|
9
9
|
* the content region (disclosure pattern).
|
|
10
10
|
*
|
|
@@ -31,10 +31,18 @@ export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
|
|
|
31
31
|
*/
|
|
32
32
|
count?: number;
|
|
33
33
|
/**
|
|
34
|
-
* Label shown next to the count in collapsed
|
|
34
|
+
* Label shown next to the count in the default collapsed summary and used to
|
|
35
|
+
* name the expand/collapse action.
|
|
35
36
|
* @default 'Items'
|
|
36
37
|
*/
|
|
37
38
|
label?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Visual content for the canonical Collapsed summary anatomy part. Replaces
|
|
41
|
+
* the complete default Badge and label when count enables collapse. The
|
|
42
|
+
* component keeps this content presentation-only and owns disclosure
|
|
43
|
+
* semantics and accessible naming.
|
|
44
|
+
*/
|
|
45
|
+
collapsedSummary?: ReactNode;
|
|
38
46
|
/**
|
|
39
47
|
* Whether the drawer is collapsed.
|
|
40
48
|
* Uncontrolled by default (internal toggle).
|
|
@@ -78,7 +86,7 @@ export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
|
|
|
78
86
|
* </ChatComposerDrawer>
|
|
79
87
|
* ```
|
|
80
88
|
*/
|
|
81
|
-
export declare function ChatComposerDrawer({ ref, children, count, label: labelFromProps, isCollapsed: controlledCollapsed, defaultIsCollapsed, onCollapsedChange, xstyle, className, style, 'data-testid': testId, ...htmlProps }: ChatComposerDrawerProps): React.ReactElement;
|
|
89
|
+
export declare function ChatComposerDrawer({ ref, children, count, label: labelFromProps, collapsedSummary, isCollapsed: controlledCollapsed, defaultIsCollapsed, onCollapsedChange, xstyle, className, style, 'data-testid': testId, ...htmlProps }: ChatComposerDrawerProps): React.ReactElement;
|
|
82
90
|
export declare namespace ChatComposerDrawer {
|
|
83
91
|
var displayName: string;
|
|
84
92
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposerDrawer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerDrawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAYnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,uBAAwB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf
|
|
1
|
+
{"version":3,"file":"ChatComposerDrawer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerDrawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAYnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,uBAAwB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnD;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoID;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,cAAc,EACrB,gBAAgB,EAChB,WAAW,EAAE,mBAAmB,EAChC,kBAA0B,EAC1B,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAyG9C;yBAvHe,kBAAkB"}
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
* @input Uses React, StyleX, theme tokens
|
|
8
8
|
* @output Exports ChatComposerDrawer component
|
|
9
9
|
* @position Collapsible drawer panel for ChatComposer.
|
|
10
|
-
* Supports expanded (full content) and collapsed (
|
|
11
|
-
* with fade animation and grid-template-rows height transition.
|
|
10
|
+
* Supports expanded (full content) and collapsed (default or caller-composed
|
|
11
|
+
* summary) states with fade animation and grid-template-rows height transition.
|
|
12
12
|
* The collapse toggle exposes aria-expanded + aria-controls linking it to
|
|
13
13
|
* the content region (disclosure pattern).
|
|
14
14
|
*
|
|
@@ -29,7 +29,7 @@ import { mergeProps } from "../utils/index.js";
|
|
|
29
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
30
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
31
31
|
import { useTranslator } from "../i18n/index.js";
|
|
32
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
const styles = {
|
|
34
34
|
root: {
|
|
35
35
|
kVAEAm: "x1n2onr6",
|
|
@@ -80,6 +80,7 @@ export function ChatComposerDrawer({
|
|
|
80
80
|
children,
|
|
81
81
|
count,
|
|
82
82
|
label: labelFromProps,
|
|
83
|
+
collapsedSummary,
|
|
83
84
|
isCollapsed: controlledCollapsed,
|
|
84
85
|
defaultIsCollapsed = false,
|
|
85
86
|
onCollapsedChange,
|
|
@@ -136,24 +137,28 @@ export function ChatComposerDrawer({
|
|
|
136
137
|
toggle();
|
|
137
138
|
}
|
|
138
139
|
},
|
|
139
|
-
children: [/*#__PURE__*/
|
|
140
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
141
|
+
"aria-hidden": "true",
|
|
142
|
+
inert: true,
|
|
140
143
|
...{
|
|
141
144
|
0: {
|
|
142
|
-
className: "x1ms6mhf xgkxs2y x1lqcxt8 x3nfvp2 x6s0dn4 x1grt7ep x1txdalj xjspbzw x1hc1fzr x19991ni xuedmi6 xlr8y92"
|
|
145
|
+
className: "x1ms6mhf xgkxs2y x1lqcxt8 x3nfvp2 x6s0dn4 x47corl x1grt7ep x1txdalj xjspbzw x1hc1fzr x19991ni xuedmi6 xlr8y92"
|
|
143
146
|
},
|
|
144
147
|
1: {
|
|
145
148
|
className: "x1ms6mhf xgkxs2y x1lqcxt8 x3nfvp2 x6s0dn4 x1grt7ep x1txdalj xjspbzw x19991ni xuedmi6 xlr8y92 xg01cxk x47corl"
|
|
146
149
|
}
|
|
147
150
|
}[!!!isCollapsed << 0],
|
|
148
|
-
children:
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
151
|
+
children: collapsedSummary === undefined ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
152
|
+
children: [/*#__PURE__*/_jsx(Badge, {
|
|
153
|
+
variant: "neutral",
|
|
154
|
+
label: count
|
|
155
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
156
|
+
...{
|
|
157
|
+
className: "xv1l7n4 x1t9gxa6 xjm74w1 x7acx1w xt3l3uh xuedmi6 xlr8y92"
|
|
158
|
+
},
|
|
159
|
+
children: label
|
|
160
|
+
})]
|
|
161
|
+
}) : collapsedSummary
|
|
157
162
|
}), /*#__PURE__*/_jsx("div", {
|
|
158
163
|
...{
|
|
159
164
|
0: {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file InputClearButton.tsx
|
|
3
|
-
* @input Uses React, Button, Icon
|
|
4
|
-
* @output Exports the public InputClearButton and an internal popup-aware variant
|
|
3
|
+
* @input Uses React, Button, and Icon
|
|
4
|
+
* @output Exports the public InputClearButton and an internal popup-aware variant,
|
|
5
|
+
* both with a contextual tooltip matching their required label.
|
|
5
6
|
* @position Shared primitive. Every input that renders a clear affordance —
|
|
6
7
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
7
8
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
import type { ReactNode } from 'react';
|
|
13
14
|
import * as stylex from '@stylexjs/stylex';
|
|
14
15
|
export interface InputClearButtonProps {
|
|
16
|
+
/** Contextual accessible name for the button, such as "Clear Search". */
|
|
15
17
|
label: string;
|
|
16
18
|
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
17
19
|
xstyle?: stylex.StyleXStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAiDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAExE;yBAFe,gBAAgB;;;AAIhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAEX"}
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file InputClearButton.tsx
|
|
7
|
-
* @input Uses React, Button, Icon
|
|
8
|
-
* @output Exports the public InputClearButton and an internal popup-aware variant
|
|
7
|
+
* @input Uses React, Button, and Icon
|
|
8
|
+
* @output Exports the public InputClearButton and an internal popup-aware variant,
|
|
9
|
+
* both with a contextual tooltip matching their required label.
|
|
9
10
|
* @position Shared primitive. Every input that renders a clear affordance —
|
|
10
11
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
11
12
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
@@ -49,6 +50,7 @@ function renderInputClearButton({
|
|
|
49
50
|
variant: "ghost",
|
|
50
51
|
size: "sm",
|
|
51
52
|
label: label,
|
|
53
|
+
tooltip: label,
|
|
52
54
|
className: buttonTargetClassName,
|
|
53
55
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
54
56
|
icon: "close",
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Selector.tsx
|
|
3
|
-
* @input Uses React, StyleX,
|
|
4
|
-
* and
|
|
5
|
-
* @output Exports Selector
|
|
3
|
+
* @input Uses React, StyleX, adaptive selection surfaces, theme-resolved
|
|
4
|
+
* indicators, Field, and InputGroup context
|
|
5
|
+
* @output Exports Selector with content-derived option-mark layout
|
|
6
6
|
* @position Core implementation; consumed by index.ts
|
|
7
7
|
*
|
|
8
8
|
* SYNC: When modified, update:
|
|
9
|
+
* - /packages/core/src/Selector/Selector.spec.md
|
|
9
10
|
* - /packages/core/src/Selector/Selector.doc.mjs
|
|
10
11
|
* - /packages/core/src/Selector/Selector.test.tsx
|
|
11
12
|
* - /packages/core/src/Selector/index.ts
|
|
13
|
+
* - /apps/storybook/stories/Selector.stories.tsx
|
|
12
14
|
* - /apps/storybook/stories/InputGroup.stories.tsx
|
|
13
15
|
* - /packages/cli/assets/templates/blocks/components/Selector/ (showcase blocks)
|
|
14
16
|
*/
|
|
@@ -183,10 +185,10 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
|
|
|
183
185
|
*/
|
|
184
186
|
renderValue?: (option: SelectorOptionData) => ReactNode;
|
|
185
187
|
/**
|
|
186
|
-
* Which edge of the option row carries
|
|
187
|
-
* mark
|
|
188
|
-
*
|
|
189
|
-
* CommandPalette.
|
|
188
|
+
* Which logical edge of the option row carries a rendered selection mark. An
|
|
189
|
+
* empty mark consumes no space, so selected and unselected labels may shift or
|
|
190
|
+
* have different available width. `end` is the house convention shared with
|
|
191
|
+
* Typeahead and CommandPalette.
|
|
190
192
|
*
|
|
191
193
|
* @default 'end'
|
|
192
194
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,15 +4,17 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Selector.tsx
|
|
7
|
-
* @input Uses React, StyleX,
|
|
8
|
-
* and
|
|
9
|
-
* @output Exports Selector
|
|
7
|
+
* @input Uses React, StyleX, adaptive selection surfaces, theme-resolved
|
|
8
|
+
* indicators, Field, and InputGroup context
|
|
9
|
+
* @output Exports Selector with content-derived option-mark layout
|
|
10
10
|
* @position Core implementation; consumed by index.ts
|
|
11
11
|
*
|
|
12
12
|
* SYNC: When modified, update:
|
|
13
|
+
* - /packages/core/src/Selector/Selector.spec.md
|
|
13
14
|
* - /packages/core/src/Selector/Selector.doc.mjs
|
|
14
15
|
* - /packages/core/src/Selector/Selector.test.tsx
|
|
15
16
|
* - /packages/core/src/Selector/index.ts
|
|
17
|
+
* - /apps/storybook/stories/Selector.stories.tsx
|
|
16
18
|
* - /apps/storybook/stories/InputGroup.stories.tsx
|
|
17
19
|
* - /packages/cli/assets/templates/blocks/components/Selector/ (showcase blocks)
|
|
18
20
|
*/
|
|
@@ -772,7 +774,7 @@ export function Selector(props) {
|
|
|
772
774
|
*/
|
|
773
775
|
const mark = /*#__PURE__*/_jsx("span", {
|
|
774
776
|
...{
|
|
775
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo"
|
|
777
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo xjl7jj"
|
|
776
778
|
},
|
|
777
779
|
children: /*#__PURE__*/_jsx(SelectionMark, {
|
|
778
780
|
state: isSelected ? 'checked' : 'unchecked',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BA4rBlD;yBA5rBe,MAAM"}
|
package/dist/Slider/Slider.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Slider.tsx
|
|
7
7
|
* @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip, VisuallyHidden
|
|
8
|
-
* @output Exports Slider and its props; modifier-only key presses do not restore the thumb focus ring
|
|
8
|
+
* @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
@@ -710,18 +710,28 @@ export function Slider({
|
|
|
710
710
|
} : {
|
|
711
711
|
bottom: insetPosition(percent)
|
|
712
712
|
};
|
|
713
|
+
// Marks at or inside the filled region take the fill color:
|
|
714
|
+
// at or behind the thumb in single mode, between the thumbs
|
|
715
|
+
// in range mode.
|
|
716
|
+
const isFilled = isRange ? mark.value >= values[0] && mark.value <= values[1] : mark.value <= values[0];
|
|
713
717
|
return /*#__PURE__*/_jsxs("div", {
|
|
714
718
|
children: [/*#__PURE__*/_jsx("div", {
|
|
715
719
|
"data-testid": "slider-mark",
|
|
716
720
|
"data-mark-value": mark.value,
|
|
717
721
|
...mergeProps({
|
|
718
722
|
0: {
|
|
719
|
-
className: "x10l6tqk
|
|
723
|
+
className: "x10l6tqk xdsb6cv xjspbzw x36qwtl x1xc55vz x1m9mm8y"
|
|
724
|
+
},
|
|
725
|
+
2: {
|
|
726
|
+
className: "x10l6tqk xdsb6cv xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3"
|
|
720
727
|
},
|
|
721
728
|
1: {
|
|
722
|
-
className: "x10l6tqk
|
|
729
|
+
className: "x10l6tqk xjspbzw x36qwtl x1xc55vz x1m9mm8y x1ewilqj"
|
|
730
|
+
},
|
|
731
|
+
3: {
|
|
732
|
+
className: "x10l6tqk xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3 x1ewilqj"
|
|
723
733
|
}
|
|
724
|
-
}[!!isHorizontal << 0], {
|
|
734
|
+
}[!!isHorizontal << 1 | !!isFilled << 0], {
|
|
725
735
|
style: markPos
|
|
726
736
|
})
|
|
727
737
|
}), mark.label && /*#__PURE__*/_jsx("span", {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* @position Thin wrapper over Button; adds controlled toggle pattern
|
|
6
6
|
*
|
|
7
7
|
* ToggleButton wraps Button with `isPressed` and adds:
|
|
8
|
-
* - `onPressedChange`
|
|
8
|
+
* - `onPressedChange` from internal `onClick`; `pressedChangeAction` via Button
|
|
9
9
|
* - `pressedIcon` for outline-to-filled icon swap
|
|
10
10
|
* - Font weight shift on press with width reservation to prevent layout shift
|
|
11
11
|
* - Group integration via ToggleButtonGroupContext
|
|
@@ -42,10 +42,12 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
42
42
|
*/
|
|
43
43
|
onPressedChange?: (isPressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
44
44
|
/**
|
|
45
|
-
* Action handler for API- or navigation-backed toggles, run
|
|
46
|
-
* transition
|
|
47
|
-
*
|
|
48
|
-
*
|
|
45
|
+
* Action handler for API- or navigation-backed toggles, run through Button's
|
|
46
|
+
* clickAction transition after onPressedChange unless that callback prevents
|
|
47
|
+
* default. It also runs without a callback. Omit it for callback-only toggles
|
|
48
|
+
* that need no Action transition. The button shows a loading spinner while
|
|
49
|
+
* the action is pending, including synchronous actions that suspend.
|
|
50
|
+
* Ignored when a value identifies this button as a ToggleButtonGroup member.
|
|
49
51
|
*
|
|
50
52
|
* @example
|
|
51
53
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,CAAC;IAEV
|
|
1
|
+
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,CAAC;IAEV;;;;;;;;;;;;;;;;;;;OAmBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,SAAkB,EAClB,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAiG/B;yBArHe,YAAY"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* @position Thin wrapper over Button; adds controlled toggle pattern
|
|
10
10
|
*
|
|
11
11
|
* ToggleButton wraps Button with `isPressed` and adds:
|
|
12
|
-
* - `onPressedChange`
|
|
12
|
+
* - `onPressedChange` from internal `onClick`; `pressedChangeAction` via Button
|
|
13
13
|
* - `pressedIcon` for outline-to-filled icon swap
|
|
14
14
|
* - Font weight shift on press with width reservation to prevent layout shift
|
|
15
15
|
* - Group integration via ToggleButtonGroupContext
|
|
@@ -106,31 +106,17 @@ export function ToggleButton({
|
|
|
106
106
|
// — that is the half `??` got right — but it cannot re-enable a member
|
|
107
107
|
// (family:buttons FR3).
|
|
108
108
|
const isDisabled = (group?.isDisabled ?? false) || isDisabledProp;
|
|
109
|
-
|
|
110
|
-
// Track the pressed state optimistically so the button reflects the intended
|
|
111
|
-
// state immediately while an async action is pending. The optimistic update
|
|
112
|
-
// is applied inside Button's clickAction transition (below), satisfying
|
|
113
|
-
// React's "useOptimistic must run in a transition" rule.
|
|
114
109
|
const [optimisticPressed, setOptimisticPressed] = useOptimistic(committedPressed);
|
|
115
110
|
const isPressed = optimisticPressed;
|
|
116
|
-
|
|
117
|
-
//
|
|
118
|
-
// re-click while an action is pending reads the in-flight intent and toggles
|
|
119
|
-
// (true -> false -> true) rather than recomputing from the stale committed
|
|
120
|
-
// state. handleClick and clickAction share this so the callback and the
|
|
121
|
-
// optimistic update always agree within a single click.
|
|
111
|
+
// Both paths use the same in-flight intent, so re-clicks reverse a pending
|
|
112
|
+
// toggle rather than deriving from the stale controlled value.
|
|
122
113
|
const nextPressed = !isPressed;
|
|
123
114
|
const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
|
|
124
|
-
|
|
125
|
-
// Synchronous part of the toggle. Button calls onClick before clickAction and
|
|
126
|
-
// skips clickAction when the event is defaultPrevented, so calling
|
|
127
|
-
// preventDefault() inside onPressedChange opts out of pressedChangeAction.
|
|
128
115
|
const handleClick = event => {
|
|
129
116
|
if (isDisabled) {
|
|
130
117
|
return;
|
|
131
118
|
}
|
|
132
119
|
if (group && value != null) {
|
|
133
|
-
// Group mode delegates selection to the group; no async-action path.
|
|
134
120
|
group.toggle(value);
|
|
135
121
|
event.preventDefault();
|
|
136
122
|
return;
|
|
@@ -138,16 +124,12 @@ export function ToggleButton({
|
|
|
138
124
|
onPressedChangeProp?.(nextPressed, event);
|
|
139
125
|
};
|
|
140
126
|
|
|
141
|
-
//
|
|
142
|
-
//
|
|
143
|
-
|
|
144
|
-
// wired in group mode (where there is no async action). Button is rendered
|
|
145
|
-
// interruptible, so it stays clickable while pending and a re-click starts a
|
|
146
|
-
// fresh transition that interrupts the previous one.
|
|
147
|
-
const clickAction = group && value != null ? undefined : async () => {
|
|
127
|
+
// Button runs onClick first and skips clickAction when the callback prevents
|
|
128
|
+
// default. Its transition owns both the optimistic update and pending UI.
|
|
129
|
+
const clickAction = pressedChangeAction && !(group && value != null) ? async () => {
|
|
148
130
|
setOptimisticPressed(nextPressed);
|
|
149
|
-
await pressedChangeAction
|
|
150
|
-
};
|
|
131
|
+
await pressedChangeAction(nextPressed);
|
|
132
|
+
} : undefined;
|
|
151
133
|
|
|
152
134
|
// isIconOnly prop is the source of truth for icon-only rendering.
|
|
153
135
|
const labelContent = children != null ? /*#__PURE__*/_jsxs("span", {
|
package/dist/astryx.css
CHANGED
|
@@ -1424,6 +1424,7 @@
|
|
|
1424
1424
|
.xpilulx:last-child:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,var(--spacing-3)),var(--spacing-2))}
|
|
1425
1425
|
.x1wzlfcn:last-child:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,var(--spacing-4)),var(--spacing-2))}
|
|
1426
1426
|
.x1dnou9g:nth-child(even):not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}
|
|
1427
|
+
.xjl7jj:empty:not(#\#):not(#\#):not(#\#){display:none}
|
|
1427
1428
|
.x1c52tdz:focus:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
|
|
1428
1429
|
.x1rsz1da:focus:not(#\#):not(#\#):not(#\#){clip-path:none}
|
|
1429
1430
|
.xodanix:focus:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-2)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateThemeRules.d.ts","sourceRoot":"","sources":["../../src/theme/generateThemeRules.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAiHnE;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kFAAkF;IAClF,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAoND;;;;;GAKG;AACH;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"generateThemeRules.d.ts","sourceRoot":"","sources":["../../src/theme/generateThemeRules.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAiHnE;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kFAAkF;IAClF,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAoND;;;;;GAKG;AACH;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,EAAE,CAuDnE;AAsXD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAe5E;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CA6C9D;AA+CD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,CA+EzE;AAUD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,4BAA4B,IAAI,MAAM,CAKrD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,CAoCpE"}
|
|
@@ -319,6 +319,16 @@ export function generateThemeRules(theme) {
|
|
|
319
319
|
parts.push(` :scope {\n${declarations}\n }`);
|
|
320
320
|
}
|
|
321
321
|
|
|
322
|
+
// 1b. Base font — apply the theme's declared body font to the scope root.
|
|
323
|
+
// Components styled with `font-family: inherit` (SideNav items, Buttons)
|
|
324
|
+
// otherwise resolve against the browser default serif, since nothing else
|
|
325
|
+
// sets a page font. `font-family` inherits, so one rule on :scope covers
|
|
326
|
+
// the tree. Only emitted when the theme declares a body font, so a bare
|
|
327
|
+
// theme still contributes no scope rules of its own.
|
|
328
|
+
if (tokens['--font-family-body']) {
|
|
329
|
+
parts.push(` :scope {\n font-family: var(--font-family-body);\n }`);
|
|
330
|
+
}
|
|
331
|
+
|
|
322
332
|
// 2. Component overrides: stable .astryx-* target classes combined with
|
|
323
333
|
// reflected data-* selectors for visual props and runtime states.
|
|
324
334
|
if (theme.components) {
|