@godxjp/ui 21.0.0 → 23.0.0

package/dist/styles/control.css

@@ -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],
@@ -452,7 +470,7 @@
     fill: currentColor;
   }
 
-  .ui-switch[aria-invalid="true"] {
+  .ui-switch:has(input[aria-invalid="true"]) {
     --tw-ring-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
     box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
   }
@@ -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;
@@ -988,8 +1064,12 @@
   }
 
   .ui-segmented {
+
+    --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);
@@ -999,6 +1079,8 @@
   }
 
   .ui-segmented-item {
+
+    position: relative;
     display: inline-flex;
     min-width: 0;
     height: var(--segmented-item-height);
@@ -1091,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;
@@ -1106,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;
   }
@@ -1222,14 +1307,15 @@
     font-size: var(--font-size-base);
     pointer-events: none;
   }
-  .ui-number-input-affix:first-of-type {
+
+  [data-slot="number-input-prefix"] {
     inset-inline-start: var(--control-padding-x);
   }
 
-  .ui-number-input:has(.ui-number-input-affix:first-of-type) .ui-number-input-field {
+  .ui-number-input:has([data-slot="number-input-prefix"]) .ui-number-input-field {
     padding-inline-start: calc(var(--control-padding-x) + 1.25rem);
   }
-  .ui-number-input-affix:last-of-type {
+  [data-slot="number-input-suffix"] {
     inset-inline-end: calc(var(--control-height) + var(--space-2));
   }
   .ui-number-input-steppers {
@@ -1346,6 +1432,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%;
@@ -1542,11 +1629,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));
@@ -1555,13 +1652,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 {
@@ -1646,6 +1751,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 {
@@ -2407,6 +2525,11 @@
     gap: var(--month-picker-grid-space-gap);
   }
 
+  .ui-month-picker-row,
+  .ui-month-picker-gridcell {
+    display: contents;
+  }
+
   .ui-month-picker-cell {
     padding-inline: var(--month-picker-cell-space-inline);
     font-weight: var(--font-weight-normal);
@@ -2660,7 +2783,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));
   }
 
@@ -2672,13 +2795,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 {
@@ -2687,35 +2832,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;
   }
@@ -2747,6 +2935,8 @@
   }
 
   .ui-radio-button {
+
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -2782,7 +2972,7 @@
     border-color: hsl(var(--choice-button-solid-background));
   }
 
-  .ui-radio-button:disabled {
+  .ui-radio-button[data-disabled] {
     cursor: not-allowed;
     opacity: var(--disabled-opacity);
   }
@@ -2792,7 +2982,7 @@
     inline-size: 100%;
   }
 
