@uncinq/css-components 1.11.2 → 1.12.0

package/README.md

@@ -21,7 +21,7 @@ Each component file contains only CSS rules, using the tokens defined in the two
 
 ## CSS cascade layers
 
-All component styles are declared inside `@layer components`:
+Component styles are declared inside `@layer components`, utilities inside `@layer utilities`:
 
 ```css
 @layer reset, tokens, vendors, base, layouts, components, pages, utilities;
@@ -32,6 +32,7 @@ This means:
 - Components never bleed into base or layout styles
 - Project-level `@layer components` rules always win over these defaults
 - Vendors (e.g. Splide) sit below project components but above base
+- Utilities come last, so `.scrollsnap` wins over the grid a component declares for itself
 
 ---
 
@@ -77,8 +78,9 @@ yarn add @uncinq/css-components
 @import '@uncinq/design-tokens';
 @import '@uncinq/component-tokens';
 @import '@uncinq/css-base';
-@import '@uncinq/css-components/css/component/nav.css';
-@import '@uncinq/css-components/css/component/pagination.css';
+@import '@uncinq/css-components/css/components/nav.css';
+@import '@uncinq/css-components/css/components/pagination.css';
+@import '@uncinq/css-components/css/utilities/scrollsnap.css';
 ```
 
 ### Usage — CDN (no build step)
@@ -96,8 +98,8 @@ yarn add @uncinq/css-components
 
 ```text
 css/
-  index.css               ← imports all component files
-  component/
+  index.css               ← imports all component and utility files
+  components/
     alert.css             ← alert / notification banner
     badge.css             ← badge / pill / tag
     banner.css            ← full-width banner strip
@@ -115,6 +117,8 @@ css/
     nav-accessibility.css ← accessibility skip links / focus helpers
     nav-title.css         ← navigation bar title
     pagination.css        ← pagination control
+  utilities/
+    scrollsnap.css        ← .scrollsnap[-sm|-md|-lg|-xl] — turns a grid into a snapping carousel
 ```
 
 ---

package/css/components/card.css

@@ -65,11 +65,15 @@
       font-size: var(--card-title-font-size);
       font-weight: var(--card-title-font-weight);
       line-height: var(--card-title-line-height);
-      margin-block: 0;
     }
 
     .description {
       font-size: var(--card-font-size);
+    }
+
+    .btn,
+    .description,
+    .title {
       margin-block: 0;
     }
 

package/css/index.css

@@ -26,3 +26,6 @@
 @import 'components/pagination.css';
 @import 'components/panel.css';
 @import 'components/surtitle.css';
+
+/* Utilities — @layer utilities, last layer */
+@import 'utilities/scrollsnap.css';

package/css/utilities/scrollsnap.css

@@ -0,0 +1,121 @@
+/* css/utilities/scrollsnap.css */
+/*
+ * .scrollsnap — turns a grid into a horizontal carousel with snap points:
+ * items keep their own width, the grid stops wrapping, and the row scrolls,
+ * bleeding into the gutter so the next one peeks in.
+ *
+ *   .scrollsnap      carousel at every width
+ *   .scrollsnap-sm   carousel below --sm (mobile)
+ *   .scrollsnap-md   carousel below --md (mobile + tablet)
+ *   .scrollsnap-lg   carousel below --lg
+ *   .scrollsnap-xl   carousel below --xl
+ *
+ * The suffix names the rung where the carousel STOPS and the grid comes back.
+ *
+ * Opt-in, on the element that owns the grid (.items, .logos…), so the same
+ * component is a carousel in one context and a plain grid in another.
+ *
+ * A utility rather than a component rule because it has to win over the grid
+ * the component declares for itself in @layer components.
+ *
+ * Item width: --items-min-width (or --max-width-item), capped by
+ * --items-carousel-max-width so the next item always peeks in.
+ *
+ * Bleed: --container-bleed, published by .container in @uncinq/css-base — one
+ * gutter while the container spans the viewport, 0 once it caps, so the row
+ * never pulls out into dead space it cannot cross. Outside a .container the
+ * fallback keeps the gutter bleed.
+ */
+@layer utilities {
+  .scrollsnap,
+  .scrollsnap-sm,
+  .scrollsnap-md,
+  .scrollsnap-lg,
+  .scrollsnap-xl {
+    grid-auto-columns: min(var(--items-min-width, var(--max-width-item)), var(--items-carousel-max-width, 75vw));
+    grid-auto-flow: column;
+    grid-template-columns: none;
+    justify-content: start;
+    margin-inline: calc(var(--container-bleed, var(--gutter)) * -1);
+    overflow-x: auto;
+    padding-inline: var(--container-bleed, var(--gutter));
+    scroll-snap-type: x mandatory;
+
+    > * {
+      scroll-margin-inline: var(--container-bleed, var(--gutter));
+      scroll-snap-align: start;
+    }
+  }
+
+  /* Above its rung a variant hands every property back to the layer below —
+     the component's own grid rules — so there is no second set of values here
+     to keep in step with the block above. */
+  @media (--sm) {
+    .scrollsnap-sm {
+      grid-auto-columns: revert-layer;
+      grid-auto-flow: revert-layer;
+      grid-template-columns: revert-layer;
+      justify-content: revert-layer;
+      margin-inline: revert-layer;
+      overflow-x: revert-layer;
+      padding-inline: revert-layer;
+      scroll-snap-type: revert-layer;
+
+      > * {
+        scroll-margin-inline: revert-layer;
+        scroll-snap-align: revert-layer;
+      }
+    }
+  }
+  @media (--md) {
+    .scrollsnap-md {
+      grid-auto-columns: revert-layer;
+      grid-auto-flow: revert-layer;
+      grid-template-columns: revert-layer;
+      justify-content: revert-layer;
+      margin-inline: revert-layer;
+      overflow-x: revert-layer;
+      padding-inline: revert-layer;
+      scroll-snap-type: revert-layer;
+
+      > * {
+        scroll-margin-inline: revert-layer;
+        scroll-snap-align: revert-layer;
+      }
+    }
+  }
+  @media (--lg) {
+    .scrollsnap-lg {
+      grid-auto-columns: revert-layer;
+      grid-auto-flow: revert-layer;
+      grid-template-columns: revert-layer;
+      justify-content: revert-layer;
+      margin-inline: revert-layer;
+      overflow-x: revert-layer;
+      padding-inline: revert-layer;
+      scroll-snap-type: revert-layer;
+
+      > * {
+        scroll-margin-inline: revert-layer;
+        scroll-snap-align: revert-layer;
+      }
+    }
+  }
+  @media (--xl) {
+    .scrollsnap-xl {
+      grid-auto-columns: revert-layer;
+      grid-auto-flow: revert-layer;
+      grid-template-columns: revert-layer;
+      justify-content: revert-layer;
+      margin-inline: revert-layer;
+      overflow-x: revert-layer;
+      padding-inline: revert-layer;
+      scroll-snap-type: revert-layer;
+
+      > * {
+        scroll-margin-inline: revert-layer;
+        scroll-snap-align: revert-layer;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {
@@ -24,7 +24,8 @@
   "exports": {
     ".": "./css/index.css",
     "./css/index.css": "./css/index.css",
-    "./css/components/*": "./css/components/*"
+    "./css/components/*": "./css/components/*",
+    "./css/utilities/*": "./css/utilities/*"
   },
   "style": "./css/index.css",
   "peerDependencies": {