@ostack.tech/ui 0.10.5 → 0.11.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 (118) hide show
  1. package/dist/chunks/{en-DwZKZVGL.js → en-DtnihkTA.js} +20 -3
  2. package/dist/chunks/en-DtnihkTA.js.map +1 -0
  3. package/dist/locales/en-GB.js +1 -1
  4. package/dist/locales/en-US.js +1 -1
  5. package/dist/locales/fr-FR.js +19 -2
  6. package/dist/locales/fr-FR.js.map +1 -1
  7. package/dist/locales/pt-PT.js +19 -2
  8. package/dist/locales/pt-PT.js.map +1 -1
  9. package/dist/ostack-ui.css +192 -113
  10. package/dist/ostack-ui.js +1467 -682
  11. package/dist/ostack-ui.js.map +1 -1
  12. package/dist/types/components/Alert/Alert.d.ts +3 -3
  13. package/dist/types/components/AlertDialog/AlertDialog.d.ts +6 -2
  14. package/dist/types/components/Button/Button.d.ts +7 -7
  15. package/dist/types/components/Calendar/Calendar.d.ts +60 -4
  16. package/dist/types/components/Card/Card.d.ts +2 -2
  17. package/dist/types/components/Code/Code.d.ts +1 -1
  18. package/dist/types/components/Collapsible/Collapsible.d.ts +26 -8
  19. package/dist/types/components/Collapsible/CollapsibleContext.d.ts +2 -2
  20. package/dist/types/components/Collapsible/CollapsibleTrigger.d.ts +22 -6
  21. package/dist/types/components/CommandMenu/CommandMenu.d.ts +1 -1
  22. package/dist/types/components/Container/Container.d.ts +21 -10
  23. package/dist/types/components/DataTable/DataTable.d.ts +63 -29
  24. package/dist/types/components/DataTable/DataTableContext.d.ts +3 -1
  25. package/dist/types/components/DateInput/DateInput.d.ts +8 -5
  26. package/dist/types/components/DateRangeInput/DateRangeInput.d.ts +6 -5
  27. package/dist/types/components/DescriptionList/DescriptionList.d.ts +38 -0
  28. package/dist/types/components/DescriptionList/DescriptionListItem.d.ts +15 -0
  29. package/dist/types/components/DescriptionList/index.d.ts +2 -0
  30. package/dist/types/components/Dialog/Dialog.d.ts +1 -2
  31. package/dist/types/components/Dialog/DialogContent.d.ts +3 -3
  32. package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +1 -1
  33. package/dist/types/components/FieldGroup/FieldGroup.d.ts +42 -14
  34. package/dist/types/components/Grid/Grid.d.ts +64 -11
  35. package/dist/types/components/Icon/Icon.d.ts +1 -1
  36. package/dist/types/components/IconButton/IconButton.d.ts +8 -10
  37. package/dist/types/components/Input/Input.d.ts +2 -3
  38. package/dist/types/components/Link/Link.d.ts +1 -3
  39. package/dist/types/components/Mark/Mark.d.ts +1 -1
  40. package/dist/types/components/MenuList/MenuList.d.ts +5 -0
  41. package/dist/types/components/MenuList/MenuListItem.d.ts +3 -3
  42. package/dist/types/components/NumericInput/NumericInput.d.ts +2 -2
  43. package/dist/types/components/Popover/Popover.d.ts +32 -19
  44. package/dist/types/components/Popover/PopoverClose.d.ts +10 -3
  45. package/dist/types/components/Printer/Printer.d.ts +4 -4
  46. package/dist/types/components/Printer/PrinterContentContext.d.ts +4 -4
  47. package/dist/types/components/Printer/PrinterContext.d.ts +2 -2
  48. package/dist/types/components/Root/Root.d.ts +7 -7
  49. package/dist/types/components/Select/Select.d.ts +6 -0
  50. package/dist/types/components/Select/SelectContext.d.ts +2 -1
  51. package/dist/types/components/Select/SelectNative.d.ts +7 -0
  52. package/dist/types/components/Separator/Separator.d.ts +39 -1
  53. package/dist/types/components/Stack/Stack.d.ts +27 -5
  54. package/dist/types/components/Stepper/Step.d.ts +21 -6
  55. package/dist/types/components/Stepper/StepContent.d.ts +13 -4
  56. package/dist/types/components/Stepper/StepList.d.ts +8 -3
  57. package/dist/types/components/Stepper/Stepper.d.ts +51 -34
  58. package/dist/types/components/Stepper/StepperContext.d.ts +77 -4
  59. package/dist/types/components/Stepper/StepperFinishTrigger.d.ts +37 -0
  60. package/dist/types/components/Stepper/StepperNextTrigger.d.ts +34 -0
  61. package/dist/types/components/Stepper/StepperPreviousTrigger.d.ts +37 -0
  62. package/dist/types/components/Stepper/StepperState.d.ts +8 -0
  63. package/dist/types/components/Stepper/index.d.ts +5 -0
  64. package/dist/types/components/Table/Table.d.ts +2 -2
  65. package/dist/types/components/Table/TableColumn.d.ts +1 -1
  66. package/dist/types/components/Tabs/Tab.d.ts +6 -1
  67. package/dist/types/components/Tabs/Tabs.d.ts +1 -1
  68. package/dist/types/components/Toast/Toast.d.ts +81 -15
  69. package/dist/types/components/Tooltip/Tooltip.d.ts +4 -0
  70. package/dist/types/components/VisuallyHidden/VisuallyHidden.d.ts +22 -1
  71. package/dist/types/index.d.ts +1 -2
  72. package/dist/types/providers/AlertDialogProvider/AlertDialogProviderContext.d.ts +2 -2
  73. package/dist/types/providers/ErrorReportingProvider/ErrorReport.d.ts +3 -3
  74. package/dist/types/providers/ErrorReportingProvider/ErrorReportingProvider.d.ts +2 -2
  75. package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts +7 -0
  76. package/dist/types/providers/ToastManagerProvider/ToastManagerContext.d.ts +4 -2
  77. package/dist/types/utils/control.d.ts +1 -1
  78. package/dist/types/utils/keyboardShortcut.d.ts +1 -1
  79. package/dist/types/utils/useSearchParam.d.ts +5 -5
  80. package/dist/types/utils/useSearchParams.d.ts +7 -4
  81. package/package.json +3 -3
  82. package/scss/_utils.scss +3 -0
  83. package/scss/components/Checkbox/_Checkbox.scss +1 -1
  84. package/scss/components/Collapsible/_Collapsible-variables.scss +0 -1
  85. package/scss/components/Collapsible/_Collapsible.scss +2 -6
  86. package/scss/components/Container/_Container.scss +16 -5
  87. package/scss/components/DataTable/_DataTable-variables.scss +8 -5
  88. package/scss/components/DataTable/_DataTable.scss +2 -0
  89. package/scss/components/DateRangeInput/_DateRangeInput.scss +6 -1
  90. package/scss/components/DescriptionList/_DescriptionList-variables.scss +21 -0
  91. package/scss/components/DescriptionList/_DescriptionList.scss +33 -0
  92. package/scss/components/DropdownMenu/_DropdownMenu.scss +1 -3
  93. package/scss/components/FeedbackList/_FeedbackList.scss +1 -0
  94. package/scss/components/FeedbackPopover/_FeedbackPopover-variables.scss +9 -9
  95. package/scss/components/FeedbackPopover/_FeedbackPopover.scss +1 -1
  96. package/scss/components/Field/_Field-variables.scss +9 -0
  97. package/scss/components/Field/_Field.scss +6 -8
  98. package/scss/components/Input/_Input.scss +5 -0
  99. package/scss/components/Label/_Label-variables.scss +1 -1
  100. package/scss/components/MenuList/_MenuList.scss +4 -1
  101. package/scss/components/RadioGroup/_Radio.scss +1 -1
  102. package/scss/components/Separator/_Separator-variables.scss +11 -0
  103. package/scss/components/Separator/_Separator.scss +13 -5
  104. package/scss/components/Stepper/_Stepper-variables.scss +37 -9
  105. package/scss/components/Stepper/_Stepper.scss +69 -22
  106. package/scss/components/Tabs/_Tabs-variables.scss +1 -0
  107. package/scss/components/Tabs/_Tabs.scss +7 -4
  108. package/scss/index.scss +1 -0
  109. package/scss/scss/placeholders/checkable/_checkable.scss +3 -3
  110. package/scss/scss/placeholders/control/_control.scss +1 -1
  111. package/scss/scss/placeholders/menu/_menu.scss +5 -16
  112. package/scss/scss/utils/_animation.scss +1 -1
  113. package/scss/scss/utils/_transition.scss +1 -1
  114. package/dist/chunks/en-DwZKZVGL.js.map +0 -1
  115. package/dist/types/components/DatePicker/DatePicker.d.ts +0 -27
  116. package/dist/types/components/DatePicker/index.d.ts +0 -1
  117. package/dist/types/components/DateRangePicker/DateRangePicker.d.ts +0 -41
  118. package/dist/types/components/DateRangePicker/index.d.ts +0 -1
