@godxjp/ui 28.7.0 → 28.9.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

@@ -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

@@ -93,7 +93,6 @@
     cursor: pointer;
     gap: var(--control-gap);
     white-space: nowrap;
-    border-radius: var(--control-radius);
     font-weight: var(--font-weight-medium);
     transition-property: color, background-color, border-color, box-shadow;
     transition-duration: 150ms;
@@ -101,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;
   }
 
@@ -860,7 +859,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 {
@@ -879,7 +878,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 {
@@ -1246,9 +1245,9 @@
     min-height: var(--control-height);
     padding: var(--space-1) var(--control-padding-x);
 
-    border: var(--control-border-width) solid var(--control-surface-border-color);
+    border: var(--control-border-width) solid var(--control-surface-border-color, hsl(var(--input)));
     border-radius: var(--control-radius);
-    background: var(--control-surface-background);
+    background: var(--control-surface-background, hsl(var(--background)));
     box-shadow: var(--control-shadow);
   }
   .ui-tag-input-disabled {
@@ -1361,14 +1360,14 @@
   }
 
   .ui-control-surface {
-    border-color: var(--control-surface-border-color);
-    background: var(--control-surface-background);
+    border-color: var(--control-surface-border-color, hsl(var(--input)));
+    background: var(--control-surface-background, hsl(var(--background)));
   }
 
   .ui-control-surface[data-variant="filled"] {
     --control-shadow: var(--control-filled-shadow);
     border-color: var(--control-filled-border-color);
-    background: var(--control-filled-background);
+    background: var(--control-filled-background, hsl(var(--muted)));
   }
 
   .ui-control-surface[data-variant="borderless"] {
@@ -2960,7 +2959,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) {
@@ -1878,12 +1890,13 @@
 
   .ui-chat-bubble-skeleton {
     display: grid;
+    grid-template-columns: minmax(0, var(--chat-bubble-max-inline-size));
     gap: var(--skeleton-row-gap);
   }
 
   .ui-chat-bubble-skeleton-line {
     block-size: var(--skeleton-block-height);
-    inline-size: var(--chat-bubble-max-inline-size);
+    inline-size: auto;
     max-inline-size: 100%;
   }
 
@@ -2058,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

@@ -27,6 +27,8 @@
   --space-8: calc(2rem * var(--scaling));
   --space-10: calc(2.5rem * var(--scaling));
   --space-12: calc(3rem * var(--scaling));
+  --space-20: calc(5rem * var(--scaling));
+  --space-24: calc(6rem * var(--scaling));
   --radius: calc(0.375rem * var(--scaling));
   --control-height: calc(var(--control-height-default) * var(--scaling));
   --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
@@ -48,6 +50,8 @@
   --space-page-x: var(--space-6);
   --space-page-y: var(--space-6);
   --space-section: var(--space-4);
+  --space-section-band: var(--space-20);
+  --space-section-hero: var(--space-24);
   --space-stack-xs: var(--space-1);
   --space-stack-sm: var(--space-2);
   --space-stack-md: var(--space-4);
@@ -57,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

@@ -218,6 +218,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 +1700,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);
@@ -2013,3 +2023,82 @@
     transition: none;
   }
 }
+
+@layer components {
+
+  .ui-masonry {
+    position: relative;
+    box-sizing: border-box;
+
+    column-gap: var(--masonry-gap-inline);
+    row-gap: var(--masonry-gap-block);
+  }
+
+  .ui-masonry-item {
+    position: absolute;
+    box-sizing: border-box;
+
+    --masonry-item-track: calc((100% + var(--masonry-gap-inline)) / var(--masonry-column-count, 3));
+    inline-size: calc(var(--masonry-item-track) - var(--masonry-gap-inline));
+
+    inset-inline-start: calc(var(--masonry-item-track) * var(--masonry-item-column, 0));
+    inset-block-start: 0;
+
+    opacity: 0;
+    transition:
+      opacity var(--duration-base) var(--ease-standard),
+      inset-block-start var(--duration-base) var(--ease-standard),
+      inset-inline-start var(--duration-base) var(--ease-standard);
+  }
+
+  .ui-masonry-item[data-positioned] {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-masonry-item {
+      transition: none;
+    }
+  }
+
+  .ui-affix {
+
+    position: relative;
+  }
+
+  .ui-affix-sentinel {
+    position: absolute;
+    inset-inline: 0;
+
+    block-size: 1px;
+    pointer-events: none;
+  }
+
+  .ui-affix-sentinel[data-edge="block-start"] {
+    inset-block-start: calc(-1 * var(--affix-inset-block-start));
+  }
+
+  .ui-affix-sentinel[data-edge="block-end"] {
+    inset-block-end: calc(-1 * var(--affix-inset-block-end));
+  }
+
+  .ui-affix-placeholder {
+    pointer-events: none;
+  }
+
+  .ui-affix-content[data-affixed] {
+    position: fixed;
+
+    z-index: var(--sticky-z-index);
+
+    inline-size: var(--affix-content-inline-size, auto);
+  }
+
+  .ui-affix-content[data-affixed][data-edge="block-start"] {
+    inset-block-start: calc(var(--affix-target-inset, 0px) + var(--affix-inset-block-start));
+  }
+
+  .ui-affix-content[data-affixed][data-edge="block-end"] {
+    inset-block-end: calc(var(--affix-target-inset, 0px) + var(--affix-inset-block-end));
+  }
+}

