@fluid-theme/core 0.4.3 → 2.0.0

package/src/components/form.css

@@ -1,6 +1,6 @@
 /**
  * Fluid Framework - Form Components
- * @layer components
+ * @layer components (the honeypot and conditional fields: @layer utilities)
  *
  * Forms should feel welcoming, not like paperwork.
  * Clear labels, gentle feedback, graceful validation.
@@ -11,6 +11,7 @@
  * - Toggle switches
  * - Input groups and addons
  * - Form validation states
+ * - Honeypot and conditional fields
  */
 
 @layer components {
@@ -49,8 +50,8 @@
 
   /* Label styling */
   .form-label {
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
+    font-size: var(--step--1);
+    font-weight: calc(600 + var(--_dark-weight));
     color: var(--color-text);
   }
 
@@ -62,14 +63,14 @@
 
   /* Help text */
   .form-help {
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
     color: var(--color-text-muted);
     margin-block-start: var(--space-1);
   }
 
   /* Error message */
   .form-error {
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
     color: var(--color-error);
     margin-block-start: var(--space-1);
   }
@@ -94,14 +95,14 @@
 
   .input-group > input:first-child,
   .input-group > select:first-child {
-    border-start-start-radius: var(--radius-md);
-    border-end-start-radius: var(--radius-md);
+    border-start-start-radius: var(--radius-control);
+    border-end-start-radius: var(--radius-control);
   }
 
   .input-group > input:last-child,
   .input-group > select:last-child {
-    border-start-end-radius: var(--radius-md);
-    border-end-end-radius: var(--radius-md);
+    border-start-end-radius: var(--radius-control);
+    border-end-end-radius: var(--radius-control);
   }
 
   .input-group__addon {
@@ -111,19 +112,19 @@
     font-size: var(--font-size-sm);
     color: var(--color-text-muted);
     background-color: var(--color-surface);
-    border: 1px solid var(--color-border);
+    border: var(--border-width) solid var(--color-border-strong);
   }
 
   .input-group__addon:first-child {
     border-inline-end: none;
-    border-start-start-radius: var(--radius-md);
-    border-end-start-radius: var(--radius-md);
+    border-start-start-radius: var(--radius-control);
+    border-end-start-radius: var(--radius-control);
   }
 
   .input-group__addon:last-child {
     border-inline-start: none;
-    border-start-end-radius: var(--radius-md);
-    border-end-end-radius: var(--radius-md);
+    border-start-end-radius: var(--radius-control);
+    border-end-end-radius: var(--radius-control);
   }
 
 
@@ -152,16 +153,15 @@
     flex-shrink: 0;
     inline-size: 1.25rem;
     block-size: 1.25rem;
-    border: var(--border-width-thick) solid var(--color-border);
+    border: var(--border-width-thick) solid var(--color-border-strong);
     border-radius: var(--radius-sm);
     background-color: var(--color-background);
     display: flex;
     align-items: center;
     justify-content: center;
     transition:
-      background-color var(--duration-normal) var(--ease-fluid),
-      border-color var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-fast) var(--ease-settle);
+      background-color var(--duration-fast) var(--ease-fluid),
+      border-color var(--duration-fast) var(--ease-fluid);
   }
 
   /* Checkmark icon */
@@ -169,8 +169,8 @@
     content: "";
     inline-size: 0.5rem;
     block-size: 0.25rem;
-    border-inline-start: 2px solid var(--white);
-    border-block-end: 2px solid var(--white);
+    border-inline-start: var(--border-width-thick) solid var(--on-accent);
+    border-block-end: var(--border-width-thick) solid var(--on-accent);
     transform: rotate(-45deg) scale(0);
     transition: transform var(--duration-fast) var(--ease-settle);
   }
@@ -182,7 +182,8 @@
 
   /* Focus state */
   .checkbox__input:focus-visible + .checkbox__box {
-    box-shadow: var(--shadow-glow);
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
   }
 
   /* Checked state */