@@ -133,7 +133,7 @@
133
133
  color: var(--o-ui-notification-color);
134
134
  box-shadow: var(--o-ui-notification-box-shadow);
135
135
  }
136
- @media (prefers-reduced-motion: no-preference) {
136
+ @media screen and (prefers-reduced-motion: no-preference) {
137
137
  .o-ui-toast, .o-ui-alert {
138
138
  transition-property: var(--o-ui-transition-property);
139
139
  transition-duration: var(--o-ui-transition-duration);
@@ -212,7 +212,7 @@
212
212
  -webkit-user-select: none;
213
213
  user-select: none;
214
214
  }
215
- @media (prefers-reduced-motion: no-preference) {
215
+ @media screen and (prefers-reduced-motion: no-preference) {
216
216
  .o-ui-icon-button, .o-ui-button {
217
217
  transition-property: var(--o-ui-transition-property);
218
218
  transition-duration: var(--o-ui-transition-duration);
@@ -551,7 +551,7 @@
551
551
  color: inherit;
552
552
  font: inherit;
553
553
  }
554
- @media (prefers-reduced-motion: no-preference) {
554
+ @media screen and (prefers-reduced-motion: no-preference) {
555
555
  .o-ui-calendar__day-inner {
556
556
  transition-property: box-shadow;
557
557
  transition-duration: var(--o-ui-transition-duration);
@@ -728,7 +728,7 @@
728
728
  background-color: var(--o-ui-card-background-color);
729
729
  color: var(--o-ui-card-color);
730
730
  }
731
- @media (prefers-reduced-motion: no-preference) {
731
+ @media screen and (prefers-reduced-motion: no-preference) {
732
732
  .o-ui-card--merged {
733
733
  transition-property: var(--o-ui-transition-property);
734
734
  transition-duration: var(--o-ui-transition-duration);
@@ -808,17 +808,17 @@
808
808
  color: var(--o-ui-checkable-color);
809
809
  box-shadow: var(--o-ui-checkable-box-shadow, none);
810
810
  }
811
- @media (prefers-reduced-motion: no-preference) {
811
+ @media screen and (prefers-reduced-motion: no-preference) {
812
812
  .o-ui-radio, .o-ui-checkbox {
813
813
  transition-property: var(--o-ui-transition-property);
814
814
  transition-duration: var(--o-ui-transition-duration);
815
815
  transition-timing-function: var(--o-ui-transition-timing-function);
816
816
  }
817
817
  }
818
- .o-ui-radio:not(:disabled, [data-loading], [data-readonly]), .o-ui-checkbox:not(:disabled, [data-loading], [data-readonly]) {
818
+ .o-ui-radio:not(:disabled, [data-disabled], [data-readonly]), .o-ui-checkbox:not(:disabled, [data-disabled], [data-readonly]) {
819
819
  cursor: pointer;
820
820
  }
821
- .o-ui-radio:is(:disabled, [data-loading]), .o-ui-checkbox:is(:disabled, [data-loading]) {
821
+ .o-ui-radio:is(:disabled, [data-disabled]), .o-ui-checkbox:is(:disabled, [data-disabled]) {
822
822
  cursor: not-allowed;
823
823
  opacity: 0.5;
824
824
  }
@@ -854,10 +854,10 @@
854
854
  border-color: var(--o-ui-checkable-readonly-focus-status-border-color, var(--o-ui-checkable-readonly-status-border-color, var(--o-ui-checkable-readonly-border-color, var(--o-ui-checkable-border-color))));
855
855
  box-shadow: var(--o-ui-checkable-readonly-focus-status-box-shadow, var(--o-ui-checkable-readonly-focus-box-shadow, var(--o-ui-checkable-focus-box-shadow, var(--o-ui-checkable-box-shadow))));
856
856
  }
857
- .o-ui-radio:active:not(:disabled, [data-loading], [data-readonly]), .o-ui-checkbox:active:not(:disabled, [data-loading], [data-readonly]) {
857
+ .o-ui-radio:active:not(:disabled, [data-disabled], [data-readonly]), .o-ui-checkbox:active:not(:disabled, [data-disabled], [data-readonly]) {
858
858
  background-color: var(--o-ui-checkable-active-background-color);
859
859
  }
860
- .o-ui-radio:active:not(:disabled, [data-loading], [data-readonly])[data-status], .o-ui-checkbox:active:not(:disabled, [data-loading], [data-readonly])[data-status] {
860
+ .o-ui-radio:active:not(:disabled, [data-disabled], [data-readonly])[data-status], .o-ui-checkbox:active:not(:disabled, [data-disabled], [data-readonly])[data-status] {
861
861
  background-color: var(--o-ui-checkable-active-status-background-color, var(--o-ui-checkable-active-background-color));
862
862
  }
863
863
  .o-ui-radio__root, .o-ui-checkbox__root {
@@ -889,10 +889,10 @@
889
889
  .o-ui-radio[data-state=checked] ~ .o-ui-radio__label-container > [data-status].o-ui-radio__label, .o-ui-checkbox[data-state=checked] ~ .o-ui-checkbox__label-container > [data-status].o-ui-checkbox__label, .o-ui-checkbox[data-state=indeterminate] ~ .o-ui-checkbox__label-container > [data-status].o-ui-checkbox__label {
890
890
  color: !important;
891
891
  }
892
- .o-ui-radio:is(:disabled, [data-loading]) ~ .o-ui-radio__label-container > .o-ui-radio__label, .o-ui-checkbox:is(:disabled, [data-loading]) ~ .o-ui-checkbox__label-container > .o-ui-checkbox__label {
892
+ .o-ui-radio:is(:disabled, [data-disabled]) ~ .o-ui-radio__label-container > .o-ui-radio__label, .o-ui-checkbox:is(:disabled, [data-disabled]) ~ .o-ui-checkbox__label-container > .o-ui-checkbox__label {
893
893
  opacity: 0.5;
894
894
  }
895
- @media (prefers-reduced-motion: no-preference) {
895
+ @media screen and (prefers-reduced-motion: no-preference) {
896
896
  .o-ui-radio__indicator, .o-ui-checkbox__indicator {
897
897
  transition-property: var(--o-ui-transition-property);
898
898
  transition-duration: var(--o-ui-transition-duration);
@@ -1072,35 +1072,32 @@ a > .o-ui-code {
1072
1072
  color: inherit;
1073
1073
  }
1074
1074
 
1075
- .o-ui-collapsible__trigger {
1076
- color: inherit !important;
1077
- }
1078
1075
  .o-ui-collapsible__content {
1079
1076
  overflow: hidden;
1080
1077
  }
1081
- .o-ui-collapsible__content[data-direction=vertical] {
1078
+ .o-ui-collapsible__content[data-orientation=vertical] {
1082
1079
  --o-ui-animation-height: var(--radix-collapsible-content-height);
1083
1080
  }
1084
- @media (prefers-reduced-motion: no-preference) {
1085
- .o-ui-collapsible__content[data-direction=vertical][data-state=open] {
1081
+ @media screen and (prefers-reduced-motion: no-preference) {
1082
+ .o-ui-collapsible__content[data-orientation=vertical][data-state=open] {
1086
1083
  animation: o-ui-expand-vertical 0.35s ease;
1087
1084
  }
1088
1085
  }
1089
- @media (prefers-reduced-motion: no-preference) {
1090
- .o-ui-collapsible__content[data-direction=vertical][data-state=closed] {
1086
+ @media screen and (prefers-reduced-motion: no-preference) {
1087
+ .o-ui-collapsible__content[data-orientation=vertical][data-state=closed] {
1091
1088
  animation: o-ui-collapse-vertical 0.35s ease;
1092
1089
  }
1093
1090
  }
1094
- .o-ui-collapsible__content[data-direction=horizontal] {
1091
+ .o-ui-collapsible__content[data-orientation=horizontal] {
1095
1092
  --o-ui-animation-width: var(--radix-collapsible-content-width);
1096
1093
  }
1097
- @media (prefers-reduced-motion: no-preference) {
1098
- .o-ui-collapsible__content[data-direction=horizontal][data-state=open] {
1094
+ @media screen and (prefers-reduced-motion: no-preference) {
1095
+ .o-ui-collapsible__content[data-orientation=horizontal][data-state=open] {
1099
1096
  animation: o-ui-expand-horizontal 0.35s ease;
1100
1097
  }
1101
1098
  }
1102
- @media (prefers-reduced-motion: no-preference) {
1103
- .o-ui-collapsible__content[data-direction=horizontal][data-state=closed] {
1099
+ @media screen and (prefers-reduced-motion: no-preference) {
1100
+ .o-ui-collapsible__content[data-orientation=horizontal][data-state=closed] {
1104
1101
  animation: o-ui-collapse-horizontal 0.35s ease;
1105
1102
  }
1106
1103
  }
@@ -1154,23 +1151,20 @@ a > .o-ui-code {
1154
1151
  color: var(--o-ui-menu-item-color, );
1155
1152
  background-color: var(--o-ui-menu-item-background-color);
1156
1153
  }
1157
- @media (prefers-reduced-motion: no-preference) {
1154
+ @media screen and (prefers-reduced-motion: no-preference) {
1158
1155
  .o-ui-menu-list__item-action {
1159
1156
  transition-property: var(--o-ui-transition-property);
1160
1157
  transition-duration: var(--o-ui-transition-duration);
1161
1158
  transition-timing-function: var(--o-ui-transition-timing-function);
1162
1159
  }
1163
1160
  }
1164
- .o-ui-menu-list__item-action:is(button):not(:disabled):not([data-disabled=""]):not([data-disabled=true]):not([data-loading]) {
1161
+ .o-ui-menu-list__item-action:is(button):not(:disabled, [data-disabled]) {
1165
1162
  cursor: pointer;
1166
1163
  }
1167
- .o-ui-menu-list__item-action:any-link:not(:disabled):not([data-disabled=""]):not([data-disabled=true]):not([data-loading]) {
1164
+ .o-ui-menu-list__item-action:any-link:not(:disabled, [data-disabled]) {
1168
1165
  cursor: pointer;
1169
1166
  }
1170
- .o-ui-menu-list__item-action:is(:disabled,
1171
- [data-disabled=""],
1172
- [data-disabled=true],
1173
- [data-loading]) {
1167
+ .o-ui-menu-list__item-action:is(:disabled, [data-disabled]) {
1174
1168
  cursor: not-allowed;
1175
1169
  opacity: 0.5;
1176
1170
  }
@@ -1185,13 +1179,15 @@ a > .o-ui-code {
1185
1179
  --o-ui-menu-item-color: var(--o-ui-accent-a11);
1186
1180
  --o-ui-menu-item-icon-color: var(--o-ui-accent-a10);
1187
1181
  }
1188
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled=""]):not([data-disabled=true]),
1189
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled=""]):not([data-disabled=true]):not([data-loading]):hover {
1182
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled),
1183
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):not(:disabled,
1184
+ [data-disabled]):hover {
1190
1185
  --o-ui-menu-item-background-color: var(--o-ui-primary-a4);
1191
1186
  --o-ui-menu-item-keybinds-color: var(--o-ui-neutral-10);
1192
1187
  }
1193
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled=""]):not([data-disabled=true])[data-accent],
1194
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled=""]):not([data-disabled=true])[data-accent]:not([data-loading]):hover {
1188
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled)[data-accent],
1189
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled)[data-accent]:not(:disabled,
1190
+ [data-disabled]):hover {
1195
1191
  --o-ui-menu-item-background-color: var(--o-ui-accent-a4);
1196
1192
  }
1197
1193
  .o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected] {
@@ -1207,13 +1203,15 @@ a > .o-ui-code {
1207
1203
  --o-ui-menu-item-icon-color: var(--o-ui-accent-contrast);
1208
1204
  --o-ui-menu-item-keybinds-color: color-mix(in srgb, var(--o-ui-accent-contrast) 85%, transparent);
1209
1205
  }
1210
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected]),
1211
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected]):not([data-loading]):hover {
1206
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected]),
1207
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected]):not(:disabled,
1208
+ [data-disabled]):hover {
1212
1209
  --o-ui-menu-item-background-color: var(--o-ui-primary-a9);
1213
1210
  --o-ui-menu-item-keybinds-color: color-mix(in srgb, var(--o-ui-neutral-contrast) 85%, transparent);
1214
1211
  }
1215
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected])[data-accent],
1216
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected])[data-accent]:not([data-loading]):hover {
1212
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--solid:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected])[data-accent],
1213
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--solid:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--solid, .o-ui-menu-list__item-action--solid[data-selected])[data-accent]:not(:disabled,
1214
+ [data-disabled]):hover {
1217
1215
  --o-ui-menu-item-background-color: var(--o-ui-accent-a9);
1218
1216
  --o-ui-menu-item-keybinds-color: color-mix(in srgb, var(--o-ui-accent-contrast) 85%, transparent);
1219
1217
  }
@@ -1221,13 +1219,15 @@ a > .o-ui-code {
1221
1219
  --o-ui-menu-item-color: var(--o-ui-accent-a11);
1222
1220
  --o-ui-menu-item-icon-color: var(--o-ui-accent-a10);
1223
1221
  }
1224
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled=""]):not([data-disabled=true]),
1225
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled=""]):not([data-disabled=true]):not([data-loading]):hover {
1222
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled),
1223
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):not(:disabled,
1224
+ [data-disabled]):hover {
1226
1225
  --o-ui-menu-item-background-color: var(--o-ui-primary-a4);
1227
1226
  --o-ui-menu-item-keybinds-color: var(--o-ui-neutral-10);
1228
1227
  }
1229
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled=""]):not([data-disabled=true])[data-accent],
1230
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled=""]):not([data-disabled=true])[data-accent]:not([data-loading]):hover {
1228
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled)[data-accent],
1229
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled)[data-accent]:not(:disabled,
1230
+ [data-disabled]):hover {
1231
1231
  --o-ui-menu-item-background-color: var(--o-ui-accent-a4);
1232
1232
  }
