@godxjp/ui 22.0.0 → 23.1.0

package/dist/props/registry.js

@@ -585,6 +585,11 @@ const VOCABULARY_REGISTRY = {
     category: "data",
     description: "Row ID extractor generic"
   },
+  GetRowLabelProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Row label extractor generic \u2014 the accessible name of a row's selection control"
+  },
   OnRowClickProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
@@ -1420,6 +1425,16 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: []
   },
+  SliderMarkProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
+  SliderRangeConfigProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
   ControlCountProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -1564,6 +1579,60 @@ const COMPONENT_PROP_REGISTRY = {
     ],
     note: "Internal \u2014 the searchable engine behind `<Select options showSearch>` (not public API); use Select."
   },
+  SelectFieldNamesProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["LabelProp", "ValueProp", "DisabledProp"],
+    note: "antd `fieldNames` for `<Select options>` \u2014 the spelling Cascader and TreeSelect already take."
+  },
+  SelectOptionGroupProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["LabelProp", "DisabledProp"],
+    note: "antd's nested option GROUP (`{ label, options }`); flattens to the `group` a flat row carries."
+  },
+  SelectOptionInputProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [],
+    note: "What `<Select options>` accepts: a row, a group, or a foreign row read through `fieldNames`."
+  },
+  SelectLabeledValueProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp"],
+    note: "antd `labelInValue` \u2014 the value carries its own label for a screen with no option list yet."
+  },
+  SelectPlacementProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [],
+    note: "antd `placement` on the LOGICAL inline axis, as DropdownMenuPlacementProp already spells it."
+  },
+  SelectShowSearchProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["OnSearchChangeProp"],
+    note: "antd `showSearch`'s object form. `filterOption(input, option)` here takes antd's argument order."
+  },
+  SelectLabelInValueSingleProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ValueProp", "DefaultValueProp", "OnValueChangeProp"],
+    note: "Internal \u2014 the `labelInValue` single shape of `<Select options>`; use Select."
+  },
+  SelectLabelInValueMultipleProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "MaxTagCountProp",
+      "MaxTagPlaceholderProp"
+    ],
+    note: "Internal \u2014 the `labelInValue` multiple/tags shape of `<Select options>`; use Select."
+  },
   SelectDataProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -1769,6 +1838,7 @@ const COMPONENT_PROP_REGISTRY = {
       "DensityProp",
       "SortStateProp",
       "SelectedIdsProp",
+      "GetRowLabelProp",
       "HandlerProp",
       "TablePresetProp",
       "TableColumnPriorityProp",
@@ -2224,6 +2294,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/navigation.prop.ts",
     vocabulary: []
   },
+  DropdownMenuTriggerActionProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
   PaginationAlignProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

package/dist/props/vocabulary/data.prop.d.ts

@@ -7,6 +7,11 @@ import type { BreakpointProp, ColumnAlignProp, SortDirectionProp } from "./inter
 import type { TableDensityProp } from "./layout.prop.js";
 /** Generic row identifier extractor for tables with selection. */
 export type GetRowIdProp<T> = (row: T) => string;
+/**
+ * Human-readable row name — what a row's selection control is announced as. The row id is a KEY,
+ * not a name: announced, it reads a UUID aloud.
+ */
+export type GetRowLabelProp<T> = (row: T) => string;
 /** Row click navigation handler. */
 export type OnRowClickProp<T> = (row: T) => void;
 /** Column definition for DataTable. */

package/dist/props/vocabulary/index.d.ts

@@ -4,4 +4,4 @@ export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, F
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";
+export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

package/dist/styles/control.css

@@ -177,8 +177,8 @@
     content: "";
     position: absolute;
     inset: 0;
-    min-inline-size: var(--button-bare-target-size);
-    min-block-size: var(--button-bare-target-size);
+    min-inline-size: var(--button-bare-target-size, var(--control-height-xs));
+    min-block-size: var(--button-bare-target-size, var(--control-height-xs));
     margin: auto;
   }
 
