@fluixi-ui/skin-material 0.2.1-alpha.0 → 0.3.0-alpha.10

package/material.css

@@ -10,7 +10,7 @@
  * geometry, filled text fields, emphasized motion, Roboto. (True click-origin
  * ripple needs JS; the state layer stands in for it here.)
  */
-@layer flx.tokens, flx.components, flx.skin;
+@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
 
 /* Self-hosted Roboto (variable, latin subset) — no CDN / privacy dependency. */
 @font-face {
@@ -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,44 +56,40 @@
   /* 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;
+    /* Follow the button's own shape so the hover layer is rounded even where the
+       button isn't clipping (e.g. a glow button, which overflows). */
+    border-radius: inherit;
     background: currentColor;
     opacity: 0;
     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']) {
@@ -129,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);
@@ -146,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']) {
@@ -180,15 +223,331 @@
     border-radius: 4px;
   }
 
+  /* ---- Drawer (M3 side sheet): round the trailing (interior) edge only, keep
+     the screen-edge corners flush; M3 elevation instead of the heavy default. -- */
+  [data-ui='material'] :where([data-drawer-content]) {
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='left']) {
+    border-radius: 0 16px 16px 0;
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='right']) {
+    border-radius: 16px 0 0 16px;
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='top']) {
+    border-radius: 0 0 16px 16px;
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='bottom']) {
+    border-radius: 16px 16px 0 0;
+  }
+
+  /* ---- Bottom sheet (M3): 28dp top corners, M3 elevation, and the standard
+     32×4dp on-surface-variant drag handle. --------------------------------- */
+  [data-ui='material'] :where([data-bottom-sheet-content]) {
+    border-radius: 28px 28px 0 0;
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='material'] :where([data-bottom-sheet-handle])::before {
+    width: 32px;
+    height: 4px;
+    border-radius: 9999px;
+    background: var(--flx-ui-color-fg-muted);
+    opacity: 0.4;
+  }
+
+  /* ---- Surface & Card: M3 elevation (softer than the raw shadow tokens, which
+     are tuned for pop-overs; on a plain container they read too heavy) ------- */
+  [data-ui='material'] :where([data-surface]) {
+    border-radius: 12px;
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='0']) {
+    box-shadow: none;
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='1']),
+  [data-ui='material'] :where([data-card]) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='2']) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='3']) {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='4']) {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 6px 12px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-card]) {
+    border-radius: 12px;
+  }
+
+  /* ---- Calendar: M3 date grid — circular days, outlined "today", state-layer
+     nav, and a tonal band across a selected range. ------------------------- */
+  [data-ui='material'] :where([data-calendar-day]) {
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-calendar-day]:hover:not([data-disabled]):not([data-selected])) {
+    background: color-mix(in oklab, var(--flx-ui-color-primary) 10%, transparent);
+    color: inherit;
+  }
+  [data-ui='material'] :where([data-calendar-day][data-today]:not([data-selected])) {
+    border: 1px solid var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-calendar-nav]) {
+    border: none;
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-calendar-nav]:hover:not([disabled])) {
+    background: color-mix(in oklab, currentColor 8%, transparent);
+  }
+  /* Range: circular ends, a flat secondary-container band through the middle. */
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selected]) {
+    border-radius: 0;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-start]) {
+    border-radius: 9999px 0 0 9999px;
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-end]) {
+    border-radius: 0 9999px 9999px 0;
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-start][data-selection-end]) {
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-calendar-day][data-selection-start], [data-calendar-day][data-selection-end]) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+  }
+
+  /* ---- Date field & date picker: filled segmented control + M3 date-picker
+     surface, matching the filled text-field language above. ---------------- */
+  /* The field frame carries the filled fill + underline; the segment input nested
+     inside the picker control stays transparent so the underline isn't doubled. */
+  [data-ui='material'] :where([data-date-field-input], [data-date-picker-control]) {
+    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-date-field-input]:focus-within, [data-date-picker-control]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+  [data-ui='material'] :where([data-date-picker-input]) {
+    background: transparent;
+    border: none;
+  }
+  [data-ui='material'] :where([data-date-picker-content]) {
+    border-radius: 16px;
+    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  /* ---- Accordion: flat M3 list — no outer frame, dividers between items, a
+     state-layer on the header rather than a filled hover. ------------------ */
+  [data-ui='material'] :where([data-accordion]) {
+    border: none;
+    border-radius: 0;
+  }
+  [data-ui='material'] :where([data-accordion-item]:not(:last-child)) {
+    border-bottom: 1px solid var(--flx-ui-color-border);
+  }
+  [data-ui='material'] :where([data-accordion-trigger]) {
+    padding: 16px var(--flx-ui-space-4);
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-accordion-trigger]:hover:not([data-disabled])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
+  }
+
+  /* ---- Radio: M3 20px target ---------------------------------------------- */
+  [data-ui='material'] :where([role='radio']) {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+  }
+
+  /* ---- Toggle / segmented button: selected = secondary-container ----------- */
+  [data-ui='material'] :where([aria-pressed][data-state='on']) {
+    background: var(--flx-ui-color-primary-subtle);
+    border-color: transparent;
+    color: var(--flx-ui-color-primary-active);
+  }
+
+  /* ---- Number field: filled control row to match the text fields ---------- */
+  [data-ui='material'] :where([data-number-field-input-row]) {
+    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-number-field-input-row]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+  }
+
+  /* ---- Linear progress: 4dp fully-rounded track, tonal remainder ---------- */
+  [data-ui='material'] :where([role='progressbar']:not([data-circular])) {
+    height: 4px;
+    border-radius: 9999px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+
+  /* ---- Sidenav: M3 navigation drawer — full-pill items, state-layer hover,
+     secondary-container active, elevated menu flyout. --------------------- */
+  [data-ui='material'] :where([data-sidenav-link], [data-sidenav-sub-trigger]) {
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-sidenav-link]:hover:not([data-active]),
+    [data-sidenav-sub-trigger]:hover:not([data-active])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    color: inherit;
+  }
+  [data-ui='material'] :where([data-sidenav-link][data-active],
+    [data-sidenav-sub-trigger][data-active]) {
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+    font-weight: 600;
+  }
+  [data-ui='material'] :where([data-sidenav-trigger]) {
+    border-radius: 9999px;
+  }
+  /* Flyout: an elevated M3 menu surface; its rows keep the pill treatment. */
+  [data-ui='material'] :where([data-sidenav-sub-content][data-flyout]) {
+    border-radius: 12px;
+    box-shadow: var(--flx-ui-shadow-lg);
+    padding: var(--flx-ui-space-2);
+  }
+  [data-ui='material'] :where([data-sidenav][data-mobile]) {
+    border-radius: 0 16px 16px 0;
+  }
+  [data-ui='material'] :where([data-sidenav][data-mobile][data-side='right']) {
+    border-radius: 16px 0 0 16px;
+  }
+
+  /* ---- Pagination: circular pages, filled current ------------------------- */
+  [data-ui='material'] :where([data-pagination-page], [data-pagination-prev], [data-pagination-next]) {
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-pagination-page]:hover:not([data-current])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+  }
+  [data-ui='material'] :where([data-pagination-page][data-current]) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+    border-color: transparent;
+  }
+
+  /* ---- Stepper: circular numbered indicators ------------------------------ */
+  [data-ui='material'] :where([data-stepper-indicator]) {
+    border-radius: 9999px;
+  }
+
+  /* ---- 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);
+    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 ----------- */
+  [data-ui='material'] :where([data-navigation-menu-trigger]:hover),
+  [data-ui='material'] :where([role='menubar'] > [role='menuitem']:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    border-radius: 8px;
+  }
+
+  /* ---- Command & menu rows: M3 state layer over the flat rows -------------- */
+  [data-ui='material'] :where([data-command-item][data-active]) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+  }
+
+  /* ---- Table: flat M3 data table — no frame, divider-only rows, sentence-case
+     header (no all-caps), state-layer hover/selection, comfortable density -- */
+  [data-ui='material'] :where([data-table]) {
+    border: none;
+    border-radius: 0;
+  }
+  [data-ui='material'] :where([data-table-head]) {
+    background: transparent;
+    color: var(--flx-ui-color-fg-muted);
+    font-size: var(--flx-ui-font-size-sm);
+    font-weight: 500;
+    letter-spacing: normal;
+    text-transform: none;
+    padding: var(--flx-ui-space-3);
+    border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  }
+  [data-ui='material'] :where([data-table-cell]) {
+    padding: var(--flx-ui-space-3);
+  }
+  [data-ui='material'] :where([data-table-body] > [data-table-row]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 5%, transparent);
+  }
+  [data-ui='material'] :where([data-table-row][data-selected]),
+  [data-ui='material'] :where([data-table-row][data-selected]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-primary) 10%, transparent);
+  }
+  /* Header is transparent now, so pinned cells need an opaque surface fill. */
+  [data-ui='material'] :where([data-table-cell][data-pinned]),
+  [data-ui='material'] :where([data-table-head][data-pinned]) {
+    background: var(--flx-ui-color-bg);
+  }
+  /* Compact density under Material. */
+  [data-ui='material'] :where([data-table][data-density='compact'] [data-table-head]),
+  [data-ui='material'] :where([data-table][data-density='compact'] [data-table-cell]) {
+    padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  }
+
+  /* ---- Toast: M3 snackbar shape + elevation (keeps the type accent) -------- */
+  [data-ui='material'] :where([data-toast]) {
+    border-radius: 4px;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12);
+  }
+
+  /* ---- Alert: M3 medium radius ------------------------------------------- */
+  [data-ui='material'] :where([data-alert]) {
+    border-radius: 12px;
+  }
+
   /* ---- 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]:not([data-badge])[data-glow]) {
+    overflow: visible;
+  }
   [data-ui='material'] .flx-mat-ripple {
     position: absolute;
     border-radius: 50%;
-    background: currentColor;
+    /* Overridable per-control via --flx-mat-ripple-color; defaults to the ink. */
+    background: var(--flx-mat-ripple-color, currentColor);
     opacity: 0;
     transform: scale(0);
     pointer-events: none;