1233
1233
  .o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected] {
@@ -1239,13 +1239,15 @@ a > .o-ui-code {
1239
1239
  --o-ui-menu-item-background-color: var(--o-ui-accent-a5);
1240
1240
  --o-ui-menu-item-icon-color: var(--o-ui-accent-a11);
1241
1241
  }
1242
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected]),
1243
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected]):not([data-loading]):hover {
1242
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected]),
1243
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected]):not(:disabled,
1244
+ [data-disabled]):hover {
1244
1245
  --o-ui-menu-item-background-color: var(--o-ui-primary-a5);
1245
1246
  --o-ui-menu-item-keybinds-color: var(--o-ui-neutral-11);
1246
1247
  }
1247
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected])[data-accent],
1248
- .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):not([data-disabled]):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected])[data-accent]:not([data-loading]):hover {
1248
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]):is([data-highlighted], [data-state=open], [data-selected]) .o-ui-menu-list__item-action--subtle:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected])[data-accent],
1249
+ .o-ui-menu-list__item:not([data-state=checked][data-hide-control]) .o-ui-menu-list__item-action--subtle:not(:disabled):is(.o-ui-menu-list__item[data-state=checked][data-hide-control] .o-ui-menu-list__item-action--subtle, .o-ui-menu-list__item-action--subtle[data-selected])[data-accent]:not(:disabled,
1250
+ [data-disabled]):hover {
1249
1251
  --o-ui-menu-item-background-color: var(--o-ui-accent-a5);
1250
1252
  }