-  .ui-segmented[data-block="true"] > .ui-segmented-item {
+  .ui-segmented[data-block="true"]:not([data-orientation="vertical"]) > .ui-segmented-item {
     flex: 1 1 0;
     min-inline-size: 0;
     justify-content: center;
@@ -2803,6 +2993,7 @@
   }
 
   .ui-segmented[data-orientation="vertical"] > .ui-segmented-item {
+    block-size: var(--control-height);
     justify-content: flex-start;
   }
 

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

@@ -143,7 +143,7 @@
   }
 
   .ui-progress-track {
-    height: 0.5rem;
+    height: var(--progress-meter-block-size);
     overflow: hidden;
     border-radius: var(--radius-pill);
     background: var(--progress-track-background, hsl(var(--secondary)));
@@ -152,19 +152,19 @@
   .ui-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: var(--progress-fill-background, hsl(var(--success)));
+    background: var(--progress-fill-background, hsl(var(--mark-success)));
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-bar {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-progress[data-tone="destructive"] .ui-progress-bar {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-progress[data-over] .ui-progress-bar {
-    background-color: hsl(var(--destructive));
+    background-color: hsl(var(--mark-destructive));
     background-image: repeating-linear-gradient(
       45deg,
       hsl(var(--destructive-foreground) / 0.4) 0,
@@ -180,20 +180,28 @@
     border-radius: var(--progress-breakdown-radius);
   }
 
+  .ui-progress[data-size="sm"] .ui-progress-track {
+    height: var(--progress-meter-block-size-sm);
+  }
+
+  .ui-progress[data-breakdown][data-size="sm"] .ui-progress-track {
+    height: var(--progress-breakdown-block-size-sm);
+  }
+
   .ui-progress-segment {
     height: 100%;
   }
 
   .ui-progress-segment[data-tone="success"] {
-    background: hsl(var(--success));
+    background: hsl(var(--mark-success));
   }
 
   .ui-progress-segment[data-tone="warning"] {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-progress-segment[data-tone="destructive"] {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-progress-label {
@@ -201,6 +209,61 @@
     font-size: var(--progress-label-font-size);
   }
 
+  .ui-progress[data-shape="ring"] {
+    display: inline-flex;
+  }
+
+  .ui-progress-ring {
+    position: relative;
+    display: inline-grid;
+    inline-size: var(--progress-ring-size);
+    block-size: var(--progress-ring-size);
+    place-items: center;
+  }
+
+  .ui-progress[data-size="sm"] .ui-progress-ring {
+    --progress-ring-size: var(--progress-ring-size-sm);
+  }
+
+  .ui-progress-ring-svg {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .ui-progress-ring-track,
+  .ui-progress-ring-indicator {
+    fill: none;
+    stroke-width: var(--progress-ring-border-width);
+  }
+
+  .ui-progress-ring-track {
+    stroke: var(--progress-track-background, hsl(var(--secondary)));
+  }
+
+  .ui-progress-ring-indicator {
+    stroke: var(--progress-fill-background, hsl(var(--mark-success)));
+
+    stroke-linecap: butt;
+  }
+
+  .ui-progress[data-tone="warning"] .ui-progress-ring-indicator {
+    stroke: hsl(var(--mark-warning));
+  }
+
+  .ui-progress[data-tone="destructive"] .ui-progress-ring-indicator {
+    stroke: hsl(var(--mark-destructive));
+  }
+
+  .ui-progress-ring-label {
+    position: relative;
+    color: hsl(var(--foreground));
+    font-size: var(--progress-ring-label-font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
   .ui-legend {
     display: flex;
     flex-wrap: wrap;
@@ -227,23 +290,23 @@
   }
 
   .ui-legend-swatch[data-tone="default"] {
-    background: hsl(var(--primary));
+    background: hsl(var(--mark-primary));
   }
 
   .ui-legend-swatch[data-tone="success"] {
-    background: hsl(var(--success));
+    background: hsl(var(--mark-success));
   }
 
   .ui-legend-swatch[data-tone="warning"] {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-legend-swatch[data-tone="destructive"] {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-legend-swatch[data-tone="info"] {
-    background: hsl(var(--info));
+    background: hsl(var(--mark-info));
   }
 
   .ui-legend-swatch[data-tone="muted"],
@@ -744,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%;
   }
 }
 

package/dist/styles/focus-ring.css

@@ -13,8 +13,6 @@
     .ui-toggle,
     .ui-checkbox,
     .ui-radio,
-    .ui-slider-thumb,
-    .ui-switch,
     .ui-steps-inline-control,
     .ui-pagination-link,
     .ui-legal-document-toc-link,
@@ -30,6 +28,9 @@
   ):focus-visible,
 
   .ui-checkbox[data-focus-visible],
+  .ui-switch[data-focus-visible],
+  .ui-slider-thumb[data-focus-visible],
+  .ui-focus-ring[data-focus-visible],
   .ui-control-trigger[data-state="open"],
   .ui-tag-input:focus-within,
   .ui-control-composite-field:focus-within,
@@ -58,8 +59,6 @@
       .ui-toggle,
       .ui-checkbox,
       .ui-radio,
-      .ui-slider-thumb,
-      .ui-switch,
       .ui-steps-inline-control,
       .ui-pagination-link,
       .ui-legal-document-toc-link,
@@ -75,6 +74,9 @@
     ):focus-visible,
 
   :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-slider-thumb[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],
   :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
   :root[data-focus-outline="on"] .ui-tag-input:focus-within,
   :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,