@ropav/styles 0.5.0 → 0.6.0

package/dist/components/date-input-group.css

@@ -1,6 +1,13 @@
 /* Date input group styles */
 .date-input-group {
-  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --date-input-group-bg: var(--field-background, var(--default));
+  --date-input-group-bg-hover: var(--field-hover);
+  --date-input-group-bg-focus: var(--field-focus);
+
+  background-color: var(--date-input-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -13,10 +20,6 @@
     outline-offset: -1px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -27,7 +30,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--date-input-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -55,7 +58,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--date-input-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -105,20 +108,38 @@
 .date-input-group__segment {
   @apply inline-block rounded-md px-0.5 text-end text-nowrap outline-none;
 
+  /* The fill and the digits, per state. Five states repaint the text here, so a caller retuning
+   * any one of them from a single declaration would take the other four with it. */
+  --date-input-group-segment-bg: transparent;
+  --date-input-group-segment-bg-focused: var(--accent-soft);
+  --date-input-group-segment-bg-invalid-focused: var(--danger-soft);
+  --date-input-group-segment-fg: currentcolor;
+  --date-input-group-segment-fg-literal: var(--muted);
+  --date-input-group-segment-fg-placeholder: var(--field-placeholder, var(--muted));
+  --date-input-group-segment-fg-focused: var(--accent-soft-foreground);
+  --date-input-group-segment-fg-invalid: var(--danger);
+  --date-input-group-segment-fg-invalid-focused: var(--danger-soft-foreground);
+
+  background-color: var(--date-input-group-segment-bg);
+  color: var(--date-input-group-segment-fg);
+
   /* Segment separators styling "/" */
   &[data-type="literal"] {
-    @apply p-0 text-muted;
+    @apply p-0;
+
+    color: var(--date-input-group-segment-fg-literal);
   }
 
   /* Placeholder styling */
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--date-input-group-segment-fg-placeholder);
   }
 
   /* Focused segment */
   &:focus,
   &[data-focused="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--date-input-group-segment-bg-focused);
+    color: var(--date-input-group-segment-fg-focused);
   }
 
   /* Disabled segment */
@@ -128,12 +149,13 @@
 
   /* Invalid segment */
   &[data-invalid="true"] {
-    @apply text-danger;
+    color: var(--date-input-group-segment-fg-invalid);
 
     /* Focused segment */
     &:focus,
     &[data-focused="true"] {
-      @apply bg-danger-soft text-danger-soft-foreground;
+      background-color: var(--date-input-group-segment-bg-invalid-focused);
+      color: var(--date-input-group-segment-fg-invalid-focused);
     }
   }
 }
@@ -155,31 +177,11 @@
 
 .date-input-group--secondary {
   @apply shadow-none;
-  background-color: var(--date-input-group-bg);
 
   --date-input-group-bg: var(--default);
   --date-input-group-bg-hover: var(--default-hover);
   --date-input-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--date-input-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--date-input-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--date-input-group-bg-focus);
-  }
-
   [data-slot="date-input-group-input"] {
     @apply bg-transparent;
   }

package/dist/components/date-picker.css