1251
1253
  .o-ui-menu-list__item-content {
@@ -1326,12 +1328,12 @@ a > .o-ui-code {
1326
1328
  .o-ui-command-menu__dialog {
1327
1329
  --o-ui-animation-transform: translateY(-5px) scale(0.97);
1328
1330
  }
1329
- @media (prefers-reduced-motion: no-preference) {
1331
+ @media screen and (prefers-reduced-motion: no-preference) {
1330
1332
  .o-ui-command-menu__dialog[data-state=open] {
1331
1333
  animation: o-ui-transform-in 0.15s ease-out;
1332
1334
  }
1333
1335
  }
1334
- @media (prefers-reduced-motion: no-preference) {
1336
+ @media screen and (prefers-reduced-motion: no-preference) {
1335
1337
  .o-ui-command-menu__dialog[data-state=closed] {
1336
1338
  animation: o-ui-transform-out 0.15s ease-out;
1337
1339
  }
@@ -1406,10 +1408,16 @@ a > .o-ui-code {
1406
1408
 
1407
1409
  .o-ui-container {
1408
1410
  width: 100%;
1411
+ max-width: min(var(--o-ui-container-max-width, 100%), var(--o-ui-container-fluid-max-width, 100%));
1409
1412
  margin-left: auto;
1410
1413
  margin-right: auto;
1411
1414
  padding-left: var(--o-ui-container-left-gutter);
1412
1415
  padding-right: var(--o-ui-container-right-gutter);
1416
+ --o-ui-container-max-width-sm: 540px;
1417
+ --o-ui-container-max-width-md: 720px;
1418
+ --o-ui-container-max-width-lg: 960px;
1419
+ --o-ui-container-max-width-xl: 1140px;
1420
+ --o-ui-container-max-width-xxl: 1320px;
1413
1421
  --o-ui-container-left-gutter: calc(var(--o-ui-space) * 2.5);
1414
1422
  --o-ui-container-right-gutter: calc(var(--o-ui-space) * 2.5);
1415
1423
  }
@@ -1461,28 +1469,38 @@ a > .o-ui-code {
1461
1469
  }
1462
1470
 
1463
1471
  @media (min-width: 576px) {
1464
- .o-ui-container--sm {
1465
- max-width: 540px;
1472
+ .o-ui-container--fluid-sm {
1473
+ --o-ui-container-fluid-max-width: var(
1474
+ --o-ui-container-max-width-sm
1475
+ );
1466
1476
  }
1467
1477
  }
1468
1478
  @media (min-width: 768px) {
1469
- .o-ui-container--md, .o-ui-container--sm {
1470
- max-width: 720px;
1479
+ .o-ui-container--fluid-md, .o-ui-container--fluid-sm {
1480
+ --o-ui-container-fluid-max-width: var(
1481
+ --o-ui-container-max-width-md
1482
+ );
1471
1483
  }
1472
1484
  }
1473
1485
  @media (min-width: 992px) {
1474
- .o-ui-container--lg, .o-ui-container--md, .o-ui-container--sm {
1475
- max-width: 960px;
1486
+ .o-ui-container--fluid-lg, .o-ui-container--fluid-md, .o-ui-container--fluid-sm {
1487
+ --o-ui-container-fluid-max-width: var(
1488
+ --o-ui-container-max-width-lg
1489
+ );
1476
1490
  }
1477
1491
  }
1478
1492
  @media (min-width: 1200px) {
1479
- .o-ui-container--xl, .o-ui-container--lg, .o-ui-container--md, .o-ui-container--sm {
1480
- max-width: 1140px;
1493
+ .o-ui-container--fluid-xl, .o-ui-container--fluid-lg, .o-ui-container--fluid-md, .o-ui-container--fluid-sm {
1494
+ --o-ui-container-fluid-max-width: var(
1495
+ --o-ui-container-max-width-xl
1496
+ );
1481
1497
  }
1482
1498
  }
1483
1499
  @media (min-width: 1400px) {
1484
- .o-ui-container--xxl, .o-ui-container--xl, .o-ui-container--lg, .o-ui-container--md, .o-ui-container--sm {
1485
- max-width: 1320px;
1500
+ .o-ui-container--fluid-xxl, .o-ui-container--fluid-xl, .o-ui-container--fluid-lg, .o-ui-container--fluid-md, .o-ui-container--fluid-sm {
1501
+ --o-ui-container-fluid-max-width: var(
1502
+ --o-ui-container-max-width-xxl
1503
+ );
1486
1504
  }
1487
1505
  }
1488
1506
  .o-ui-control-addon {
@@ -1532,7 +1550,7 @@ a > .o-ui-code {
1532
1550
  border-top-right-radius: var(--o-ui-control-addon-edge-border-radius, var(--o-ui-control-addon-border-radius));
1533
1551
  border-bottom-right-radius: var(--o-ui-control-addon-edge-border-radius, var(--o-ui-control-addon-border-radius));
1534
1552
  }
1535
- @media (prefers-reduced-motion: no-preference) {
1553
+ @media screen and (prefers-reduced-motion: no-preference) {
1536
1554
  .o-ui-control-addon {
1537
1555
  transition-property: var(--o-ui-transition-property);
1538
1556
  transition-duration: var(--o-ui-transition-duration);
@@ -1625,7 +1643,7 @@ a > .o-ui-code {
1625
1643
  background-color: var(--o-ui-control-code-background-color);
1626
1644
  color: var(--o-ui-control-code-color);
1627
1645
  }
1628
- @media (prefers-reduced-motion: no-preference) {
1646
+ @media screen and (prefers-reduced-motion: no-preference) {
1629
1647
  .o-ui-control-code {
1630
1648
  transition-property: var(--o-ui-transition-property);
1631
1649
  transition-duration: var(--o-ui-transition-duration);
@@ -1684,8 +1702,6 @@ a > .o-ui-code {
1684
1702
  }
1685
1703
  .o-ui-data-table__rows-per-page-label {
1686
1704
  margin-right: var(--o-ui-space);
1687
- font-size: var(--o-ui-font-size-sm);
1688
- line-height: var(--o-ui-line-height-sm);
1689
1705
  font-weight: 400 !important;
1690
1706
  }
1691
1707
  .o-ui-data-table__rows-per-page-select-root, .o-ui-data-table__pagination-select-root {
@@ -1697,6 +1713,7 @@ a > .o-ui-code {
1697
1713
  align-items: center;
1698
1714
  font-size: var(--o-ui-font-size-sm);
1699
1715
  line-height: var(--o-ui-line-height-sm);
1716
+ font-weight: 400;
1700
1717
  }
1701
1718
  .o-ui-data-table__pagination-arrows {
1702
1719
  margin-left: calc(var(--o-ui-space) * 2);
@@ -1815,7 +1832,7 @@ a > .o-ui-code {
1815
1832
  .o-ui-input:focus, .o-ui-date-range-input:focus {
1816
1833
  outline: 0;
1817
1834
  }
1818
- .o-ui-input:is(:disabled, [data-loading]), .o-ui-date-range-input:is(:disabled, [data-loading]) {
1835
+ .o-ui-input:is(:disabled, [data-disabled]), .o-ui-date-range-input:is(:disabled, [data-disabled]) {
1819
1836
  opacity: 0.5;
1820
1837
  cursor: not-allowed;
1821
1838
  }
@@ -1887,7 +1904,7 @@ a > .o-ui-code {
1887
1904
  background-color: color-mix(in srgb, var(--o-ui-control-background-color, var(--o-ui-background-color)) 50%, transparent);
1888
1905
  cursor: not-allowed;
1889
1906
  }
1890
- @media (prefers-reduced-motion: no-preference) {
1907
+ @media screen and (prefers-reduced-motion: no-preference) {
1891
1908
  .o-ui-input__container, .o-ui-date-range-input__container {
1892
1909
  transition-property: var(--o-ui-transition-property);
1893
1910
  transition-duration: var(--o-ui-transition-duration);
@@ -1969,12 +1986,15 @@ a > .o-ui-code {
1969
1986
  .o-ui-date-range-input__container[data-variant=cell] {
1970
1987
  height: 100%;
1971
1988
  }
1989
+ .o-ui-date-range-input__popover-anchor {
1990
+ box-shadow: none;
1991
+ }
1972
1992
  .o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container {
1973
1993
  margin: calc(var(--o-ui-control-border-width) * -1);
1974
- background: none;
1975
1994
  }
1976
1995
  .o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container:not([data-focused]) {
1977
1996
  border-color: transparent;
1997
+ background: none;
1978
1998
  }
1979
1999
  .o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container:not(:first-child) {
1980
2000
  border-top-left-radius: 0;
@@ -1998,6 +2018,24 @@ a > .o-ui-code {
1998
2018
  .o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container:not(:last-child) > .o-ui-date-range-input__spinner:last-child {
1999
2019
  margin-right: calc(var(--o-ui-control-padding-x) - var(--o-ui-date-range-input-inset-x));
2000
2020
  }
2021
+ .o-ui-description-list {
2022
+ margin-bottom: 0;
2023
+ font-size: var(--o-ui-font-size-sm);
2024
+ line-height: var(--o-ui-line-height-sm);
2025
+ }
2026
+ .o-ui-description-list__item {
2027
+ display: flex;
2028
+ flex-direction: column;
2029
+ }
2030
+ .o-ui-description-list__term {
2031
+ margin-bottom: var(--o-ui-space);
2032
+ font-weight: 500;
2033
+ color: var(--o-ui-neutral-a11);
2034
+ }
2035
+ .o-ui-description-list__details {
2036
+ margin: 0;
2037
+ }
2038
+
2001
2039
  .o-ui-dialog {
2002
2040
  box-shadow: var(--o-ui-box-shadow-lg);
2003
2041
  z-index: var(--o-ui-z-index-dialog);
@@ -2006,12 +2044,12 @@ a > .o-ui-code {
2006
2044
  .o-ui-dialog:focus {
2007
2045
  outline: 0;
2008
2046
  }
2009
- @media (prefers-reduced-motion: no-preference) {
2047
+ @media screen and (prefers-reduced-motion: no-preference) {
2010
2048
  .o-ui-dialog[data-state=open] {
2011
2049
  animation: o-ui-transform-in 0.15s ease-out;
2012
2050
  }
2013
2051
  }
2014
- @media (prefers-reduced-motion: no-preference) {
2052
+ @media screen and (prefers-reduced-motion: no-preference) {
2015
2053
  .o-ui-dialog[data-state=closed] {
2016
2054
  animation: o-ui-transform-out 0.15s ease-out;
2017
2055
  }
@@ -2061,12 +2099,12 @@ a > .o-ui-code {
2061
2099
  scrollbar-width: thin;
2062
2100
  z-index: var(--o-ui-z-index-popover);
2063
2101
  }
2064
- @media (prefers-reduced-motion: no-preference) {
2102
+ @media screen and (prefers-reduced-motion: no-preference) {
2065
2103
  [data-state=open].o-ui-popover, [data-state=open].o-ui-dropdown-menu {
2066
2104
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2067
2105
  }
2068
2106
  }
2069
- @media (prefers-reduced-motion: no-preference) {
2107
+ @media screen and (prefers-reduced-motion: no-preference) {
2070
2108
  [data-state=closed].o-ui-popover, [data-state=closed].o-ui-dropdown-menu {
2071
2109
  animation: o-ui-fade-out var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2072
2110
  }
@@ -2090,7 +2128,7 @@ a > .o-ui-code {
2090
2128
  max-height: var(--radix-dropdown-menu-content-available-height);
2091
2129
  z-index: var(--o-ui-z-index-dropdown);
2092
2130
  }
2093
- :is(.o-ui-dropdown-menu__item, .o-ui-dropdown-menu__checkbox-item, .o-ui-dropdown-menu__radio-item) .o-ui-menu-list__item-action:not(a):not(:disabled):not([data-disabled]):not([data-loading]) {
2131
+ :is(.o-ui-dropdown-menu__item, .o-ui-dropdown-menu__checkbox-item, .o-ui-dropdown-menu__radio-item) .o-ui-menu-list__item-action:not(a):not(:disabled, [data-disabled]) {
2094
2132
  cursor: pointer;
2095
2133
  }
2096
2134
  .o-ui-feedback {
@@ -2098,7 +2136,7 @@ a > .o-ui-code {
2098
2136
  line-height: var(--o-ui-line-height-xs);
2099
2137
  color: var(--o-ui-accent-11);
2100
2138
  }
2101
- @media (prefers-reduced-motion: no-preference) {
2139
+ @media screen and (prefers-reduced-motion: no-preference) {
2102
2140
  .o-ui-feedback {
2103
2141
  transition-property: var(--o-ui-transition-property);
2104
2142
  transition-duration: var(--o-ui-transition-duration);
@@ -2113,6 +2151,7 @@ a > .o-ui-code {
2113
2151
  }
2114
2152
  .o-ui-feedback-list > .o-ui-feedback {
2115
2153
  margin-left: calc(var(--o-ui-space) * 3.5) !important;
2154
+ text-align: left !important;
2116
2155
  }
2117
2156
  .o-ui-feedback-list > .o-ui-feedback ~ .o-ui-feedback {
2118
2157
  margin-top: calc(var(--o-ui-space) * 0.5);
@@ -2123,7 +2162,7 @@ a > .o-ui-code {
2123
2162
  }
2124
2163
 
2125
2164
  .o-ui-feedback-popover {
2126
- padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
2165
+ padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
2127
2166
  max-width: min(500px, var(--radix-popover-content-available-width));
2128
2167
  max-height: min(600px, var(--radix-popover-content-available-height));
2129
2168
  }
@@ -2144,10 +2183,6 @@ a > .o-ui-code {
2144
2183
  .o-ui-date-range-input__container[data-variant=default] ~ .o-ui-feedback-popover__button-container {
2145
2184
  margin: 0 calc(var(--o-ui-control-padding-x) - (var(--o-ui-icon-button-min-size) - var(--o-ui-icon-button-font-size)) / 2);
2146
2185
  }
2147
- .o-ui-feedback-popover .o-ui-feedback {
2148
- font-size: var(--o-ui-font-size-xs);
2149
- line-height: var(--o-ui-line-height-xs);
2150
- }
2151
2186
  .o-ui-feedback-popover .o-ui-feedback ~ .o-ui-feedback {
2152
2187
  margin-top: calc(var(--o-ui-space) * 0.5);
2153
2188
  }
@@ -2650,6 +2685,9 @@ a > .o-ui-code {
2650
2685
  .o-ui-input[type=file i][data-variant=cell][data-status] {
2651
2686
  --o-ui-input-file-button-color: var(--o-ui-accent-a11);
2652
2687
  }
2688
+ .o-ui-input::-webkit-search-cancel-button {
2689
+ -webkit-appearance: none;
2690
+ }
2653
2691
  .o-ui-input ::-webkit-datetime-edit-fields-wrapper,
2654
2692
  .o-ui-input ::-webkit-datetime-edit-text,
2655
2693
  .o-ui-input ::-webkit-datetime-edit-minute,
@@ -2687,7 +2725,7 @@ a > .o-ui-code {
2687
2725
  font-weight: 500;
2688
2726
  line-height: var(--o-ui-line-height-sm);
2689
2727
  }
2690
- @media (prefers-reduced-motion: no-preference) {
2728
+ @media screen and (prefers-reduced-motion: no-preference) {
2691
2729
  .o-ui-label {
2692
2730
  transition-property: var(--o-ui-transition-property);
2693
2731
  transition-duration: var(--o-ui-transition-duration);
@@ -2717,7 +2755,7 @@ a > .o-ui-code {
2717
2755
  .o-ui-label__helper-popover {
2718
2756
  max-width: min(500px, var(--radix-popover-content-available-width));
2719
2757
  max-height: min(600px, var(--radix-popover-content-available-height));
2720
- padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
2758
+ padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
2721
2759
  }
2722
2760
 
2723
2761
  .o-ui-link:is(:any-link, button) {
@@ -2773,12 +2811,12 @@ a > .o-ui-code {
2773
2811
  z-index: var(--o-ui-z-index-overlay);
2774
2812
  background-color: var(--o-ui-neutral-a8);
2775
2813
  }
2776
- @media (prefers-reduced-motion: no-preference) {
2814
+ @media screen and (prefers-reduced-motion: no-preference) {
2777
2815
  .o-ui-overlay[data-state=open] {
2778
2816
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2779
2817
  }
2780
2818
  }
2781
- @media (prefers-reduced-motion: no-preference) {
2819
+ @media screen and (prefers-reduced-motion: no-preference) {
2782
2820
  .o-ui-overlay[data-state=closed] {
2783
2821
  animation: o-ui-fade-out var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2784
2822
  }
@@ -3232,15 +3270,16 @@ a > .o-ui-code {
3232
3270
  }
3233
3271
 
3234
3272
  .o-ui-separator {
3235
- flex-shrink: 0;
3236
- background-color: #cdced6;
3273
+ display: block;
3274
+ background-color: var(--o-ui-accent-a6);
3237
3275
  }
3238
3276
  .o-ui-separator[data-orientation=horizontal] {
3239
3277
  height: 1px;
3240
- width: 100%;
3278
+ width: var(--o-ui-separator-length, 100%);
3241
3279
  }
3242
3280
  .o-ui-separator[data-orientation=vertical] {
3243
3281
  width: 1px;
3282
+ height: var(--o-ui-separator-length, calc(var(--o-ui-space) * 4));
3244
3283
  }
3245
3284
 
3246
3285
  .o-ui-spinner {
@@ -3510,14 +3549,21 @@ a > .o-ui-code {
3510
3549
  }
3511
3550
  }
3512
3551
 
3552
+ .o-ui-stepper {
3553
+ display: flex;
3554
+ flex-wrap: wrap;
3555
+ }
3513
3556
  .o-ui-stepper__step-list {
3557
+ width: 100%;
3558
+ margin: 0;
3559
+ padding: 0;
3514
3560
  display: flex;
3515
3561
  justify-content: center;
3516
3562
  }
3517
3563
  .o-ui-stepper__step-list:not(:last-child) {
3518
3564
  margin-bottom: calc(var(--o-ui-space) * 2);
3519
3565
  }
3520
- .o-ui-stepper__step-container {
3566
+ .o-ui-stepper__step {
3521
3567
  position: relative;
3522
3568
  flex: 1 0;
3523
3569
  display: flex;
@@ -3525,7 +3571,7 @@ a > .o-ui-code {
3525
3571
  align-items: center;
3526
3572
  justify-content: flex-end;
3527
3573
  }
3528
- .o-ui-stepper__step-container::before {
3574
+ .o-ui-stepper__step:not(:first-child)::before {
3529
3575
  content: "";
3530
3576
  display: block;
3531
3577
  position: absolute;
@@ -3535,26 +3581,23 @@ a > .o-ui-code {
3535
3581
  width: calc(100% - 30px);
3536
3582
  background-color: var(--o-ui-neutral-a3);
3537
3583
  }
3538
- @media (prefers-reduced-motion: no-preference) {
3539
- .o-ui-stepper__step-container::before {
3584
+ @media screen and (prefers-reduced-motion: no-preference) {
3585
+ .o-ui-stepper__step:not(:first-child)::before {
3540
3586
  transition-property: var(--o-ui-transition-property);
3541
3587
  transition-duration: 0.3s;
3542
3588
  transition-timing-function: var(--o-ui-transition-timing-function);
3543
3589
  }
3544
3590
  }
3545
- .o-ui-stepper__step-container:first-child::before {
3546
- display: none;
3547
- }
3548
- .o-ui-stepper__step-container[data-status]::before {
3591
+ .o-ui-stepper__step[data-status]::before {
3549
3592
  background-color: var(--o-ui-accent-a3);
3550
3593
  }
3551
- .o-ui-stepper__step-container[data-visited]::before {
3594
+ .o-ui-stepper__step:is([data-completed], [data-current])::before {
3552
3595
  background-color: var(--o-ui-primary-a9);
3553
3596
  }
3554
- .o-ui-stepper__step-container[data-visited][data-status]::before {
3597
+ .o-ui-stepper__step:is([data-completed], [data-current])[data-status]::before {
3555
3598
  background-color: var(--o-ui-accent-a9);
3556
3599
  }
3557
- .o-ui-stepper__step {
3600
+ .o-ui-stepper__step-button {
3558
3601
  min-width: 30px;
3559
3602
  min-height: 30px;
3560
3603
  border-radius: 50%;
@@ -3564,14 +3607,48 @@ a > .o-ui-code {
3564
3607
  margin-bottom: calc(var(--o-ui-space) * 2);
3565
3608
  text-align: center;
3566
3609
  }
3567
- .o-ui-stepper__step-label:not([data-visited]) {
3610
+ .o-ui-stepper__step-label:not([data-completed], [data-current]) {
3568
3611
  color: var(--o-ui-neutral-a9);
3569
3612
  }
3570
- @media (prefers-reduced-motion: no-preference) {
3571
- .o-ui-stepper__step-content[data-state=active] {
3613
+ .o-ui-stepper__step-content-label {
3614
+ display: inline-flex;
3615
+ align-items: center;
3616
+ margin-bottom: calc(var(--o-ui-space) * 1.5);
3617
+ font-size: var(--o-ui-font-size-sm);
3618
+ line-height: var(--o-ui-font-size-sm);
3619
+ font-weight: 500;
3620
+ }
3621
+ .o-ui-stepper__step-content-label-index {
3622
+ display: inline-flex;
3623
+ align-items: center;
3624
+ justify-content: center;
3625
+ margin-right: calc(var(--o-ui-space) * 2);
3626
+ min-width: 30px;
3627
+ min-height: 30px;
3628
+ border-radius: 50%;
3629
+ background-color: var(--o-ui-primary-9);
3630
+ color: var(--o-ui-primary-contrast);
3631
+ }
3632
+ .o-ui-stepper__step-content {
3633
+ width: 100%;
3634
+ }
3635
+ .o-ui-stepper__step-content:focus-visible {
3636
+ outline: 2px solid var(--o-ui-primary-8);
3637
+ }
3638
+ @media screen and (prefers-reduced-motion: no-preference) {
3639
+ .o-ui-stepper__step-content[data-current] {
3572
3640
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
3573
3641
  }
3574
3642
  }
3643
+ .o-ui-stepper__step-content + .o-ui-stepper__step-content-label {
3644
+ margin-top: calc(var(--o-ui-space) * 3);
3645
+ }
3646
+ .o-ui-stepper__next-trigger, .o-ui-stepper__finish-trigger {
3647
+ margin-left: auto;
3648
+ }
3649
+ :is(.o-ui-stepper__next-trigger, .o-ui-stepper__finish-trigger) + :is(.o-ui-stepper__next-trigger, .o-ui-stepper__finish-trigger) {
3650
+ margin-left: calc(var(--o-ui-space) * 2);
3651
+ }
3575
3652
 
3576
3653
  .o-ui-table {
3577
3654
  width: 100%;
@@ -3620,7 +3697,7 @@ a > .o-ui-code {
3620
3697
  border-style: solid;
3621
3698
  border-color: var(--o-ui-table-border-color);
3622
3699
  }
3623
- @media (prefers-reduced-motion: no-preference) {
3700
+ @media screen and (prefers-reduced-motion: no-preference) {
3624
3701
  .o-ui-table__scrollable {
3625
3702
  transition-property: var(--o-ui-transition-property);
3626
3703
  transition-duration: var(--o-ui-transition-duration);
@@ -3756,7 +3833,7 @@ a > .o-ui-code {
3756
3833
  background-color: var(--o-ui-table-cell-background-color, var(--o-ui-background-color));
3757
3834
  color: var(--o-ui-table-cell-color);
3758
3835
  }
3759
- @media (prefers-reduced-motion: no-preference) {
3836
+ @media screen and (prefers-reduced-motion: no-preference) {
3760
3837
  .o-ui-table__cell {
3761
3838
  transition-property: color, background-color;
3762
3839
  transition-duration: var(--o-ui-transition-duration);
@@ -3870,7 +3947,7 @@ a > .o-ui-code {
3870
3947
  .o-ui-table__column-icon[data-state=inactive], .o-ui-table__column-icon[data-state=next-active] {
3871
3948
  opacity: 0.25;
3872
3949
  }
3873
- @media (prefers-reduced-motion: no-preference) {
3950
+ @media screen and (prefers-reduced-motion: no-preference) {
3874
3951
  .o-ui-table__column-icon {
3875
3952
  transition-property: var(--o-ui-transition-property);
3876
3953
  transition-duration: var(--o-ui-transition-duration);
@@ -3890,7 +3967,7 @@ a > .o-ui-code {
3890
3967
  .o-ui-table__column-helper-popover {
3891
3968
  max-width: min(500px, var(--radix-popover-content-available-width));
3892
3969
  max-height: min(600px, var(--radix-popover-content-available-height));
3893
- padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
3970
+ padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
3894
3971
  }
3895
3972
 
3896
3973
  .o-ui-tabs {
@@ -4036,9 +4113,6 @@ a > .o-ui-code {
4036
4113
  --o-ui-tabs-tab-inner-background-color: var(--o-ui-primary-10);
4037
4114
  }
4038
4115
  .o-ui-tabs__tab-inner {
4039
- overflow: hidden;
4040
- text-overflow: ellipsis;
4041
- white-space: nowrap;
4042
4116
  max-width: 220px;
4043
4117
  min-width: var(--o-ui-tabs-tab-inner-min-width);
4044
4118
  min-height: var(--o-ui-tabs-tab-inner-min-height);
@@ -4061,13 +4135,18 @@ a > .o-ui-code {
4061
4135
  justify-content: center;
4062
4136
  transform: translate3d(0, 0, 0);
4063
4137
  }
4064
- @media (prefers-reduced-motion: no-preference) {
4138
+ @media screen and (prefers-reduced-motion: no-preference) {
4065
4139
  .o-ui-tabs__tab, .o-ui-tabs__tab-inner {
4066
4140
  transition-property: var(--o-ui-transition-property);
4067
4141
  transition-duration: var(--o-ui-transition-duration);
4068
4142
  transition-timing-function: var(--o-ui-transition-timing-function);
4069
4143
  }
4070
4144
  }
4145
+ .o-ui-tabs__tab-text {
4146
+ overflow: hidden;
4147
+ text-overflow: ellipsis;
4148
+ white-space: nowrap;
4149
+ }
4071
4150
  .o-ui-tabs__scroll-button {
4072
4151
  position: relative;
4073
4152
  min-width: auto;
@@ -4129,7 +4208,7 @@ a > .o-ui-code {
4129
4208
  color: var(--o-ui-tag-color);
4130
4209
  box-shadow: var(--o-ui-tag-box-shadow);
4131
4210
  }
4132
- @media (prefers-reduced-motion: no-preference) {
4211
+ @media screen and (prefers-reduced-motion: no-preference) {
4133
4212
  .o-ui-tag {
4134
4213
  transition-property: var(--o-ui-transition-property);
4135
4214
  transition-duration: var(--o-ui-transition-duration);
@@ -4189,7 +4268,7 @@ a > .o-ui-code {
4189
4268
  transform: translateX(0);
4190
4269
  }
4191
4270
  }
4192
- @media (prefers-reduced-motion: no-preference) {
4271
+ @media screen and (prefers-reduced-motion: no-preference) {
4193
4272
  .o-ui-toast__root[data-state=open] {
4194
4273
  animation: o-ui-toast-open 0.25s ease-out;
4195
4274
  }
@@ -4205,7 +4284,7 @@ a > .o-ui-code {
4205
4284
  opacity: 0;
4206
4285
  }
4207
4286
  }
4208
- @media (prefers-reduced-motion: no-preference) {
4287
+ @media screen and (prefers-reduced-motion: no-preference) {
4209
4288
  .o-ui-toast__root[data-state=closed] {
4210
4289
  animation: 0.25s linear o-ui-toast-close;
4211
4290
  }
@@ -4248,7 +4327,7 @@ a > .o-ui-code {
4248
4327
  height: var(--radix-collapsible-content-height);
4249
4328
  }
4250
4329
  }
4251
- @media (prefers-reduced-motion: no-preference) {
4330
+ @media screen and (prefers-reduced-motion: no-preference) {
4252
4331
  .o-ui-toast__container[data-state=open] {
4253
4332
  animation: o-ui-toast-collapsible-open 0.25s ease;
4254
4333
  }
@@ -4264,7 +4343,7 @@ a > .o-ui-code {
4264
4343
  height: 0;
4265
4344
  }
4266
4345
  }
4267
- @media (prefers-reduced-motion: no-preference) {
4346
+ @media screen and (prefers-reduced-motion: no-preference) {
4268
4347
  .o-ui-toast__container[data-state=closed] {
4269
4348
  animation: o-ui-toast-collapsible-close 0.25s ease;
4270
4349
  }
@@ -4301,12 +4380,12 @@ a > .o-ui-code {
4301
4380
  box-shadow: var(--o-ui-box-shadow-sm);
4302
4381
  z-index: var(--o-ui-z-index-tooltip);
4303
4382
  }
4304
- @media (prefers-reduced-motion: no-preference) {
4383
+ @media screen and (prefers-reduced-motion: no-preference) {
4305
4384
  .o-ui-tooltip[data-state=delayed-open] {
4306
4385
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
4307
4386
  }
4308
4387
  }
4309
- @media (prefers-reduced-motion: no-preference) {
4388
+ @media screen and (prefers-reduced-motion: no-preference) {
4310
4389
  .o-ui-tooltip[data-state=closed] {
4311
4390
  animation: o-ui-fade-out var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
4312
4391
  }