opui-css 5.0.0 → 5.0.1

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 +282 -276
  2. package/LICENSE +21 -21
  3. package/MIGRATING.md +127 -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 +42 -42
  8. package/components/Anchor/Anchor.astro +51 -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 +29 -29
  13. package/components/Callout/Callout.astro +75 -75
  14. package/components/Card/Card.astro +36 -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 +41 -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 +194 -194
  65. package/core/palette.css +59 -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 +179 -179
  72. package/css/components/button.css +215 -215
  73. package/css/components/callout.css +109 -109
  74. package/css/components/card.css +117 -117
  75. package/css/components/checkbox.css +205 -205
  76. package/css/components/chip.css +87 -87
  77. package/css/components/description-list.css +80 -80
  78. package/css/components/dialog.css +68 -68
  79. package/css/components/divider.css +20 -20
  80. package/css/components/drawer.css +171 -171
  81. package/css/components/form.css +146 -146
  82. package/css/components/icon-button.css +139 -139
  83. package/css/components/link.css +21 -21
  84. package/css/components/list.css +345 -345
  85. package/css/components/progress.css +102 -97
  86. package/css/components/radio.css +172 -172
  87. package/css/components/range.css +337 -337
  88. package/css/components/select.css +169 -169
  89. package/css/components/spinner.css +37 -37
  90. package/css/components/switch.css +268 -268
  91. package/css/components/table.css +179 -179
  92. package/css/components/tabs.css +83 -83
  93. package/css/components/text-field.css +450 -450
  94. package/css/components/text-input.css +64 -64
  95. package/css/components/textarea.css +24 -24
  96. package/css/components/toast.css +161 -161
  97. package/css/components/toggle-button.css +87 -87
  98. package/css/components/toggle-group.css +56 -56
  99. package/css/components/tooltip.css +67 -67
  100. package/css/components/typography.css +585 -585
  101. package/css/components.css +41 -41
  102. package/css/imports.css +16 -16
  103. package/css/js/checkbox.js +21 -21
  104. package/css/js/toast.js +94 -94
  105. package/css/theme.css +132 -132
  106. package/dist/op.css +65 -65
  107. package/dist/op.css.map +1 -1
  108. package/dist/opui.components.css +5159 -5154
  109. package/dist/opui.components.css.map +1 -1
  110. package/dist/opui.css +5668 -5663
  111. package/dist/opui.css.map +1 -1
  112. package/env.d.ts +14 -14
  113. package/open-props.css +9 -9
  114. package/package.json +81 -81
