@godxjp/ui 33.20.0 → 33.22.1

package/dist/styles/badge-layout.css

@@ -16,6 +16,8 @@
     gap: var(--badge-space-gap);
     padding: var(--badge-space-y) var(--badge-space-x);
 
+    min-block-size: var(--badge-min-height, auto);
+
     border-radius: var(--badge-radius, calc(var(--radius) / var(--radius-ratio)));
     border-width: var(--stroke-hairline);
     font-size: var(--badge-font-size);

package/dist/styles/control.css

@@ -104,9 +104,9 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    gap: var(--control-gap);
+    gap: var(--button-gap, var(--control-gap));
     white-space: nowrap;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--button-font-weight);
     transition-property: color, background-color, border-color, box-shadow;
     transition-duration: 150ms;
   }
@@ -122,7 +122,8 @@
     pointer-events: none;
   }
 
-  .ui-button:disabled {
+  .ui-button:disabled,
+  .ui-button[data-loading] {
     opacity: var(--disabled-opacity);
   }
 
@@ -132,8 +133,8 @@
   }
 
   .ui-button svg {
-    width: var(--control-icon-size);
-    height: var(--control-icon-size);
+    width: var(--button-icon-size, var(--control-icon-size));
+    height: var(--button-icon-size, var(--control-icon-size));
     flex-shrink: 0;
   }
 
@@ -184,7 +185,8 @@
       --button-outline-background,
       hsl(var(--background) / var(--button-outline-background-alpha, 100%))
     );
-    color: hsl(var(--foreground));
+
+    color: var(--button-outline-foreground, hsl(var(--foreground)));
 
     box-shadow: var(--shadow-sm);
   }
@@ -247,8 +249,8 @@
 
   .ui-button--default-size {
     height: var(--control-height);
-    padding-inline: var(--control-padding-x);
-    font-size: var(--font-size-base);
+    padding-inline: var(--button-padding-inline);
+    font-size: var(--button-font-size);
   }
 
   .ui-button--sm {
@@ -1796,6 +1798,19 @@
     --control-height: var(--control-height-lg);
   }
 
+  .ui-number-input[data-width="auto"] {
+    font-size: var(--control-font-size);
+    inline-size: calc(
+      var(--number-input-chars, 6) * 1ch + var(--control-padding-x) + var(--control-height) +
+        var(--space-2) + 2px
+    );
+    max-inline-size: 100%;
+  }
+  .ui-number-input[data-width="bounded"] {
+    inline-size: var(--control-bounded-width);
+    max-inline-size: 100%;
+  }
+
   .ui-number-input-field {
     inline-size: 100%;
     text-align: end;
@@ -2001,6 +2016,25 @@
     gap: var(--search-select-option-space-gap);
   }
 
+  .ui-select-option-body {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--search-select-option-space-gap);
+  }
+
+  .ui-select-option-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+
+  .ui-select-option-label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .ui-search-select-values {
     display: flex;
     min-inline-size: 0;
@@ -3266,20 +3300,20 @@
     padding-block: var(--button-space-block);
   }
 
-  .ui-button--default-size:has(> svg),
-  .ui-button--md:has(> svg) {
+  .ui-button--default-size:has(> svg):not([data-label]),
+  .ui-button--md:has(> svg):not([data-label]) {
     padding-inline: var(--button-icon-space-inline-md);
   }
 
-  .ui-button--sm:has(> svg) {
+  .ui-button--sm:has(> svg):not([data-label]) {
     padding-inline: var(--button-icon-space-inline-sm);
   }
 
-  .ui-button--lg:has(> svg) {
+  .ui-button--lg:has(> svg):not([data-label]) {
     padding-inline: var(--button-icon-space-inline-lg);
   }
 
-  .ui-button--xs:has(> svg) {
+  .ui-button--xs:has(> svg):not([data-label]) {
     padding-inline: var(--button-icon-space-inline-xs);
   }
 
@@ -3994,6 +4028,19 @@
   .ui-dashboard-grid-item[data-held] .ui-dashboard-grid-move {
     cursor: grabbing;
   }
+
+  @media print {
+    .ui-dashboard-grid-items {
+      grid-auto-rows: auto;
+    }
+    .ui-dashboard-grid-content {
+      overflow: visible;
+    }
+    .ui-dashboard-grid-move,
+    .ui-dashboard-grid-resize {
+      display: none;
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .ui-dashboard-grid-item,
     .ui-dashboard-grid-move,

package/dist/styles/core.css

@@ -8,6 +8,7 @@
 @import "./shell-layout.css";
 @import "./motion.css";
 @import "./layout.css";
+@import "./editorial-account-layout.css";
 @import "./control.css";
 @import "./toggle.css";
 @import "./logo-layout.css";

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

@@ -35,19 +35,25 @@
   }
 
   .ui-persona [data-slot="persona-name"] {
-    font-size: var(--persona-name-font-size, var(--font-size-sm));
+    font-size: var(--persona-name-font-size, var(--font-size-sm, var(--font-size-base)));
     font-weight: var(--persona-name-font-weight, var(--font-weight-medium));
     color: var(--persona-name-color, hsl(var(--foreground)));
   }
 
   .ui-persona[data-size="sm"] [data-slot="persona-name"] {
-    font-size: var(--persona-name-font-size-sm, var(--font-size-xs));
+    font-size: var(
+      --persona-name-font-size-sm,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
   }
 
   .ui-persona [data-slot="persona-description"] {
     align-self: flex-start;
     max-inline-size: 100%;
-    font-size: var(--persona-description-font-size, var(--font-size-xs));
+    font-size: var(
+      --persona-description-font-size,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
     color: var(--persona-description-color, hsl(var(--muted-foreground)));
   }