@@ -16,10 +16,6 @@
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
@@ -44,7 +40,7 @@
   @apply motion-reduce:transition-none;
 
   box-shadow: var(--shadow-overlay);
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+  border-radius: min(32px, var(--component-radius));
 
   &:focus-visible:not(:focus),
   &[data-focus-visible="true"] {

package/dist/components/date-range-picker.css

@@ -16,10 +16,6 @@
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
@@ -48,7 +44,7 @@
   @apply motion-reduce:transition-none;
 
   box-shadow: var(--shadow-overlay);
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+  border-radius: min(32px, var(--component-radius));
 
   &:focus-visible:not(:focus),
   &[data-focus-visible="true"] {

package/dist/components/disclosure.css

@@ -43,10 +43,6 @@
   height: var(--disclosure-panel-height);
   overflow: clip;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     height 200ms var(--ease-out-quad),
     opacity 200ms var(--ease-out);

package/dist/components/drawer.css

@@ -9,10 +9,6 @@
 .drawer__trigger {
   @apply inline-block cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -155,15 +151,15 @@
   &[data-placement="bottom"] {
     @apply w-full;
     @apply max-h-[85vh];
-    border-start-start-radius: min(32px, var(--radius-2xl));
-    border-start-end-radius: min(32px, var(--radius-2xl));
+    border-start-start-radius: min(32px, var(--component-radius));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
 
   &[data-placement="top"] {
     @apply w-full;
     @apply max-h-[85vh];
-    border-end-start-radius: min(32px, var(--radius-2xl));
-    border-end-end-radius: min(32px, var(--radius-2xl));
+    border-end-start-radius: min(32px, var(--component-radius));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 
   /* Left/right placement: auto width, full height */

package/dist/components/drop-zone/drop-zone.styles.d.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dropZoneVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    trigger: string;
+}>>;
+export type DropZoneVariants = VariantProps<typeof dropZoneVariants>;
+//# sourceMappingURL=drop-zone.styles.d.ts.map

package/dist/components/drop-zone/drop-zone.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.styles.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/drop-zone.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/drop-zone/drop-zone.styles.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+//#region src/components/drop-zone/drop-zone.styles.ts
+const dropZoneVariants = tv({ slots: {
+	base: "drop-zone",
+	trigger: "drop-zone__trigger"
+} });
+//#endregion
+export { dropZoneVariants };

package/dist/components/drop-zone/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./drop-zone.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drop-zone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/drop-zone/index.js

@@ -0,0 +1,2 @@
+import { dropZoneVariants } from "./drop-zone.styles.js";
+export { dropZoneVariants };

package/dist/components/drop-zone.css

@@ -0,0 +1,78 @@
+/* Drop zone component styles */
+
+.drop-zone {
+  @apply relative flex w-full flex-col items-center justify-center gap-2 rounded-component p-6 text-center text-sm outline-none;
+
+  /* The dashed edge is this component's whole affordance, so it is painted from `--border`
+   * rather than `--field-border`: the default theme sets that to `transparent` with a width of
+   * `0`, which is right for an input sitting on a filled background and wrong for a region
+   * whose only boundary is the line itself. */
+  --drop-zone-border: var(--border);
+  --drop-zone-bg: transparent;
+  --drop-zone-fg: var(--muted);
+
+  border: var(--border-width) dashed var(--drop-zone-border);
+  background-color: var(--drop-zone-bg);
+  color: var(--drop-zone-fg);
+
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      --drop-zone-border: var(--field-border-hover);
+    }
+  }
+
+  /* The ring is painted for the hidden file input inside, which is what a keyboard focuses. */
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* A drag the zone would take. Both the line and the fill move, because the fill alone is a
+   * ~15% tint that a light theme barely separates from the page. */
+  &[data-drop-target="true"] {
+    --drop-zone-border: var(--accent);
+    --drop-zone-bg: var(--accent-soft);
+    --drop-zone-fg: var(--foreground);
+  }
+
+  /* A drag carrying a type `accept` rules out.
+   *
+   * Accept takes `--accent` to match the one drop state the library already had
+   * (`--table-cell-bg-drop-target`), which leaves the two verdicts a hue apart in most themes
+   * but nearly together in one whose accent is itself red — measured at hue 28 for both under
+   * `netflix`, separated only by lightness. That is a collision only the theme can settle, and
+   * the properties above are how: repoint `--drop-zone-border` and `--drop-zone-bg`. */
+  &[data-status="reject"] {
+    --drop-zone-border: var(--danger);
+    --drop-zone-bg: var(--danger-soft);
+    --drop-zone-fg: var(--foreground);
+  }
+
+  /* Forced Colors Mode forces every colour to a system keyword, so the accent and danger fills
+   * above flatten onto the page and the three states become one dashed box. The border is the
+   * only channel left that the platform still lets a rule choose, hence the keywords. */
+  @media (forced-colors: active) {
+    &[data-drop-target="true"] {
+      border-color: Highlight;
+    }
+
+    &[data-status="reject"] {
+      border-color: LinkText;
+    }
+  }
+
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.drop-zone__trigger {
+  @apply rounded-field underline underline-offset-2 outline-none;
+
+  cursor: var(--cursor-interactive);
+}

package/dist/components/dropdown.css

@@ -22,10 +22,6 @@
       outline-offset: -1px;
     }
   }
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),

package/dist/components/error-message.css

