opui-css 5.0.0 → 5.1.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 (114) hide show
  1. package/CHANGELOG.md +317 -276
  2. package/LICENSE +21 -21
  3. package/MIGRATING.md +138 -127
  4. package/README.md +87 -87
  5. package/astro/index.ts +46 -46
  6. package/components/AGENTS.md +248 -248
  7. package/components/Accordion/Accordion.astro +52 -42
  8. package/components/Anchor/Anchor.astro +55 -51
  9. package/components/Avatar/Avatar.astro +38 -38
  10. package/components/Badge/Badge.astro +59 -59
  11. package/components/Button/Button.astro +45 -45
  12. package/components/ButtonGroup/ButtonGroup.astro +36 -29
  13. package/components/Callout/Callout.astro +75 -75
  14. package/components/Card/Card.astro +38 -36
  15. package/components/Checkbox/Checkbox.astro +76 -76
  16. package/components/Checkbox/CheckboxInput.astro +32 -32
  17. package/components/Chip/Chip.astro +37 -37
  18. package/components/ClassicSelect/ClassicSelect.astro +83 -83
  19. package/components/DescriptionList/Description.astro +12 -12
  20. package/components/DescriptionList/DescriptionList.astro +22 -22
  21. package/components/DescriptionList/Item.astro +12 -12
  22. package/components/DescriptionList/Term.astro +12 -12
  23. package/components/DescriptionList/index.ts +12 -12
  24. package/components/Dialog/Dialog.astro +43 -41
  25. package/components/Divider/Divider.astro +17 -17
  26. package/components/Drawer/Drawer.astro +49 -49
  27. package/components/Drawer/DrawerFooter.astro +14 -14
  28. package/components/Drawer/DrawerHeader.astro +31 -31
  29. package/components/FieldDescription/FieldDescription.astro +13 -13
  30. package/components/FieldGroup/FieldGroup.astro +31 -31
  31. package/components/FieldLegend/FieldLegend.astro +15 -15
  32. package/components/FieldSet/FieldSet.astro +15 -15
  33. package/components/Form/Form.astro +15 -15
  34. package/components/IconButton/IconButton.astro +26 -26
  35. package/components/List/List.astro +36 -36
  36. package/components/ListItem/ListItem.astro +118 -118
  37. package/components/Progress/Progress.astro +41 -40
  38. package/components/Radio/Radio.astro +70 -70
  39. package/components/Radio/RadioInput.astro +24 -24
  40. package/components/Range/Range.astro +136 -136
  41. package/components/Select/Select.astro +106 -106
  42. package/components/Switch/Switch.astro +101 -101
  43. package/components/Switch/SwitchInput.astro +25 -25
  44. package/components/Table/Body.astro +13 -13
  45. package/components/Table/Cell.astro +13 -13
  46. package/components/Table/Column.astro +15 -15
  47. package/components/Table/ColumnGroup.astro +13 -13
  48. package/components/Table/Head.astro +13 -13
  49. package/components/Table/HeaderCell.astro +13 -13
  50. package/components/Table/Row.astro +13 -13
  51. package/components/Table/Table.astro +18 -18
  52. package/components/Table/index.ts +20 -20
  53. package/components/Tabs/Tabs.astro +28 -28
  54. package/components/Tabs/TabsItem.astro +47 -47
  55. package/components/Tabs/TabsPanel.astro +21 -21
  56. package/components/Tabs/TabsTab.astro +19 -19
  57. package/components/Tabs/index.ts +14 -14
  58. package/components/TextField/TextField.astro +128 -128
  59. package/components/Textarea/Textarea.astro +106 -106
  60. package/components/Toast/Toast.astro +42 -42
  61. package/components/ToggleButton/ToggleButton.astro +53 -53
  62. package/components/ToggleGroup/ToggleGroup.astro +49 -49
  63. package/components/Tooltip/Tooltip.astro +30 -30
  64. package/core/normalize.css +200 -194
  65. package/core/palette.css +110 -59
  66. package/core/utils.css +71 -71
  67. package/css/components/accordion.css +174 -174
  68. package/css/components/anchor.css +27 -27
  69. package/css/components/avatar.css +65 -65
  70. package/css/components/badge.css +107 -107
  71. package/css/components/button-group.css +193 -179
  72. package/css/components/button.css +227 -215
  73. package/css/components/callout.css +112 -109
  74. package/css/components/card.css +115 -117
  75. package/css/components/checkbox.css +211 -205
  76. package/css/components/chip.css +92 -87
  77. package/css/components/description-list.css +81 -80
  78. package/css/components/dialog.css +69 -68
  79. package/css/components/divider.css +20 -20
  80. package/css/components/drawer.css +171 -171
  81. package/css/components/form.css +147 -146
  82. package/css/components/icon-button.css +158 -139
  83. package/css/components/link.css +21 -21
  84. package/css/components/list.css +343 -345
  85. package/css/components/progress.css +103 -97
  86. package/css/components/radio.css +170 -172
  87. package/css/components/range.css +342 -337
  88. package/css/components/select.css +172 -169
  89. package/css/components/spinner.css +38 -37
  90. package/css/components/switch.css +271 -268
  91. package/css/components/table.css +173 -179
  92. package/css/components/tabs.css +84 -83
  93. package/css/components/text-field.css +449 -450
  94. package/css/components/text-input.css +68 -64
  95. package/css/components/textarea.css +26 -24
  96. package/css/components/toast.css +160 -161
  97. package/css/components/toggle-button.css +91 -87
  98. package/css/components/toggle-group.css +56 -56
  99. package/css/components/tooltip.css +70 -67
  100. package/css/components/typography.css +585 -585
  101. package/css/components.css +41 -41
  102. package/css/imports.css +17 -16
  103. package/css/js/checkbox.js +21 -21
  104. package/css/js/toast.js +94 -94
  105. package/css/theme.css +133 -132
  106. package/dist/op.css +4 -66
  107. package/dist/op.css.map +1 -1
  108. package/dist/opui.components.css +5234 -5154
  109. package/dist/opui.components.css.map +1 -1
  110. package/dist/opui.css +5798 -5663
  111. package/dist/opui.css.map +1 -1
  112. package/env.d.ts +14 -14
  113. package/open-props.css +8 -9
  114. package/package.json +81 -81
