@fluixi-ui/skin-material 0.3.0-alpha.6 → 0.3.0-alpha.7

package/material.css

@@ -40,7 +40,7 @@
   }
 
   /* ---- Button: pill shape, state layer, filled/tonal/outlined/text ---------- */
-  [data-ui='material'] :where([data-variant]) {
+  [data-ui='material'] :where([data-variant]:not([data-badge])) {
     position: relative;
     overflow: hidden;
     border-radius: 9999px;
@@ -56,7 +56,7 @@
   /* The Material "state layer": a currentColor overlay that fades in on interaction.
      On a filled button currentColor is the on-primary ink (white) → a subtle
      lightening; on outlined/text/tonal it's the primary colour. */
-  [data-ui='material'] :where([data-variant])::before {
+  [data-ui='material'] :where([data-variant]:not([data-badge]))::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -68,35 +68,28 @@
     pointer-events: none;
     transition: opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
   }
-  [data-ui='material'] :where([data-variant]:hover)::before { opacity: 0.08; }
-  [data-ui='material'] :where([data-variant]:focus-visible)::before { opacity: 0.12; }
-  [data-ui='material'] :where([data-variant]:active)::before { opacity: 0.16; }
-  [data-ui='material'] :where([data-variant]:focus-visible) { box-shadow: none; outline: none; }
-  [data-ui='material'] :where([data-variant][disabled], [data-variant]:disabled) {
+  [data-ui='material'] :where([data-variant]:not([data-badge]):hover)::before { opacity: 0.08; }
+  [data-ui='material'] :where([data-variant]:not([data-badge]):focus-visible)::before { opacity: 0.12; }
+  [data-ui='material'] :where([data-variant]:not([data-badge]):active)::before { opacity: 0.16; }
+  [data-ui='material'] :where([data-variant]:not([data-badge]):focus-visible) { box-shadow: none; outline: none; }
+  [data-ui='material'] :where([data-variant]:not([data-badge])[disabled], [data-variant]:not([data-badge]):disabled) {
     box-shadow: none;
     opacity: 0.38;
   }
 
   /* Filled (solid) = the classic contained button: rests on elevation, lifts
      further on hover. Elevation is per-variant — outlined/text/tonal stay flat. */
-  [data-ui='material'] :where([data-variant='solid']) { box-shadow: var(--flx-ui-shadow-sm); }
-  [data-ui='material'] :where([data-variant='solid']:hover) { box-shadow: var(--flx-ui-shadow-md); }
-  [data-ui='material'] :where([data-variant='solid']:active) { box-shadow: var(--flx-ui-shadow-sm); }
+  [data-ui='material'] :where([data-variant='solid']:not([data-badge])) { box-shadow: var(--flx-ui-shadow-sm); }
+  [data-ui='material'] :where([data-variant='solid']:not([data-badge]):hover) { box-shadow: var(--flx-ui-shadow-md); }
+  [data-ui='material'] :where([data-variant='solid']:not([data-badge]):active) { box-shadow: var(--flx-ui-shadow-sm); }
   /* Tonal (soft): secondary-container feel. */
-  [data-ui='material'] :where([data-variant='soft']) { background: var(--flx-ui-color-primary-subtle); color: var(--flx-ui-color-primary-active); }
+  [data-ui='material'] :where([data-variant='soft']:not([data-badge])) { background: var(--flx-ui-color-primary-subtle); color: var(--flx-ui-color-primary-active); }
   /* Outlined: 1px hairline, no fill. */
-  [data-ui='material'] :where([data-variant='outline']) { border: 1px solid var(--flx-ui-color-border-strong); }
+  [data-ui='material'] :where([data-variant='outline']:not([data-badge])) { border: 1px solid var(--flx-ui-color-border-strong); }
   /* Text: tighter padding, no border. */
-  [data-ui='material'] :where([data-variant='ghost']) { padding: 0 12px; }
-
-  /* Badges also carry [data-variant] — undo the button treatment (they're chips,
-     not buttons): restore size, keep the pill, drop the state layer. */
-  [data-ui='material'] :where(.flx-ui-badge[data-variant]) {
-    height: auto;
-    padding: 2px 10px;
-    box-shadow: none;
-  }
-  [data-ui='material'] :where(.flx-ui-badge[data-variant])::before { content: none; }
+  [data-ui='material'] :where([data-variant='ghost']:not([data-badge])) { padding: 0 12px; }
+  /* Badges carry [data-variant] too, but every button rule above excludes
+     [data-badge], so a badge is never treated as a button — no guard needed. */
 
   /* ---- Switch: M3 geometry (52×32 track, growing thumb) --------------------- */
   [data-ui='material'] :where([role='switch']) {
@@ -132,9 +125,26 @@
     border-width: 2px;
     border-radius: 2px;
   }
+  /* The check (rotated border) and indeterminate bar are flex items; the tighter
+     2px-border box lets flex shrink them to a sliver on the main axis. Pin them. */
+  [data-ui='material'] :where([role='checkbox'][data-state='checked'])::after,
+  [data-ui='material'] :where([role='checkbox'][data-state='indeterminate'])::after {
+    flex: none;
+  }
+  [data-ui='material'] :where([role='checkbox'][data-state='checked'])::after {
+    width: 4px;
+    height: 8px;
+    margin-top: -3px;
+  }
+  /* Multi-select listbox/select indicator box → match the material checkbox. */
+  [data-ui='material'] :where([data-select-item-indicator]) {
+    box-sizing: border-box;
+    border-width: 2px;
+    border-radius: 2px;
+  }
 
   /* ---- Slider: M3 filled thumb -------------------------------------------- */
-  [data-ui='material'] :where([role='slider']) {
+  [data-ui='material'] :where([data-slider] [role='slider']) {
     width: 20px;
     height: 20px;
     background: var(--flx-ui-color-primary);
@@ -149,18 +159,48 @@
     border-top-right-radius: 3px;
   }
 
-  /* ---- Filled text field + combobox control -------------------------------- */
-  [data-ui='material'] :where([data-input], [data-combobox-control]) {
+  /* ---- Text field / select / combobox appearance --------------------------
+     Baseline (no data-field-variant) and the explicit `filled` variant → M3
+     filled underline; `outlined` → M3 outlined box. 4px M3 radius (the tokens'
+     radius-md is 12px here). */
+  [data-ui='material'] :where(
+      [data-input]:not([data-field-variant]),
+      [data-combobox-control]:not([data-field-variant]),
+      button[role='combobox']:not([data-field-variant]),
+      [data-field-variant='filled']) {
     background: var(--flx-ui-color-bg-muted);
-    border: none;
+    border: 1px solid transparent;
     border-bottom: 1px solid var(--flx-ui-color-border-strong);
     border-radius: 4px 4px 0 0;
   }
-  [data-ui='material'] :where([data-input]:focus, [data-input]:focus-visible, [data-combobox-control]:focus-within) {
+  [data-ui='material'] :where(
+      [data-input]:not([data-field-variant]):focus,
+      [data-combobox-control]:not([data-field-variant]):focus-within,
+      button[role='combobox']:not([data-field-variant]):focus-visible,
+      button[role='combobox']:not([data-field-variant])[data-state='open'],
+      [data-field-variant='filled']:focus,
+      [data-field-variant='filled']:focus-visible,
+      [data-field-variant='filled']:focus-within) {
     border-bottom: 2px solid var(--flx-ui-color-primary);
     box-shadow: none;
     outline: none;
   }
+  /* Outlined → M3 outlined box (4px), 2px primary border on focus. */
+  [data-ui='material'] :where([data-field-variant='outlined']) {
+    background: transparent;
+    border: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px;
+  }
+  [data-ui='material'] :where([data-field-variant='outlined']:focus, [data-field-variant='outlined']:focus-visible, [data-field-variant='outlined']:focus-within) {
+    border: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+  /* The combobox's inner input must stay bare — the wrapper carries the field. */
+  [data-ui='material'] :where([data-combobox-control] [role='combobox']) {
+    background: transparent;
+    border: none;
+  }
 
   /* ---- Menus & lists: full-bleed M3 rows, roomier padding ------------------- */
   [data-ui='material'] :where([role='menuitem'], [role='option']) {
@@ -348,7 +388,7 @@
   }
 
   /* ---- Linear progress: 4dp fully-rounded track, tonal remainder ---------- */
-  [data-ui='material'] :where([role='progressbar']) {
+  [data-ui='material'] :where([role='progressbar']:not([data-circular])) {
     height: 4px;
     border-radius: 9999px;
     background: var(--flx-ui-color-primary-subtle);
@@ -406,9 +446,31 @@
   }
 
   /* ---- Breadcrumb: state-layer link affordance ---------------------------- */
+  /* Padded pill targets so the state-layer has room to breathe (M3). */
+  [data-ui='material'] :where([data-breadcrumb-link]) {
+    padding: 2px 8px;
+    margin: 0 -2px;
+    border-radius: 999px;
+  }
   [data-ui='material'] :where([data-breadcrumb-link]:hover) {
     background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
-    border-radius: 4px;
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='material'] :where([data-breadcrumb-page]) {
+    padding: 2px 8px;
+  }
+
+  /* ---- Toolbar: M3 surface + pill state-layer buttons ---------------------- */
+  [data-ui='material'] :where([role='toolbar']) {
+    border-radius: 8px;
+    gap: 2px;
+  }
+  [data-ui='material'] :where([role='toolbar'] > button:not([aria-pressed])) {
+    border-radius: 999px;
+  }
+  [data-ui='material'] :where([role='toolbar'] > button:not([aria-pressed]):hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    color: var(--flx-ui-color-fg);
   }
 
   /* ---- Navigation menu & menubar: state-layer triggers, rounded ----------- */
@@ -472,13 +534,13 @@
   }
 
   /* ---- Click-origin ripple (installed by the ripple primitive) ------------- */
-  [data-ui='material'] :where([data-variant], [role='menuitem'], [role='option'], [role='tab']) {
+  [data-ui='material'] :where([data-variant]:not([data-badge]), [role='menuitem'], [role='option'], [role='tab']) {
     position: relative;
     overflow: hidden;
   }
   /* A glow button draws its ring on ::after at the border edge; the ripple's
      overflow:hidden would clip it, so let a glow button overflow. */
-  [data-ui='material'] :where([data-variant][data-glow]) {
+  [data-ui='material'] :where([data-variant]:not([data-badge])[data-glow]) {
     overflow: visible;
   }
   [data-ui='material'] .flx-mat-ripple {
@@ -507,4 +569,308 @@
       opacity: 0;
     }
   }
+
+  /* ---- Progress: M3 linear (4px, tonal track) ------------------------------- */
+  [data-ui='material'] :where([role='progressbar']:not([data-circular])) {
+    height: 4px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+  [data-ui='material'] :where([role='progressbar']:not([data-circular]))::after {
+    background: var(--flx-ui-color-primary);
+  }
+
+  /* ---- Slider: M3 (thin tonal track, filled active range) ------------------- */
+  [data-ui='material'] :where([data-slider-track]) {
+    height: 4px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+  [data-ui='material'] :where([data-slider-range]) {
+    background: var(--flx-ui-color-primary);
+  }
+
+  /* ---- Badge: M3 label (medium weight, subtle tracking) --------------------- */
+  [data-ui='material'] :where([data-badge]) {
+    font-weight: var(--flx-ui-font-weight-medium);
+    letter-spacing: 0.02em;
+  }
+
+  /* ---- Avatar: M3 rounded-square option stays circular; add tonal ring ------ */
+  [data-ui='material'] :where([data-avatar]) {
+    font-weight: var(--flx-ui-font-weight-medium);
+  }
+
+  /* ---- Statistic: M3 display number (tighter tracking) ---------------------- */
+  [data-ui='material'] :where([data-statistic-value]) {
+    font-weight: var(--flx-ui-font-weight-semibold);
+    letter-spacing: -0.01em;
+  }
+  [data-ui='material'] :where([data-statistic-label]) {
+    letter-spacing: 0.06em;
+  }
+
+  /* ---- Empty: M3 icon tile (rounded-large, tonal) --------------------------- */
+  [data-ui='material'] :where([data-empty-icon]) {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary);
+  }
+
+  /* ---- Timeline: M3 dot state-layer ---------------------------------------- */
+  [data-ui='material'] :where([data-timeline-indicator]:empty)::before {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--flx-timeline-dot) 14%, transparent);
+  }
+
+  /* ---- Descriptions: M3 term (medium, tracked) ------------------------------ */
+  [data-ui='material'] :where([data-descriptions-term]) {
+    font-weight: var(--flx-ui-font-weight-medium);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: var(--flx-ui-font-size-2xs, 11px);
+  }
+
+  /* ---- Switch: Material (thin track, prominent thumb, ripple state-layer) ---- */
+  [data-ui='material'] :where([role='switch']) {
+    width: 34px;
+    height: 14px;
+    padding: 0;
+    border: none;
+    overflow: visible;
+    position: relative;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--flx-ui-color-fg) 26%, transparent);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked']) {
+    background: color-mix(in srgb, var(--flx-ui-color-primary) 50%, transparent);
+    filter: none;
+  }
+  [data-ui='material'] :where([role='switch']:hover:not([data-disabled])) {
+    filter: none;
+  }
+  /* Thumb — 20px circle, larger than the 14px track so it overlaps it. */
+  [data-ui='material'] :where([role='switch'])::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transform: translate(-2px, -50%);
+    transition:
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized),
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked'])::after {
+    background: var(--flx-ui-color-primary);
+    transform: translate(16px, -50%);
+  }
+  /* Ripple / state-layer — a translucent disc behind the thumb, following it. */
+  [data-ui='material'] :where([role='switch'])::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--flx-ui-color-fg);
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-12px, -50%) scale(0.7);
+    transition:
+      opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked'])::before {
+    background: var(--flx-ui-color-primary);
+    transform: translate(6px, -50%) scale(0.7);
+  }
+  [data-ui='material'] :where([role='switch']:hover:not([data-disabled]))::before {
+    opacity: 0.09;
+    transform: translate(-12px, -50%) scale(1);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked']:hover:not([data-disabled]))::before {
+    transform: translate(6px, -50%) scale(1);
+  }
+  [data-ui='material'] :where([role='switch']:active:not([data-disabled]))::before {
+    opacity: 0.18;
+  }
+
+  /* ---- Slider thumb: Material filled handle + ripple state-layer ------------- */
+  [data-ui='material'] :where([data-slider] [role='slider']) {
+    background: var(--flx-ui-color-primary);
+    border-color: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-slider] [role='slider'])::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--flx-ui-color-primary);
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-50%, -50%) scale(0.4);
+    transition:
+      opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  }
+  [data-ui='material'] :where([data-slider] [role='slider']:hover:not([data-disabled]))::before {
+    opacity: 0.12;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  [data-ui='material'] :where([data-slider] [role='slider']:active)::before,
+  [data-ui='material'] :where([data-slider] [role='slider']:focus-visible)::before {
+    opacity: 0.2;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* ---- Popup surfaces: one consistent M3 shape (small radius, tight elevation)
+   * Unifies every floating surface — menus, listboxes, datepicker, command,
+   * hovercard, nav-menu — which previously ranged from radius-md (12px) to
+   * radius-lg (16px) with a heavy shadow-lg. Tooltip already matches at 4px. */
+  [data-ui='material'] :where(
+    [role='menu'],
+    [role='listbox'],
+    [data-date-picker-content],
+    [data-navigation-menu-content],
+    [data-command],
+    [data-hovercard-content]
+  ) {
+    border-radius: 4px;
+    box-shadow:
+      0 2px 6px rgba(0, 0, 0, 0.16),
+      0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  /* ---- Checkbox & radio: M3 state-layer ripple -------------------------------
+   * The ripple lives on ::before at z-index:-1 so it paints ABOVE the control's
+   * background but BELOW its content (the base check/dot on ::after). This leaves
+   * the base marks completely untouched — do NOT restyle ::after here, the base
+   * check is a flex-centred rotated border and the radio dot is position:absolute;
+   * inset:3px, both of which break if position/box-sizing is overridden. */
+  [data-ui='material'] :where([role='checkbox']),
+  [data-ui='material'] :where([role='radio']) {
+    position: relative;
+    overflow: visible;
+  }
+  [data-ui='material'] :where([role='checkbox'])::before,
+  [data-ui='material'] :where([role='radio'])::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--flx-ui-color-primary);
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-50%, -50%) scale(0.5);
+    transition:
+      opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  }
+  [data-ui='material'] :where([role='checkbox']:hover:not([data-disabled]))::before,
+  [data-ui='material'] :where([role='radio']:hover:not([data-disabled]))::before {
+    opacity: 0.1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  [data-ui='material'] :where([role='checkbox']:active:not([data-disabled]))::before,
+  [data-ui='material'] :where([role='radio']:active:not([data-disabled]))::before,
+  [data-ui='material'] :where([role='checkbox']:focus-visible)::before,
+  [data-ui='material'] :where([role='radio']:focus-visible)::before {
+    opacity: 0.18;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* ---- Circular progress: 4dp tonal track, round cap (matches linear) ------ */
+  [data-ui='material'] :where([data-progress-track]) {
+    stroke: var(--flx-ui-color-primary-subtle);
+  }
+  [data-ui='material'] :where([data-progress-indicator]) {
+    stroke-linecap: round;
+  }
+
+  /* ---- Avatar group: tonal secondary-container overflow chip --------------- */
+  [data-ui='material'] :where([data-avatar-group-overflow]) {
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+  }
+
+  /* ---- Rating: filled primary stars, roomier M3 spacing ------------------- */
+  [data-ui='material'] :where([data-rating]) {
+    --flx-ui-rating-gap: 4px;
+    --flx-ui-rating-color: var(--flx-ui-color-primary);
+  }
+
+  /* ---- PIN input: M3 filled cells with the shared underline treatment ------ */
+  [data-ui='material'] :where([data-pin-input-field]) {
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-bottom: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px 4px 0 0;
+  }
+  [data-ui='material'] :where([data-pin-input-field]:focus, [data-pin-input-field]:focus-visible) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+
+  /* ---- Icon button: M3 round, size-aware (overrides the fixed 40px pill) ---- */
+  [data-ui='material'] :where([data-icon-button]) {
+    padding: 0;
+    width: var(--flx-ui-size-md);
+    height: var(--flx-ui-size-md);
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-icon-button][data-size='sm']) {
+    width: var(--flx-ui-size-sm);
+    height: var(--flx-ui-size-sm);
+  }
+  [data-ui='material'] :where([data-icon-button][data-size='lg']) {
+    width: var(--flx-ui-size-lg);
+    height: var(--flx-ui-size-lg);
+  }
+
+  /* ---- FAB: M3 primary-container, resting elevation, larger radius. Re-assert
+     the FAB geometry the fixed-40px button rule above would otherwise impose. */
+  [data-ui='material'] :where([data-fab]) {
+    width: 56px;
+    height: 56px;
+    padding: 0;
+    border-radius: 16px;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+    box-shadow: var(--flx-ui-shadow-md);
+  }
+  [data-ui='material'] :where([data-fab]:hover:not([data-disabled])) {
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='material'] :where([data-fab][data-fab-size='sm']) { width: 40px; height: 40px; border-radius: 12px; }
+  [data-ui='material'] :where([data-fab][data-fab-size='lg']) { width: 64px; height: 64px; border-radius: 28px; }
+  [data-ui='material'] :where([data-fab][data-fab-extended]) {
+    width: auto;
+    height: 56px;
+    padding: 0 20px;
+    border-radius: 16px;
+  }
+  /* A solid-toned FAB keeps the primary fill instead of the tonal container. */
+  [data-ui='material'] :where([data-fab][data-variant='solid']) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+  }
+
+  /* ---- Speed dial: elevated action buttons -------------------------------- */
+  [data-ui='material'] :where([data-speed-dial-action]) {
+    box-shadow: var(--flx-ui-shadow-sm);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/skin-material",
-  "version": "0.3.0-alpha.6",
+  "version": "0.3.0-alpha.7",
   "description": "Material Design skin for Fluixi UI — activate with data-ui=\"material\"",
   "license": "MIT",
   "private": false,