@@ -375,6 +375,22 @@
     line-height: 0;
   }
 
+  .ui-choice-input {
+    position: absolute;
+    inset: 0;
+    display: block;
+  }
+
+  .ui-choice-input > input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+
   .ui-choice-content {
     display: grid;
     gap: var(--choice-description-gap);
@@ -402,6 +418,8 @@
 
   .ui-checkbox,
   .ui-radio {
+
+    position: relative;
     width: var(--checkbox-size);
     height: var(--checkbox-size);
     flex-shrink: 0;
@@ -420,7 +438,7 @@
 
   .ui-checkbox:disabled,
   .ui-radio:disabled,
-  .ui-slider-thumb:disabled,
+  .ui-slider-thumb[data-disabled],
   .ui-switch:disabled,
   .ui-checkbox[data-disabled],
   .ui-radio[data-disabled],
@@ -463,6 +481,8 @@
   }
 
   .ui-switch {
+
+    position: relative;
     display: inline-flex;
     width: var(--switch-width);
     height: var(--switch-height);
@@ -502,32 +522,80 @@
   .ui-slider {
     position: relative;
     display: flex;
-    width: 100%;
+    inline-size: 100%;
     touch-action: none;
     user-select: none;
     align-items: center;
   }
 
+  .ui-slider[data-orientation="vertical"] {
+
+    inline-size: fit-content;
+    block-size: 100%;
+    min-block-size: var(--slider-vertical-min-block-size);
+    flex-direction: column;
+  }
+
+  .ui-slider-control {
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    align-self: stretch;
+    align-items: center;
+    block-size: var(--slider-thumb-size);
+  }
+
+  .ui-slider[data-orientation="vertical"] .ui-slider-control {
+    flex-direction: column;
+    align-self: center;
+    inline-size: var(--slider-thumb-size);
+    block-size: auto;
+  }
+
   .ui-slider-track {
     position: relative;
-    height: var(--slider-track-height);
-    width: 100%;
     flex-grow: 1;
-    overflow: hidden;
+    align-self: center;
+    block-size: var(--slider-track-height);
     border-radius: var(--radius-pill);
     background: var(--slider-track-background, hsl(var(--primary) / 0.2));
   }
 
+  .ui-slider[data-orientation="vertical"] .ui-slider-track {
+    inline-size: var(--slider-track-height);
+    block-size: auto;
+  }
+
   .ui-slider-range {
     position: absolute;
-    height: 100%;
+    inset-block: 0;
+    inset-inline-start: var(--slider-range-start, 0%);
+    inline-size: var(--slider-range-size, 0%);
+    border-radius: inherit;
     background: var(--slider-range-background, hsl(var(--primary)));
   }
 
+  .ui-slider[data-orientation="vertical"] .ui-slider-range {
+    inset-block-start: auto;
+    inset-block-end: var(--slider-range-start, 0%);
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--slider-range-size, 0%);
+  }
+
+  .ui-slider-range[data-draggable="true"] {
+    cursor: grab;
+  }
+
   .ui-slider-thumb {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--slider-thumb-offset, 0%);
     display: block;
-    width: var(--slider-thumb-size);
-    height: var(--slider-thumb-size);
+    inline-size: var(--slider-thumb-size);
+    block-size: var(--slider-thumb-size);
+    margin-block-start: calc(var(--slider-thumb-size) / -2);
+    margin-inline-start: calc(var(--slider-thumb-size) / -2);
     border: 1px solid hsl(var(--primary) / 0.5);
     border-radius: var(--radius-pill);
     background: hsl(var(--background));
@@ -539,6 +607,14 @@
       box-shadow 150ms;
   }
 
