use-wc 1.0.0-pre.52 → 1.0.0-pre.54

package/dist/design-system.css

@@ -106,8 +106,9 @@
    `::part()` inside a `:where()`/`:is()` argument list is invalid and silently dropped by the
    browser, taking the whole alternative down with it. Stands alone instead. */
   use-listbox-input:not(.appearance-native)::part(listbox) {
-    border: var(--usewc-layout-input-border) var(--usewc-effect-input-border-style)
-      var(--usewc-color-input-border-static);
+    --usewc-color-input-border: var(--usewc-color-input-border-static);
+
+    border: var(--usewc-layout-input-border) var(--usewc-effect-input-border-style) var(--usewc-color-input-border);
     padding: var(--usewc-layout-popover-menu-padding);
     background: var(--usewc-color-input-background-static);
     font-family: var(--usewc-font-input-family);
@@ -115,12 +116,39 @@
     font-weight: var(--usewc-font-weight-normal);
     color: var(--usewc-color-input-text-static);
     border-radius: var(--usewc-effect-input-border-radius);
+    outline: 0 var(--usewc-effect-outline-style) var(--usewc-color-outline);
+    outline-offset: var(--usewc-effect-outline-offset-flush);
+    transition: var(--usewc-effect-outline-transition);
   }
 
   use-theme-escape use-listbox-input:not(.appearance-native)::part(listbox) {
     all: revert-layer;
   }
 
+  use-listbox-input:not(.appearance-native)::part(listbox):hover {
+    --usewc-color-input-border: var(--usewc-color-input-border-hover);
+  }
+
+  use-theme-escape use-listbox-input:not(.appearance-native)::part(listbox):hover {
+    all: revert-layer;
+  }
+
+  /* The actually-focused element with `delegatesFocus` is this inner part, not the host —
+   Chromium's `:focus-visible` heuristic doesn't reliably propagate to the host through
+   delegation, so the ring has to be driven from here or the browser's native default outline
+   shows on the part instead. Border flips to the same focus color as the outline (matching the
+   shared input pattern above) so the two read as one seamless ring instead of a gray border
+   inside a mismatched blue ring. */
+  use-listbox-input:not(.appearance-native)::part(listbox):focus-visible {
+    --usewc-color-input-border: var(--usewc-color-input-border-focus);
+
+    outline-width: var(--usewc-effect-outline-size);
+  }
+
+  use-theme-escape use-listbox-input:not(.appearance-native)::part(listbox):focus-visible {
+    all: revert-layer;
+  }
+
   select:not(.appearance-native) {
     appearance: none;
   }
@@ -724,6 +752,7 @@
       all: unset;
       box-sizing: content-box;
       appearance: none;
+      -moz-appearance: textfield;
       field-sizing: content;
       outline: none;
       border-radius: var(--usewc-effect-input-border-radius);
@@ -755,12 +784,12 @@
       --usewc-color-input-segment-text: var(--usewc-color-input-segment-text-focus);
     }
 
-    &::selection {
+    &::part(segment-input)::selection {
       background: var(--usewc-color-input-segment-background-focus);
       color: var(--usewc-color-input-segment-text-focus);
     }
 
-    use-theme-escape &::selection {
+    use-theme-escape &::part(segment-input)::selection {
       all: revert-layer;
     }
   }
@@ -910,7 +939,7 @@
     }
   }
 
-  use-listbox-input:is(:hover, :focus) use-option:state(active) {
+  use-listbox-input:not(:has(use-option:hover)):focus use-option:state(active) {
     --usewc-color-popover-menu-item-background: var(--usewc-color-popover-menu-item-background-active);
   }
 

package/dist/use-wc.mjs

@@ -660,17 +660,22 @@ let UseDurationInput = class UseDurationInput extends UseLocaleElement {
 	}
 	static {
 		this.styles = css`
-    :host([format="digital"]) {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5ch;
-
+    :host {
       input {
+        -moz-appearance: textfield;
+        font-variant-numeric: tabular-nums;
         field-sizing: content;
         text-align: end;
+        min-width: 2ch;
       }
     }
 
+    :host([format="digital"]) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5ch;
+    }
+
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -1247,11 +1252,11 @@ let UseTimeInput = class UseTimeInput extends UseLocaleElement {
       gap: 0.5ch;
 
       input {
+        -moz-appearance: textfield;
         font-variant-numeric: tabular-nums;
         field-sizing: content;
         text-align: end;
         min-width: 2ch;
-        text-align: end;
       }
 
       input::part(segment-input-fractionalSecond) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.52",
+  "version": "1.0.0-pre.54",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",