@fluid-theme/core 0.4.3 → 2.1.0

package/src/components/chip.css

@@ -22,6 +22,11 @@
  *     <button class="chip-group__clear" data-variant="ghost" data-size="sm">Clear All</button>
  *   </div>
  *
+ *   <!-- Selectable chip: a checkbox or radio inside the label. The chip shows
+ *        the checked state, wraps a long label and is 44px tall for a thumb. -->
+ *   <label class="chip"><input type="checkbox" name="cuisine" value="Mexican"> Mexican</label>
+ *   <label class="chip"><input type="radio" name="size" value="m"> Medium</label>
+ *
  * Variants: data-variant="filled|outline"
  */
 
@@ -36,7 +41,7 @@
     color: var(--color-text);
     background: var(--color-surface);
     border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-full);
+    border-radius: var(--radius-pill);
     white-space: nowrap;
     transition: background-color var(--duration-fast) var(--ease-fluid);
   }
@@ -51,7 +56,7 @@
 
   .chip__remove {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: var(--color-error-subtle);
 
     position: relative;
     display: inline-flex;
@@ -76,7 +81,8 @@
 
   .chip__remove:focus-visible {
     color: var(--color-error);
-    box-shadow: var(--shadow-glow);
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 1px;
   }
 
   /* Extend touch target to 44px minimum */
@@ -94,16 +100,16 @@
   .chip[data-variant="filled"] {
     background: var(--accent-subtle);
     border-color: transparent;
-    color: var(--accent);
+    color: var(--accent-ink);
   }
 
   .chip[data-variant="filled"]:hover {
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
   }
 
   .chip[data-variant="filled"]:hover .chip__remove:hover {
-    color: var(--white);
+    color: var(--on-accent);
     background: oklch(from var(--accent) calc(l - 0.1) c h);
   }
 
@@ -112,6 +118,38 @@
   }
 
 
+  /* ========================================
+     SELECTABLE CHIP
+     <label class="chip"><input type="checkbox"> Text</label>
+     ======================================== */
+
+  .chip:has(> input:is([type="checkbox"], [type="radio"])) {
+    min-block-size: 2.75rem;
+    padding-block: var(--space-2);
+    white-space: normal;
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast) var(--ease-fluid),
+      border-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  /* Tint and border only: the ticked box already says checked. */
+  .chip:has(> input:checked) {
+    background: var(--accent-subtle);
+    border-color: var(--accent);
+  }
+
+  .chip:has(> input:focus-visible) {
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .chip:has(> input:disabled) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+
   /* ========================================
      CHIP GROUP
      Container for active filter chips
@@ -130,14 +168,10 @@
   }
 
 
+
   /* ========================================
      REDUCED MOTION
      ======================================== */
 
-  @media (prefers-reduced-motion: reduce) {
-    .chip,
-    .chip__remove {
-      transition: none;
-    }
-  }
+  /* Reduced motion: the reset shortens every transition. */
 }

package/src/components/compare.css