@@ -244,7 +245,7 @@
     flex-shrink: 0;
     inline-size: 1.25rem;
     block-size: 1.25rem;
-    border: var(--border-width-thick) solid var(--color-border);
+    border: var(--border-width-thick) solid var(--color-border-strong);
     border-radius: var(--radius-full);
     background-color: var(--color-background);
     display: flex;
@@ -269,7 +270,8 @@
   }
 
   .radio__input:focus-visible + .radio__circle {
-    box-shadow: var(--shadow-glow);
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
   }
 
   .radio__input:checked + .radio__circle {
@@ -330,43 +332,45 @@
     block-size: 0;
   }
 
+  /* Square track and thumb (the radius knob); the thumb moves along the
+     inline axis with inset-inline-start, so RTL works. */
   .switch__track {
     position: relative;
+    flex-shrink: 0;
     inline-size: 2.75rem;
     block-size: 1.5rem;
-    background-color: var(--color-border);
-    border-radius: var(--radius-full);
-    transition: background-color var(--duration-normal) var(--ease-fluid);
+    background-color: var(--color-background);
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-control);
+    transition: background-color var(--duration-fast) var(--ease-fluid);
   }
 
   .switch__thumb {
     position: absolute;
     inset-block-start: 0.125rem;
     inset-inline-start: 0.125rem;
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
-    background-color: var(--white);
-    border-radius: var(--radius-full);
-    box-shadow: var(--shadow-sm);
+    inline-size: calc(1.25rem - 2 * var(--border-width));
+    block-size: calc(1.25rem - 2 * var(--border-width));
+    background-color: var(--color-text);
+    border-radius: var(--radius-control);
     transition:
-      transform var(--duration-normal) var(--ease-settle),
-      box-shadow var(--duration-fast) var(--ease-fluid);
-  }
-
-  .switch:hover .switch__track {
-    background-color: var(--color-text-subtle);
+      inset-inline-start var(--duration-normal) var(--ease-settle),
+      background-color var(--duration-fast) var(--ease-fluid);
   }
 
   .switch__input:focus-visible + .switch__track {
-    box-shadow: var(--shadow-glow);
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
   }
 
   .switch__input:checked + .switch__track {
     background-color: var(--accent);
+    border-color: var(--accent);
   }
 
   .switch__input:checked + .switch__track .switch__thumb {
-    transform: translateX(1.25rem);
+    inset-inline-start: calc(100% - 1.25rem + 2 * var(--border-width) - 0.125rem);
+    background-color: var(--on-accent);
   }
 
   .switch__input:disabled + .switch__track {
@@ -395,7 +399,7 @@
   }
 
   .switch[data-size="sm"] .switch__input:checked + .switch__track .switch__thumb {
-    transform: translateX(0.875rem);
+    inset-inline-start: calc(100% - 0.875rem - 0.125rem);
   }
 
 
@@ -414,12 +418,6 @@
     border-color: var(--color-success);
   }
 
-  input[data-valid]:focus,
-  textarea[data-valid]:focus,
-  select[data-valid]:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 20%, transparent);
-  }
-
   /* Invalid/Error state */
   input[data-invalid],
   textarea[data-invalid],
@@ -427,25 +425,28 @@
   input[aria-invalid="true"],
   textarea[aria-invalid="true"],
   select[aria-invalid="true"],
-  input:invalid:not(:placeholder-shown),
-  textarea:invalid:not(:placeholder-shown),
   .form-group[data-invalid] input,
   .form-group[data-invalid] textarea,
   .form-group[data-invalid] select {
     border-color: var(--color-error);
+    border-inline-start-width: calc(var(--border-width) * 4);
   }
 
