@vkzstudio/muza-ui 1.9.2 → 1.9.3

package/dist/stories/AutofillHarness.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+/**
+ * Manual test bed for the browser's autofill rendering.
+ *
+ * Chrome only offers autofill on fields it can classify, which needs a real
+ * `<form>`, a `name`, and an `autocomplete` token — none of which the
+ * per-component stories carry, and none of which can be added from the URL
+ * (Storybook drops `args` that no `argTypes` entry declares). So the fields
+ * live here instead, wired up the way a consumer's form would be.
+ *
+ * Not automatable: the CDP `Autofill` domain is compiled out of Playwright's
+ * Chromium, so no test can put these fields into the autofilled state. This
+ * page exists to be driven by hand.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const AutofillHarness: Story;
+//# sourceMappingURL=AutofillHarness.stories.d.ts.map

package/dist/stories/AutofillHarness.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutofillHarness.stories.d.ts","sourceRoot":"","sources":["../../src/stories/AutofillHarness.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAU3D;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,EAAE,IAWX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,eAAe,EAAE,KA2D7B,CAAA"}

package/dist/styles/utilities.css

@@ -10,6 +10,34 @@
   transform: translateY(calc(--value(integer) * 0.0625em));
 }
 
+/* The `fix-y-text` nudge as padding instead of a transform, for text inside a
+   fixed-height box. A transform moves the element's painted box along with the
+   glyphs; an input's text centres inside its content box, so padding of twice
+   the offset moves the text alone. Use it wherever the browser paints on the
+   element's own box (Chrome's autofill highlight) and that box is not the shape
+   the design draws. */
+@utility fix-y-box {
+  /* Default value for >14px font size */
+  padding-top: 0.25em;
+}
+
+@utility fix-y-box-* {
+  /* Custom value */
+  /* Use 2 for >14px font size */
+  /* Use 1 for <=14px font size */
+  padding-top: calc(--value(integer) * 0.125em);
+}
+
+/* Chrome paints an opaque highlight over an autofilled field. It lands on the
+   input's own border box — not the rounded wrapper the design draws — and both
+   its background and its text colour are UA `!important`, which no author rule
+   outranks. An inset shadow is the one layer the UA leaves alone, so fill the
+   box with the field's own colour and restore the text colour alongside it. */
+@utility autofill-field {
+  @apply autofill:shadow-[inset_0_0_0_1000px] autofill:shadow-comp-input-fill-def;
+  @apply autofill:[-webkit-text-fill-color:var(--color-comp-input-text-primary)];
+}
+
 @utility focus-visible-auto {
   @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkzstudio/muza-ui",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "React component library built with Vite, shadcn/ui, and Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",