@teseor/css 1.10.1 → 1.12.0

package/src/layout/sidebar-nav/sidebar-nav.docs.json

@@ -495,9 +495,15 @@
                               "tag": "li",
                               "children": [
                                 {
-                                  "tag": "span",
-                                  "class": "ui-sidebar-nav__subgroup-label",
-                                  "text": "Actions"
+                                  "tag": "div",
+                                  "class": "ui-sidebar-nav__subgroup",
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__subgroup-label",
+                                      "text": "Actions"
+                                    }
+                                  ]
                                 }
                               ]
                             },

package/src/utilities/container/container.api.json

@@ -0,0 +1,6 @@
+{
+  "name": "container",
+  "type": "utility",
+  "utilities": ["container-inline", "container-size", "container-normal"],
+  "cssVars": []
+}

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

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

package/src/utilities/scroll-snap/index.scss

@@ -0,0 +1,66 @@
+// Scroll-snap utilities
+
+@layer utilities {
+  // ==========================================================================
+  // SCROLL SNAP CONTAINERS
+  // ==========================================================================
+  .snap-x {
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior-x: contain;
+  }
+
+  .snap-y {
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    overscroll-behavior-y: contain;
+  }
+
+  .snap-x-proximity {
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+  }
+
+  .snap-y-proximity {
+    overflow-y: auto;
+    scroll-snap-type: y proximity;
+  }
+
+  .snap-none {
+    scroll-snap-type: none;
+  }
+
+  // ==========================================================================
+  // SCROLL SNAP CHILDREN
+  // ==========================================================================
+  .snap-start {
+    scroll-snap-align: start;
+  }
+
+  .snap-center {
+    scroll-snap-align: center;
+  }
+
+  .snap-end {
+    scroll-snap-align: end;
+  }
+
+  .snap-always {
+    scroll-snap-stop: always;
+  }
+
+  // ==========================================================================
+  // SCROLL PADDING (on container, for fixed headers/offsets)
+  // ==========================================================================
+  .snap-p-1 {
+    scroll-padding: var(--ui-space-1);
+  }
+
+  .snap-p-2 {
+    scroll-padding: var(--ui-space-2);
+  }
+
+  .snap-p-4 {
+    scroll-padding: var(--ui-space-4);
+  }
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "scroll-snap",
+  "type": "utility",
+  "utilities": [
+    "snap-x",
+    "snap-y",
+    "snap-x-proximity",
+    "snap-y-proximity",
+    "snap-none",
+    "snap-start",
+    "snap-center",
+    "snap-end",
+    "snap-always",
+    "snap-p-1",
+    "snap-p-2",
+    "snap-p-4"
+  ],
+  "cssVars": []
+}

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

@@ -0,0 +1,333 @@
+{
+  "id": "scroll-snap-utils",
+  "type": "utility",
+  "title": "Scroll Snap",
+  "description": "Scroll-snap utilities for carousels, horizontal lists, and snap-to-position scrolling.",
+  "api": "scroll-snap.api.json",
+  "sections": [
+    {
+      "title": "Horizontal Snap",
+      "description": "Snap children to start position on horizontal scroll.",
+      "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-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 3"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 4"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Item 1</div>\n  <div class=\"ui-snap-start\">Item 2</div>\n  <div class=\"ui-snap-start\">Item 3</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Center Snap",
+      "description": "Snap children to center position.",
+      "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-center ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Center 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-center ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Center 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-center ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Center 3"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-center\">Center 1</div>\n  <div class=\"ui-snap-center\">Center 2</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical Snap",
+      "description": "Snap children on vertical scroll.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-y",
+              "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\" 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": "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": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-snap-p-2 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-2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "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": "p-4"
+                }
+              ]
+            }
+          ],
+          "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>"
+        }
+      ]
+    }
+  ]
+}

package/src/utilities/text/text.api.json

@@ -32,7 +32,13 @@
     "text-danger",
     "text-start",
     "text-center",
-    "text-end"
+    "text-end",
+    "text-balance",
+    "text-pretty",
+    "text-nowrap",
+    "truncate-2",
+    "truncate-3",
+    "truncate-4"
   ],
   "cssVars": []
 }

package/src/utilities/text/text.docs.json

@@ -127,6 +127,65 @@
           ]
         }
       ]
+    },
+    {
+      "title": "Text Wrap",
+      "description": "Control how text wraps across lines.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-balance ui-text-2xl ui-font-bold",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Balanced: distributes text evenly across lines"
+            },
+            {
+              "tag": "p",
+              "class": "ui-text-pretty",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally"
+            },
+            {
+              "tag": "p",
+              "class": "ui-text-nowrap",
+              "text": "Nowrap: prevents text from wrapping to the next line"
+            }
+          ],
+          "code": "<p class=\"ui-text-balance\">Balanced heading text</p>\n<p class=\"ui-text-pretty\">Pretty body text</p>\n<p class=\"ui-text-nowrap\">No wrap text</p>"
+        }
+      ]
+    },
+    {
+      "title": "Multi-line Truncation",
+      "description": "Clamp text to a specific number of lines with ellipsis.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-truncate-2",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character."
+            },
+            {
+              "tag": "p",
+              "class": "ui-truncate-3",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end."
+            },
+            {
+              "tag": "p",
+              "class": "ui-truncate-4",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis."
+            }
+          ],
+          "code": "<p class=\"ui-truncate-2\">Long text clamped to 2 lines...</p>\n<p class=\"ui-truncate-3\">Long text clamped to 3 lines...</p>\n<p class=\"ui-truncate-4\">Long text clamped to 4 lines...</p>"
+        }
+      ]
     }
   ]
 }