-  input[data-invalid]:focus,
-  textarea[data-invalid]:focus,
-  select[data-invalid]:focus,
-  input[aria-invalid="true"]:focus,
-  textarea[aria-invalid="true"]:focus,
-  select[aria-invalid="true"]:focus,
-  input:invalid:not(:placeholder-shown):focus,
-  textarea:invalid:not(:placeholder-shown):focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  /* Browser validation shows only after someone has edited or submitted the
+     field (:user-invalid). The old :invalid:not(:placeholder-shown) only
+     waited on fields with a placeholder, so an empty required field without
+     one was red on page load (the Fluid Stack's sign-up form, 2026-10-09).
+     Separate rules: a browser without :user-invalid drops only these. */
+  :is(input, textarea, select):user-invalid {
+    border-color: var(--color-error);
+    border-inline-start-width: calc(var(--border-width) * 4);
   }
 
+  /* An invalid field says so twice: the error colour and a heavy start
+     edge, so the state survives where the colour cannot be seen (on an
+     accent-strong band --color-error is --on-accent, the resting edge's
+     colour too). Focus adds the base outline (base.css) on top. */
+
 
   /* ========================================
      FORM LAYOUT
@@ -463,7 +464,7 @@
     gap: var(--space-3);
     margin-block-start: var(--space-6);
     padding-block-start: var(--space-6);
-    border-block-start: 1px solid var(--color-border-subtle);
+    border-block-start: var(--border-width) solid var(--color-border);
   }
 
   .form-actions[data-align="end"] {
@@ -475,34 +476,65 @@
   }
 
 
+  /* FIELDSET: .form-fieldset is the base fieldset (no box, a top hairline,
+     the legend in the label voice; base.css). */
+
+
   /* ========================================
-     FIELDSET & LEGEND
-     Grouped form sections
+     REDUCED MOTION
      ======================================== */
 
-  fieldset.form-fieldset {
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
-    padding: var(--space-5);
-    margin-block-end: var(--space-6);
-  }
+  /* Accessibility: reduced motion */
+  /* Reduced motion: the reset shortens every transition. */
+}
 
-  fieldset.form-fieldset legend {
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-semibold);
-    padding-inline: var(--space-2);
-    color: var(--color-text);
-  }
 