package/css/components/button-group.css CHANGED
@@ -1,179 +1,193 @@
1
- @layer components.extended {
2
- :where([role="group"].ui-button-group) {
3
- --_border-radius: var(--button-border-radius);
4
-
5
- border-radius: var(--_border-radius);
6
- display: inline-flex;
7
- min-width: max-content;
8
-
9
- /* Button */
10
- button {
11
- border-radius: 0;
12
-
13
- /* button.css > --_accent-tonal */
14
- --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
15
- oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
16
-
17
- &.ui-outlined {
18
- --_divider-color: var(--_border-color);
19
- }
20
-
21
- &.ui-filled {
22
- --_divider-color: currentColor;
23
- }
24
-
25
- &:focus-visible {
26
- outline-offset: -4px;
27
- }
28
-
29
- /* Color inheritance from Button Group — shared interaction model.
30
- The .critical scope class in theme.css redirects --palette-source so
31
- --color-6 below becomes a tint of the active color. */
32
- :where(.ui-button-group.ui-critical,
33
- .ui-button-group.ui-primary) & {
34
- --_color-contrast: var(--gray-1);
35
- --_color-tonal: var(--color-6);
36
- --_accent-tonal-contrast: var(--text-primary-contrast);
37
- --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
38
- --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
39
- --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
40
- --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
41
- --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
42
- }
43
-
44
- :where(.ui-button-group.ui-critical) & {
45
- --_color: var(--critical);
46
- }
47
-
48
- :where(.ui-button-group.ui-primary) & {
49
- --_color: var(--primary);
50
- }
51
-
52
- :where(.ui-button-group.ui-small) & {
53
- --_min-height: 1.875rem;
54
- padding-block: 0;
55
- padding-inline: 1ex;
56
- }
57
-
58
- :where(.ui-button-group.ui-large) & {
59
- --_min-height: 2.875rem;
60
- padding-inline: 4ex;
61
- }
62
-
63
- :where(.ui-button-group.ui-outlined) & {
64
- --_border-color: var(--_accent);
65
- --_divider-color: var(--_accent);
66
-
67
- &:where(:not([disabled])) {
68
- &:where(:not(:active):hover) {
69
- --_bg-color: var(--_accent);
70
- --_border-color: var(--_accent);
71
- --_text-color: var(--_accent-contrast);
72
- }
73
-
74
- &:where(:active) {
75
- --_bg-color: var(--_outlined-active-bg-color);
76
- --_border-color: var(--_outlined-active-bg-color);
77
- --_text-color: var(--_accent-contrast);
78
- }
79
- }
80
- }
81
-
82
- :where(.ui-button-group.ui-tonal) & {
83
- --_bg-color: var(--_accent-tonal);
84
- --_text-color: var(--_accent-tonal-contrast);
85
-
86
- &:where(:not([disabled])) {
87
- &:where(:not(:active):hover) {
88
- --_bg-color: var(--_accent);
89
- --_text-color: var(--_accent-contrast);
90
- }
91
-
92
- &:where(:active) {
93
- --_bg-color: var(--_outlined-active-bg-color);
94
- --_text-color: var(--_accent-contrast);
95
- }
96
- }
97
- }
98
-
99
- :where(.ui-button-group.ui-filled) & {
100
- --_bg-color: var(--_accent);
101
- --_text-color: var(--_accent-contrast);
102
- --_divider-color: currentColor;
103
-
104
- :where(.ui-button-group.ui-critical,
105
- .ui-button-group.ui-primary) & {
106
- --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
107
- oklch(from var(--_accent) calc(l + 0.1) c h));
108
- }
109
-
110
- &:where(:not([disabled])) {
111
- &:where(:not(:active):hover) {
112
- --_bg-color: var(--_filled-hover-bg-color);
113
- }
114
-
115
- &:where(:active) {
116
- --_bg-color: var(--_filled-active-bg-color);
117
- }
118
- }
119
- }
120
- }
121
-
122
- &:not(.ui-vertical) {
123
- button {
124
- &:first-of-type {
125
- border-end-start-radius: var(--_border-radius);
126
- border-start-start-radius: var(--_border-radius);
127
- }
128
-
129
- &:last-of-type {
130
- border-end-end-radius: var(--_border-radius);
131
- border-start-end-radius: var(--_border-radius);
132
- }
133
-
134
- /* Siblings */
135
- &+& {
136
- border-inline-start-color: var(--_divider-color);
137
- border-inline-width: 1px;
138
- margin-inline-start: -1px;
139
-
140
- &[disabled] {
141
- border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
142
- }
143
- }
144
- }
145
- }
146
-
147
- &.ui-vertical {
148
- flex-direction: column;
149
-
150
- button {
151
- padding: var(--size-2);
152
-
153
- &:has(svg) {
154
- aspect-ratio: 1;
155
- padding: var(--size-1);
156
- }
157
-
158
- &:first-of-type {
159
- border-start-start-radius: var(--_border-radius);
160
- border-start-end-radius: var(--_border-radius);
161
- }
162
-
163
- &:last-of-type {
164
- border-end-start-radius: var(--_border-radius);
165
- border-end-end-radius: var(--_border-radius);
166
- }
167
-
168
- &+& {
169
- border-block-start: 1px solid var(--_divider-color);
170
- margin-block-start: -1px;
171
-
172
- &[disabled] {
173
- border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
174
- }
175
- }
176
- }
177
- }
178
- }
179
- }
1
+ @layer components.extended {
2
+ :where([role="group"].ui-button-group) {
3
+ --_border-radius: var(--button-border-radius);
4
+
5
+ border-radius: var(--_border-radius);
6
+ display: inline-flex;
7
+ min-width: max-content;
8
+
9
+ /* Button */
10
+ button {
11
+ border-radius: 0;
12
+
13
+ /* button.css > --_accent-tonal */
14
+ --_divider-color: light-dark(
15
+ oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
16
+ oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
17
+ );
18
+
19
+ &.ui-outlined {
20
+ --_divider-color: var(--_border-color);
21
+ }
22
+
23
+ &.ui-filled {
24
+ --_divider-color: currentColor;
25
+ }
26
+
27
+ &:focus-visible {
28
+ outline-offset: -4px;
29
+ }
30
+
31
+ /* Color inheritance from Button Group — shared interaction model.
32
+ The .critical scope class in theme.css redirects --palette-source so
33
+ --color-6 below becomes a tint of the active color. */
34
+ :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
35
+ --_color-contrast: var(--gray-1);
36
+ --_color-tonal: var(--color-6);
37
+ --_accent-tonal-contrast: var(--text-primary-contrast);
38
+ --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
39
+ --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
40
+ --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
41
+ --_filled-active-bg-color: oklch(
42
+ from var(--_accent) calc(l - 0.15) c h
43
+ );
44
+ --_outlined-active-bg-color: oklch(
45
+ from var(--_accent) calc(l - 0.1) c h
46
+ );
47
+ }
48
+
49
+ :where(.ui-button-group.ui-critical) & {
50
+ --_color: var(--critical);
51
+ }
52
+
53
+ :where(.ui-button-group.ui-primary) & {
54
+ --_color: var(--primary);
55
+ }
56
+
57
+ :where(.ui-button-group.ui-small) & {
58
+ --_min-height: 1.875rem;
59
+ padding-block: 0;
60
+ padding-inline: 1ex;
61
+ }
62
+
63
+ :where(.ui-button-group.ui-large) & {
64
+ --_min-height: 2.875rem;
65
+ padding-inline: 4ex;
66
+ }
67
+
68
+ :where(.ui-button-group.ui-outlined) & {
69
+ --_border-color: var(--_accent);
70
+ --_divider-color: var(--_accent);
71
+
72
+ &:where(:not([disabled])) {
73
+ &:where(:not(:active):hover) {
74
+ --_bg-color: var(--_accent);
75
+ --_border-color: var(--_accent);
76
+ --_text-color: var(--_accent-contrast);
77
+ }
78
+
79
+ &:where(:active) {
80
+ --_bg-color: var(--_outlined-active-bg-color);
81
+ --_border-color: var(--_outlined-active-bg-color);
82
+ --_text-color: var(--_accent-contrast);
83
+ }
84
+ }
85
+ }
86
+
87
+ :where(.ui-button-group.ui-tonal) & {
88
+ --_bg-color: var(--_accent-tonal);
89
+ --_text-color: var(--_accent-tonal-contrast);
90
+
91
+ &:where(:not([disabled])) {
92
+ &:where(:not(:active):hover) {
93
+ --_bg-color: var(--_accent);
94
+ --_text-color: var(--_accent-contrast);
95
+ }
96
+
97
+ &:where(:active) {
98
+ --_bg-color: var(--_outlined-active-bg-color);
99
+ --_text-color: var(--_accent-contrast);
100
+ }
101
+ }
102
+ }
103
+
104
+ :where(.ui-button-group.ui-filled) & {
105
+ --_bg-color: var(--_accent);
106
+ --_text-color: var(--_accent-contrast);
107
+ --_divider-color: currentColor;
108
+
109
+ :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
110
+ --_divider-color: light-dark(
111
+ oklch(from var(--_accent) calc(l - 0.1) c h),
112
+ oklch(from var(--_accent) calc(l + 0.1) c h)
113
+ );
114
+ }
115
+
116
+ &:where(:not([disabled])) {
117
+ &:where(:not(:active):hover) {
118
+ --_bg-color: var(--_filled-hover-bg-color);
119
+ }
120
+
121
+ &:where(:active) {
122
+ --_bg-color: var(--_filled-active-bg-color);
123
+ }
124
+ }
125
+ }
126
+ }
127
+
128
+ &:not(.ui-vertical) {
129
+ button {
130
+ &:first-of-type {
131
+ border-end-start-radius: var(--_border-radius);
132
+ border-start-start-radius: var(--_border-radius);
133
+ }
134
+
135
+ &:last-of-type {
136
+ border-end-end-radius: var(--_border-radius);
137
+ border-start-end-radius: var(--_border-radius);
138
+ }
139
+
140
+ /* Siblings */
141
+ & + & {
142
+ border-inline-start-color: var(--_divider-color);
143
+ border-inline-width: 1px;
144
+ margin-inline-start: -1px;
145
+
146
+ &[disabled] {
147
+ border-inline-start-color: color-mix(
148
+ in oklch,
149
+ var(--_divider-color) 40%,
150
+ transparent
151
+ );
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ &.ui-vertical {
158
+ flex-direction: column;
159
+
160
+ button {
161
+ padding: var(--size-2);
162
+
163
+ &:has(svg) {
164
+ aspect-ratio: 1;
165
+ padding: var(--size-1);
166
+ }
167
+
168
+ &:first-of-type {
169
+ border-start-start-radius: var(--_border-radius);
170
+ border-start-end-radius: var(--_border-radius);
171
+ }
172
+
173
+ &:last-of-type {
174
+ border-end-start-radius: var(--_border-radius);
175
+ border-end-end-radius: var(--_border-radius);
176
+ }
177
+
178
+ & + & {
179
+ border-block-start: 1px solid var(--_divider-color);
180
+ margin-block-start: -1px;
181
+
182
+ &[disabled] {
183
+ border-block-start-color: color-mix(
184
+ in oklch,
185
+ var(--_divider-color) 40%,
186
+ transparent
187
+ );
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ }