@akonwi/mica 0.1.1 → 0.2.1

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.1.0/mica.css
+curl -O https://raw.githubusercontent.com/akonwi/mica/v0.2.1/mica.css
 ```
 
 **npm** — for toolchains:
@@ -44,7 +44,7 @@ import "@akonwi/mica/mica.css";
 **CDN** — for trying it out:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@akonwi/mica@0.1/mica.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@akonwi/mica@0.2/mica.css">
 ```
 
 ## The three tiers

package/mica.css

@@ -616,6 +616,63 @@
     }
   }
 
+  /* segmented control: native radios fused into one control. The input
+     remains the form/keyboard/AT primitive; the label carries the visual
+     state because inputs cannot safely own pseudo-elements. */
+  :where(m-segmented) {
+    display: inline-flex;
+    inline-size: fit-content;
+    border: 1px solid var(--color-border-strong);
+    border-radius: var(--radius-sm);
+  }
+
+  :where(m-segmented) > :where(label) {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-block-size: var(--control-height);
+    padding-inline: var(--space-sm);
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :where(m-segmented) > :where(label + label) {
+    border-inline-start: 1px solid var(--color-border-strong);
+  }
+
+  :where(m-segmented) > :where(label) > :where(input[type="radio"]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where(m-segmented) > :where(label):has(> input:checked) {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    font-weight: 600;
+  }
+
+  :where(m-segmented) > :where(label):has(> input:focus-visible) {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+    z-index: 1;
+  }
+
+  :where(m-segmented) > :where(label):has(> input:disabled) {
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
   /* switch: a checkbox wearing a track; the thumb is a positioned
      gradient (pseudo-elements don't render on inputs). square, per the
      design language — a solid linear-gradient block */
@@ -664,6 +721,57 @@
     cursor: not-allowed;
   }
 
+  /* --- badge: quiet metadata, not a control ------------------------ */
+  :where(m-badge) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--m-badge-min-width, auto);
+    min-block-size: 1.5rem;
+    padding-inline: var(--m-badge-padding, var(--space-xs));
+    border: 1px solid var(--m-badge-border, var(--color-border));
+    border-radius: var(--radius-sm);
+    background: var(--m-badge-background, transparent);
+    color: var(--m-badge-color, var(--color-text-muted));
+    font-family: var(--m-badge-font, inherit);
+    font-size: 0.75rem;
+    font-weight: 500;
+    font-variant-numeric: var(--m-badge-numerals, normal);
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  :where(m-badge[variant="primary"]) {
+    --m-badge-border: var(--color-primary);
+    --m-badge-background: var(--color-primary);
+    --m-badge-color: var(--color-on-primary);
+  }
+
+  :where(m-badge[variant="success"]) {
+    --m-badge-border: var(--color-success-border);
+    --m-badge-background: var(--color-success-surface);
+    --m-badge-color: var(--color-success-text);
+  }
+
+  :where(m-badge[variant="warning"]) {
+    --m-badge-border: var(--color-warn-border);
+    --m-badge-background: var(--color-warn-surface);
+    --m-badge-color: var(--color-warn-text);
+  }
+
+  :where(m-badge[variant="danger"]) {
+    --m-badge-border: var(--color-danger-border);
+    --m-badge-background: var(--color-danger-surface);
+    --m-badge-color: var(--color-danger-text);
+  }
+
+  :where(m-badge[count]) {
+    --m-badge-min-width: 1.5rem;
+    --m-badge-padding: var(--space-2xs);
+    --m-badge-font: var(--font-mono);
+    --m-badge-numerals: tabular-nums;
+  }
+
   /* --- content: tables, lists, code, quotes ------------------------ */
   :where(table) {
     inline-size: 100%;
@@ -1335,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.1.1",
+  "version": "0.2.1",
   "description": "Custom elements. Native behavior. Nearly no JavaScript.",
   "keywords": [
     "css",