package/css/components/toggle-group.css CHANGED
@@ -1,56 +1,56 @@
1
- @layer components.root {
2
- :where(.ui-toggle-group) {
3
- --_bg-color: var(--surface-default);
4
- --_border-color: var(--border-color);
5
- --_border-radius: var(--button-border-radius);
6
-
7
- background-color: var(--_bg-color);
8
- border: 1px solid var(--_border-color);
9
- border-radius: var(--_border-radius);
10
- display: inline-flex;
11
- inline-size: fit-content;
12
- overflow: hidden;
13
-
14
- /* Sizes */
15
- &.ui-small {
16
- .ui-toggle-button {
17
- --_size: var(--field-size-small);
18
- }
19
- }
20
-
21
- &.ui-x-small {
22
- .ui-toggle-button {
23
- --_size: var(--field-size-x-small);
24
- }
25
- }
26
-
27
- /* Toggle button */
28
- .ui-toggle-button {
29
- border: 0;
30
- border-radius: 0;
31
- margin: 0;
32
- }
33
-
34
- &:not(.ui-vertical) {
35
- .ui-toggle-button {
36
- border-inline-end: 1px solid var(--_border-color);
37
-
38
- &:last-of-type {
39
- border-inline-end: 0;
40
- }
41
- }
42
- }
43
-
44
- &.ui-vertical {
45
- flex-direction: column;
46
-
47
- .ui-toggle-button {
48
- border-block-end: 1px solid var(--_border-color);
49
-
50
- &:last-of-type {
51
- border-block-end: 0;
52
- }
53
- }
54
- }
55
- }
56
- }
1
+ @layer components.root {
2
+ :where(.ui-toggle-group) {
3
+ --_bg-color: var(--surface-default);
4
+ --_border-color: var(--border-color);
5
+ --_border-radius: var(--button-border-radius);
6
+
7
+ background-color: var(--_bg-color);
8
+ border: 1px solid var(--_border-color);
9
+ border-radius: var(--_border-radius);
10
+ display: inline-flex;
11
+ inline-size: fit-content;
12
+ overflow: hidden;
13
+
14
+ /* Sizes */
15
+ &.ui-small {
16
+ .ui-toggle-button {
17
+ --_size: var(--field-size-small);
18
+ }
19
+ }
20
+
21
+ &.ui-x-small {
22
+ .ui-toggle-button {
23
+ --_size: var(--field-size-x-small);
24
+ }
25
+ }
26
+
27
+ /* Toggle button */
28
+ .ui-toggle-button {
29
+ border: 0;
30
+ border-radius: 0;
31
+ margin: 0;
32
+ }
33
+
34
+ &:not(.ui-vertical) {
35
+ .ui-toggle-button {
36
+ border-inline-end: 1px solid var(--_border-color);
37
+
38
+ &:last-of-type {
39
+ border-inline-end: 0;
40
+ }
41
+ }
42
+ }
43
+
44
+ &.ui-vertical {
45
+ flex-direction: column;
46
+
47
+ .ui-toggle-button {
48
+ border-block-end: 1px solid var(--_border-color);
49
+
50
+ &:last-of-type {
51
+ border-block-end: 0;
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
package/css/components/tooltip.css CHANGED
@@ -1,67 +1,67 @@
1
- @layer components.extended {
2
- :where(.ui-tooltip) {
3
- --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
4
- --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
5
- --_tooltip-offset: var(--size-2);
6
-
7
- &>.ui-anchor-floating {
8
- background-color: var(--_tooltip-bg);
9
- border-radius: var(--radius-2);
10
- color: var(--_tooltip-color);
11
- font-size: var(--font-size-05);
12
- line-height: 1.3;
13
- margin: var(--_tooltip-offset);
14
- max-inline-size: 240px;
15
- /* UA sets overflow: auto on [popover], which clips the arrow. */
16
- overflow: visible;
17
- padding-block: var(--size-1);
18
- padding-inline: var(--size-2);
19
- position-area: var(--anchor-position-area, block-start);
20
- position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
21
- position-visibility: anchors-visible;
22
- text-align: center;
23
- text-wrap: pretty;
24
- }
25
-
26
- /* Optional arrow pointing from the tooltip toward the trigger.
27
- Anchored to the same --anchor so it flips together with the
28
- tooltip when position-try-fallbacks kicks in. */
29
- &.ui-with-arrow {
30
- --_arrow-size: var(--size-2);
31
-
32
- &>.ui-anchor-floating {
33
- /* Reserve space so the arrow doesn't overlap the trigger. */
34
- --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
35
- }
36
-
37
- &>.ui-anchor-floating::before {
38
- background-color: var(--_tooltip-bg);
39
- block-size: var(--_arrow-size);
40
- content: "";
41
- inline-size: var(--_arrow-size);
42
- inset-block-end: calc(var(--_arrow-size) / -2);
43
- inset-inline-start: 50%;
44
- position: absolute;
45
- rotate: 45deg;
46
- translate: -50% 0;
47
- }
48
- }
49
-
50
- /* Fade */
51
- &>.ui-anchor-floating[popover] {
52
- opacity: 0;
53
- transition:
54
- display 0.15s allow-discrete,
55
- opacity 0.15s var(--ease-out-1),
56
- overlay 0.15s allow-discrete;
57
-
58
- &:popover-open {
59
- opacity: 1;
60
-
61
- @starting-style {
62
- opacity: 0;
63
- }
64
- }
65
- }
66
- }
67
- }
1
+ @layer components.extended {
2
+ :where(.ui-tooltip) {
3
+ --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
4
+ --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
5
+ --_tooltip-offset: var(--size-2);
6
+
7
+ &>.ui-anchor-floating {
8
+ background-color: var(--_tooltip-bg);
9
+ border-radius: var(--radius-2);
10
+ color: var(--_tooltip-color);
11
+ font-size: var(--font-size-05);
12
+ line-height: 1.3;
13
+ margin: var(--_tooltip-offset);
14
+ max-inline-size: 240px;
15
+ /* UA sets overflow: auto on [popover], which clips the arrow. */
16
+ overflow: visible;
17
+ padding-block: var(--size-1);
18
+ padding-inline: var(--size-2);
19
+ position-area: var(--anchor-position-area, block-start);
20
+ position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
21
+ position-visibility: anchors-visible;
22
+ text-align: center;
23
+ text-wrap: pretty;
24
+ }
25
+
26
+ /* Optional arrow pointing from the tooltip toward the trigger.
27
+ Anchored to the same --anchor so it flips together with the
28
+ tooltip when position-try-fallbacks kicks in. */
29
+ &.ui-with-arrow {
30
+ --_arrow-size: var(--size-2);
31
+
32
+ &>.ui-anchor-floating {
33
+ /* Reserve space so the arrow doesn't overlap the trigger. */
34
+ --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
35
+ }
36
+
37
+ &>.ui-anchor-floating::before {
38
+ background-color: var(--_tooltip-bg);
39
+ block-size: var(--_arrow-size);
40
+ content: "";
41
+ inline-size: var(--_arrow-size);
42
+ inset-block-end: calc(var(--_arrow-size) / -2);
43
+ inset-inline-start: 50%;
44
+ position: absolute;
45
+ rotate: 45deg;
46
+ translate: -50% 0;
47
+ }
48
+ }
49
+
50
+ /* Fade */
51
+ &>.ui-anchor-floating[popover] {
52
+ opacity: 0;
53
+ transition:
54
+ display 0.15s allow-discrete,
55
+ opacity 0.15s var(--ease-out-1),
56
+ overlay 0.15s allow-discrete;
57
+
58
+ &:popover-open {
59
+ opacity: 1;
60
+
61
+ @starting-style {
62
+ opacity: 0;
63
+ }
64
+ }
65
+ }
66
+ }
67
+ }