@noxlovette/material 0.9.3 → 0.10.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 (68) hide show
  1. package/dist/components/buttons/connected/theme.d.ts +15 -15
  2. package/dist/components/buttons/connected/theme.js +20 -5
  3. package/dist/components/buttons/split-button/theme.d.ts +15 -15
  4. package/dist/components/buttons/split-button/theme.js +21 -15
  5. package/dist/components/buttons/theme.d.ts +40 -40
  6. package/dist/components/buttons/theme.js +29 -29
  7. package/dist/components/cards/theme.js +1 -1
  8. package/dist/components/chips/Chip.svelte +1 -1
  9. package/dist/components/chips/theme.js +1 -1
  10. package/dist/components/containers/bottom-sheet/theme.js +1 -1
  11. package/dist/components/containers/carousel/theme.js +1 -1
  12. package/dist/components/containers/context-menu/theme.js +2 -2
  13. package/dist/components/containers/dialogue/theme.js +1 -1
  14. package/dist/components/containers/list/theme.d.ts +3 -3
  15. package/dist/components/containers/list/theme.js +8 -8
  16. package/dist/components/containers/menu/theme.js +3 -3
  17. package/dist/components/date/theme.js +2 -2
  18. package/dist/components/forms/checkbox/theme.js +1 -1
  19. package/dist/components/forms/command/theme.js +1 -1
  20. package/dist/components/forms/index.d.ts +1 -0
  21. package/dist/components/forms/index.js +1 -0
  22. package/dist/components/forms/search/theme.js +1 -1
  23. package/dist/components/forms/select/theme.js +2 -2
  24. package/dist/components/forms/slider/Slider.svelte +8 -0
  25. package/dist/components/forms/slider/theme.js +7 -7
  26. package/dist/components/forms/slider/types.d.ts +13 -0
  27. package/dist/components/forms/textarea/Textarea.mdx +63 -0
  28. package/dist/components/forms/textarea/Textarea.stories.svelte +99 -0
  29. package/dist/components/forms/textarea/Textarea.stories.svelte.d.ts +19 -0
  30. package/dist/components/forms/textarea/Textarea.svelte +142 -0
  31. package/dist/components/forms/textarea/Textarea.svelte.d.ts +13 -0
  32. package/dist/components/forms/textarea/index.d.ts +3 -0
  33. package/dist/components/forms/textarea/index.js +6 -0
  34. package/dist/components/forms/textarea/theme.d.ts +150 -0
  35. package/dist/components/forms/textarea/theme.js +155 -0
  36. package/dist/components/forms/textarea/types.d.ts +59 -0
  37. package/dist/components/forms/textarea/types.js +1 -0
  38. package/dist/components/forms/textfield/theme.js +4 -4
  39. package/dist/components/forms/toggle-group/theme.js +2 -2
  40. package/dist/components/misc/ThemeSettings.svelte +1 -1
  41. package/dist/components/misc/materialAvatarPalette.js +1 -1
  42. package/dist/components/nav/appbar/theme.js +22 -6
  43. package/dist/components/nav/navbar/theme.js +1 -1
  44. package/dist/components/nav/tabs/theme.js +1 -1
  45. package/dist/components/progress/CircularProgress.svelte +5 -3
  46. package/dist/components/progress/CircularProgress.svelte.d.ts +2 -1
  47. package/dist/components/progress/LinearProgress.svelte +5 -2
  48. package/dist/components/progress/LinearProgress.svelte.d.ts +2 -1
  49. package/dist/components/progress/WavyLinearProgress.svelte +5 -3
  50. package/dist/components/progress/WavyLinearProgress.svelte.d.ts +2 -1
  51. package/dist/components/progress/index.d.ts +1 -0
  52. package/dist/components/progress/index.js +1 -0
  53. package/dist/components/progress/types.d.ts +16 -0
  54. package/dist/components/progress/types.js +1 -0
  55. package/dist/components/snackbar/theme.js +1 -1
  56. package/dist/components/table/TableHeader.svelte +1 -1
  57. package/dist/components/toolbar/theme.js +2 -2
  58. package/dist/styles/components.css +7 -2
  59. package/dist/styles/icon.css +19 -0
  60. package/dist/styles/rounding.css +4 -0
  61. package/dist/utils/Theme.svelte +1 -1
  62. package/dist/utils/ThemeScript.svelte +1 -1
  63. package/dist/utils/icon/Icon.svelte +5 -5
  64. package/dist/utils/index.d.ts +2 -2
  65. package/dist/utils/index.js +1 -1
  66. package/package.json +1 -1
  67. /package/dist/utils/{theme.svelte.d.ts → themeState.svelte.d.ts} +0 -0
  68. /package/dist/utils/{theme.svelte.js → themeState.svelte.js} +0 -0
