@akonwi/mica 0.2.0 → 0.2.2

package/README.md

@@ -28,7 +28,7 @@ form validation) comes from the browser, not from a runtime.
 first-class distribution channel, not a workaround:
 
 ```sh
-curl -O https://raw.githubusercontent.com/akonwi/mica/v0.2.0/mica.css
+curl -O https://raw.githubusercontent.com/akonwi/mica/v0.2.1/mica.css
 ```
 
 **npm** — for toolchains:

package/mica.css

@@ -1443,7 +1443,18 @@
     background: var(--neutral-3);
     border-radius: var(--radius-md);
 
+    /* Graceful collapse: labels never wrap inside a tab — when the rail
+       is narrower than its tabs it scrolls horizontally instead. The
+       thin scrollbar is the overflow affordance on platforms that show
+       one; scroll chaining stays contained. */
+    max-inline-size: 100%;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+
     & > :where(button) {
+      flex-shrink: 0;
+      white-space: nowrap;
       block-size: var(--control-height-sm);
       padding-inline: var(--space-sm);
       border: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akonwi/mica",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Custom elements. Native behavior. Nearly no JavaScript.",
   "keywords": [
     "css",
@@ -27,7 +27,10 @@
     "./select.js": "./select.js",
     "./tabs.js": "./tabs.js",
     "./toast.js": "./toast.js",
-    "./combobox.js": "./combobox.js"
+    "./combobox.js": "./combobox.js",
+    "./types/react": {
+      "types": "./types/react.d.ts"
+    }
   },
   "files": [
     "mica.css",
@@ -37,7 +40,8 @@
     "select.js",
     "tabs.js",
     "toast.js",
-    "combobox.js"
+    "combobox.js",
+    "types/react.d.ts"
   ],
   "sideEffects": true,
   "devDependencies": {
@@ -51,4 +55,4 @@
     "snapshot:check": "bun tools/snapshot.ts --check",
     "snapshot:setup": "playwright install chromium webkit"
   }
-}
+}

package/types/react.d.ts

@@ -0,0 +1,64 @@
+// React JSX typings for mica's custom elements.
+//
+// React 19 supports custom elements natively; this file only teaches
+// TypeScript the tags and their styling attributes. It is the typed
+// mirror of the attribute selectors in mica.css — when an element or
+// attribute changes there, it changes here.
+//
+// Usage (tsconfig `include` or a triple-slash reference):
+//   /// <reference types="@akonwi/mica/types/react" />
+// or copy the file alongside a vendored mica.css.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+
+type Gap = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+type Align = 'start' | 'center' | 'end' | 'stretch'
+type Justify = 'start' | 'center' | 'end' | 'between' | 'stretch'
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+type MicaElement<Extra = Record<never, never>> = DetailedHTMLProps<
+  HTMLAttributes<HTMLElement>,
+  HTMLElement
+> &
+  Extra
+
+type StackProps = {
+  gap?: Gap
+  align?: Align
+  justify?: Justify
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      // layout
+      'm-vstack': MicaElement<StackProps>
+      'm-hstack': MicaElement<StackProps & { wrap?: boolean }>
+      'm-zstack': MicaElement
+      'm-center': MicaElement
+      'm-box': MicaElement
+      'm-grid': MicaElement<{ min?: Breakpoint; gap?: Gap }>
+      'm-sidecar': MicaElement<{ side?: 'start' | 'end'; gap?: Gap }>
+      'm-switcher': MicaElement<{ threshold?: Breakpoint; gap?: Gap }>
+      'm-reel': MicaElement<{ gap?: Gap }>
+      'm-frame': MicaElement<{
+        ratio?: 'square' | '16:9' | '9:16' | '4:3' | '3:2' | '2:1'
+      }>
+      'm-cover': MicaElement<{
+        gap?: Gap
+        pad?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+      }>
+
+      // components
+      'm-segmented': MicaElement
+      'm-tabs': MicaElement
+      'm-badge': MicaElement<{
+        variant?: 'primary' | 'success' | 'warning' | 'danger'
+        count?: boolean
+      }>
+      'm-field': MicaElement
+      'm-error': MicaElement<{ active?: boolean }>
+      'm-combobox': MicaElement
+    }
+  }
+}