@ostack.tech/ui 0.10.5 → 0.11.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 (113) 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 +186 -110
  10. package/dist/ostack-ui.js +1466 -681
  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/DescriptionList/_DescriptionList-variables.scss +21 -0
  88. package/scss/components/DescriptionList/_DescriptionList.scss +33 -0
  89. package/scss/components/DropdownMenu/_DropdownMenu.scss +1 -3
  90. package/scss/components/FeedbackPopover/_FeedbackPopover-variables.scss +9 -9
  91. package/scss/components/FeedbackPopover/_FeedbackPopover.scss +1 -1
  92. package/scss/components/Field/_Field-variables.scss +9 -0
  93. package/scss/components/Field/_Field.scss +6 -8
  94. package/scss/components/Input/_Input.scss +5 -0
  95. package/scss/components/Label/_Label-variables.scss +1 -1
  96. package/scss/components/MenuList/_MenuList.scss +4 -1
  97. package/scss/components/RadioGroup/_Radio.scss +1 -1
  98. package/scss/components/Separator/_Separator-variables.scss +11 -0
  99. package/scss/components/Separator/_Separator.scss +13 -5
  100. package/scss/components/Stepper/_Stepper-variables.scss +37 -9
  101. package/scss/components/Stepper/_Stepper.scss +69 -22
  102. package/scss/components/Tabs/_Tabs.scss +6 -4
  103. package/scss/index.scss +1 -0
  104. package/scss/scss/placeholders/checkable/_checkable.scss +3 -3
  105. package/scss/scss/placeholders/control/_control.scss +1 -1
  106. package/scss/scss/placeholders/menu/_menu.scss +5 -16
  107. package/scss/scss/utils/_animation.scss +1 -1
  108. package/scss/scss/utils/_transition.scss +1 -1
  109. package/dist/chunks/en-DwZKZVGL.js.map +0 -1
  110. package/dist/types/components/DatePicker/DatePicker.d.ts +0 -27
  111. package/dist/types/components/DatePicker/index.d.ts +0 -1
  112. package/dist/types/components/DateRangePicker/DateRangePicker.d.ts +0 -41
  113. 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);