+  .ui-slider[data-orientation="vertical"] .ui-slider-thumb {
+    inset-block-start: auto;
+    inset-block-end: var(--slider-thumb-offset, 0%);
+    inset-inline-start: 50%;
+    margin-block-start: 0;
+    margin-block-end: calc(var(--slider-thumb-size) / -2);
+  }
+
   .ui-color-picker {
     display: flex;
     align-items: center;
@@ -992,6 +1068,8 @@
     --segmented-item-height: calc(var(--control-height) - var(--segmented-track-padding) * 2);
     display: inline-flex;
     max-width: 100%;
+
+    flex-wrap: wrap;
     align-items: stretch;
     padding: var(--segmented-track-padding);
     border-radius: var(--segmented-track-radius);
@@ -1001,6 +1079,8 @@
   }
 
   .ui-segmented-item {
+
+    position: relative;
     display: inline-flex;
     min-width: 0;
     height: var(--segmented-item-height);
@@ -1093,7 +1173,8 @@
     background: hsl(var(--secondary));
     color: hsl(var(--secondary-foreground));
   }
-  .ui-tag-input-remove {
+  .ui-tag-input-remove,
+  .ui-search-select-value-remove {
 
     display: inline-flex;
     align-items: center;
@@ -1108,10 +1189,12 @@
     color: inherit;
     opacity: 0.7;
   }
-  .ui-tag-input-remove:hover {
+  .ui-tag-input-remove:hover,
+  .ui-search-select-value-remove:hover {
     opacity: 1;
   }
-  .ui-tag-input-remove svg {
+  .ui-tag-input-remove svg,
+  .ui-search-select-value-remove svg {
     width: 0.75rem;
     height: 0.75rem;
   }
@@ -1255,6 +1338,20 @@
     inline-size: 0.75rem;
     block-size: 0.75rem;
   }
+
+  @media (pointer: coarse) {
+    .ui-number-input:not([data-size="xs"]):not([data-size="sm"]) {
+      --control-height: var(--number-input-touch-height);
+    }
+
+    .ui-number-input-steppers {
+      gap: 0;
+    }
+
+    .ui-number-input-step {
+      block-size: calc(var(--control-height) / 2);
+    }
+  }
 }
 
 @layer components {
@@ -1349,6 +1446,7 @@
   }
 
   .ui-search-select-list {
+    max-block-size: var(--search-select-list-max-height);
     max-block-size: none;
     min-block-size: 0;
     flex: 1 1 0%;
@@ -1545,11 +1643,21 @@
 
 @layer components {
 
+  .ui-select-root {
+    display: contents;
+  }
+
   .ui-select-content {
     position: relative;
     z-index: var(--overlay-z-index);
+    display: flex;
+    flex-direction: column;
     max-height: var(--select-content-max-height);
-    min-width: var(--menu-content-min-width);
+
+    min-width: max(
+      var(--menu-content-min-width),
+      var(--trigger-width, var(--menu-content-min-width))
+    );
     overflow: hidden;
     border-radius: var(--radius-md);
     border: 1px solid hsl(var(--border));
@@ -1558,13 +1666,21 @@
     box-shadow: var(--shadow-md);
   }
 
+  .ui-select-content[data-popup-match="content"] {
+    min-width: var(--menu-content-min-width);
+  }
+
   .ui-select-content[data-popup-match="fixed"] {
     min-width: var(--select-content-inline-size);
     width: var(--select-content-inline-size);
   }
 
   .ui-select-viewport {
+    min-block-size: 0;
+    max-block-size: var(--select-content-max-height);
+    overflow-y: auto;
     padding: var(--menu-content-space-inset);
+    outline: none;
   }
 
   .ui-select-empty {
@@ -1649,6 +1765,19 @@
     flex-shrink: 0;
     opacity: var(--control-affix-rest-alpha);
   }
+
+  .ui-select-prefix,
+  .ui-select-suffix {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-select-trigger-prefixed > [data-slot="select-value"] {
+    flex: 1 1 auto;
+    text-align: start;
+  }
 }
 
 @layer components {
@@ -1772,6 +1901,22 @@
     transition: opacity 150ms ease;
   }
 
+  .ui-control-inline-affix-action {
+    position: relative;
+  }
+
+  .ui-control-inline-affix-action::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   .ui-control-inline-affix-action:hover,
   .ui-control-inline-affix-action:focus-visible {
     color: hsl(var(--foreground));
@@ -1993,6 +2138,8 @@
     background-color: hsl(var(--muted));
 
     border-radius: 0;
+
+    padding-block: var(--calendar-bordered-weekday-padding-block);
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
@@ -2421,7 +2568,7 @@
   }
 
   .ui-button--xs {
-    height: var(--button-xs-height);
+    height: var(--button-xs-height, var(--control-height-xs));
     gap: var(--button-xs-space-gap);
     padding-inline: var(--button-xs-space-inline);
     font-size: var(--button-xs-font-size);
@@ -2527,8 +2674,8 @@
 
   .ui-control[data-status="warning"],
   .ui-control-multiline[data-status="warning"] {
-    --focus-ring-color: var(--control-status-warning-border-color);
-    --focus-outline-color: var(--control-status-warning-border-color);
+    --focus-ring-color: var(--control-status-warning-outline-color);
+    --focus-outline-color: var(--control-status-warning-outline-color);
     --focus-ring-glow-color: var(--control-status-warning-glow-color);
     --focus-ring-glow-alpha: var(--control-status-warning-glow-alpha);
   }
@@ -2668,7 +2815,7 @@
     order: 1;
   }
 
-  .ui-slider[data-has-marks="true"] {
+  .ui-slider[data-has-marks="true"]:not([data-orientation="vertical"]) {
     margin-block-end: calc(var(--slider-mark-space-block-start) + var(--font-size-lg));
   }
 
@@ -2680,13 +2827,35 @@
     block-size: 0;
   }
 
+  .ui-slider[data-orientation="vertical"] .ui-slider-marks {
+    inset-block: 0;
+    inset-inline-start: 100%;
+    inset-inline-end: auto;
+    margin-block-start: 0;
+    margin-inline-start: var(--slider-mark-space-block-start);
+    inline-size: 0;
+    block-size: auto;
+  }
+
   .ui-slider-mark {
     position: absolute;
     inset-inline-start: var(--slider-mark-offset-inline, 0%);
-    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    inline-size: 0;
     font-size: var(--slider-mark-font-size);
     color: hsl(var(--slider-mark-color));
     white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .ui-slider[data-orientation="vertical"] .ui-slider-mark {
+    inset-inline-start: 0;
+    inset-block-end: var(--slider-mark-offset-block, 0%);
+    align-items: center;
+    justify-content: flex-start;
+    inline-size: auto;
+    block-size: 0;
   }
 
   .ui-slider-dot {
@@ -2695,35 +2864,78 @@
     inset-inline-start: var(--slider-mark-offset-inline, 0%);
     inline-size: var(--slider-dot-size);
     block-size: var(--slider-dot-size);
-    transform: translate(-50%, -50%);
+    margin-block-start: calc(var(--slider-dot-size) / -2);
+    margin-inline-start: calc(var(--slider-dot-size) / -2);
     border-radius: var(--radius-pill);
     background: hsl(var(--slider-dot-background));
     border: var(--control-border-width) solid hsl(var(--slider-dot-border-color));
   }
 
+  .ui-slider[data-orientation="vertical"] .ui-slider-dot {
+    inset-block-start: auto;
+    inset-block-end: var(--slider-mark-offset-block, 0%);
+    inset-inline-start: 50%;
+    margin-block-start: 0;
+    margin-block-end: calc(var(--slider-dot-size) / -2);
+  }
+
   .ui-slider-dot[data-active="true"] {
     border-color: hsl(var(--slider-dot-active-border-color));
   }
 
   .ui-slider-tooltip {
     position: absolute;
-    inset-block-end: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms;
+  }
+
+  .ui-slider-tooltip[data-placement="top"],
+  .ui-slider-tooltip[data-placement="bottom"] {
     inset-inline-start: 50%;
-    transform: translateX(-50%);
-    margin-block-end: var(--slider-tooltip-offset-block);
+    inline-size: 0;
+  }
+
+  .ui-slider-tooltip[data-placement="top"] {
+    inset-block-end: 100%;
+    padding-block-end: var(--slider-tooltip-offset-block);
+  }
+
+  .ui-slider-tooltip[data-placement="bottom"] {
+    inset-block-start: 100%;
+    padding-block-start: var(--slider-tooltip-offset-block);
+  }
+
+  .ui-slider-tooltip[data-placement="left"],
+  .ui-slider-tooltip[data-placement="right"] {
+    inset-block-start: 50%;
+    block-size: 0;
+  }
+
+  .ui-slider-tooltip[data-placement="left"] {
+    inset-inline-end: 100%;
+    padding-inline-end: var(--slider-tooltip-offset-block);
+  }
+
+  .ui-slider-tooltip[data-placement="right"] {
+    inset-inline-start: 100%;
+    padding-inline-start: var(--slider-tooltip-offset-block);
+  }
+
+  .ui-slider-tooltip-content {
     padding-inline: var(--slider-tooltip-padding-inline);
     border-radius: var(--slider-tooltip-radius);
     background: hsl(var(--slider-tooltip-background));
     color: hsl(var(--slider-tooltip-color));
     font-size: var(--slider-tooltip-font-size);
     white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 150ms;
   }
 
-  .ui-slider-thumb:hover .ui-slider-tooltip,
-  .ui-slider-thumb:focus-visible .ui-slider-tooltip,
+  .ui-slider-thumb:is([data-hovered], [data-focus-visible], [data-dragging])
+    .ui-slider-tooltip:not([data-open="false"]),
   .ui-slider-tooltip[data-open="true"] {
     opacity: 1;
   }
@@ -2755,6 +2967,8 @@
   }
 
   .ui-radio-button {
+
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -2806,6 +3020,10 @@
     justify-content: center;
   }
 
+  .ui-segmented:not([data-orientation="vertical"]) {
+    row-gap: var(--segmented-track-padding);
+  }
+
   .ui-segmented[data-orientation="vertical"] {
     flex-direction: column;
   }

package/dist/styles/data-display-layout.css

@@ -807,24 +807,32 @@
 
 @layer components {
 
-  [data-slot="scroll-area-viewport"][data-orientation="vertical"] > * {
-    display: block !important;
+  .ui-scroll-area {
+    position: relative;
+    scrollbar-width: var(--scroll-area-scrollbar-width);
+    scrollbar-color: var(--scroll-area-thumb-color, hsl(var(--border)))
+      var(--scroll-area-track-color, transparent);
+    scrollbar-gutter: var(--scroll-area-scrollbar-space);
   }
 
-  .ui-scroll-area-bar {
-    padding: var(--scroll-area-bar-padding);
+  .ui-scroll-area[data-orientation="vertical"] {
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 
-  .ui-scroll-area-bar--vertical {
-    inline-size: var(--scroll-area-bar-size);
+  .ui-scroll-area[data-orientation="horizontal"] {
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
-  .ui-scroll-area-bar--horizontal {
-    block-size: var(--scroll-area-bar-size);
+  .ui-scroll-area[data-orientation="both"] {
+    overflow: auto;
   }
 
-  .ui-scroll-area-thumb {
-    border-radius: var(--scroll-area-thumb-radius);
+  .ui-scroll-area:is([data-orientation="horizontal"], [data-orientation="both"])
+    > .ui-scroll-area-content {
+    inline-size: max-content;
+    min-inline-size: 100%;
   }
 }