@teseor/css 1.11.0 → 1.13.0

package/src/utilities/container/container.docs.json

@@ -0,0 +1,121 @@
+{
+  "id": "container-utils",
+  "type": "utility",
+  "title": "Container",
+  "description": "Container query utilities for component-level responsive design.",
+  "api": "container.api.json",
+  "sections": [
+    {
+      "title": "Inline Size Containment",
+      "description": "Establish inline-size containment so children can use container queries to respond to the container width.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container-inline ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-muted)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "text": "This card is inside an inline-size container"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-card\">Content responds to container width</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Size Containment",
+      "description": "Establish containment on both axes for container queries on width and height.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container-size ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-muted)",
+                "block-size": "12rem"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "text": "Inside a size container"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-container-size\">\n  <div class=\"ui-card\">Content responds to container width and height</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Remove Containment",
+      "description": "Reset container type back to normal (no containment).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container-normal ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-muted)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "text": "No containment on this container"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-container-normal\">\n  <div class=\"ui-card\">Normal container behavior</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Responsive Card",
+      "description": "Combine container-inline with card--responsive for automatic horizontal layout at wider container sizes.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container-inline",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card ui-card--responsive",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-card__media",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "min-block-size": "6rem"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-card__body",
+                      "text": "Card switches to horizontal layout when container is wide enough"
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-card ui-card--responsive\">\n    <div class=\"ui-card__media\">Image</div>\n    <div class=\"ui-card__body\">Switches to horizontal at >= 30rem</div>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ]
+}

package/src/utilities/container/index.scss

@@ -0,0 +1,18 @@
+// Container query utilities
+
+@layer utilities {
+  // Establish inline-size containment for container queries
+  .container-inline {
+    container-type: inline-size;
+  }
+
+  // Establish size containment (both axes) for container queries
+  .container-size {
+    container-type: size;
+  }
+
+  // Remove containment
+  .container-normal {
+    container-type: normal;
+  }
+}

package/src/utilities/index.scss

@@ -5,3 +5,4 @@
 @forward "./visually-hidden/index";
 @forward "./view-transition/index";
 @forward "./scroll-snap/index";
+@forward "./container/index";

package/src/utilities/scroll-snap/scroll-snap.docs.json

@@ -104,10 +104,181 @@
         }
       ]
     },
+    {
+      "title": "Proximity Snap",
+      "description": "Softer snap that only engages when close to a snap point.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Proximity 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Proximity 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Proximity 3"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x-proximity ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Proximity 1</div>\n  <div class=\"ui-snap-start\">Proximity 2</div>\n</div>"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-y-proximity",
+              "style": { "max-block-size": "8rem" },
+              "children": [
+                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 1" },
+                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 2" },
+                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 3" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-y-proximity\" style=\"max-block-size: 8rem\">\n  <div class=\"ui-snap-start\">Section 1</div>\n  <div class=\"ui-snap-start\">Section 2</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "End Alignment and Stop",
+      "description": "Snap children to end position or force stop at every snap point.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-end ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "End 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-end ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "End 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-end ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "End 3"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-end\">End 1</div>\n  <div class=\"ui-snap-end\">End 2</div>\n</div>"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-snap-always ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Always 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-snap-always ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Always 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-snap-always ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Always 3"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start ui-snap-always\">Always 1</div>\n  <div class=\"ui-snap-start ui-snap-always\">Always 2</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Disable Snap",
+      "description": "Remove snap behavior from a container.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-none ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem", "overflow-x": "auto" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "No snap 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "No snap 2"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-none\">\n  <div>No snap 1</div>\n  <div>No snap 2</div>\n</div>"
+        }
+      ]
+    },
     {
       "title": "Scroll Padding",
       "description": "Offset snap position for fixed headers or insets.",
       "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "p-1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "p-1"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-snap-p-1 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">p-1</div>\n</div>"
+        },
         {
           "items": [
             {
@@ -119,24 +290,42 @@
                   "tag": "div",
                   "class": "ui-snap-start ui-card ui-p-2",
                   "style": { "min-inline-size": "10rem" },
-                  "text": "Padded 1"
+                  "text": "p-2"
                 },
                 {
                   "tag": "div",
                   "class": "ui-snap-start ui-card ui-p-2",
                   "style": { "min-inline-size": "10rem" },
-                  "text": "Padded 2"
+                  "text": "p-2"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-snap-p-2 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">p-2</div>\n</div>"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "p-4"
                 },
                 {
                   "tag": "div",
                   "class": "ui-snap-start ui-card ui-p-2",
                   "style": { "min-inline-size": "10rem" },
-                  "text": "Padded 3"
+                  "text": "p-4"
                 }
               ]
             }
           ],
-          "code": "<div class=\"ui-snap-x ui-snap-p-2 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Padded 1</div>\n  <div class=\"ui-snap-start\">Padded 2</div>\n</div>"
+          "code": "<div class=\"ui-snap-x ui-snap-p-4 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">p-4</div>\n</div>"
         }
       ]
     }