Draw the chip set without Tailwind

<x-chip-set> renders data-md-chip-set (data-md-scroll), its row, label, hint, errors and scroll buttons as data-md-* attributes, and its row, fade mask, scroll padding and pointer-fine buttons move into components/chip-set.css on tokens (plan step 36). chips.js marks the row data-md-scroll-start and data-md-scroll-end. Browser tests cover the scroll buttons in LTR and RTL and the arrow keys with a roving tab stop that scrolls the focused chip clear of the button. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:54:41 +02:00
parent d8072d878a
commit 55cf8ceed7
6 changed files with 259 additions and 43 deletions
@@ -0,0 +1,128 @@
+/*
+ * <x-chip-set>: a set of M3 chips (resources/views/components/chip-set.blade.php), named for screen
+ * readers as a group.
+ *
+ * The chips sit 8px apart (M3's chip spacing), in a row that wraps. Above it the label in
+ * label-large on-surface-variant, 8px over the row; under it the hint, or the errors in its place,
+ * body-small, 4px under the row.
+ *
+ * `data-md-scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a
+ * narrow screen. M3's chips accessibility page asks that a row which overflows say so: the edge the
+ * row can still scroll towards (`data-md-scroll-start`, `data-md-scroll-end`, set by
+ * resources/js/chips.js) fades over 24px through a mask, black meaning only "opaque" there, and in a
+ * right-to-left document the fade runs the other way. Where the pointer is fine, and so there is no
+ * swipe, a 32px round button in surface-container-high at elevation 1 sits over each fading edge;
+ * the row's scroll padding grows from 24px to 40px there, so a chip the keyboard reaches scrolls
+ * clear of the button as well as the fade. The row reaches 6px and 8px past its box so a focused
+ * chip's ring and an elevated chip's shadow are not clipped by the scroller.
+ *
+ *   [data-md-chip-set]              the group; data-md-scroll
+ *     [data-md-chip-set-label]
+ *     [data-md-chip-set-scroller]   (scrolling) the row and its buttons
+ *       [data-md-chip-set-row]      the chips; data-md-scroll-start, data-md-scroll-end
+ *       [data-md-chip-scroll="start|end"]
+ *     [data-md-chip-set-hint] | [data-md-chip-set-errors]
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './chip.css';
+@import './icon.css';
+
+@layer material.components {
+    [data-md-chip-set] {
+        min-width: 0;
+    }
+
+    [data-md-chip-set-label] {
+        margin-bottom: var(--md-sys-measurement-space100);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-chip-set-row] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--md-sys-measurement-space100);
+    }
+
+    [data-md-chip-set-hint],
+    [data-md-chip-set-errors] > p {
+        margin-top: var(--md-sys-measurement-space50);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-chip-set-errors] > p {
+        color: var(--md-sys-color-error);
+    }
+
+    /* ---- Scrolling --------------------------------------------------------------------------- */
+
+    [data-md-chip-set-scroller] {
+        position: relative;
+    }
+
+    [data-md-chip-set-scroller] > [data-md-chip-set-row] {
+        --chip-fade-start: 0px;
+        --chip-fade-end: 0px;
+
+        flex-wrap: nowrap;
+        margin: calc(-1 * var(--md-sys-measurement-space100)) calc(-1 * var(--md-sys-measurement-space75));
+        padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space75);
+        overflow-x: auto;
+        scroll-padding-inline: var(--md-sys-measurement-space300);
+        scrollbar-width: none;
+        mask-image: linear-gradient(to right, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
+
+        &:dir(rtl) {
+            mask-image: linear-gradient(to left, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
+        }
+
+        &[data-md-scroll-start] {
+            --chip-fade-start: var(--md-sys-measurement-space300);
+        }
+
+        &[data-md-scroll-end] {
+            --chip-fade-end: var(--md-sys-measurement-space300);
+        }
+
+        @media (pointer: fine) {
+            scroll-padding-inline: var(--md-sys-measurement-space500);
+        }
+    }
+
+    [data-md-chip-scroll] {
+        position: absolute;
+        inset-block: 0;
+        display: none;
+        place-items: center;
+        width: 32px;
+        height: 32px;
+        margin-block: auto;
+        border-radius: var(--md-sys-shape-corner-full);
+        background-color: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface-variant);
+        box-shadow: var(--md-sys-elevation-1);
+    }
+
+    [data-md-chip-scroll='start'] {
+        inset-inline-start: 0;
+    }
+
+    [data-md-chip-scroll='end'] {
+        inset-inline-end: 0;
+    }
+
+    /* Only while the row can still scroll that way, and only where the pointer cannot swipe. */
+    @media (pointer: fine) {
+        [data-md-chip-set-row][data-md-scroll-start] ~ [data-md-chip-scroll='start'],
+        [data-md-chip-set-row][data-md-scroll-end] ~ [data-md-chip-scroll='end'] {
+            display: grid;
+        }
+    }
+}