@@ -210,4 +569,333 @@
       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);
+  }
+
+  /* ---- Carousel: M3 expanding indicators + circular controls -------------- */
+  [data-ui='material'] :where([data-carousel-dot]) {
+    border-radius: var(--flx-ui-radius-full, 999px);
+    transition: width var(--flx-ui-duration-normal, 250ms) var(--flx-ui-ease-standard, ease),
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  /* Active indicator grows into a pill, à la M3 carousels. */
+  [data-ui='material'] :where([data-carousel-dot][data-active]) {
+    width: 24px;
+    background: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-carousel-prev], [data-carousel-next]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 40px;
+    block-size: 40px;
+    border: 0;
+    border-radius: var(--flx-ui-radius-full, 999px);
+    background: var(--flx-ui-color-bg-muted);
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='material'] :where([data-carousel-prev]:hover:not([disabled]), [data-carousel-next]:hover:not([disabled])) {
+    background: color-mix(in srgb, var(--flx-ui-color-fg) 8%, var(--flx-ui-color-bg-muted));
+  }
 }

package/material.css.js

@@ -0,0 +1,8 @@
+const href = new URL('./material.css', import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(`link[data-flx-ui="${href}"]`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.flxUi = href;
+  document.head.appendChild(link);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/skin-material",
-  "version": "0.2.1-alpha.0",
+  "version": "0.3.0-alpha.10",
   "description": "Material Design skin for Fluixi UI — activate with data-ui=\"material\"",
   "license": "MIT",
   "private": false,
@@ -21,6 +21,7 @@
     "dist",
     "fonts",
     "material.css",
+    "material.css.js",
     "README.md",
     "LICENSE"
   ],
@@ -34,6 +35,6 @@
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.lib.json"
+    "build": "tsc -p tsconfig.lib.json && node ../../scripts/css-loaders.mjs material.css"
   }
 }