@@ -2,10 +2,6 @@
 .error-message {
   @apply h-auto text-xs wrap-break-word text-danger;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     height 350ms var(--ease-smooth);

package/dist/components/field-error.css

@@ -2,10 +2,6 @@
 .field-error {
   @apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-visible:h-auto data-visible:opacity-100;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     height 350ms var(--ease-smooth);

package/dist/components/index.css

@@ -98,6 +98,7 @@
  * ------------------------------------------------------------------------------------------------ */
 @import "./checkbox-group.css";
 @import "./checkbox.css";
+@import "./drop-zone.css";
 @import "./fieldset.css";
 @import "./input-otp.css";
 @import "./input.css";

package/dist/components/index.d.ts

@@ -31,6 +31,7 @@ export * from "./description";
 export * from "./drawer";
 export * from "./disclosure";
 export * from "./disclosure-group";
+export * from "./drop-zone";
 export * from "./dropdown";
 export * from "./empty-state";
 export * from "./error-message";

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/dist/components/input-group.css

@@ -1,6 +1,13 @@
 /* Input group styles */
 .input-group {
-  @apply inline-flex min-h-9 items-center rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply inline-flex min-h-9 items-center rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --input-group-bg: var(--field-background, var(--default));
+  --input-group-bg-hover: var(--field-hover);
+  --input-group-bg-focus: var(--field-focus);
+
+  background-color: var(--input-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -19,10 +26,6 @@
     height: auto;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -33,7 +36,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--input-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -43,13 +46,13 @@
   &:has([data-slot="input-group-textarea"]:focus) {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--input-group-bg-focus);
   }
 
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--input-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -70,7 +73,7 @@
    */
   &:has([data-slot="input-group-input"]:-webkit-autofill),
   &:has([data-slot="input-group-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--input-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
@@ -136,10 +139,6 @@
     padding-top: 0.5rem;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth);
@@ -162,10 +161,6 @@
     padding-top: 0.5rem;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth);
@@ -179,31 +174,11 @@
 
 .input-group--secondary {
   @apply shadow-none;
-  background-color: var(--input-group-bg);
 
   --input-group-bg: var(--default);
   --input-group-bg-hover: var(--default-hover);
   --input-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--input-group-bg-hover);
-    }
-  }
-
-  &:has([data-slot="input-group-input"]:focus),
-  &:has([data-slot="input-group-textarea"]:focus) {
-    background-color: var(--input-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--input-group-bg-focus);
-  }
-
   [data-slot="input-group-input"],
   [data-slot="input-group-textarea"] {
     @apply bg-transparent;

package/dist/components/input-otp.css

@@ -15,16 +15,19 @@
 /* Individual slot box - fully rounded, standalone */
 .input-otp__slot {
   @apply relative flex h-10 w-9.5 min-w-0 flex-1 items-center justify-center;
-  @apply border bg-field text-field-foreground shadow-field;
+  @apply border text-field-foreground shadow-field;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --input-otp-slot-bg: var(--field-background, var(--default));
+  --input-otp-slot-bg-hover: var(--field-hover);
+  --input-otp-slot-bg-focus: var(--field-focus);
+
+  background-color: var(--input-otp-slot-bg);
   @apply rounded-field text-sm font-semibold outline-none;
 
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -35,19 +38,21 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-field-hover;
+      background-color: var(--input-otp-slot-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
 
   /* Active/Focus */
   &[data-active="true"] {
-    @apply z-10 bg-field-focus status-focused-field;
+    @apply z-10 status-focused-field;
+
+    background-color: var(--input-otp-slot-bg-focus);
   }
 
   /* Filled */
   &[data-filled="true"] {
-    @apply bg-field-focus;
+    background-color: var(--input-otp-slot-bg-focus);
   }
 
   /* Disabled */
@@ -58,7 +63,7 @@
   /* Invalid */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--input-otp-slot-bg-focus);
   }
 }
 
@@ -66,10 +71,6 @@
 .input-otp__slot-value {
   @apply text-lg leading-6 tracking-[-0.27px];
 
-  /**
-   * Animations
-   * CRITICAL: motion-reduce must be AFTER animation for correct override specificity
-   */
   animation: slot-value-in 250ms var(--ease-smooth) both;
   transform-origin: bottom center;
   @apply motion-reduce:animate-none;
@@ -92,23 +93,10 @@
 
 .input-otp--secondary .input-otp__slot {
   @apply shadow-none;
-  background-color: var(--input-otp-slot-bg);
 
   --input-otp-slot-bg: var(--default);
   --input-otp-slot-bg-hover: var(--default-hover);
   --input-otp-slot-bg-focus: var(--default);
-
-  @media (hover: hover) {
-    &:hover,
-    &[data-hovered="true"] {
-      background-color: var(--input-otp-slot-bg-hover);
-    }
-  }
-
-  &[data-active="true"],
-  &[data-filled="true"] {
-    background-color: var(--input-otp-slot-bg-focus);
-  }
 }
 
 /* Animations */