@@ -1815,7 +1833,7 @@ a > .o-ui-code {
1815
1833
  .o-ui-input:focus, .o-ui-date-range-input:focus {
1816
1834
  outline: 0;
1817
1835
  }
1818
- .o-ui-input:is(:disabled, [data-loading]), .o-ui-date-range-input:is(:disabled, [data-loading]) {
1836
+ .o-ui-input:is(:disabled, [data-disabled]), .o-ui-date-range-input:is(:disabled, [data-disabled]) {
1819
1837
  opacity: 0.5;
1820
1838
  cursor: not-allowed;
1821
1839
  }
@@ -1887,7 +1905,7 @@ a > .o-ui-code {
1887
1905
  background-color: color-mix(in srgb, var(--o-ui-control-background-color, var(--o-ui-background-color)) 50%, transparent);
1888
1906
  cursor: not-allowed;
1889
1907
  }
1890
- @media (prefers-reduced-motion: no-preference) {
1908
+ @media screen and (prefers-reduced-motion: no-preference) {
1891
1909
  .o-ui-input__container, .o-ui-date-range-input__container {
1892
1910
  transition-property: var(--o-ui-transition-property);
1893
1911
  transition-duration: var(--o-ui-transition-duration);
@@ -1998,6 +2016,24 @@ a > .o-ui-code {
1998
2016
  .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
2017
  margin-right: calc(var(--o-ui-control-padding-x) - var(--o-ui-date-range-input-inset-x));
2000
2018
  }
2019
+ .o-ui-description-list {
2020
+ margin-bottom: 0;
2021
+ font-size: var(--o-ui-font-size-sm);
2022
+ line-height: var(--o-ui-line-height-sm);
2023
+ }
2024
+ .o-ui-description-list__item {
2025
+ display: flex;
2026
+ flex-direction: column;
2027
+ }
2028
+ .o-ui-description-list__term {
2029
+ margin-bottom: var(--o-ui-space);
2030
+ font-weight: 500;
2031
+ color: var(--o-ui-neutral-a11);
2032
+ }
2033
+ .o-ui-description-list__details {
2034
+ margin: 0;
2035
+ }
2036
+
2001
2037
  .o-ui-dialog {
2002
2038
  box-shadow: var(--o-ui-box-shadow-lg);
2003
2039
  z-index: var(--o-ui-z-index-dialog);
@@ -2006,12 +2042,12 @@ a > .o-ui-code {
2006
2042
  .o-ui-dialog:focus {
2007
2043
  outline: 0;
2008
2044
  }
2009
- @media (prefers-reduced-motion: no-preference) {
2045
+ @media screen and (prefers-reduced-motion: no-preference) {
2010
2046
  .o-ui-dialog[data-state=open] {
2011
2047
  animation: o-ui-transform-in 0.15s ease-out;
2012
2048
  }
2013
2049
  }
2014
- @media (prefers-reduced-motion: no-preference) {
2050
+ @media screen and (prefers-reduced-motion: no-preference) {
2015
2051
  .o-ui-dialog[data-state=closed] {
2016
2052
  animation: o-ui-transform-out 0.15s ease-out;
2017
2053
  }
@@ -2061,12 +2097,12 @@ a > .o-ui-code {
2061
2097
  scrollbar-width: thin;
2062
2098
  z-index: var(--o-ui-z-index-popover);
2063
2099
  }
2064
- @media (prefers-reduced-motion: no-preference) {
2100
+ @media screen and (prefers-reduced-motion: no-preference) {
2065
2101
  [data-state=open].o-ui-popover, [data-state=open].o-ui-dropdown-menu {
2066
2102
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2067
2103
  }
2068
2104
  }
2069
- @media (prefers-reduced-motion: no-preference) {
2105
+ @media screen and (prefers-reduced-motion: no-preference) {
2070
2106
  [data-state=closed].o-ui-popover, [data-state=closed].o-ui-dropdown-menu {
2071
2107
  animation: o-ui-fade-out var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2072
2108
  }
@@ -2090,7 +2126,7 @@ a > .o-ui-code {
2090
2126
  max-height: var(--radix-dropdown-menu-content-available-height);
2091
2127
  z-index: var(--o-ui-z-index-dropdown);
2092
2128
  }
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]) {
2129
+ :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
2130
  cursor: pointer;
2095
2131
  }
2096
2132
  .o-ui-feedback {
@@ -2098,7 +2134,7 @@ a > .o-ui-code {
2098
2134
  line-height: var(--o-ui-line-height-xs);
2099
2135
  color: var(--o-ui-accent-11);
2100
2136
  }
2101
- @media (prefers-reduced-motion: no-preference) {
2137
+ @media screen and (prefers-reduced-motion: no-preference) {
2102
2138
  .o-ui-feedback {
2103
2139
  transition-property: var(--o-ui-transition-property);
2104
2140
  transition-duration: var(--o-ui-transition-duration);
@@ -2123,7 +2159,7 @@ a > .o-ui-code {
2123
2159
  }
2124
2160
 
2125
2161
  .o-ui-feedback-popover {
2126
- padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
2162
+ padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
2127
2163
  max-width: min(500px, var(--radix-popover-content-available-width));
2128
2164
  max-height: min(600px, var(--radix-popover-content-available-height));
2129
2165
  }
@@ -2144,10 +2180,6 @@ a > .o-ui-code {
2144
2180
  .o-ui-date-range-input__container[data-variant=default] ~ .o-ui-feedback-popover__button-container {
2145
2181
  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
2182
  }
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
2183
  .o-ui-feedback-popover .o-ui-feedback ~ .o-ui-feedback {
2152
2184
  margin-top: calc(var(--o-ui-space) * 0.5);
2153
2185
  }
@@ -2650,6 +2682,9 @@ a > .o-ui-code {
2650
2682
  .o-ui-input[type=file i][data-variant=cell][data-status] {
2651
2683
  --o-ui-input-file-button-color: var(--o-ui-accent-a11);
2652
2684
  }
2685
+ .o-ui-input::-webkit-search-cancel-button {
2686
+ -webkit-appearance: none;
2687
+ }
2653
2688
  .o-ui-input ::-webkit-datetime-edit-fields-wrapper,
2654
2689
  .o-ui-input ::-webkit-datetime-edit-text,
2655
2690
  .o-ui-input ::-webkit-datetime-edit-minute,
@@ -2687,7 +2722,7 @@ a > .o-ui-code {
2687
2722
  font-weight: 500;
2688
2723
  line-height: var(--o-ui-line-height-sm);
2689
2724
  }
2690
- @media (prefers-reduced-motion: no-preference) {
2725
+ @media screen and (prefers-reduced-motion: no-preference) {
2691
2726
  .o-ui-label {
2692
2727
  transition-property: var(--o-ui-transition-property);
2693
2728
  transition-duration: var(--o-ui-transition-duration);
@@ -2717,7 +2752,7 @@ a > .o-ui-code {
2717
2752
  .o-ui-label__helper-popover {
2718
2753
  max-width: min(500px, var(--radix-popover-content-available-width));
2719
2754
  max-height: min(600px, var(--radix-popover-content-available-height));
2720
- padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
2755
+ padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
2721
2756
  }
2722
2757
 
2723
2758
  .o-ui-link:is(:any-link, button) {
@@ -2773,12 +2808,12 @@ a > .o-ui-code {
2773
2808
  z-index: var(--o-ui-z-index-overlay);
2774
2809
  background-color: var(--o-ui-neutral-a8);
2775
2810
  }
2776
- @media (prefers-reduced-motion: no-preference) {
2811
+ @media screen and (prefers-reduced-motion: no-preference) {
2777
2812
  .o-ui-overlay[data-state=open] {
2778
2813
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2779
2814
  }
2780
2815
  }
2781
- @media (prefers-reduced-motion: no-preference) {
2816
+ @media screen and (prefers-reduced-motion: no-preference) {
2782
2817
  .o-ui-overlay[data-state=closed] {
2783
2818
  animation: o-ui-fade-out var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
2784
2819
  }
@@ -3232,15 +3267,16 @@ a > .o-ui-code {
3232
3267
  }
3233
3268
 
3234
3269
  .o-ui-separator {
3235
- flex-shrink: 0;
3236
- background-color: #cdced6;
3270
+ display: block;
3271
+ background-color: var(--o-ui-accent-a6);
3237
3272
  }
3238
3273
  .o-ui-separator[data-orientation=horizontal] {
3239
3274
  height: 1px;
3240
- width: 100%;
3275
+ width: var(--o-ui-separator-length, 100%);
3241
3276
  }
3242
3277
  .o-ui-separator[data-orientation=vertical] {
3243
3278
  width: 1px;
3279
+ height: var(--o-ui-separator-length, calc(var(--o-ui-space) * 4));
3244
3280
  }
3245
3281
 
3246
3282
  .o-ui-spinner {
@@ -3510,14 +3546,21 @@ a > .o-ui-code {
3510
3546
  }
3511
3547
  }
3512
3548
 
3549
+ .o-ui-stepper {
3550
+ display: flex;
3551
+ flex-wrap: wrap;
3552
+ }
3513
3553
  .o-ui-stepper__step-list {
3554
+ width: 100%;
3555
+ margin: 0;
3556
+ padding: 0;
3514
3557
  display: flex;
3515
3558
  justify-content: center;
3516
3559
  }
3517
3560
  .o-ui-stepper__step-list:not(:last-child) {
3518
3561
  margin-bottom: calc(var(--o-ui-space) * 2);
3519
3562
  }
3520
- .o-ui-stepper__step-container {
3563
+ .o-ui-stepper__step {
3521
3564
  position: relative;
3522
3565
  flex: 1 0;
3523
3566
  display: flex;
@@ -3525,7 +3568,7 @@ a > .o-ui-code {
3525
3568
  align-items: center;
3526
3569
  justify-content: flex-end;
3527
3570
  }
3528
- .o-ui-stepper__step-container::before {
3571
+ .o-ui-stepper__step:not(:first-child)::before {
3529
3572
  content: "";
3530
3573
  display: block;
3531
3574
  position: absolute;
@@ -3535,26 +3578,23 @@ a > .o-ui-code {
3535
3578
  width: calc(100% - 30px);
3536
3579
  background-color: var(--o-ui-neutral-a3);
3537
3580
  }
3538
- @media (prefers-reduced-motion: no-preference) {
3539
- .o-ui-stepper__step-container::before {
3581
+ @media screen and (prefers-reduced-motion: no-preference) {
3582
+ .o-ui-stepper__step:not(:first-child)::before {
3540
3583
  transition-property: var(--o-ui-transition-property);
3541
3584
  transition-duration: 0.3s;
3542
3585
  transition-timing-function: var(--o-ui-transition-timing-function);
3543
3586
  }
3544
3587
  }
3545
- .o-ui-stepper__step-container:first-child::before {
3546
- display: none;
3547
- }
3548
- .o-ui-stepper__step-container[data-status]::before {
3588
+ .o-ui-stepper__step[data-status]::before {
3549
3589
  background-color: var(--o-ui-accent-a3);
3550
3590
  }
3551
- .o-ui-stepper__step-container[data-visited]::before {
3591
+ .o-ui-stepper__step:is([data-completed], [data-active])::before {
3552
3592
  background-color: var(--o-ui-primary-a9);
3553
3593
  }
3554
- .o-ui-stepper__step-container[data-visited][data-status]::before {
3594
+ .o-ui-stepper__step:is([data-completed], [data-active])[data-status]::before {
3555
3595
  background-color: var(--o-ui-accent-a9);
3556
3596
  }
3557
- .o-ui-stepper__step {
3597
+ .o-ui-stepper__step-button {
3558
3598
  min-width: 30px;
3559
3599
  min-height: 30px;
3560
3600
  border-radius: 50%;
@@ -3564,14 +3604,48 @@ a > .o-ui-code {
3564
3604
  margin-bottom: calc(var(--o-ui-space) * 2);
3565
3605
  text-align: center;
3566
3606
  }
3567
- .o-ui-stepper__step-label:not([data-visited]) {
3607
+ .o-ui-stepper__step-label:not([data-completed], [data-active]) {
3568
3608
  color: var(--o-ui-neutral-a9);
3569
3609
  }
3570
- @media (prefers-reduced-motion: no-preference) {
3571
- .o-ui-stepper__step-content[data-state=active] {
3610
+ .o-ui-stepper__step-content-label {
3611
+ display: inline-flex;
3612
+ align-items: center;
3613
+ margin-bottom: calc(var(--o-ui-space) * 1.5);
3614
+ font-size: var(--o-ui-font-size-sm);
3615
+ line-height: var(--o-ui-font-size-sm);
3616
+ font-weight: 500;
3617
+ }
3618
+ .o-ui-stepper__step-content-label-index {
3619
+ display: inline-flex;
3620
+ align-items: center;
3621
+ justify-content: center;
3622
+ margin-right: calc(var(--o-ui-space) * 2);
3623
+ min-width: 30px;
3624
+ min-height: 30px;
3625
+ border-radius: 50%;
3626
+ background-color: var(--o-ui-primary-9);
3627
+ color: var(--o-ui-primary-contrast);
3628
+ }
3629
+ .o-ui-stepper__step-content {
3630
+ width: 100%;
3631
+ }
3632
+ .o-ui-stepper__step-content:focus-visible {
3633
+ outline: 2px solid var(--o-ui-primary-8);
3634
+ }
3635
+ @media screen and (prefers-reduced-motion: no-preference) {
3636
+ .o-ui-stepper__step-content[data-active] {
3572
3637
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
3573
3638
  }
3574
3639
  }
3640
+ .o-ui-stepper__step-content + .o-ui-stepper__step-content-label {
3641
+ margin-top: calc(var(--o-ui-space) * 3);
3642
+ }
3643
+ .o-ui-stepper__next-trigger, .o-ui-stepper__finish-trigger {
3644
+ margin-left: auto;
3645
+ }
3646
+ :is(.o-ui-stepper__next-trigger, .o-ui-stepper__finish-trigger) + :is(.o-ui-stepper__next-trigger, .o-ui-stepper__finish-trigger) {
3647
+ margin-left: calc(var(--o-ui-space) * 2);
3648
+ }
3575
3649
 
3576
3650
  .o-ui-table {
3577
3651
  width: 100%;
@@ -3620,7 +3694,7 @@ a > .o-ui-code {
3620
3694
  border-style: solid;
3621
3695
  border-color: var(--o-ui-table-border-color);
3622
3696
  }
3623
- @media (prefers-reduced-motion: no-preference) {
3697
+ @media screen and (prefers-reduced-motion: no-preference) {
3624
3698
  .o-ui-table__scrollable {
3625
3699
  transition-property: var(--o-ui-transition-property);
3626
3700
  transition-duration: var(--o-ui-transition-duration);
@@ -3756,7 +3830,7 @@ a > .o-ui-code {
3756
3830
  background-color: var(--o-ui-table-cell-background-color, var(--o-ui-background-color));
3757
3831
  color: var(--o-ui-table-cell-color);
3758
3832
  }
3759
- @media (prefers-reduced-motion: no-preference) {
3833
+ @media screen and (prefers-reduced-motion: no-preference) {
3760
3834
  .o-ui-table__cell {
3761
3835
  transition-property: color, background-color;
3762
3836
  transition-duration: var(--o-ui-transition-duration);
@@ -3870,7 +3944,7 @@ a > .o-ui-code {
3870
3944
  .o-ui-table__column-icon[data-state=inactive], .o-ui-table__column-icon[data-state=next-active] {
3871
3945
  opacity: 0.25;
3872
3946
  }
3873
- @media (prefers-reduced-motion: no-preference) {
3947
+ @media screen and (prefers-reduced-motion: no-preference) {
3874
3948
  .o-ui-table__column-icon {
3875
3949
  transition-property: var(--o-ui-transition-property);
3876
3950
  transition-duration: var(--o-ui-transition-duration);
@@ -3890,7 +3964,7 @@ a > .o-ui-code {
3890
3964
  .o-ui-table__column-helper-popover {
3891
3965
  max-width: min(500px, var(--radix-popover-content-available-width));
3892
3966
  max-height: min(600px, var(--radix-popover-content-available-height));
3893
- padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
3967
+ padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
3894
3968
  }
3895
3969
 
3896
3970
  .o-ui-tabs {
@@ -4036,9 +4110,6 @@ a > .o-ui-code {
4036
4110
  --o-ui-tabs-tab-inner-background-color: var(--o-ui-primary-10);
4037
4111
  }
4038
4112
  .o-ui-tabs__tab-inner {
4039
- overflow: hidden;
4040
- text-overflow: ellipsis;
4041
- white-space: nowrap;
4042
4113
  max-width: 220px;
4043
4114
  min-width: var(--o-ui-tabs-tab-inner-min-width);
4044
4115
  min-height: var(--o-ui-tabs-tab-inner-min-height);
@@ -4061,13 +4132,18 @@ a > .o-ui-code {
4061
4132
  justify-content: center;
4062
4133
  transform: translate3d(0, 0, 0);
4063
4134
  }
4064
- @media (prefers-reduced-motion: no-preference) {
4135
+ @media screen and (prefers-reduced-motion: no-preference) {
4065
4136
  .o-ui-tabs__tab, .o-ui-tabs__tab-inner {
4066
4137
  transition-property: var(--o-ui-transition-property);
4067
4138
  transition-duration: var(--o-ui-transition-duration);
4068
4139
  transition-timing-function: var(--o-ui-transition-timing-function);
4069
4140
  }
4070
4141
  }
4142
+ .o-ui-tabs__tab-text {
4143
+ overflow: hidden;
4144
+ text-overflow: ellipsis;
4145
+ white-space: nowrap;
4146
+ }
4071
4147
  .o-ui-tabs__scroll-button {
4072
4148
  position: relative;
4073
4149
  min-width: auto;
@@ -4129,7 +4205,7 @@ a > .o-ui-code {
4129
4205
  color: var(--o-ui-tag-color);
4130
4206
  box-shadow: var(--o-ui-tag-box-shadow);
4131
4207
  }
4132
- @media (prefers-reduced-motion: no-preference) {
4208
+ @media screen and (prefers-reduced-motion: no-preference) {
4133
4209
  .o-ui-tag {
4134
4210
  transition-property: var(--o-ui-transition-property);
4135
4211
  transition-duration: var(--o-ui-transition-duration);
@@ -4189,7 +4265,7 @@ a > .o-ui-code {
4189
4265
  transform: translateX(0);
4190
4266
  }
4191
4267
  }
4192
- @media (prefers-reduced-motion: no-preference) {
4268
+ @media screen and (prefers-reduced-motion: no-preference) {
4193
4269
  .o-ui-toast__root[data-state=open] {
4194
4270
  animation: o-ui-toast-open 0.25s ease-out;
4195
4271
  }
@@ -4205,7 +4281,7 @@ a > .o-ui-code {
4205
4281
  opacity: 0;
4206
4282
  }
4207
4283
  }
4208
- @media (prefers-reduced-motion: no-preference) {
4284
+ @media screen and (prefers-reduced-motion: no-preference) {
4209
4285
  .o-ui-toast__root[data-state=closed] {
4210
4286
  animation: 0.25s linear o-ui-toast-close;
4211
4287
  }
@@ -4248,7 +4324,7 @@ a > .o-ui-code {
4248
4324
  height: var(--radix-collapsible-content-height);
4249
4325
  }
4250
4326
  }
4251
- @media (prefers-reduced-motion: no-preference) {
4327
+ @media screen and (prefers-reduced-motion: no-preference) {
4252
4328
  .o-ui-toast__container[data-state=open] {
4253
4329
  animation: o-ui-toast-collapsible-open 0.25s ease;
4254
4330
  }
@@ -4264,7 +4340,7 @@ a > .o-ui-code {
4264
4340
  height: 0;
4265
4341
  }
4266
4342
  }
4267
- @media (prefers-reduced-motion: no-preference) {
4343
+ @media screen and (prefers-reduced-motion: no-preference) {
4268
4344
  .o-ui-toast__container[data-state=closed] {
4269
4345
  animation: o-ui-toast-collapsible-close 0.25s ease;
4270
4346
  }
@@ -4301,12 +4377,12 @@ a > .o-ui-code {
4301
4377
  box-shadow: var(--o-ui-box-shadow-sm);
4302
4378
  z-index: var(--o-ui-z-index-tooltip);
4303
4379
  }
4304
- @media (prefers-reduced-motion: no-preference) {
4380
+ @media screen and (prefers-reduced-motion: no-preference) {
4305
4381
  .o-ui-tooltip[data-state=delayed-open] {
4306
4382
  animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
4307
4383
  }
4308
4384
  }
4309
- @media (prefers-reduced-motion: no-preference) {
4385
+ @media screen and (prefers-reduced-motion: no-preference) {
4310
4386
  .o-ui-tooltip[data-state=closed] {
4311
4387
  animation: o-ui-fade-out var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
4312
4388
  }