@@ -0,0 +1,234 @@
+/**
+ * Fluid Framework - Before / After compare
+ * @layer components
+ *
+ * Two photos of the same view with a divider you drag: a driveway before and
+ * after cleaning, a kitchen before and after a renovation, a garden through
+ * the seasons.
+ *
+ * Progressive enhancement: without JavaScript the two photos sit side by side
+ * (stacked on a phone), each with its label. With assets/js/compare.js they
+ * overlap and a slider moves the divider: drag or tap anywhere on the photo,
+ * or focus it and use the arrow keys (Page Up / Page Down for big steps).
+ * Printing shows both photos side by side again.
+ *
+ * Usage:
+ *   <figure class="compare" data-compare>
+ *     <div class="compare__stage">
+ *       <div class="compare__before">
+ *         <img src="driveway-before.jpg" alt="Driveway before cleaning, black mould along the joints"
+ *              width="1200" height="800" loading="lazy">
+ *         <span class="compare__label">Before</span>
+ *       </div>
+ *       <div class="compare__after">
+ *         <img src="driveway-after.jpg" alt="The same driveway after cleaning"
+ *              width="1200" height="800" loading="lazy">
+ *         <span class="compare__label">After</span>
+ *       </div>
+ *     </div>
+ *     <figcaption class="compare__caption">Driveway · Photos: the pro's own</figcaption>
+ *   </figure>
+ *   <script src="assets/js/compare.js" defer></script>
+ *
+ * Options on .compare:
+ *   data-start="30"              where the divider starts, 0–100 (default 50)
+ *   data-compare-label="…"       the slider's accessible name (default "Compare before and after")
+ *   style="--compare-aspect: 4 / 3"   crop both photos to one shape (default: the photos' own)
+ * Both photos should show the same view at the same size.
+ */
+
+@layer components {
+  .compare {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-inline-size: 0;
+  }
+
+  /* Without the script: side by side, stacked when narrow */
+  .compare__stage {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+    gap: var(--space-3);
+  }
+
+  .compare__before,
+  .compare__after {
+    position: relative;
+    margin: 0;
+    min-inline-size: 0;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--color-surface);
+  }
+
+  .compare__before img,
+  .compare__after img {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    aspect-ratio: var(--compare-aspect, auto);
+    object-fit: cover;
+  }
+
+  /* Photos vary, so labels carry their own dark backing: readable on any image */
+  .compare__label {
+    position: absolute;
+    inset-block-start: var(--space-2);
+    inset-inline-start: var(--space-2);
+    z-index: 1;
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-sm);
+    background: oklch(0% 0 0 / 0.65);
+    color: oklch(100% 0 0);
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    pointer-events: none;
+  }
+
+  .compare__caption {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    line-height: var(--leading-snug);
+    overflow-wrap: anywhere;
+  }
+
+
+  /* ========================================
+     WITH THE SCRIPT: one frame, a divider
+     ======================================== */
+
+  .compare[data-compare-ready] .compare__stage {
+    display: block;
+    position: relative;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .compare[data-compare-ready] .compare__before,
+  .compare[data-compare-ready] .compare__after {
+    border-radius: 0;
+  }
+
+  .compare[data-compare-ready] .compare__after {
+    position: absolute;
+    inset: 0;
+    /* clip-path has no logical form: the after photo shows on the inline-end side */
+    clip-path: inset(0 0 0 var(--compare-pos, 50%));
+  }
+
+  .compare[data-compare-ready]:dir(rtl) .compare__after {
+    clip-path: inset(0 var(--compare-pos, 50%) 0 0);
+  }
+
+  .compare[data-compare-ready] .compare__after img {
+    block-size: 100%;
+  }
+
+  .compare[data-compare-ready] .compare__after .compare__label {
+    inset-inline-start: auto;
+    inset-inline-end: var(--space-2);
+  }
+
+  .compare__handle {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--compare-pos, 50%);
+    z-index: 2;
+    inline-size: 2px;
+    margin-inline-start: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* the knob is wider than the line and overflows both sides equally */
+    background: oklch(100% 0 0);
+    box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.35);
+    pointer-events: none;
+  }
+
+  .compare__knob {
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    border: var(--border-width-thick) solid oklch(100% 0 0);
+    border-radius: var(--radius-full);
+    background: oklch(0% 0 0 / 0.55);
+    color: oklch(100% 0 0);
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    line-height: 1;
+    box-shadow: var(--shadow-md);
+  }
+
+  /* The real control: a native range input over the whole photo, invisible */
+  .compare .compare__range {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: ew-resize;
+    touch-action: pan-y; /* a vertical swipe still scrolls the page */
+  }
+
+  .compare:has(.compare__range:hover) .compare__knob {
+    background: oklch(0% 0 0 / 0.8);
+  }
+
+  /* White ring with a dark halo: visible on light and dark photos alike */
+  .compare:has(.compare__range:focus-visible) .compare__knob {
+    outline: 3px solid oklch(100% 0 0);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 7px oklch(0% 0 0 / 0.6);
+  }
+
+  @media (forced-colors: active) {
+    .compare__handle {
+      background: CanvasText;
+    }
+
+    .compare__knob,
+    .compare__label {
+      border: var(--border-width-thick) solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .compare:has(.compare__range:focus-visible) .compare__knob {
+      outline-color: Highlight;
+    }
+  }
+
+  @media print {
+    .compare[data-compare-ready] .compare__stage {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-3);
+      overflow: visible;
+    }
+
+    .compare[data-compare-ready] .compare__after {
+      position: relative;
+      clip-path: none;
+    }
+
+    .compare[data-compare-ready] .compare__after .compare__label {
+      inset-inline-start: var(--space-2);
+      inset-inline-end: auto;
+    }
+
+    .compare__handle,
+    .compare .compare__range {
+      display: none;
+    }
+  }
+}

package/src/components/dropdown.css

@@ -76,22 +76,19 @@
     overflow-y: auto;
 
     /* Visual */
-    background: var(--color-surface-raised);
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
+    background: var(--color-background);
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-card);
     padding: var(--space-1);
 
     /* Hidden by default */
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-4px) scale(0.98);
     pointer-events: none;
 
     /* Transitions */
     transition:
       opacity var(--duration-fast) var(--ease-fluid),