package/dist/components/buttons/connected/theme.d.ts CHANGED
@@ -39,23 +39,23 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
39
39
  size: {
40
40
  xs: {
41
41
  base: string[];
42
- icon: "size-spacing-250 text-[20px]";
42
+ icon: "size-(--text-icon-20) text-icon-20";
43
43
  };
44
44
  sm: {
45
45
  base: string[];
46
- icon: "size-spacing-250 text-[20px]";
46
+ icon: "size-(--text-icon-20) text-icon-20";
47
47
  };
48
48
  md: {
49
49
  base: string[];
50
- icon: "size-spacing-300 text-[24px]";
50
+ icon: "size-(--text-icon-24) text-icon-24";
51
51
  };
52
52
  lg: {
53
53
  base: string[];
54
- icon: "size-spacing-400 text-[32px]";
54
+ icon: "size-(--text-icon-32) text-icon-32";
55
55
  };
56
56
  xl: {
57
57
  base: string[];
58
- icon: "size-spacing-500 text-[40px]";
58
+ icon: "size-(--text-icon-40) text-icon-40";
59
59
  };
60
60
  };
61
61
  shape: {
@@ -73,23 +73,23 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
73
73
  size: {
74
74
  xs: {
75
75
  base: string[];
76
- icon: "size-spacing-250 text-[20px]";
76
+ icon: "size-(--text-icon-20) text-icon-20";
77
77
  };
78
78
  sm: {
79
79
  base: string[];
80
- icon: "size-spacing-250 text-[20px]";
80
+ icon: "size-(--text-icon-20) text-icon-20";
81
81
  };
82
82
  md: {
83
83
  base: string[];
84
- icon: "size-spacing-300 text-[24px]";
84
+ icon: "size-(--text-icon-24) text-icon-24";
85
85
  };
86
86
  lg: {
87
87
  base: string[];
88
- icon: "size-spacing-400 text-[32px]";
88
+ icon: "size-(--text-icon-32) text-icon-32";
89
89
  };
90
90
  xl: {
91
91
  base: string[];
92
- icon: "size-spacing-500 text-[40px]";
92
+ icon: "size-(--text-icon-40) text-icon-40";
93
93
  };
94
94
  };
95
95
  shape: {
@@ -107,23 +107,23 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
107
107
  size: {
108
108
  xs: {
109
109
  base: string[];
110
- icon: "size-spacing-250 text-[20px]";
110
+ icon: "size-(--text-icon-20) text-icon-20";
111
111
  };
112
112
  sm: {
113
113
  base: string[];
114
- icon: "size-spacing-250 text-[20px]";
114
+ icon: "size-(--text-icon-20) text-icon-20";
115
115
  };
116
116
  md: {
117
117
  base: string[];
118
- icon: "size-spacing-300 text-[24px]";
118
+ icon: "size-(--text-icon-24) text-icon-24";
119
119
  };
120
120
  lg: {
121
121
  base: string[];
122
- icon: "size-spacing-400 text-[32px]";
122
+ icon: "size-(--text-icon-32) text-icon-32";
123
123
  };
124
124
  xl: {
125
125
  base: string[];
126
- icon: "size-spacing-500 text-[40px]";
126
+ icon: "size-(--text-icon-40) text-icon-40";
127
127
  };
128
128
  };
129
129
  shape: {
package/dist/components/buttons/connected/theme.js CHANGED
@@ -29,23 +29,38 @@ export const connectedButtonGroupItem = tv({
29
29
  variants: {
30
30
  size: {
31
31
  xs: {
32
- base: [buttonSizes.xs.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
32
+ base: [
33
+ buttonSizes.xs.base,
34
+ '[--cbg-inner:var(--radius-sm)] [--cbg-pressed:var(--radius-xs)]'
35
+ ],
33
36
  icon: buttonSizes.xs.icon
34
37
  },
35
38
  sm: {
36
- base: [buttonSizes.sm.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
39
+ base: [
40
+ buttonSizes.sm.base,
41
+ '[--cbg-inner:var(--radius-sm)] [--cbg-pressed:var(--radius-xs)]'
42
+ ],
37
43
  icon: buttonSizes.sm.icon
38
44
  },
39
45
  md: {
40
- base: [buttonSizes.md.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
46
+ base: [
47
+ buttonSizes.md.base,
48
+ '[--cbg-inner:var(--radius-sm)] [--cbg-pressed:var(--radius-xs)]'
49
+ ],
41
50
  icon: buttonSizes.md.icon
42
51
  },
43
52
  lg: {
44
- base: [buttonSizes.lg.base, '[--cbg-inner:1rem] [--cbg-pressed:0.75rem]'],
53
+ base: [
54
+ buttonSizes.lg.base,
55
+ '[--cbg-inner:var(--radius-lg)] [--cbg-pressed:var(--radius-md)]'
56
+ ],
45
57
  icon: buttonSizes.lg.icon
46
58
  },
47
59
  xl: {
48
- base: [buttonSizes.xl.base, '[--cbg-inner:1.25rem] [--cbg-pressed:1rem]'],
60
+ base: [
61
+ buttonSizes.xl.base,
62
+ '[--cbg-inner:var(--radius-lg-increased)] [--cbg-pressed:var(--radius-lg)]'
63
+ ],
49
64
  icon: buttonSizes.xl.icon
50
65
  }
51
66
  },
package/dist/components/buttons/split-button/theme.d.ts CHANGED
@@ -4,31 +4,31 @@ export declare const splitButton: import("tailwind-variants").TVReturnType<{
4
4
  size: {
5
5
  xs: {
6
6
  leading: string[];
7
- leadingIcon: "size-spacing-250 text-[20px]";
7
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
8
8
  trailing: string[];
9
9
  chevron: string;
10
10
  };
11
11
  sm: {
12
12
  leading: string[];
13
- leadingIcon: "size-spacing-250 text-[20px]";
13
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
14
14
  trailing: string[];
15
15
  chevron: string;
16
16
  };
17
17
  md: {
18
18
  leading: string[];
19
- leadingIcon: "size-spacing-300 text-[24px]";
19
+ leadingIcon: "size-(--text-icon-24) text-icon-24";
20
20
  trailing: string[];
21
21
  chevron: string;
22
22
  };
23
23
  lg: {
24
24
  leading: string[];
25
- leadingIcon: "size-spacing-400 text-[32px]";
25
+ leadingIcon: "size-(--text-icon-32) text-icon-32";
26
26
  trailing: string[];
27
27
  chevron: string;
28
28
  };
29
29
  xl: {
30
30
  leading: string[];
31
- leadingIcon: "size-spacing-500 text-[40px]";
31
+ leadingIcon: "size-(--text-icon-40) text-icon-40";
32
32
  trailing: string[];
33
33
  chevron: string;
34
34
  };
@@ -43,31 +43,31 @@ export declare const splitButton: import("tailwind-variants").TVReturnType<{
43
43
  size: {
44
44
  xs: {
45
45
  leading: string[];
46
- leadingIcon: "size-spacing-250 text-[20px]";
46
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
47
47
  trailing: string[];
48
48
  chevron: string;
49
49
  };
50
50
  sm: {
51
51
  leading: string[];
52
- leadingIcon: "size-spacing-250 text-[20px]";
52
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
53
53
  trailing: string[];
54
54
  chevron: string;
55
55
  };
56
56
  md: {
57
57
  leading: string[];
58
- leadingIcon: "size-spacing-300 text-[24px]";
58
+ leadingIcon: "size-(--text-icon-24) text-icon-24";
59
59
  trailing: string[];
60
60
  chevron: string;
61
61
  };
62
62
  lg: {
63
63
  leading: string[];
64
- leadingIcon: "size-spacing-400 text-[32px]";
64
+ leadingIcon: "size-(--text-icon-32) text-icon-32";
65
65
  trailing: string[];
66
66
  chevron: string;
67
67
  };
68
68
  xl: {
69
69
  leading: string[];
70
- leadingIcon: "size-spacing-500 text-[40px]";
70
+ leadingIcon: "size-(--text-icon-40) text-icon-40";
71
71
  trailing: string[];
72
72
  chevron: string;
73
73
  };
@@ -82,31 +82,31 @@ export declare const splitButton: import("tailwind-variants").TVReturnType<{
82
82
  size: {
83
83
  xs: {
84
84
  leading: string[];
85
- leadingIcon: "size-spacing-250 text-[20px]";
85
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
86
86
  trailing: string[];
87
87
  chevron: string;
88
88
  };
89
89
  sm: {
90
90
  leading: string[];
91
- leadingIcon: "size-spacing-250 text-[20px]";
91
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
92
92
  trailing: string[];
93
93
  chevron: string;
94
94
  };
95
95
  md: {
96
96
  leading: string[];
97
- leadingIcon: "size-spacing-300 text-[24px]";
97
+ leadingIcon: "size-(--text-icon-24) text-icon-24";
98
98
  trailing: string[];
99
99
  chevron: string;
100
100
  };
101
101
  lg: {
102
102
  leading: string[];
103
- leadingIcon: "size-spacing-400 text-[32px]";
103
+ leadingIcon: "size-(--text-icon-32) text-icon-32";
104
104
  trailing: string[];
105
105
  chevron: string;
106
106
  };
107
107
  xl: {
108
108
  leading: string[];
109
- leadingIcon: "size-spacing-500 text-[40px]";
109
+ leadingIcon: "size-(--text-icon-40) text-icon-40";
110
110
  trailing: string[];
111
111
  chevron: string;
112
112
  };
package/dist/components/buttons/split-button/theme.js CHANGED
@@ -23,56 +23,62 @@ export const splitButton = tv({
23
23
  xs: {
24
24
  leading: [
25
25
  buttonSizes.xs.base,
26
- 'ps-spacing-150 pe-spacing-125 [--split-active:0.5rem] [--split-inner:0.25rem]'
26
+ 'ps-spacing-150 pe-spacing-125 [--split-active:var(--radius-sm)] [--split-inner:var(--radius-xs)]'
27
27
  ],
28
28
  leadingIcon: buttonSizes.xs.icon,
29
29
  trailing: [
30
30
  buttonSizes.xs.base,
31
- 'w-spacing-600 [--split-active:0.5rem] [--split-inner:0.25rem]'
31
+ 'w-spacing-600 [--split-active:var(--radius-sm)] [--split-inner:var(--radius-xs)]'
32
32
  ],
33
- chevron: 'size-[22px] -translate-x-px text-[22px]'
33
+ chevron: 'size-(--text-icon-22) -translate-x-px text-icon-22'
34
34
  },
35
35
  sm: {
36
36
  leading: [
37
37
  buttonSizes.sm.base,
38
- 'ps-spacing-200 pe-spacing-150 [--split-active:0.75rem] [--split-inner:0.25rem]'
38
+ 'ps-spacing-200 pe-spacing-150 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
39
39
  ],
40
40
  leadingIcon: buttonSizes.sm.icon,
41
41
  trailing: [
42
42
  buttonSizes.sm.base,
43
- 'w-spacing-600 [--split-active:0.75rem] [--split-inner:0.25rem]'
43
+ 'w-spacing-600 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
44
44
  ],
45
- chevron: 'size-[22px] -translate-x-px text-[22px]'
45
+ chevron: 'size-(--text-icon-22) -translate-x-px text-icon-22'
46
46
  },
47
47
  md: {
48
48
  leading: [
49
49
  buttonSizes.md.base,
50
- 'px-spacing-300 [--split-active:0.75rem] [--split-inner:0.25rem]'
50
+ 'px-spacing-300 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
51
51
  ],
52
52
  leadingIcon: buttonSizes.md.icon,
53
53
  trailing: [
54
54
  buttonSizes.md.base,
55
- 'w-spacing-700 [--split-active:0.75rem] [--split-inner:0.25rem]'
55
+ 'w-spacing-700 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
56
56
  ],
57
- chevron: 'size-[26px] -translate-x-spacing-25 text-[26px]'
57
+ chevron: 'size-(--text-icon-26) -translate-x-spacing-25 text-icon-26'
58
58
  },
59
59
  lg: {
60
60
  leading: [
61
61
  buttonSizes.lg.base,
62
- 'px-spacing-600 [--split-active:1.25rem] [--split-inner:0.5rem]'
62
+ 'px-spacing-600 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-sm)]'
63
63
  ],
64
64
  leadingIcon: buttonSizes.lg.icon,
65
- trailing: [buttonSizes.lg.base, 'w-24 [--split-active:1.25rem] [--split-inner:0.5rem]'],
66
- chevron: 'size-[38px] -translate-x-[3px] text-[38px]'
65
+ trailing: [
66
+ buttonSizes.lg.base,
67
+ 'w-24 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-sm)]'
68
+ ],
69
+ chevron: 'size-(--text-icon-38) -translate-x-[3px] text-icon-38'
67
70
  },
68
71
  xl: {
69
72
  leading: [
70
73
  buttonSizes.xl.base,
71
- 'px-spacing-800 [--split-active:1.25rem] [--split-inner:0.75rem]'
74
+ 'px-spacing-800 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-md)]'
72
75
  ],
73
76
  leadingIcon: buttonSizes.xl.icon,
74
- trailing: [buttonSizes.xl.base, 'w-34 [--split-active:1.25rem] [--split-inner:0.75rem]'],
75
- chevron: 'size-[50px] -translate-x-spacing-75 text-[50px]'
77
+ trailing: [
78
+ buttonSizes.xl.base,
79
+ 'w-34 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-md)]'
80
+ ],
81
+ chevron: 'size-(--text-icon-50) -translate-x-spacing-75 text-icon-50'
76
82
  }
77
83
  }
78
84
  },
package/dist/components/buttons/theme.d.ts CHANGED
@@ -59,24 +59,24 @@ export declare const buttonBase = "md-btn md-sys-state-focus-indicator relative
59
59
  /** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
60
60
  export declare const buttonSizes: {
61
61
  readonly xs: {
62
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
63
- readonly icon: "size-spacing-250 text-[20px]";
62
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
63
+ readonly icon: "size-(--text-icon-20) text-icon-20";
64
64
  };
65
65
  readonly sm: {
66
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
67
- readonly icon: "size-spacing-250 text-[20px]";
66
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
67
+ readonly icon: "size-(--text-icon-20) text-icon-20";
68
68
  };
69
69
  readonly md: {
70
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
71
- readonly icon: "size-spacing-300 text-[24px]";
70
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
71
+ readonly icon: "size-(--text-icon-24) text-icon-24";
72
72
  };
73
73
  readonly lg: {
74
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
75
- readonly icon: "size-spacing-400 text-[32px]";
74
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
75
+ readonly icon: "size-(--text-icon-32) text-icon-32";
76
76
  };
77
77
  readonly xl: {
78
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
79
- readonly icon: "size-spacing-500 text-[40px]";
78
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
79
+ readonly icon: "size-(--text-icon-40) text-icon-40";
80
80
  };
81
81
  };
82
82
  /** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
@@ -103,24 +103,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
103
103
  };
104
104
  size: {
105
105
  readonly xs: {
106
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
107
- readonly icon: "size-spacing-250 text-[20px]";
106
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
107
+ readonly icon: "size-(--text-icon-20) text-icon-20";
108
108
  };
109
109
  readonly sm: {
110
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
111
- readonly icon: "size-spacing-250 text-[20px]";
110
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
111
+ readonly icon: "size-(--text-icon-20) text-icon-20";
112
112
  };
113
113
  readonly md: {
114
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
115
- readonly icon: "size-spacing-300 text-[24px]";
114
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
115
+ readonly icon: "size-(--text-icon-24) text-icon-24";
116
116
  };
117
117
  readonly lg: {
118
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
119
- readonly icon: "size-spacing-400 text-[32px]";
118
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
119
+ readonly icon: "size-(--text-icon-32) text-icon-32";
120
120
  };
121
121
  readonly xl: {
122
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
123
- readonly icon: "size-spacing-500 text-[40px]";
122
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
123
+ readonly icon: "size-(--text-icon-40) text-icon-40";
124
124
  };
125
125
  };
126
126
  shape: {
@@ -155,24 +155,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
155
155
  };
156
156
  size: {
157
157
  readonly xs: {
158
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
159
- readonly icon: "size-spacing-250 text-[20px]";
158
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
159
+ readonly icon: "size-(--text-icon-20) text-icon-20";
160
160
  };
161
161
  readonly sm: {
162
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
163
- readonly icon: "size-spacing-250 text-[20px]";
162
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
163
+ readonly icon: "size-(--text-icon-20) text-icon-20";
164
164
  };
165
165
  readonly md: {
166
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
167
- readonly icon: "size-spacing-300 text-[24px]";
166
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
167
+ readonly icon: "size-(--text-icon-24) text-icon-24";
168
168
  };
169
169
  readonly lg: {
170
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
171
- readonly icon: "size-spacing-400 text-[32px]";
170
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
171
+ readonly icon: "size-(--text-icon-32) text-icon-32";
172
172
  };
173
173
  readonly xl: {
174
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
175
- readonly icon: "size-spacing-500 text-[40px]";
174
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
175
+ readonly icon: "size-(--text-icon-40) text-icon-40";
176
176
  };
177
177
  };
178
178
  shape: {
@@ -207,24 +207,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
207
207
  };
208
208
  size: {
209
209
  readonly xs: {
210
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
211
- readonly icon: "size-spacing-250 text-[20px]";
210
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
211
+ readonly icon: "size-(--text-icon-20) text-icon-20";
212
212
  };
213
213
  readonly sm: {
214
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
215
- readonly icon: "size-spacing-250 text-[20px]";
214
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
215
+ readonly icon: "size-(--text-icon-20) text-icon-20";
216
216
  };
217
217
  readonly md: {
218
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
219
- readonly icon: "size-spacing-300 text-[24px]";
218
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
219
+ readonly icon: "size-(--text-icon-24) text-icon-24";
220
220
  };
221
221
  readonly lg: {
222
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
223
- readonly icon: "size-spacing-400 text-[32px]";
222
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
223
+ readonly icon: "size-(--text-icon-32) text-icon-32";
224
224
  };
225
225
  readonly xl: {
226
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
227
- readonly icon: "size-spacing-500 text-[40px]";
226
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
227
+ readonly icon: "size-(--text-icon-40) text-icon-40";
228
228
  };
229
229
  };
230
230
  shape: {
package/dist/components/buttons/theme.js CHANGED
@@ -81,24 +81,24 @@ export const buttonBase = 'md-btn md-sys-state-focus-indicator relative inline-f
81
81
  /** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
82
82
  export const buttonSizes = {
83
83
  xs: {
84
- base: 'md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]',
85
- icon: 'size-spacing-250 text-[20px]'
84
+ base: 'md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]',
85
+ icon: 'size-(--text-icon-20) text-icon-20'
86
86
  },
87
87
  sm: {
88
- base: 'md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]',
89
- icon: 'size-spacing-250 text-[20px]'
88
+ base: 'md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]',
89
+ icon: 'size-(--text-icon-20) text-icon-20'
90
90
  },
91
91
  md: {
92
- base: 'md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]',
93
- icon: 'size-spacing-300 text-[24px]'
92
+ base: 'md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]',
93
+ icon: 'size-(--text-icon-24) text-icon-24'
94
94
  },
95
95
  lg: {
96
- base: 'md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]',
97
- icon: 'size-spacing-400 text-[32px]'
96
+ base: 'md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]',
97
+ icon: 'size-(--text-icon-32) text-icon-32'
98
98
  },
99
99
  xl: {
100
- base: 'md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]',
101
- icon: 'size-spacing-500 text-[40px]'
100
+ base: 'md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]',
101
+ icon: 'size-(--text-icon-40) text-icon-40'
102
102
  }
103
103
  };
104
104
  /** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
@@ -157,24 +157,24 @@ export const buttonIcon = tv({
157
157
  },
158
158
  size: {
159
159
  xs: {
160
- base: 'h-spacing-400 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]',
161
- icon: 'size-spacing-250 text-[20px]'
160
+ base: 'h-spacing-400 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]',
161
+ icon: 'size-(--text-icon-20) text-icon-20'
162
162
  },
163
163
  sm: {
164
- base: 'h-spacing-500 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]',
165
- icon: 'size-spacing-300 text-[24px]'
164
+ base: 'h-spacing-500 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]',
165
+ icon: 'size-(--text-icon-24) text-icon-24'
166
166
  },
167
167
  md: {
168
- base: 'h-spacing-700 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]',
169
- icon: 'size-spacing-300 text-[24px]'
168
+ base: 'h-spacing-700 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]',
169
+ icon: 'size-(--text-icon-24) text-icon-24'
170
170
  },
171
171
  lg: {
172
- base: 'h-24 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]',
173
- icon: 'size-spacing-400 text-[32px]'
172
+ base: 'h-24 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]',
173
+ icon: 'size-(--text-icon-32) text-icon-32'
174
174
  },
175
175
  xl: {
176
- base: 'h-34 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]',
177
- icon: 'size-spacing-500 text-[40px]'
176
+ base: 'h-34 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]',
177
+ icon: 'size-(--text-icon-40) text-icon-40'
178
178
  }
179
179
  },
180
180
  /** Container width: the icon plus the size's narrow, default or wide leading/trailing space. */
@@ -256,21 +256,21 @@ export const fab = tv({
256
256
  /** Baseline small FAB. No longer recommended by M3; kept for dense layouts. */
257
257
  small: {
258
258
  base: 'h-spacing-500 rounded-xl px-spacing-100',
259
- icon: 'size-spacing-300 text-[24px]'
259
+ icon: 'size-(--text-icon-24) text-icon-24'
260
260
  },
261
261
  regular: {
262
262
  base: 'md-sys-typescale-title-medium h-spacing-700 rounded-2xl px-spacing-200',
263
- icon: 'size-spacing-300 text-[24px]',
263
+ icon: 'size-(--text-icon-24) text-icon-24',
264
264
  label: 'ps-spacing-100'
265
265
  },
266
266
  medium: {
267
- base: 'md-sys-typescale-title-large h-20 rounded-[1.25rem] px-[1.625rem]',
268
- icon: 'size-7 text-[28px]',
267
+ base: 'md-sys-typescale-title-large h-20 rounded-lg-increased px-[1.625rem]',
268
+ icon: 'size-(--text-icon-28) text-icon-28',
269
269
  label: 'ps-spacing-150'
270
270
  },
271
271
  large: {
272
- base: 'md-sys-typescale-headline-small h-24 rounded-[1.75rem] px-[1.875rem]',
273
- icon: 'size-spacing-450 text-[36px]',
272
+ base: 'md-sys-typescale-headline-small h-24 rounded-xl px-[1.875rem]',
273
+ icon: 'size-(--text-icon-36) text-icon-36',
274
274
  label: 'ps-spacing-200'
275
275
  }
276
276
  },
@@ -281,8 +281,8 @@ export const fab = tv({
281
281
  */
282
282
  menuOpen: {
283
283
  true: {
284
- base: 'justify-center px-spacing-0 size-spacing-700 rounded-[1.75rem]',
285
- icon: 'size-spacing-250 text-[20px]',
284
+ base: 'justify-center px-spacing-0 size-spacing-700 rounded-xl',
285
+ icon: 'size-(--text-icon-20) text-icon-20',
286
286
  labelTrack: 'grid-cols-[0fr]!'
287
287
  },
288
288
  false: {}
@@ -365,7 +365,7 @@ export const fabMenu = tv({
365
365
  export const fabMenuItem = tv({
366
366
  slots: {
367
367
  base: 'md-btn md-sys-state-focus-indicator md-sys-typescale-title-medium relative inline-flex h-spacing-700 shrink-0 cursor-pointer items-center gap-spacing-100 rounded-full px-spacing-300 whitespace-nowrap select-none data-disabled:cursor-not-allowed data-disabled:bg-md-sys-color-on-surface/10 data-disabled:text-md-sys-color-on-surface/38',
368
- icon: 'size-spacing-300 shrink-0 text-[24px]'
368
+ icon: 'size-(--text-icon-24) shrink-0 text-icon-24'
369
369
  },
370
370
  variants: {
371
371
  set: {
package/dist/components/cards/theme.js CHANGED
@@ -2,7 +2,7 @@ import { tv } from '../../utils/tv.js';
2
2
  export const card = tv({
3
3
  slots: {
4
4
  base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg transition-shadow md-sys-motion-effects',
5
- icon: 'size-spacing-300 text-[24px] text-md-sys-color-primary'
5
+ icon: 'size-(--text-icon-24) text-icon-24 text-md-sys-color-primary'
6
6
  },
7
7
  variants: {
8
8
  type: {
package/dist/components/chips/Chip.svelte CHANGED
@@ -135,7 +135,7 @@ Chips help people enter information, make selections, filter content, or trigger
135
135
  }}
136
136
  aria-label={removeLabel}
137
137
  >
138
- <Icon size="sm" name="close" class="size-[18px] text-[18px]" />
138
+ <Icon size="sm" name="close" class="text-icon-18 size-(--text-icon-18)" />
139
139
  <Layer />
140
140
  </button>
141
141
  {/if}
package/dist/components/chips/theme.js CHANGED
@@ -23,7 +23,7 @@ export const chip = tv({
23
23
  // a 16% state layer.
24
24
  base: 'in-data-dragged:shadow-elevation-4 in-data-dragged:before:bg-current/16 state-layer md-sys-state-focus-indicator relative inline-flex h-spacing-400 max-w-max shrink-0 items-center justify-center gap-spacing-100 rounded-sm border border-transparent px-spacing-200 md-sys-typescale-label-large select-none before:rounded-sm transition-[background-color,border-color,box-shadow] md-sys-motion-effects',
25
25
  // 18dp is the chip spec's own icon size, between the 16 and 20 Icon presets.
26
- icon: 'size-[18px] shrink-0 text-[18px]',
26
+ icon: 'size-(--text-icon-18) shrink-0 text-icon-18',
27
27
  avatar: 'size-spacing-300 shrink-0 overflow-hidden rounded-full',
28
28
  // Static, so its Layer (state layer and hit area) spans the whole chip; the remove button is
29
29
  // positioned and later in the DOM, so it stays on top.
package/dist/components/containers/bottom-sheet/theme.js CHANGED
@@ -18,7 +18,7 @@ export const bottomSheet = tv({
18
18
  ],
19
19
  container: [
20
20
  'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface shadow-elevation-1',
21
- 'flex max-h-[inherit] flex-col rounded-t-[28px] will-change-transform'
21
+ 'flex max-h-[inherit] flex-col rounded-t-xl will-change-transform'
22
22
  ],
23
23
  handleArea: 'flex h-spacing-600 shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing',
24
24
  handle: 'md-sys-state-focus-indicator flex h-spacing-600 w-spacing-600 items-center justify-center rounded-full outline-none',