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
@@ -1,25 +1,25 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- checked?: boolean
5
- disabled?: boolean
6
- id?: string
7
- name?: string
8
- required?: boolean
9
- value?: string
10
- }
11
-
12
- const { checked, disabled, id, name, required, value, ...rest } = Astro.props
13
- ---
14
-
15
- <input
16
- type="checkbox"
17
- role="switch"
18
- {checked}
19
- {disabled}
20
- {id}
21
- {name}
22
- {required}
23
- {value}
24
- {...rest}
25
- />
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ checked?: boolean
5
+ disabled?: boolean
6
+ id?: string
7
+ name?: string
8
+ required?: boolean
9
+ value?: string
10
+ }
11
+
12
+ const { checked, disabled, id, name, required, value, ...rest } = Astro.props
13
+ ---
14
+
15
+ <input
16
+ type="checkbox"
17
+ role="switch"
18
+ {checked}
19
+ {disabled}
20
+ {id}
21
+ {name}
22
+ {required}
23
+ {value}
24
+ {...rest}
25
+ />
@@ -1,13 +1,13 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- }
5
-
6
- export const title = "Table Body"
7
-
8
- const { ...rest } = Astro.props
9
- ---
10
-
11
- <tbody {...rest}>
12
- <slot />
13
- </tbody>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ }
5
+
6
+ export const title = "Table Body"
7
+
8
+ const { ...rest } = Astro.props
9
+ ---
10
+
11
+ <tbody {...rest}>
12
+ <slot />
13
+ </tbody>
@@ -1,13 +1,13 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- }
5
-
6
- export const title = "Table Cell"
7
-
8
- const { ...rest } = Astro.props
9
- ---
10
-
11
- <td {...rest}>
12
- <slot />
13
- </td>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ }
5
+
6
+ export const title = "Table Cell"
7
+
8
+ const { ...rest } = Astro.props
9
+ ---
10
+
11
+ <td {...rest}>
12
+ <slot />
13
+ </td>
@@ -1,15 +1,15 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- width?: string
5
- }
6
-
7
- export const title = "Table Column"
8
-
9
- const { width, ...rest } = Astro.props
10
- ---
11
-
12
- <col
13
- style={width ? (width.includes(":") ? width : `width: ${width}`) : undefined}
14
- {...rest}
15
- />
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ width?: string
5
+ }
6
+
7
+ export const title = "Table Column"
8
+
9
+ const { width, ...rest } = Astro.props
10
+ ---
11
+
12
+ <col
13
+ style={width ? (width.includes(":") ? width : `width: ${width}`) : undefined}
14
+ {...rest}
15
+ />
@@ -1,13 +1,13 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- }
5
-
6
- export const title = "Table Column Group"
7
-
8
- const { ...rest } = Astro.props
9
- ---
10
-
11
- <colgroup {...rest}>
12
- <slot />
13
- </colgroup>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ }
5
+
6
+ export const title = "Table Column Group"
7
+
8
+ const { ...rest } = Astro.props
9
+ ---
10
+
11
+ <colgroup {...rest}>
12
+ <slot />
13
+ </colgroup>
@@ -1,13 +1,13 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- }
5
-
6
- export const title = "Table Head"
7
-
8
- const { ...rest } = Astro.props
9
- ---
10
-
11
- <thead {...rest}>
12
- <slot />
13
- </thead>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ }
5
+
6
+ export const title = "Table Head"
7
+
8
+ const { ...rest } = Astro.props
9
+ ---
10
+
11
+ <thead {...rest}>
12
+ <slot />
13
+ </thead>
@@ -1,13 +1,13 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- }
5
-
6
- export const title = "Table Header Cell"
7
-
8
- const { ...rest } = Astro.props
9
- ---
10
-
11
- <th {...rest}>
12
- <slot />
13
- </th>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ }
5
+
6
+ export const title = "Table Header Cell"
7
+
8
+ const { ...rest } = Astro.props
9
+ ---
10
+
11
+ <th {...rest}>
12
+ <slot />
13
+ </th>
@@ -1,13 +1,13 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- }
5
-
6
- export const title = "Table Row"
7
-
8
- const { ...rest } = Astro.props
9
- ---
10
-
11
- <tr {...rest}>
12
- <slot />
13
- </tr>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ }
5
+
6
+ export const title = "Table Row"
7
+
8
+ const { ...rest } = Astro.props
9
+ ---
10
+
11
+ <tr {...rest}>
12
+ <slot />
13
+ </tr>
@@ -1,18 +1,18 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- class?: string
5
- variant?: "dense" | "spacious"
6
- }
7
-
8
- export const title = "Table"
9
-
10
- const { class: className, variant, ...rest } = Astro.props
11
- ---
12
-
13
- <table
14
- class:list={["ui-table", className, variant && `ui-${variant}`]}
15
- {...rest}
16
- >
17
- <slot />
18
- </table>
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ class?: string
5
+ variant?: "dense" | "spacious"
6
+ }
7
+
8
+ export const title = "Table"
9
+
10
+ const { class: className, variant, ...rest } = Astro.props
11
+ ---
12
+
13
+ <table
14
+ class:list={["ui-table", className, variant && `ui-${variant}`]}
15
+ {...rest}
16
+ >
17
+ <slot />
18
+ </table>
@@ -1,20 +1,20 @@
1
- import Table from "./Table.astro"
2
- import Head from "./Head.astro"
3
- import Body from "./Body.astro"
4
- import Row from "./Row.astro"
5
- import HeaderCell from "./HeaderCell.astro"
6
- import Cell from "./Cell.astro"
7
- import Column from "./Column.astro"
8
- import ColumnGroup from "./ColumnGroup.astro"
9
-
10
- export { Head, Body, Row, HeaderCell, Cell, Column, ColumnGroup }
11
-
12
- export default Object.assign(Table, {
13
- Head,
14
- Body,
15
- Row,
16
- HeaderCell,
17
- Cell,
18
- Column,
19
- ColumnGroup,
20
- })
1
+ import Table from "./Table.astro"
2
+ import Head from "./Head.astro"
3
+ import Body from "./Body.astro"
4
+ import Row from "./Row.astro"
5
+ import HeaderCell from "./HeaderCell.astro"
6
+ import Cell from "./Cell.astro"
7
+ import Column from "./Column.astro"
8
+ import ColumnGroup from "./ColumnGroup.astro"
9
+
10
+ export { Head, Body, Row, HeaderCell, Cell, Column, ColumnGroup }
11
+
12
+ export default Object.assign(Table, {
13
+ Head,
14
+ Body,
15
+ Row,
16
+ HeaderCell,
17
+ Cell,
18
+ Column,
19
+ ColumnGroup,
20
+ })
@@ -1,28 +1,28 @@
1
- ---
2
- type Props = {
3
- [key: string]: any
4
- class?: string
5
- name?: string
6
- }
7
-
8
- export const title = "Tabs"
9
-
10
- const { $id } = Astro.locals
11
- const { class: className, name, ...rest } = Astro.props
12
-
13
- const groupName = name || $id("tabs")
14
-
15
- const originalGroupName = Astro.locals.tabsGroupName
16
- Astro.locals.tabsGroupName = groupName
17
-
18
- const html = await Astro.slots.render("default")
19
-
20
- Astro.locals.tabsGroupName = originalGroupName
21
- ---
22
-
23
- <div
24
- class:list={["ui-tabs", className]}
25
- role="tablist"
26
- {...rest}
27
- set:html={html}
28
- />
1
+ ---
2
+ type Props = {
3
+ [key: string]: any
4
+ class?: string
5
+ name?: string
6
+ }
7
+
8
+ export const title = "Tabs"
9
+
10
+ const { $id } = Astro.locals
11
+ const { class: className, name, ...rest } = Astro.props
12
+
13
+ const groupName = name || $id("tabs")
14
+
15
+ const originalGroupName = Astro.locals.tabsGroupName
16
+ Astro.locals.tabsGroupName = groupName
17
+
18
+ const html = await Astro.slots.render("default")
19
+
20
+ Astro.locals.tabsGroupName = originalGroupName
21
+ ---
22
+
23
+ <div
24
+ class:list={["ui-tabs", className]}
25
+ role="tablist"
26
+ {...rest}
27
+ set:html={html}
28
+ />
@@ -1,47 +1,47 @@
1
- ---
2
- type Props = {
3
- class?: string
4
- name?: string
5
- open?: boolean
6
- tabId?: string
7
- panelId?: string
8
- [key: string]: any
9
- }
10
-
11
- const { $id } = Astro.locals
12
- const {
13
- class: className,
14
- name,
15
- open,
16
- tabId = $id("tab"),
17
- panelId = $id("panel"),
18
- ...rest
19
- } = Astro.props
20
-
21
- const tabsGroupName = name || Astro.locals.tabsGroupName
22
- const originalGroupName = Astro.locals.tabsGroupName
23
- Astro.locals.tabsGroupName = tabsGroupName
24
-
25
- const originalTabId = Astro.locals.currentTabId
26
- const originalPanelId = Astro.locals.currentPanelId
27
-
28
- Astro.locals.currentTabId = tabId
29
- Astro.locals.currentPanelId = panelId
30
-
31
- const html = await Astro.slots.render("default")
32
-
33
- Astro.locals.currentTabId = originalTabId
34
- Astro.locals.currentPanelId = originalPanelId
35
- Astro.locals.tabsGroupName = originalGroupName
36
- ---
37
-
38
- <input
39
- aria-controls={panelId}
40
- checked={open}
41
- class:list={["ui-tab-input", className]}
42
- id={tabId}
43
- name={tabsGroupName}
44
- type="radio"
45
- {...rest}
46
- />
47
- <Fragment set:html={html} />
1
+ ---
2
+ type Props = {
3
+ class?: string
4
+ name?: string
5
+ open?: boolean
6
+ tabId?: string
7
+ panelId?: string
8
+ [key: string]: any
9
+ }
10
+
11
+ const { $id } = Astro.locals
12
+ const {
13
+ class: className,
14
+ name,
15
+ open,
16
+ tabId = $id("tab"),
17
+ panelId = $id("panel"),
18
+ ...rest
19
+ } = Astro.props
20
+
21
+ const tabsGroupName = name || Astro.locals.tabsGroupName
22
+ const originalGroupName = Astro.locals.tabsGroupName
23
+ Astro.locals.tabsGroupName = tabsGroupName
24
+
25
+ const originalTabId = Astro.locals.currentTabId
26
+ const originalPanelId = Astro.locals.currentPanelId
27
+
28
+ Astro.locals.currentTabId = tabId
29
+ Astro.locals.currentPanelId = panelId
30
+
31
+ const html = await Astro.slots.render("default")
32
+
33
+ Astro.locals.currentTabId = originalTabId
34
+ Astro.locals.currentPanelId = originalPanelId
35
+ Astro.locals.tabsGroupName = originalGroupName
36
+ ---
37
+
38
+ <input
39
+ aria-controls={panelId}
40
+ checked={open}
41
+ class:list={["ui-tab-input", className]}
42
+ id={tabId}
43
+ name={tabsGroupName}
44
+ type="radio"
45
+ {...rest}
46
+ />
47
+ <Fragment set:html={html} />
@@ -1,21 +1,21 @@
1
- ---
2
- type Props = {
3
- class?: string
4
- panelId?: string
5
- tabId?: string
6
- [key: string]: any
7
- }
8
-
9
- const { class: className, panelId, tabId, ...rest } = Astro.props
10
- const { currentPanelId, currentTabId } = Astro.locals
11
- ---
12
-
13
- <div
14
- id={panelId || currentPanelId}
15
- class:list={["ui-tab-panel", className]}
16
- role="tabpanel"
17
- aria-labelledby={tabId || currentTabId}
18
- {...rest}
19
- >
20
- <slot />
21
- </div>
1
+ ---
2
+ type Props = {
3
+ class?: string
4
+ panelId?: string
5
+ tabId?: string
6
+ [key: string]: any
7
+ }
8
+
9
+ const { class: className, panelId, tabId, ...rest } = Astro.props
10
+ const { currentPanelId, currentTabId } = Astro.locals
11
+ ---
12
+
13
+ <div
14
+ id={panelId || currentPanelId}
15
+ class:list={["ui-tab-panel", className]}
16
+ role="tabpanel"
17
+ aria-labelledby={tabId || currentTabId}
18
+ {...rest}
19
+ >
20
+ <slot />
21
+ </div>
@@ -1,19 +1,19 @@
1
- ---
2
- type Props = {
3
- class?: string
4
- tabId?: string
5
- [key: string]: any
6
- }
7
-
8
- const { class: className, tabId, ...rest } = Astro.props
9
- const { currentTabId } = Astro.locals
10
- ---
11
-
12
- <label
13
- for={tabId || currentTabId}
14
- class:list={["ui-tab-label", className]}
15
- role="tab"
16
- {...rest}
17
- >
18
- <slot />
19
- </label>
1
+ ---
2
+ type Props = {
3
+ class?: string
4
+ tabId?: string
5
+ [key: string]: any
6
+ }
7
+
8
+ const { class: className, tabId, ...rest } = Astro.props
9
+ const { currentTabId } = Astro.locals
10
+ ---
11
+
12
+ <label
13
+ for={tabId || currentTabId}
14
+ class:list={["ui-tab-label", className]}
15
+ role="tab"
16
+ {...rest}
17
+ >
18
+ <slot />
19
+ </label>
@@ -1,14 +1,14 @@
1
- import TabsOrig from "./Tabs.astro"
2
- import TabsItem from "./TabsItem.astro"
3
- import TabsTab from "./TabsTab.astro"
4
- import TabsPanel from "./TabsPanel.astro"
5
-
6
- export { TabsItem, TabsTab as Tab, TabsPanel as Panel }
7
-
8
- const Tabs = Object.assign(TabsOrig, {
9
- Item: TabsItem,
10
- Tab: TabsTab,
11
- Panel: TabsPanel,
12
- })
13
-
14
- export default Tabs as any
1
+ import TabsOrig from "./Tabs.astro"
2
+ import TabsItem from "./TabsItem.astro"
3
+ import TabsTab from "./TabsTab.astro"
4
+ import TabsPanel from "./TabsPanel.astro"
5
+
6
+ export { TabsItem, TabsTab as Tab, TabsPanel as Panel }
7
+
8
+ const Tabs = Object.assign(TabsOrig, {
9
+ Item: TabsItem,
10
+ Tab: TabsTab,
11
+ Panel: TabsPanel,
12
+ })
13
+
14
+ export default Tabs as any