package/dist/styles/motion.css

@@ -6,6 +6,20 @@
     will-change: transform, opacity;
   }
 
+  .ui-reveal[data-reveal-on="view"] {
+    animation: none;
+  }
+  .ui-reveal[data-reveal-state="out"] {
+    opacity: 0;
+    transform: translateY(var(--reveal-distance));
+  }
+  .ui-reveal[data-reveal-state="in"] {
+    animation-name: ui-reveal-in;
+    animation-duration: var(--duration-slow);
+    animation-timing-function: var(--ease-emphasized);
+    animation-fill-mode: both;
+  }
+
   .ui-reveal[data-reveal-delay="1"] {
     animation-delay: calc(var(--reveal-stagger-step) * 1);
   }
@@ -38,9 +52,14 @@
 
   @media (prefers-reduced-motion: reduce) {
     .ui-reveal,
-    .ui-reveal[data-reveal-delay] {
+    .ui-reveal[data-reveal-delay],
+    .ui-reveal[data-reveal-state] {
       animation: none;
     }
+    .ui-reveal[data-reveal-state="out"] {
+      opacity: 1;
+      transform: none;
+    }
   }
 }
 
@@ -193,3 +212,104 @@
     }
   }
 }
+
+@layer components {
+
+  .ui-marquee {
+    display: flex;
+    align-items: center;
+    gap: var(--marquee-gap-inline);
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .ui-marquee-viewport {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .ui-marquee-scroller {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .ui-marquee[data-fade="true"] .ui-marquee-viewport {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--marquee-mask-width),
+      black calc(100% - var(--marquee-mask-width)),
+      transparent
+    );
+  }
+
+  .ui-marquee-track {
+    display: flex;
+    inline-size: max-content;
+    will-change: transform;
+    animation: ui-marquee-travel calc(var(--marquee-interval) * var(--marquee-cycle-scale, 1))
+      linear infinite;
+  }
+  .ui-marquee[data-speed="slow"] .ui-marquee-track {
+    animation-duration: calc(var(--marquee-interval-slow) * var(--marquee-cycle-scale, 1));
+  }
+  .ui-marquee[data-speed="fast"] .ui-marquee-track {
+    animation-duration: calc(var(--marquee-interval-fast) * var(--marquee-cycle-scale, 1));
+  }
+
+  .ui-marquee-copy {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--marquee-gap-inline);
+    padding-inline-end: var(--marquee-gap-inline);
+  }
+
+  .ui-marquee-control {
+    flex: 0 0 auto;
+  }
+
+  @keyframes ui-marquee-travel {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% / var(--marquee-copies, 2)));
+    }
+  }
+
+  @keyframes ui-marquee-travel-rtl {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(100% / var(--marquee-copies, 2)));
+    }
+  }
+  [dir="rtl"] .ui-marquee-track {
+    animation-name: ui-marquee-travel-rtl;
+  }
+
+  .ui-marquee[data-direction="end"] .ui-marquee-track {
+    animation-direction: reverse;
+  }
+
+  .ui-marquee[data-playing="false"] .ui-marquee-track {
+    animation-play-state: paused;
+  }
+
+  .ui-marquee-viewport:focus-within .ui-marquee-track {
+    animation-play-state: paused;
+  }
+
+  .ui-marquee[data-pause-on-hover="true"] .ui-marquee-viewport:hover .ui-marquee-track {
+    animation-play-state: paused;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-marquee-track {
+      animation: none;
+    }
+  }
+}