/** * @file Grid Scroll / Carousel * @description Smart snippets for horizontal scrolling layouts. * Maps natively to `--g-min` for card sizing and `--g-cg` for gap subtraction. * * @usage * */ /** * @group Base Setup * Defaults to fluid --g-min for card sizing. */ :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [data-recipe~="carousel"], [data-recipe*="carousel-"]) { /* Switch to single-row implicit grid */ --gaf: column; --gtc: none; /* Base Card Width Pipeline * Inherits resolved clamp math naturally! */ /* Override global Grid Auto Columns with the calculated width */ --g-cw: var(--g-min, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem))); --gac: minmax(var(--g-cw), var(--g-cm, auto)); /* Scroll Mechanics */ --_ovi: var(--g-ovi, auto); overflow-inline: var(--_ovi); --_osbi: var(--g-osbi, contain); overscroll-behavior-inline: var(--_osbi); --_sst: var(--g-sst, var(--g-sst-ax, inline) var(--g-sst-ay, mandatory)); scroll-snap-type: var(--_sst); --_spi: var(--g-spi, 0); scroll-padding-inline: var(--_spi); /* Hide standard scrollbars for modern UI */ --_sbw: var(--g-sbw, none); scrollbar-width: var(--_sbw); --_sbc: var(--g-sbc, transparent transparent); scrollbar-color: var(--_sbc); --_pb: var(--g-pb, var(--g-pbs, 0) var(--g-pbe, var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem)))); padding-block: var(--_pb); } /* Hide Webkit Scrollbars (Fallback) */ :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"])::-webkit-scrollbar { display: var(--g-sbd, none); } /* Base Child Snapping */ :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"])> :where(*, .ss-c, [data-recipe~="snap-center"], .scr-c, .crs-c, [data-recipe~="centered"]) { --_ssa: var(--gi-ssa, start); scroll-snap-align: var(--_ssa); } :where(.g, [data-display="grid"]):where(.ss-c, [data-recipe~="snap-center"], .scr-c, .crs-c, [data-recipe~="centered"]) { --gi-ssa: center; } /** * @group Initial Scroll Target * Progressive enhancement for browsers supporting CSS Scroll Snap Level 2. * The first eligible child becomes the initial snap target. */ @supports (scroll-initial-target: nearest) { :where(.g, [data-display="grid"]):where(.ss-i, [data-recipe~="snap-initial"], .crs-c, [data-recipe~="centered"]) > :where(:first-child) { scroll-initial-target: nearest; } } :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"]) { --g-cw: var(--g-cw-scr, var(--g-cw-scr-1, 100%)); --g-cw-scr-1: 100%; --g-cw-scr-2: calc((100% - var(--g-cg, 2.5rem)) / 2); --g-cw-scr-3: calc((100% - (var(--g-cg, 2.5rem) * 2)) / 3); --g-cw-scr-4: calc((100% - (var(--g-cg, 2.5rem) * 3)) / 4); } :where(.g, [data-display="grid"]):where(.crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"]) { --g-cw: var(--g-cw-crs, var(--g-min, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)))); --g-cw-crs-1: calc(100% - var(--g-cg, 2.5rem) - var(--g-peek, 33.3%)); --g-cw-crs-2: calc((100% - var(--g-cg, 2.5rem) * 2) / 2.5); --g-cw-crs-3: calc((100% - (var(--g-cg, 2.5rem) * 3)) / 3.5); --g-cw-crs-4: calc((100% - (var(--g-cg, 2.5rem) * 4)) / 4.5); } /** * @group Scroll Modifiers * Exact edge-to-edge fits (subtract N gaps). */ /* 2 Items (Subtract 1 Gap) */ :where(.g, [data-display="grid"]):where(.scr-2, [data-recipe~="scroll-2"]) { --g-cw-scr: var(--g-cw-scr-2, 48%); } /* 3 Items (Subtract 2 Gaps) */ :where(.g, [data-display="grid"]):where(.scr-3, [data-recipe~="scroll-3"]) { --g-cw-scr: var(--g-cw-scr-3, 30%); } /* 4 Items (Subtract 3 Gaps) */ :where(.g, [data-display="grid"]):where(.scr-4, [data-recipe~="scroll-4"]) { --g-cw-scr: var(--g-cw-scr-4, 22%); } /** * @group Carousel Modifiers * Partials / peeking cards. */ /* 1 Item + Peek */ :where(.g, [data-display="grid"]):where(.crs-1, [data-recipe~="carousel-1"]) { --g-cw-crs: var(--g-cw-crs-1, 64%); } /* 2 Items + Peek */ :where(.g, [data-display="grid"]):where(.crs-2, [data-recipe~="carousel-2"]) { --g-cw-crs: var(--g-cw-crs-2, 37%); } /* 3 Items + Peek */ :where(.g, [data-display="grid"]):where(.crs-3, [data-recipe~="carousel-3"]) { --g-cw-crs: var(--g-cw-crs-3, 26%); } /* 4 Items + Peek */ :where(.g, [data-display="grid"]):where(.crs-4, [data-recipe~="carousel-4"]) { --g-cw-crs: var(--g-cw-crs-4, 20%); } @container (width > 60rem) { :where(.g, [data-display="grid"]):where([class*="scr-"]:is([class*="--lg"], [class*="--mdl"])), :where(.g, [data-display="grid"]):where([class*="crs-"]:is([class*="--lg"], [class*="--mdl"])) { /* Switch to single-row implicit grid */ --gaf: column; --gtc: none; /* Base Card Width Pipeline * Inherits resolved clamp math naturally! */ /* Override global Grid Auto Columns with the calculated width */ /* --g-cw: var(--g-min, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem))); */ --gac: minmax(var(--g-cw), var(--g-cm, auto)); /* Scroll Mechanics */ --_ovi: var(--g-ovi, auto); overflow-inline: var(--_ovi); --_osbi: var(--g-osbi, contain); overscroll-behavior-inline: var(--_osbi); --_sst: var(--g-sst, var(--g-sst-ax, inline) var(--g-sst-ay, mandatory)); scroll-snap-type: var(--_sst); --_spi: var(--g-spi, 0); scroll-padding-inline: var(--_spi); /* Hide standard scrollbars for modern UI */ --_sbw: var(--g-sbw, none); scrollbar-width: var(--_sbw); --_sbc: var(--g-sbc, transparent transparent); scrollbar-color: var(--_sbc); --_pb: var(--g-pb, var(--g-pbs, 0) var(--g-pbe, var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem)))); padding-block: var(--_pb); } :where(.g, [data-display="grid"]):where([class*="scr-"]:is([class*="--lg"], [class*="--mdl"])) { --g-cw: var(--g-cw-scr--lg, var(--g-cw-scr, var(--g-cw-scr-1, 100%))); } :where(.g, [data-display="grid"]):where(.scr-2--lg, .scr-2--mdl) { --g-cw-scr: var(--g-cw-scr-2, 48%); } :where(.g, [data-display="grid"]):where(.scr-3--lg, .scr-3--mdl) { --g-cw-scr: var(--g-cw-scr-3, 30%); } :where(.g, [data-display="grid"]):where(.scr-4--lg, .scr-4--mdl) { --g-cw-scr: var(--g-cw-scr-4, 22%); } :where(.g, [data-display="grid"]):where([class*="crs-"]:is([class*="--lg"], [class*="--mdl"])) { --g-cw: var(--g-cw-crs--lg, var(--g-cw-crs, 64%)); } :where(.g, [data-display="grid"]):where(.crs-1--lg, .crs-1--mdl) { --g-cw-crs: var(--g-cw-crs-1, 64%); } :where(.g, [data-display="grid"]):where(.crs-2--lg, .crs-2--mdl) { --g-cw-crs: var(--g-cw-crs-2, 37%); } :where(.g, [data-display="grid"]):where(.crs-3--lg, .crs-3--mdl) { --g-cw-crs: var(--g-cw-crs-3, 26%); } :where(.g, [data-display="grid"]):where(.crs-4--lg, .crs-4--mdl) { --g-cw-crs: var(--g-cw-crs-4, 20%); } } @container (30rem <= width <= 60rem) { :where(.g, [data-display="grid"]):where([class*="scr-"]:is([class*="--md"], [class*="--mdl"], [class*="--smd"]), .scr-2, [data-recipe~="scroll-2"]), :where(.g, [data-display="grid"]):where([class*="crs-"]:is([class*="--md"], [class*="--mdl"], [class*="--smd"])) { /* Switch to single-row implicit grid */ --gaf: column; --gtc: none; /* Base Card Width Pipeline * Inherits resolved clamp math naturally! */ /* Override global Grid Auto Columns with the calculated width */ /* --g-cw: var(--g-min, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem))); */ --gac: minmax(var(--g-cw), var(--g-cm, auto)); /* Scroll Mechanics */ --_ovi: var(--g-ovi, auto); overflow-inline: var(--_ovi); --_osbi: var(--g-osbi, contain); overscroll-behavior-inline: var(--_osbi); --_sst: var(--g-sst, var(--g-sst-ax, inline) var(--g-sst-ay, mandatory)); scroll-snap-type: var(--_sst); --_spi: var(--g-spi, 0); scroll-padding-inline: var(--_spi); /* Hide standard scrollbars for modern UI */ --_sbw: var(--g-sbw, none); scrollbar-width: var(--_sbw); --_sbc: var(--g-sbc, transparent transparent); scrollbar-color: var(--_sbc); --_pb: var(--g-pb, var(--g-pbs, 0) var(--g-pbe, var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem)))); padding-block: var(--_pb); } :where(.g, [data-display="grid"]):where([class*="scr-"]:is([class*="--md"], [class*="--mdl"], [class*="--smd"]), .scr-2, [data-recipe~="scroll-2"]) { --g-cw: var(--g-cw-scr--md, var(--g-cw-scr, 100%)); } :where(.g, [data-display="grid"]):where(.scr-3, [data-recipe~="scroll-3"], .scr-2--md, .scr-2--smd, .scr-2--mdl) { --g-cw-scr: var(--g-cw-scr-2, 48%); } :where(.g, [data-display="grid"]):where(.scr-4, [data-recipe~="scroll-4"], .scr-3--md, .scr-3--smd, .scr-3--mdl) { --g-cw-scr: var(--g-cw-scr-3, 30%); } :where(.g, [data-display="grid"]):where(.scr-4--md, .scr-4--smd, .scr-4--mdl) { --g-cw-scr: var(--g-cw-scr-4, 22%); } :where(.g, [data-display="grid"]):where([class*="crs-"]:is([class*="--md"], [class*="--mdl"], [class*="--smd"])) { --g-cw: var(--g-cw-crs--md, var(--g-cw-crs, 37%)); } :where(.g, [data-display="grid"]):where(.crs-1, [data-recipe~="carousel-1"], .crs-2, [data-recipe~="carousel-2"], .crs-1--md, .crs-1--mdl, .crs-1--smd) { --g-cw-crs: var(--g-cw-crs-1, 64%); } :where(.g, [data-display="grid"]):where(.crs-3, [data-recipe~="carousel-3"], .crs-2--md, .crs-2--mdl, .crs-2--smd) { --g-cw-crs: var(--g-cw-crs-2, 37%); } :where(.g, [data-display="grid"]):where(.crs-4, [data-recipe~="carousel-4"], .crs-3--md, .crs-3--mdl, .crs-3--smd) { --g-cw-crs: var(--g-cw-crs-3, 26%); } :where(.g, [data-display="grid"]):where(.crs-4--md, .crs-4--mdl, .crs-4--smd) { --g-cw-crs: var(--g-cw-crs-4, 20%); } } @container (width < 30rem) { :where(.g, [data-display="grid"]):where([class*="scr-"]:is([class*="--sm"], [class*="--smd"]), .scr-2, [data-recipe~="scroll-2"], .scr-3, [data-recipe~="scroll-3"]), :where(.g, [data-display="grid"]):where(.crs-1, [data-recipe~="carousel-1"], .crs-2, [data-recipe~="carousel-2"], .crs-3, [data-recipe~="carousel-3"], .crs-1--sm, .crs-1--smd) { /* Switch to single-row implicit grid */ --gaf: column; --gtc: none; /* Base Card Width Pipeline * Inherits resolved clamp math naturally! */ /* Override global Grid Auto Columns with the calculated width */ /* --g-cw: var(--g-min, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem))); */ --gac: minmax(var(--g-cw), var(--g-cm, auto)); /* Scroll Mechanics */ --_ovi: var(--g-ovi, auto); overflow-inline: var(--_ovi); --_osbi: var(--g-osbi, contain); overscroll-behavior-inline: var(--_osbi); --_sst: var(--g-sst, var(--g-sst-ax, inline) var(--g-sst-ay, mandatory)); scroll-snap-type: var(--_sst); --_spi: var(--g-spi, 0); scroll-padding-inline: var(--_spi); /* Hide standard scrollbars for modern UI */ --_sbw: var(--g-sbw, none); scrollbar-width: var(--_sbw); --_sbc: var(--g-sbc, transparent transparent); scrollbar-color: var(--_sbc); --_pb: var(--g-pb, var(--g-pbs, 0) var(--g-pbe, var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem)))); padding-block: var(--_pb); } :where(.g, [data-display="grid"]):where([class*="scr-"]:is([class*="--sm"], [class*="--smd"]), .scr-2, [data-recipe~="scroll-2"], .scr-3, [data-recipe~="scroll-3"]) { --g-cw: var(--g-cw-scr--sm, var(--g-cw-scr, 100%)); } :where(.g, [data-display="grid"]):where(.scr-4, [data-recipe~="scroll-4"], .scr-2--sm, .scr-2--smd) { --g-cw-scr: var(--g-cw-scr-2, 48%); } :where(.g, [data-display="grid"]):where(.scr-3--sm, .scr-3--smd) { --g-cw-scr: var(--g-cw-scr-3, 30%); } :where(.g, [data-display="grid"]):where(.scr-4--sm, .scr-4--smd) { --g-cw-scr: var(--g-cw-scr-4, 22%); } :where(.g, [data-display="grid"]):where([class*="crs-"]:is([class*="--sm"], [class*="--smd"])) { --g-cw: var(--g-cw-crs--sm, var(--g-cw-crs, 64%)); } :where(.g, [data-display="grid"]):where(.crs-1, [data-recipe~="carousel-1"], .crs-2, [data-recipe~="carousel-2"], .crs-3, [data-recipe~="carousel-3"], .crs-1--sm, .crs-1--smd) { --g-cw-crs: var(--g-cw-crs-1, 64%); } :where(.g, [data-display="grid"]):where(.crs-4, [data-recipe~="carousel-4"], .crs-2--sm, .crs-2--smd) { --g-cw-crs: var(--g-cw-crs-2, 37%); } :where(.g, [data-display="grid"]):where(.crs-3--sm, .crs-3--smd) { --g-cw-crs: var(--g-cw-crs-3, 26%); } :where(.g, [data-display="grid"]):where(.crs-4--sm, .crs-4--smd) { --g-cw-crs: var(--g-cw-crs-4, 20%); } } /** * @group Native Scroll Controls * Browser support varies; only generated when the browser implements * CSS carousel scroll buttons. */ @supports selector(::scroll-button(*)) { :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"]):where(.ctrs, .scr-ctrs, .crs-ctrs)::scroll-button(*) { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font: inherit; } :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"]):where(.ctrs, .scr-ctrs, .crs-ctrs)::scroll-button(inline-start) { content: "‹" / "Previous"; position: absolute; bottom: 2rem; } :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"]):where(.ctrs, .scr-ctrs, .crs-ctrs)::scroll-button(inline-end) { content: "›" / "Next"; } :where(.g, [data-display="grid"]):where(.slr, [data-recipe~="slider"], .scr, .scr-1, .scr-2, .scr-3, .scr-4, [class*="scr-"][class*="--"], [data-recipe~="scroll"], [data-recipe*="scroll-"], .crs, .crs-1, .crs-2, .crs-3, .crs-4, [class*="crs-"][class*="--"], [data-recipe~="carousel"], [data-recipe*="carousel-"]):where(.ctrs, .scr-ctrs, .crs-ctrs)::scroll-button(*):disabled { opacity: 0.35; cursor: default; } }