@godxjp/ui 28.8.0 → 28.10.0

package/dist/styles/base.css

@@ -130,17 +130,38 @@
   --color-wa-sumi: var(--wa-sumi);
   --color-wa-nezu: var(--wa-nezu);
 
-  --text-2xs: var(--font-size-2xs);
-  --text-xs: var(--font-size-xs);
-  --text-sm: var(--font-size-sm);
+  --text-2xs: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --text-xs: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+  --text-sm: var(--font-size-sm, var(--font-size-base));
   --text-base: var(--font-size-base);
-  --text-lg: var(--font-size-lg);
-  --text-xl: var(--font-size-xl);
-  --text-2xl: var(--font-size-2xl);
+  --text-lg: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
+  --text-xl: var(
+    --font-size-xl,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio)
+    )
+  );
+  --text-2xl: var(
+    --font-size-2xl,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio) * var(--font-size-ratio)
+    )
+  );
 
-  --text-3xl: var(--font-size-3xl);
-  --text-4xl: var(--font-size-4xl);
-  --text-5xl: var(--font-size-5xl);
+  --text-3xl: var(
+    --font-size-3xl,
+    calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio))
+  );
+  --text-4xl: var(--font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)));
+  --text-5xl: var(--font-size-5xl, var(--font-size-display));
 }
 
 @layer base {
@@ -175,32 +196,44 @@
   }
 
   h1 {
-    font-size: var(--heading-h1);
+    font-size: var(
+      --heading-h1,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h2 {
-    font-size: var(--heading-h2);
+    font-size: var(
+      --heading-h2,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h3 {
-    font-size: var(--heading-h3);
+    font-size: var(--heading-h3, var(--font-size-base));
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h4 {
-    font-size: var(--heading-h4);
+    font-size: var(
+      --heading-h4,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h5,
   h6 {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }

package/dist/styles/card-layout.css

@@ -264,13 +264,13 @@
     padding-bottom: var(--card-space-body-y);
   }
 
-  [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-action"])
-    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
+  [data-slot="card-header"]:has([data-slot="card-action"])
+    + [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
     padding-top: 0;
   }
 
-  [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-description"])
-    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
+  [data-slot="card-header"]:has([data-slot="card-description"])
+    + [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
     padding-top: var(--card-space-body-y);
   }
 
@@ -666,7 +666,7 @@
 
   [data-slot="service-launcher-skeleton-status"] {
     width: var(--card-service-launcher-skeleton-status-width);
-    height: var(--font-size-xs);
+    height: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
     margin-inline-start: auto;
   }
 
@@ -674,7 +674,7 @@
   [data-slot="service-launcher-skeleton-metadata"],
   [data-slot="service-launcher-skeleton-action"] {
     width: 100%;
-    height: var(--font-size-xs);
+    height: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
   [data-slot="service-launcher-skeleton-action"] {

package/dist/styles/chart-layout.css

@@ -10,7 +10,7 @@
 }
 
 .ui-chart-title {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-sm, var(--font-size-base));
   font-weight: var(--font-weight-medium);
   color: hsl(var(--foreground));
 }
@@ -22,7 +22,7 @@
 
 .ui-chart .recharts-text,
 .ui-chart .recharts-legend-item-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   fill: hsl(var(--muted-foreground));
   color: hsl(var(--muted-foreground));
 }
@@ -36,12 +36,12 @@
   border: 1px solid hsl(var(--border)) !important;
   background: hsl(var(--popover)) !important;
   color: hsl(var(--popover-foreground));
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 }
 
 .ui-chart-footer {
   margin-block-start: var(--chart-trend-footer-gap);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   color: hsl(var(--muted-foreground));
 }
 
@@ -118,7 +118,7 @@
   overflow: hidden;
   font-size: var(--chart-trend-tick-font-size);
 
-    line-height: var(--line-height-normal);
+  line-height: var(--line-height-normal);
   color: hsl(var(--muted-foreground));
   text-align: center;
   text-overflow: ellipsis;
@@ -131,7 +131,7 @@
   inset-inline-start: 0;
   visibility: hidden;
   margin-inline-end: var(--chart-category-axis-gap);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   white-space: nowrap;
   pointer-events: none;
 }

package/dist/styles/control.css

@@ -100,7 +100,7 @@
 
   .ui-button {
     flex-shrink: 0;
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm, var(--font-size-base));
     outline: none;
   }
 
@@ -560,7 +560,9 @@
 
   .ui-switch-thumb {
     pointer-events: none;
-    display: block;
+
+    display: grid;
+    place-items: center;
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
     border-radius: var(--radius-pill);
@@ -859,7 +861,7 @@
   .ui-command-palette-meta {
     margin-inline-start: auto;
     color: hsl(var(--muted-foreground));
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
   .ui-command-palette-state {
@@ -878,7 +880,7 @@
     padding: var(--command-palette-hint-padding-y) var(--command-palette-hint-padding-x);
     color: hsl(var(--muted-foreground));
     font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
   .ui-search-input {
@@ -1195,8 +1197,13 @@
 
   .ui-segmented-item[data-state="checked"] {
     background: hsl(var(--segmented-item-selected-background));
-    box-shadow: var(--segmented-item-selected-shadow);
+
+    box-shadow:
+      var(--segmented-item-selected-shadow),
+      inset 0 0 0 1px hsl(var(--segmented-item-selected-border-color, var(--input)));
     color: hsl(var(--segmented-item-selected-color));
+
+    font-weight: var(--segmented-item-selected-font-weight);
   }
 
   .ui-segmented-item[data-disabled] {
@@ -1332,6 +1339,13 @@
     cursor: pointer;
   }
 
+  .ui-toggle > svg,
+  .ui-control-trigger > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-control-trigger:disabled,
   .ui-control-trigger[data-disabled] {
     cursor: not-allowed;
@@ -2102,6 +2116,13 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-input-leading > svg,
+  .ui-input-trailing > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-input-trailing {
     inset-inline-end: var(--control-inline-affix-inset-inline);
   }
@@ -2873,6 +2894,12 @@
     white-space: nowrap;
   }
 
+  .ui-input-addon > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-input-group > [data-slot="input-addon-before"] {
     border-start-start-radius: var(--control-radius);
     border-end-start-radius: var(--control-radius);
@@ -2887,12 +2914,14 @@
 
   .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input,
   .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input-affix-wrapper {
+    --input-radius-start: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
   .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input,
   .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input-affix-wrapper {
+    --input-radius-end: 0;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
@@ -2959,7 +2988,13 @@
   }
 
   .ui-slider[data-has-marks="true"]:not([data-orientation="vertical"]) {
-    margin-block-end: calc(var(--slider-mark-space-block-start) + var(--font-size-lg));
+    margin-block-end: calc(
+      var(--slider-mark-space-block-start) +
+        var(
+          --font-size-lg,
+          calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+        )
+    );
   }
 
   .ui-slider-marks {

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

@@ -1159,19 +1159,31 @@
   }
 
   .ui-prose h1 {
-    font-size: var(--heading-h1);
+    font-size: var(
+      --heading-h1,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
   }
 
   .ui-prose h2 {
-    font-size: var(--heading-h2);
+    font-size: var(
+      --heading-h2,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
   }
 
   .ui-prose h3 {
-    font-size: var(--heading-h3);
+    font-size: var(--heading-h3, var(--font-size-base));
   }
 
   .ui-prose h4 {
-    font-size: var(--heading-h4);
+    font-size: var(
+      --heading-h4,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
   }
 
   .ui-prose :is(ul, ol) {
@@ -1220,7 +1232,7 @@
 
   .ui-prose :is(th, td) {
     border: var(--stroke-hairline) solid hsl(var(--border));
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: top;
   }
@@ -2059,7 +2071,10 @@
 
   .ui-tree[data-size="xs"] {
     --tree-node-height: var(--control-height-xs);
-    --tree-node-font-size: var(--font-size-xs);
+    --tree-node-font-size: var(
+      --font-size-xs,
+      calc(var(--font-size-base) / var(--font-size-ratio))
+    );
   }
 
   .ui-tree[data-size="sm"] {

package/dist/styles/density.css

@@ -61,6 +61,8 @@
   --space-inline-sm: var(--space-2);
   --space-inline-md: var(--space-3);
   --space-inline-lg: var(--space-4);
+
+  --space-inline-xl: var(--space-6);
   --space-chrome-x: var(--space-6);
   --space-chrome-y: var(--space-4);
   --space-chrome-gap: var(--space-2);

package/dist/styles/dialog-layout.css

@@ -163,7 +163,10 @@
   }
 
   [data-slot="dialog-title"] {
-    font-size: var(--font-size-lg);
+    font-size: var(
+      --font-size-lg,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);

package/dist/styles/focus-ring.css

@@ -56,7 +56,10 @@
   .ui-otp-slot[data-active="true"],
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
     outline: var(--focus-ring-width) solid
-      hsl(var(--focus-outline-color, var(--focus-ring-color, var(--ring))) / var(--focus-ring-opacity, 1));
+      hsl(
+        var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
+          var(--focus-ring-opacity, 1)
+      );
     outline-offset: var(--focus-ring-offset);
 
     transition:

package/dist/styles/layout.css

@@ -142,6 +142,23 @@
     flex: none;
   }
 
+  .ui-flex[data-measure] {
+    margin-inline: auto;
+    inline-size: 100%;
+  }
+
+  .ui-flex[data-measure="narrow"] {
+    max-inline-size: var(--page-measure-narrow);
+  }
+
+  .ui-flex[data-measure="medium"] {
+    max-inline-size: var(--page-measure-medium);
+  }
+
+  .ui-flex[data-measure="wide"] {
+    max-inline-size: var(--page-measure-wide);
+  }
+
   .ui-flex[data-align="start"] {
     align-items: flex-start;
   }
@@ -218,6 +235,13 @@
     gap: var(--space-12);
   }
 
+  .ui-flex-gap-20 {
+    gap: var(--space-20);
+  }
+  .ui-flex-gap-24 {
+    gap: var(--space-24);
+  }
+
   .ui-flex[data-direction="row"].ui-flex-gap-xs {
     gap: var(--space-inline-xs);
   }
@@ -1693,13 +1717,16 @@
     }
   }
   .ui-separator[data-label-size="2xs"] .ui-separator-label {
-    font-size: var(--font-size-2xs);
+    font-size: var(
+      --font-size-2xs,
+      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+    );
   }
   .ui-separator[data-label-size="xs"] .ui-separator-label {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
   .ui-separator[data-label-size="sm"] .ui-separator-label {
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm, var(--font-size-base));
   }
   .ui-separator[data-label-size="md"] .ui-separator-label {
     font-size: var(--font-size-base);

package/dist/styles/navigation-layout.css

@@ -441,7 +441,9 @@
   }
 
   .ui-pagination .ui-button svg,
-  .ui-pagination .ui-pagination-link svg {
+  .ui-pagination .ui-pagination-link svg,
+
+  .ui-pagination .ui-pagination-ellipsis svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }

package/dist/styles/shell-layout.css

@@ -853,14 +853,18 @@
       grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
       grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
       grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
     }
     .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"] {
       grid-template-columns: minmax(0, 1fr) var(--app-shell-nav-rail-width);
       grid-template-areas: "topbar navrail" "main navrail" "footer navrail";
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
       grid-template-areas: "topbar topbar" "main navrail" "footer navrail";
     }
 
@@ -873,12 +877,12 @@
         minmax(0, 1fr)
         auto;
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
       grid-template-areas: "navrail" "topbar" "main" "footer";
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail]:is(
-        [data-nav-rail-position="bottom"]
-      ) {
+    .app-root:where([data-sidebar="none"])[data-nav-rail]:is([data-nav-rail-position="bottom"]) {
       grid-template-columns: minmax(0, 1fr);
       grid-template-areas: "topbar" "main" "footer" "navrail";
       grid-template-rows:
@@ -888,7 +892,9 @@
         var(--app-shell-nav-rail-height);
     }
 
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
       grid-template-areas: "topbar" "main" "footer" "navrail";
     }
   }
@@ -908,10 +914,7 @@
       display: none;
     }
 
-    .app-root[data-nav-rail]:is(
-        [data-nav-rail-position="top"],
-        [data-nav-rail-position="bottom"]
-      ) {
+    .app-root[data-nav-rail]:is([data-nav-rail-position="top"], [data-nav-rail-position="bottom"]) {
       grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;
     }
 
@@ -1325,16 +1328,11 @@
   }
 
   .ui-app-launcher-launchpad .ui-app-launcher-grid {
-    grid-template-columns: repeat(
-      auto-fit,
-      var(--app-launcher-launchpad-tile-inline-size)
-    );
+    grid-template-columns: repeat(auto-fit, var(--app-launcher-launchpad-tile-inline-size));
     max-width: calc(
       var(--app-launcher-columns) *
-        (
-          var(--app-launcher-launchpad-tile-inline-size) +
-            var(--app-launcher-launchpad-grid-gap)
-        ) - var(--app-launcher-launchpad-grid-gap)
+        (var(--app-launcher-launchpad-tile-inline-size) + var(--app-launcher-launchpad-grid-gap)) -
+        var(--app-launcher-launchpad-grid-gap)
     );
     justify-content: start;
     gap: var(--app-launcher-launchpad-grid-gap);
@@ -1664,7 +1662,10 @@
         transparent
       )
     );
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
+    color: var(
+      --sidebar-item-active-foreground,
+      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
+    );
     font-weight: var(--font-weight-medium);
   }
 
@@ -1740,6 +1741,8 @@
   .sb-nav-group-trigger .sb-chevron {
     margin-inline-start: auto;
     flex: 0 0 auto;
+    inline-size: var(--sidebar-nav-icon-size);
+    block-size: var(--sidebar-nav-icon-size);
     opacity: 0.6;
     transition: transform 150ms ease;
   }
@@ -1781,7 +1784,10 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
+    color: var(
+      --sidebar-item-active-foreground,
+      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
+    );
     font-weight: var(--font-weight-medium);
   }