@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/tokens/__tests__/spacing.test.js

@@ -62,8 +62,8 @@ describe('spacing tokens', () => {
                 expect(gapScale.semantic.layout).toBe('gap-8');
                 expect(gapScale.semantic.page).toBe('gap-12');
             });
-            it('has 11 semantic gap values', () => {
-                expect(Object.keys(gapScale.semantic)).toHaveLength(11);
+            it('has 12 semantic gap values', () => {
+                expect(Object.keys(gapScale.semantic)).toHaveLength(12);
             });
         });
         describe('numeric', () => {

package/dist/tokens/__tests__/variants.test.js

@@ -82,25 +82,33 @@ describe('color variant tokens', () => {
         });
     });
     describe('alertColorVariants', () => {
-        it('has info variant with blue-50 background', () => {
+        it('has info variant with blue-50 background and border', () => {
             expect(alertColorVariants.info).toContain('text-blue-800');
             expect(alertColorVariants.info).toContain('bg-blue-50');
+            expect(alertColorVariants.info).toContain('border-blue-300');
             expect(alertColorVariants.info).toContain('dark:bg-gray-800');
             expect(alertColorVariants.info).toContain('dark:text-blue-400');
+            expect(alertColorVariants.info).toContain('dark:border-blue-800');
         });
-        it('has success variant with green-50 background', () => {
+        it('has success variant with green-50 background and border', () => {
             expect(alertColorVariants.success).toContain('text-green-800');
             expect(alertColorVariants.success).toContain('bg-green-50');
+            expect(alertColorVariants.success).toContain('border-green-300');
+            expect(alertColorVariants.success).toContain('dark:bg-gray-800');
             expect(alertColorVariants.success).toContain('dark:text-green-400');
         });
-        it('has warning variant with yellow-50 background', () => {
+        it('has warning variant with yellow-50 background and border', () => {
             expect(alertColorVariants.warning).toContain('text-yellow-800');
             expect(alertColorVariants.warning).toContain('bg-yellow-50');
+            expect(alertColorVariants.warning).toContain('border-yellow-300');
+            expect(alertColorVariants.warning).toContain('dark:bg-gray-800');
             expect(alertColorVariants.warning).toContain('dark:text-yellow-300');
         });
-        it('has danger variant with red-50 background', () => {
+        it('has danger variant with red-50 background and border', () => {
             expect(alertColorVariants.danger).toContain('text-red-800');
             expect(alertColorVariants.danger).toContain('bg-red-50');
+            expect(alertColorVariants.danger).toContain('border-red-300');
+            expect(alertColorVariants.danger).toContain('dark:bg-gray-800');
             expect(alertColorVariants.danger).toContain('dark:text-red-400');
         });
         it('has exactly 4 variants', () => {

package/dist/tokens/base-resets.css

@@ -0,0 +1,124 @@
+/* ==========================================================================
+   BASE RESETS
+   Shared form resets, accessibility utilities, and platform fixes.
+   Imported via base.css -- every Micdrop app gets these automatically.
+
+   IMPORTANT: Do NOT add `appearance: none` to inputs here.
+   @tailwindcss/forms handles form element appearance. Setting it globally
+   breaks native checkboxes and radios (see MIC-859).
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   iOS ZOOM PREVENTION
+   iOS Safari auto-zooms when focusing inputs with font-size < 16px.
+   Set minimum 16px on text inputs only. Exclude checkbox/radio which
+   don't trigger zoom and need their native appearance preserved.
+   -------------------------------------------------------------------------- */
+input:not([type="checkbox"]):not([type="radio"]),
+textarea,
+select {
+  font-size: 16px;
+}
+
+/* --------------------------------------------------------------------------
+   FORM FONT INHERITANCE
+   Form elements don't inherit font by default in most browsers.
+   -------------------------------------------------------------------------- */
+input,
+button {
+  font-size: inherit;
+  font-family: inherit;
+}
+
+/* --------------------------------------------------------------------------
+   FOCUS MANAGEMENT
+   Hide focus ring on mouse/touch interaction, show on keyboard navigation.
+   This provides clean UI for mouse users while maintaining accessibility
+   for keyboard users.
+   -------------------------------------------------------------------------- */
+button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* --------------------------------------------------------------------------
+   SCREEN READER ONLY
+   Visually hides content while keeping it accessible to screen readers.
+   Standard pattern matching Tailwind's built-in sr-only utility.
+   This is a fallback for non-Tailwind contexts -- Tailwind's version
+   will override it due to CSS specificity/source order.
+   -------------------------------------------------------------------------- */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* --------------------------------------------------------------------------
+   SCREEN READER ONLY - FOCUSABLE
+   Makes sr-only content visible when focused. Enables skip-navigation
+   links and other focus-activated accessibility patterns.
+   -------------------------------------------------------------------------- */
+.sr-only-focusable:focus,
+.sr-only-focusable:active {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* --------------------------------------------------------------------------
+   REDUCED MOTION
+   Respects user's motion preference. Disables all animations and
+   transitions when prefers-reduced-motion is set.
+   -------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   CHROME AUTOFILL DARK MODE FIX
+   Chrome's autofill sets a hardcoded light background on inputs.
+   In dark mode, this creates a jarring white flash. Override with
+   the app's dark background color.
+   -------------------------------------------------------------------------- */
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:hover,
+.dark input:-webkit-autofill:focus,
+.dark textarea:-webkit-autofill,
+.dark textarea:-webkit-autofill:hover,
+.dark textarea:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px hsl(var(--bg-primary)) inset !important;
+  -webkit-text-fill-color: hsl(var(--text-primary)) !important;
+  background-color: hsl(var(--bg-primary)) !important;
+}
+
+/* --------------------------------------------------------------------------
+   DESKTOP FONT SCALING
+   110% base font on desktop makes all rem-based sizing 10% larger:
+   - Buttons: 44px -> 48px (exceeds WCAG AAA 44px target)
+   - Text: More readable without zooming
+   - Touch targets: More accessible
+   Mobile stays at 100% (already optimized for touch).
+   -------------------------------------------------------------------------- */
+@media (min-width: 768px) {
+  html {
+    font-size: 110%;
+  }
+}

package/dist/tokens/spacing.d.ts

@@ -71,6 +71,7 @@ export declare const gapScale: {
         readonly group: "gap-3";
         readonly tight: "gap-4";
         readonly content: "gap-4";
+        readonly card: "gap-5";
         readonly standard: "gap-6";
         readonly section: "gap-6";
         readonly spacious: "gap-8";
@@ -114,6 +115,7 @@ export declare const gapMap: {
     readonly group: "gap-3";
     readonly tight: "gap-4";
     readonly content: "gap-4";
+    readonly card: "gap-5";
     readonly standard: "gap-6";
     readonly section: "gap-6";
     readonly spacious: "gap-8";

package/dist/tokens/spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCV,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;CAiBjB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,cAAc,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CX,CAAC;AAEX,yCAAyC;AACzC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKT,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,QAAQ,CAAC,OAAO,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,QAAQ,CAAC,IAAI,CAAC;AACpD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCV,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;CAiBjB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,cAAc,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CX,CAAC;AAEX,yCAAyC;AACzC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKT,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,QAAQ,CAAC,OAAO,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,QAAQ,CAAC,IAAI,CAAC;AACpD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/tokens/spacing.js

@@ -70,6 +70,7 @@ export const gapScale = {
         group: 'gap-3', // 12px - Between related elements
         tight: 'gap-4', // 16px - Tight grid/content spacing
         content: 'gap-4', // 16px - Default content spacing
+        card: 'gap-5', // 20px - Card internal spacing
         standard: 'gap-6', // 24px - Standard grid spacing
         section: 'gap-6', // 24px - Between sections
         spacious: 'gap-8', // 32px - Spacious grid items

package/dist/tokens/tokens.css

@@ -1,87 +1,87 @@
-:root {
-  --bg-primary: 0 0% 100%;
-  --bg-secondary: 220 7% 97%;
-  --bg-tertiary: 220 7% 94%;
-  --bg-quaternary: 220 6% 91%;
-
-  --text-primary: 221 50% 10%;
-  --text-secondary: 220 20% 18%;
-  --text-tertiary: 221 9% 44%;
-  --text-head: 221 9% 44%;
-
-  --brand-primary: 209 99% 50%;
-
-  --accent-warning: 28 100% 59%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 131 77% 35%;
-
-  --stroke-primary: 216 6% 84%;
-  --stroke-secondary: 216 6% 84%;
-  --border: 220 13% 91%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 224 71.4% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 71.4% 4.1%;
-  --muted: 220 14.3% 95.9%;
-  --muted-foreground: 220 8.9% 46.1%;
-  --hover-primary: 210 20% 96%;
-
-  --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 220 20% 18%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 221 50% 10%;
-
-  --BG-Primary: var(--bg-primary);
-  --BG-Secondary: var(--bg-secondary);
-  --BG-Tertiary: var(--bg-tertiary);
-  --BG-Quaternary: var(--bg-quaternary);
-  --Text-Primary: var(--text-primary);
-  --Text-Secondary: var(--text-secondary);
-  --Text-Tartiary: var(--text-tertiary);
-  --Text-Head: var(--text-head);
-  --Brand-Primary: var(--brand-primary);
-  --Accent-Warning: var(--accent-warning);
-  --Accent-Danger: var(--accent-danger);
-  --Accent-Success: var(--accent-success);
-  --Stroke-Primary: var(--stroke-primary);
-  --Stroke-Secondary: var(--stroke-secondary);
-}
-
-[data-theme="dark"],
-.dark {
-  --bg-primary: 220 20% 18%;
-  --bg-secondary: 221 50% 10%;
-  --bg-tertiary: 221 50% 6%;
-  --bg-quaternary: 0 0% 0%;
-
-  --text-primary: 220 7% 97%;
-  --text-secondary: 220 7% 94%;
-  --text-tertiary: 220 6% 91%;
-  --text-head: 220 9% 70%;
-
-  --brand-primary: 220 89% 63%;
-
-  --accent-warning: 30 100% 70%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 142 71% 45%;
-
-  --stroke-primary: 220 20% 28%;
-  --stroke-secondary: 220 20% 28%;
-  --border: 215 27.9% 16.9%;
-
-  --card: 224 20% 10%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --hover-primary: 222 10% 39%;
-
-  --sidebar-background: 220 20% 18%;
-  --sidebar-foreground: 220 7% 94%;
-  --sidebar-border: 215 20% 20%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 220 7% 97%;
-}
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --BG-Primary: var(--bg-primary);
+  --BG-Secondary: var(--bg-secondary);
+  --BG-Tertiary: var(--bg-tertiary);
+  --BG-Quaternary: var(--bg-quaternary);
+  --Text-Primary: var(--text-primary);
+  --Text-Secondary: var(--text-secondary);
+  --Text-Tartiary: var(--text-tertiary);
+  --Text-Tertiary: var(--text-tertiary);
+  --Text-Head: var(--text-head);
+  --Brand-Primary: var(--brand-primary);
+  --Accent-Warning: var(--accent-warning);
+  --Accent-Danger: var(--accent-danger);
+  --Accent-Success: var(--accent-success);
+  --Stroke-Primary: var(--stroke-primary);
+  --Stroke-Secondary: var(--stroke-secondary);
+}
+
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}