@teseor/css 1.10.0 → 1.11.0

package/src/utilities/index.scss

@@ -4,3 +4,4 @@
 @forward "./border/index";
 @forward "./visually-hidden/index";
 @forward "./view-transition/index";
+@forward "./scroll-snap/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,144 @@
+{
+  "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": "Scroll Padding",
+      "description": "Offset snap position for fixed headers or insets.",
+      "examples": [
+        {
+          "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": "Padded 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Padded 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Padded 3"
+                }
+              ]
+            }
+          ],
+          "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>"
+        }
+      ]
+    }
+  ]
+}

package/src/utilities/spacing/spacing.docs.json

@@ -6,6 +6,7 @@
   "api": "spacing.api.json",
   "sections": [
     {
+      "title": "Padding",
       "examples": [
         {
           "layout": "column",
@@ -27,15 +28,104 @@
               "class": "ui-p-4",
               "text": "p-4 (32px padding)",
               "style": { "background": "var(--ui-color-bg-muted)" }
-            },
+            }
+          ],
+          "code": "<div class=\"ui-p-1\">...</div>\n<div class=\"ui-p-2\">...</div>\n<div class=\"ui-p-4\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Directional Padding",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
             {
               "tag": "div",
               "class": "ui-px-4 ui-py-2",
               "text": "px-4 py-2 (horizontal 32px, vertical 16px)",
               "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-pt-4 ui-pb-1",
+              "text": "pt-4 pb-1 (top 32px, bottom 8px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-ps-4 ui-pe-1",
+              "text": "ps-4 pe-1 (start 32px, end 8px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            }
+          ],
+          "code": "<div class=\"ui-px-4 ui-py-2\">...</div>\n<div class=\"ui-pt-4 ui-pb-1\">...</div>\n<div class=\"ui-ps-4 ui-pe-1\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Margin",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-mb-2",
+              "text": "mb-2 (16px bottom margin)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-mt-4 ui-mb-2",
+              "text": "mt-4 mb-2 (top 32px, bottom 16px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-mx-auto",
+              "text": "mx-auto (centered with auto margins)",
+              "style": {
+                "background": "var(--ui-color-bg-muted)",
+                "max-inline-size": "var(--ui-row-8)"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-mb-2\">...</div>\n<div class=\"ui-mt-4 ui-mb-2\">...</div>\n<div class=\"ui-mx-auto\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Gap",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-flex ui-gap-2",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-p-2",
+                  "text": "Item",
+                  "style": { "background": "var(--ui-color-bg-muted)" }
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-p-2",
+                  "text": "Item",
+                  "style": { "background": "var(--ui-color-bg-muted)" }
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-p-2",
+                  "text": "Item",
+                  "style": { "background": "var(--ui-color-bg-muted)" }
+                }
+              ]
             }
           ],
-          "code": "<div class=\"ui-p-2\">...</div>\n<div class=\"ui-px-4 ui-py-2\">...</div>\n<div class=\"ui-mt-4 ui-mb-2\">...</div>"
+          "code": "<div class=\"ui-flex ui-gap-2\">\n  <div>Item</div>\n  <div>Item</div>\n  <div>Item</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>"
+        }
+      ]
     }
   ]
 }

package/src/utilities/text/text.scss

@@ -214,6 +214,48 @@
     white-space: pre-wrap;
   }
 
+  // ==========================================================================
+  // TEXT WRAP
+  // ==========================================================================
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .text-pretty {
+    text-wrap: pretty;
+  }
+
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
+
+  // ==========================================================================
+  // MULTI-LINE TRUNCATION
+  // ==========================================================================
+  .truncate-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+  }
+
+  .truncate-3 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    overflow: hidden;
+  }
+
+  .truncate-4 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+
+    overflow: hidden;
+  }
+
   // ==========================================================================
   // LINE LENGTH (for readable text)
   // ==========================================================================