@godxjp/ui 33.9.1 → 33.11.2

package/dist/styles/control.css

@@ -1232,7 +1232,10 @@
 
   .ui-search-input-control {
     padding-inline-start: var(--search-input-start-padding);
-    padding-inline-end: var(--search-input-end-padding);
+    padding-inline-end: max(
+      var(--search-input-end-padding),
+      var(--search-input-affix-min-padding, 0px)
+    );
   }
 
   .ui-search-input-clear {
@@ -1263,8 +1266,8 @@
     .ui-search-input-clear::after {
       content: "";
       position: absolute;
-      inset-block: min(0px, calc((100% - var(--control-height-default)) / 2));
-      inset-inline: min(0px, calc((100% - var(--control-height-default)) / 2));
+      inset-block: min(0px, calc((100% - var(--control-affix-touch-target-size)) / 2));
+      inset-inline: min(0px, calc((100% - var(--control-affix-touch-target-size)) / 2));
     }
   }
 
@@ -3767,3 +3770,128 @@
     min-inline-size: var(--control-height-touch);
   }
 }
+
+@layer components {
+  @media (pointer: coarse) {
+    .ui-control-inline-affix-action:not(.ui-badge-remove),
+    .ui-control-affix-action,
+    .ui-tree-select-clear,
+    .ui-password-input-toggle,
+    .ui-search-input-clear,
+    .ui-number-input-step {
+      min-inline-size: var(--control-affix-touch-target-size);
+      min-block-size: var(--control-affix-touch-target-size);
+      flex-shrink: 0;
+    }
+
+    .ui-control-inline-affix-action:not(.ui-badge-remove)::after {
+      inset: 0;
+      translate: none;
+    }
+
+    .ui-input-affix-wrapper:has(.ui-control-inline-affix-action) > .ui-input {
+      min-block-size: var(--control-affix-touch-target-size);
+    }
+
+    .ui-input--trailing-affix {
+      padding-inline-end: max(
+        var(--control-inline-affix-space-inline-end),
+        calc(
+          var(--input-trailing-measured-size, var(--control-affix-touch-target-size)) +
+            var(--control-inline-affix-inset-inline) + var(--control-inline-affix-space-gap)
+        )
+      );
+    }
+
+    .ui-control-trigger-affixed {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: max(
+        var(--control-trigger-space-inline-end),
+        calc(
+          var(--control-affix-touch-target-size) + var(--control-affix-inset-inline-end) +
+            var(--control-inline-affix-space-gap)
+        )
+      );
+    }
+
+    .ui-tree-select-trigger-affixed {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: calc(
+        var(--control-affix-touch-target-size) + var(--space-3) +
+          var(--control-inline-affix-space-gap)
+      );
+    }
+
+    .ui-password-input-field {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: calc(
+        var(--control-affix-touch-target-size) + var(--control-inline-affix-space-gap)
+      );
+    }
+
+    .ui-number-input-steppers {
+      flex-direction: row;
+      align-items: center;
+      inset-block: var(--control-border-width, var(--stroke-hairline));
+    }
+
+    .ui-number-input-step {
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .ui-number-input-step:hover {
+      background: hsl(var(--accent));
+      color: hsl(var(--accent-foreground));
+    }
+    .ui-number-input-step::after {
+      inset-block: calc((100% - var(--control-affix-touch-target-size)) / 2) auto;
+      inset-inline: calc((100% - var(--control-affix-touch-target-size)) / 2) auto;
+      inline-size: var(--control-affix-touch-target-size);
+      block-size: var(--control-affix-touch-target-size);
+      translate: none;
+    }
+    .ui-search-input-control {
+      min-block-size: var(--control-affix-touch-target-size);
+
+      --search-input-affix-min-padding: max(
+        var(--control-affix-touch-target-size),
+        calc(
+          var(--search-input-edge-inset) + var(--touch-target-min) / 2 +
+            var(--control-affix-touch-target-size) / 2
+        )
+      );
+    }
+    [data-slot="textarea-affix-wrapper"]:has(.ui-textarea-clear) > textarea {
+      min-block-size: calc(
+        var(--control-affix-touch-target-size) + 2 * var(--textarea-clear-inset-block-start)
+      );
+    }
+    .ui-search-input-clear {
+      inset-inline-end: max(
+        0px,
+        calc(
+          var(--search-input-edge-inset) + var(--touch-target-min) / 2 -
+            var(--control-affix-touch-target-size) / 2
+        )
+      );
+    }
+    .ui-number-input-field {
+      min-block-size: calc(
+        var(--control-affix-touch-target-size) + 2 *
+          var(--control-border-width, var(--stroke-hairline))
+      );
+      padding-inline-end: calc(2 * var(--control-affix-touch-target-size) + var(--space-2));
+    }
+    .ui-number-input:not([data-controls="off"]) [data-slot="number-input-suffix"] {
+      inset-inline-end: calc(2 * var(--control-affix-touch-target-size) + var(--space-2));
+    }
+    .ui-number-input:not([data-controls="off"]):has([data-slot="number-input-suffix"])
+      .ui-number-input-field {
+      padding-inline-end: calc(
+        2 * var(--control-affix-touch-target-size) + var(--space-2) +
+          var(--control-inline-affix-size)
+      );
+    }
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.9.1",
+  "version": "33.11.2",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/shell-layout.css

@@ -2272,6 +2272,44 @@
     overflow: visible;
   }
 
+  .ui-topbar[data-identity="true"] {
+    overflow: clip;
+  }
+  .ui-topbar-controls {
+    padding-inline: 0;
+    height: auto;
+    background: none;
+    backdrop-filter: none;
+  }
+
+  .ui-topbar-controls > .ui-topbar-start {
+    display: contents;
+  }
+  .ui-topbar-identity {
+    display: flex;
+    align-self: stretch;
+    flex: 0 0 auto;
+    min-inline-size: 0;
+    max-inline-size: var(--topbar-identity-max-inline-size);
+    margin-inline-start: auto;
+  }
+  .ui-topbar-item[data-truncate="true"] {
+    flex: 0 1 auto;
+    min-inline-size: var(--topbar-item-min-width);
+    max-inline-size: 100%;
+  }
+  .ui-topbar-item[data-truncate="true"] > .ui-topbar-item-label {
+    min-inline-size: 0;
+
+    line-height: var(--line-height-normal);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ui-topbar-identity .ui-topbar-item[data-truncate="true"] > .ui-topbar-item-label {
+    min-inline-size: var(--topbar-identity-min-text-inline-size);
+  }
+
   .ui-topbar-item {
     display: inline-flex;
     min-width: var(--topbar-item-min-width);