@godxjp/ui 22.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],
@@ -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;
   }
@@ -1349,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%;
@@ -1545,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));
@@ -1558,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 {
@@ -1649,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 {
@@ -2668,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));
   }
 
@@ -2680,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 {
@@ -2695,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;
   }
@@ -2755,6 +2935,8 @@
   }
 
   .ui-radio-button {
+
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;

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%;
   }
 }
 

package/dist/styles/focus-ring.css

@@ -13,7 +13,6 @@
     .ui-toggle,
     .ui-checkbox,
     .ui-radio,
-    .ui-slider-thumb,
     .ui-steps-inline-control,
     .ui-pagination-link,
     .ui-legal-document-toc-link,
@@ -30,6 +29,7 @@
 
   .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,
@@ -59,7 +59,6 @@
       .ui-toggle,
       .ui-checkbox,
       .ui-radio,
-      .ui-slider-thumb,
       .ui-steps-inline-control,
       .ui-pagination-link,
       .ui-legal-document-toc-link,
@@ -76,6 +75,7 @@
 
   :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,

package/dist/styles/fonts.css

@@ -6,11 +6,95 @@
 @import "@fontsource/noto-sans-jp/500.css";
 @import "@fontsource/noto-sans-jp/700.css";
 
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 400;
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
+  size-adjust: 103.02%;
+  ascent-override: 112.6%;
+  descent-override: 27.96%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 500;
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
+  size-adjust: 105.5%;
+  ascent-override: 109.95%;
+  descent-override: 27.3%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 700;
+  src:
+    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
+    local("LiberationSans-Bold");
+  size-adjust: 101.5%;
+  ascent-override: 114.29%;
+  descent-override: 28.37%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 400;
+  src:
+    local("Hiragino Sans W3"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
+    local("Noto Sans CJK JP"), local("NotoSansCJKjp-Regular"), local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 500;
+  src:
+    local("Hiragino Sans W5"), local("HiraginoSans-W5"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
+    local("Noto Sans CJK JP Medium"), local("NotoSansCJKjp-Medium"), local("Noto Sans CJK JP"),
+    local("NotoSansCJKjp-Regular"), local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 700;
+  src:
+    local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"),
+    local("HiraKakuProN-W6"), local("Yu Gothic Bold"), local("YuGothic-Bold"), local("Meiryo Bold"),
+    local("Meiryo-Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold"),
+    local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+
 :root {
   --font-sans-base:
-    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
-    "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+    "Noto Sans JP", "Noto Sans JP Fallback", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
+    "Yu Gothic Medium", YuGothic, "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, system-ui, sans-serif;
   --font-sans-vi:
-    "Noto Sans JP", "M PLUS 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
-    sans-serif;
+    "Noto Sans JP", "Noto Sans JP Fallback", "M PLUS 2", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, system-ui, sans-serif;
 }