-  /* Accessibility: reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    input,
-    textarea,
-    select,
-    .checkbox__toggle,
-    .checkbox__label::before,
-    .radio__label::before {
-      transition: none;
+/* ========================================
+   HONEYPOT AND CONDITIONAL FIELDS
+   Functional rules the day-one forms depend on (the-fluid-stack
+   playbook forms.md D26c, security.md "Forms"). In @layer utilities,
+   like .sr-only, so they outrank a child theme in @layer themes (a
+   child theme outside a layer, or with !important, still wins).
+   ======================================== */
+@layer utilities {
+  /* <div class="form-group hp" aria-hidden="true"> around
+     <input name="website" tabindex="-1" autocomplete="off">, last in the
+     form. Clipped to a 1px box where it stands, like .sr-only. A -10000px
+     offset scrolled the page sideways: a physical one on any RTL page, a
+     logical (inline-start) one whenever the form's direction differed
+     from the page's. display: block stops a theme's display: contents
+     from undoing it. */
+  .hp {
+    display: block;
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* A field with data-show-if="<reason>" (space-separated for several)
+     shows only while its form's select[name="reason"] has that value
+     (forms.md pattern 7). No script. revert-layer hands display back to
+     the component or child theme. Without :has() every field shows, which
+     is safe. A field this rule hides must never block the submit: never
+     required, and no constraint a hidden value can fail (no type=number,
+     email or url, pattern, min, max, step or minlength; use type="text"
+     inputmode="numeric" and check it on the server, forms.md pattern 2).
+     Option values must be these exact lowercase words. */
+  @supports selector(:has(*)) {
+    form:has(select[name="reason"]) [data-show-if] { display: none; }
+    form:has(select[name="reason"] option[value="advertise"]:checked) [data-show-if~="advertise"],
+    form:has(select[name="reason"] option[value="partner"]:checked) [data-show-if~="partner"],
+    form:has(select[name="reason"] option[value="buy-site"]:checked) [data-show-if~="buy-site"],
+    form:has(select[name="reason"] option[value="buy-domain"]:checked) [data-show-if~="buy-domain"],
+    form:has(select[name="reason"] option[value="hire"]:checked) [data-show-if~="hire"],
+    form:has(select[name="reason"] option[value="other"]:checked) [data-show-if~="other"] {
+      display: revert-layer;
     }
   }
 }

package/src/components/gallery.css

@@ -0,0 +1,252 @@
+/**
+ * Fluid Framework - Gallery + Lightbox
+ * @layer components
+ *
+ * A grid of photos for portfolios (architects, interior designers, landscape
+ * architects, builders, photographers) and a full-screen viewer.
+ *
+ * Progressive enhancement: without JavaScript every thumbnail is a plain link
+ * to the full-size image. With assets/js/lightbox.js the links open in a
+ * native <dialog> with previous / next, arrow keys, Escape, swipe, a counter
+ * and the caption, and focus returns to the thumbnail on close.
+ *
+ * Usage:
+ *   <ul class="gallery" role="list" data-lightbox>
+ *     <li>
+ *       <figure class="gallery__figure">
+ *         <a class="gallery__link" href="photos/kitchen-2400.jpg">
+ *           <img class="gallery__image" src="photos/kitchen-800.jpg" alt="Kitchen with walnut island"
+ *                width="800" height="600" loading="lazy">
+ *         </a>
+ *         <figcaption class="gallery__caption">Kitchen · Photo: A. Smith</figcaption>
+ *       </figure>
+ *     </li>
+ *   </ul>
+ *   <script src="assets/js/lightbox.js" defer></script>
+ *
+ * Options on .gallery:
+ *   data-aspect="square|landscape|portrait|video"  crop of the thumbnails (default: natural ratio)
+ *   data-size="sm|lg"                                      thumbnail width (default 24rem: three across an
+ *                                                          80rem column, a body of work, not a catalogue;
+ *                                                          --gallery-min on :root sets it, sm 11rem, lg 32rem)
+ *   data-captions="overlay"                                captions over the image instead of below
+ * Per image: style="--focus-x: 30%; --focus-y: 60%" keeps the subject in the crop.
+ * Captions: write dimensions with no-break spaces (40&nbsp;×&nbsp;50&nbsp;cm), so
+ * they never break inside.
+ *
+ * The hang line: each item spans two rows of a subgrid with its image at
+ * the bottom of the first, so image bottoms and caption tops share one
+ * line across a row, whatever each image's ratio.
+ */
+
+@layer components {
+  /* ========================================
+     GRID
+     ======================================== */
+
+  .gallery {
+    --_gallery-min: var(--gallery-min, 24rem);
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--_gallery-min), 100%), 1fr));
+    gap: var(--space-m);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .gallery[data-size="sm"] { --_gallery-min: 11rem; }
+  .gallery[data-size="lg"] { --_gallery-min: 32rem; }
+
+  .gallery[data-aspect="square"] { --_gallery-aspect: 1; }
+  .gallery[data-aspect="landscape"] { --_gallery-aspect: 4 / 3; }
+  .gallery[data-aspect="portrait"] { --_gallery-aspect: 3 / 4; }
+  .gallery[data-aspect="video"] { --_gallery-aspect: 16 / 9; }
+
+  .gallery > *,
+  .gallery > * > .gallery__figure {
+    display: grid;
+    grid-row: span 2;
+    grid-template-rows: subgrid;
+    row-gap: var(--space-xs);
+    min-inline-size: 0;
+    margin: 0;
+  }
+
+  /* The hang line: the image (or its link) sits at the bottom of row one. */
+  .gallery__figure > :is(.gallery__image, picture) { align-self: end; }
+
+  /* Firefox sizes the grid too tall when a bare <img> is a subgrid item
+     (each row +142px at 390px once the images load; Firefox 157). Those
+     figures leave the subgrid there; a link or <picture> wrapper keeps it. */
+  @supports (-moz-appearance: none) {
+    .gallery > :has(> .gallery__figure > img) { display: block; }
+    .gallery__figure:has(> img) { block-size: 100%; grid-template-rows: 1fr auto; }
+  }
+
+  .gallery__link {
+    display: block;
+    align-self: end;
+    background: var(--color-surface);
+    transition: opacity var(--duration-fast) var(--ease-fluid);
+  }
+
+  .gallery__link:hover { opacity: 0.9; }
+
+  .gallery__link:focus-visible {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .gallery__image {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    object-fit: cover;
+    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
+  }
+
+  /* Only a crop sets the ratio: a bare `auto` here replaced the width and
+     height attributes' ratio, so a lazy image was only as tall as its alt
+     text until it loaded, and the page grew under the reader. */
+  .gallery[data-aspect] .gallery__image { aspect-ratio: var(--_gallery-aspect); }
+
+  .gallery__caption {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* Captions over the image */
+  .gallery[data-captions="overlay"] .gallery__figure { position: relative; }
+
+  .gallery[data-captions="overlay"] .gallery__caption {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    padding: var(--space-6) var(--space-3) var(--space-3);
+    background: linear-gradient(to top, oklch(0% 0 0 / 0.75), transparent);
+    color: oklch(100% 0 0);
+    max-inline-size: none;
+    pointer-events: none;
+  }
+
+
+  /* ========================================
+     LIGHTBOX (built by assets/js/lightbox.js)
+     ======================================== */
+
+  .lightbox {
+    border: none;
+    padding: 0;
+    margin: 0;
+    max-inline-size: none;
+    max-block-size: none;
+    inline-size: 100%;
+    block-size: 100%;
+    background: oklch(12% 0 0 / 0.96);
+    color: oklch(96% 0 0);
+    overflow: hidden;
+  }
+
+  .lightbox::backdrop {
+    background: oklch(0% 0 0 / 0.6);
+  }
+
+  .lightbox[open] {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: "bar" "stage" "caption";
+  }
+
+  .lightbox__bar {
+    grid-area: bar;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .lightbox__counter {
+    font-size: var(--font-size-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .lightbox__stage {
+    grid-area: stage;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 0;
+    padding-inline: var(--space-3);
+    touch-action: pan-y;
+  }
+
+  .lightbox__image {
+    display: block;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    object-fit: contain;
+    border-radius: var(--radius-sm);
+  }
+
+  .lightbox__caption {
+    grid-area: caption;
+    padding: var(--space-3) var(--space-4) var(--space-5);
+    text-align: center;
+    font-size: var(--font-size-sm);
+    line-height: var(--leading-snug);
+    max-inline-size: 60ch;
+    margin-inline: auto;
+    overflow-wrap: anywhere;
+  }
+
+  .lightbox .lightbox__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--space-2);
+    border: var(--border-width) solid oklch(100% 0 0 / 0.35);
+    border-radius: var(--radius-full);
+    background: oklch(0% 0 0 / 0.55);
+    color: oklch(100% 0 0);
+    font-size: var(--font-size-lg);
+    line-height: 1;
+    cursor: pointer;
+    box-shadow: none;
+  }
+
+  .lightbox .lightbox__button:hover {
+    background: oklch(0% 0 0 / 0.8);
+    border-color: oklch(100% 0 0 / 0.7);
+  }
+
+  .lightbox .lightbox__button:focus-visible {
+    outline: 3px solid oklch(100% 0 0);
+    outline-offset: 2px;
+  }
+
+  .lightbox__prev,
+  .lightbox__next {
+    position: absolute;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+
+  .lightbox__prev { inset-inline-start: var(--space-3); }
+  .lightbox__next { inset-inline-end: var(--space-3); }
+
+  .lightbox__prev[hidden],
+  .lightbox__next[hidden] {
+    display: none;
+  }
+
+  /* Keep the page still behind an open lightbox */
+  :root:has(.lightbox[open]) {
+    overflow: hidden;
+  }
+
+}