-      transform var(--duration-fast) var(--ease-settle),
       visibility var(--duration-fast) var(--ease-fluid);
   }
 
@@ -102,7 +99,6 @@
   .dropdown[data-open] > .dropdown__menu {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0) scale(1);
     pointer-events: auto;
   }
 
@@ -131,14 +127,12 @@
   .dropdown[data-position="top"] .dropdown__menu {
     inset-block-start: auto;
     inset-block-end: calc(100% + var(--space-1));
-    transform: translateY(4px) scale(0.98);
   }
 
   .dropdown[data-position="top"]:hover > .dropdown__menu,
   .dropdown[data-position="top"]:focus-within > .dropdown__menu,
   .dropdown[data-position="top"][open] > .dropdown__menu,
   .dropdown[data-position="top"][data-open] > .dropdown__menu {
-    transform: translateY(0) scale(1);
   }
 
   /* Top-end */
@@ -147,14 +141,12 @@
     inset-block-end: calc(100% + var(--space-1));
     inset-inline-start: auto;
     inset-inline-end: 0;
-    transform: translateY(4px) scale(0.98);
   }
 
   .dropdown[data-position="top-end"]:hover > .dropdown__menu,
   .dropdown[data-position="top-end"]:focus-within > .dropdown__menu,
   .dropdown[data-position="top-end"][open] > .dropdown__menu,
   .dropdown[data-position="top-end"][data-open] > .dropdown__menu {
-    transform: translateY(0) scale(1);
   }
 
 
@@ -181,7 +173,7 @@
     align-items: center;
     gap: var(--space-3);
     padding: var(--space-2) var(--space-3);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-control);
     font-size: var(--font-size-sm);
     color: var(--color-text);
     text-decoration: none;
@@ -193,20 +185,20 @@
   }
 
   .dropdown__item:hover {
-    background: color-mix(in oklch, var(--accent) 10%, var(--color-background));
-    color: var(--accent);
+    background: color-mix(in oklab, var(--accent) 10%, var(--color-background));
+    color: var(--accent-ink);
   }
 
   .dropdown__item:focus-visible {
-    outline: 2px solid var(--color-focus);
+    outline: var(--focus-ring-width) solid var(--color-focus);
     outline-offset: -2px;
   }
 
   /* Active/selected item */
   .dropdown__item[aria-selected="true"],
   .dropdown__item[data-active] {
-    background: color-mix(in oklch, var(--accent) 12%, var(--color-background));
-    color: var(--accent);
+    background: color-mix(in oklab, var(--accent) 12%, var(--color-background));
+    color: var(--accent-ink);
     font-weight: var(--weight-medium);
   }
 
@@ -277,59 +269,10 @@
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: no animation */
-  [data-motion="still"] .dropdown__menu {
-    transition: none;
-  }
-
-  [data-motion="still"] .dropdown__chevron {
-    transition: none;
-  }
-
-  /* Serene: extra rounded */
-  [data-motion="serene"] .dropdown__menu {
-    border-radius: var(--radius-xl);
-  }
-
-  [data-motion="serene"] .dropdown__item {
-    border-radius: var(--radius-lg);
-  }
-
-  /* Cascade: bouncy */
-  [data-motion="cascade"] .dropdown__menu {
-    border-radius: var(--radius-xl);
-  }
-
-  /* Rapids: offset shadow */
-  [data-motion="rapids"] .dropdown__menu {
-    box-shadow: var(--shadow-offset);
-  }
-
-  /* Tsunami: asymmetric */
-  [data-motion="tsunami"] .dropdown__menu {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
-  }
-
 
   /* ========================================
      REDUCED MOTION
      ======================================== */
 
-  @media (prefers-reduced-motion: reduce) {
-    .dropdown__menu {
-      transition: none;
-    }
-
-    .dropdown__chevron {
-      transition: none;
-    }
-
-    .dropdown__item {
-      transition: none;
-    }
-  }
+  /* Reduced motion: the reset shortens every transition. */
 }

package/src/components/empty-state.css

@@ -49,6 +49,7 @@
   }
 
   .empty-state__title {
+    font-family: var(--font-heading);
     font-size: var(--font-size-lg);
     font-weight: var(--weight-semibold);
     color: var(--color-text);
@@ -102,4 +103,7 @@
   .empty-state[data-size="lg"] .empty-state__title {
     font-size: var(--font-size-xl);
   }
+
+
+
 }