npm - @teseor/css - Versions diffs - 1.11.0 → 1.13.0 - Mend

@teseor/css 1.11.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/compiled.css +1 -1
package/dist/index.css +7 -6
package/package.json +1 -1
package/src/components/content/scroll-area/index.scss +1 -1
package/src/components/content/scroll-area/scroll-area.api.json +1 -1
package/src/components/data-display/card/card-visual.png +0 -0
package/src/components/data-display/card/card.api.json +7 -0
package/src/components/data-display/card/card.docs.json +118 -16
package/src/components/data-display/card/index.scss +27 -0
package/src/components/feedback/skeleton/skeleton-visual.png +0 -0
package/src/components/feedback/skeleton/skeleton.docs.json +16 -0
package/src/components/feedback/toast/toast-visual.png +0 -0
package/src/components/feedback/toast/toast.docs.json +137 -0
package/src/components/forms/checkbox/checkbox.docs.json +1 -6
package/src/components/forms/field/field-visual.png +0 -0
package/src/components/forms/field/field.api.json +3 -0
package/src/components/forms/field/field.docs.json +98 -12
package/src/components/forms/field/index.scss +29 -0
package/src/components/forms/input/input.api.json +21 -1
package/src/components/forms/radio/radio.docs.json +3 -8
package/src/components/forms/textarea/index.scss +8 -0
package/src/components/forms/textarea/textarea-visual.png +0 -0
package/src/components/forms/textarea/textarea.api.json +3 -0
package/src/components/forms/textarea/textarea.docs.json +33 -1
package/src/components/navigation/breadcrumb/breadcrumb-visual.png +0 -0
package/src/components/navigation/breadcrumb/breadcrumb.docs.json +70 -0
package/src/components/navigation/nav/nav.api.json +10 -1
package/src/components/navigation/tabs/tabs.api.json +14 -2
package/src/components/overlays/drawer/drawer-visual.png +0 -0
package/src/components/overlays/drawer/drawer.docs.json +25 -0
package/src/components/overlays/modal/modal-visual.png +0 -0
package/src/components/overlays/modal/modal.docs.json +89 -0
package/src/components/overlays/popover/popover-visual.png +0 -0
package/src/components/overlays/popover/popover.docs.json +46 -3
package/src/config/tokens/semantic/colors/index.scss +20 -44
package/src/config/tokens/theming.docs.json +135 -26
package/src/layout/center/center.api.json +5 -1
package/src/layout/center/index.scss +1 -0
package/src/layout/column/column-visual.png +0 -0
package/src/layout/column/column.docs.json +26 -0
package/src/layout/grid/grid-visual.png +0 -0
package/src/layout/grid/grid.api.json +9 -0
package/src/layout/grid/grid.docs.json +378 -1
package/src/layout/grid/index.scss +30 -0
package/src/layout/row/row-visual.png +0 -0
package/src/layout/row/row.docs.json +108 -0
package/src/layout/sidebar-nav/sidebar-nav.docs.json +9 -3
package/src/utilities/container/container.api.json +6 -0
package/src/utilities/container/container.docs.json +121 -0
package/src/utilities/container/index.scss +18 -0
package/src/utilities/index.scss +1 -0
package/src/utilities/scroll-snap/scroll-snap.docs.json +193 -4

package/src/layout/grid/grid.docs.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "id": "grid-primitive",
   "type": "primitive",
   "title": "Grid",
-  "description": "CSS Grid with column variants.",
+  "description": "CSS Grid with column variants, subgrid support, and span utilities.",
   "api": "grid.api.json",
   "sections": [
     {
@@ -109,6 +109,383 @@
               ]
             }
           ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--auto",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Auto",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "Auto",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "Auto",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Subgrid",
+      "description": "Children inherit parent grid tracks for cross-item alignment.",
+      "examples": [
+        {
+          "title": "Column subgrid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--3",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-grid--subgrid",
+                  "style": {
+                    "grid-column": "span 3"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "text": "Subgrid child 1",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "Subgrid child 2",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "Subgrid child 3",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-grid ui-grid--3\">\n  <div class=\"ui-grid--subgrid\" style=\"grid-column: span 3\">\n    <div>Subgrid child 1</div>\n    <div>Subgrid child 2</div>\n    <div>Subgrid child 3</div>\n  </div>\n</div>"
+        },
+        {
+          "title": "Row subgrid (aligned cards)",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--3",
+              "style": {
+                "grid-template-rows": "auto 1fr auto"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-grid--subgrid-rows",
+                  "style": {
+                    "grid-row": "span 3",
+                    "border": "1px solid var(--ui-color-border)",
+                    "padding": "var(--ui-space-2)"
+                  },
+                  "children": [
+                    {
+                      "tag": "strong",
+                      "text": "Card A"
+                    },
+                    {
+                      "tag": "p",
+                      "text": "Short content."
+                    },
+                    {
+                      "tag": "span",
+                      "text": "Footer",
+                      "style": {
+                        "color": "var(--ui-color-text-muted)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-grid--subgrid-rows",
+                  "style": {
+                    "grid-row": "span 3",
+                    "border": "1px solid var(--ui-color-border)",
+                    "padding": "var(--ui-space-2)"
+                  },
+                  "children": [
+                    {
+                      "tag": "strong",
+                      "text": "Card B"
+                    },
+                    {
+                      "tag": "p",
+                      "text": "Longer content that wraps to multiple lines to demonstrate row alignment."
+                    },
+                    {
+                      "tag": "span",
+                      "text": "Footer",
+                      "style": {
+                        "color": "var(--ui-color-text-muted)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-grid--subgrid-rows",
+                  "style": {
+                    "grid-row": "span 3",
+                    "border": "1px solid var(--ui-color-border)",
+                    "padding": "var(--ui-space-2)"
+                  },
+                  "children": [
+                    {
+                      "tag": "strong",
+                      "text": "Card C"
+                    },
+                    {
+                      "tag": "p",
+                      "text": "Medium text."
+                    },
+                    {
+                      "tag": "span",
+                      "text": "Footer",
+                      "style": {
+                        "color": "var(--ui-color-text-muted)"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-grid ui-grid--3\" style=\"grid-template-rows: auto 1fr auto\">\n  <div class=\"ui-grid--subgrid-rows\" style=\"grid-row: span 3\">\n    <strong>Title</strong>\n    <p>Content</p>\n    <span>Footer</span>\n  </div>\n</div>"
+        },
+        {
+          "title": "Both axes subgrid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--3",
+              "style": {
+                "grid-template-rows": "auto auto"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-grid--subgrid-both",
+                  "style": {
+                    "grid-column": "span 3",
+                    "grid-row": "span 2"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "text": "A1",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "A2",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "A3",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "B1",
+                      "style": {
+                        "background": "var(--ui-color-bg-subtle)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "B2",
+                      "style": {
+                        "background": "var(--ui-color-bg-subtle)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "text": "B3",
+                      "style": {
+                        "background": "var(--ui-color-bg-subtle)",
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-grid ui-grid--3\" style=\"grid-template-rows: auto auto\">\n  <div class=\"ui-grid--subgrid-both\" style=\"grid-column: span 3; grid-row: span 2\">\n    <div>A1</div><div>A2</div><div>A3</div>\n    <div>B1</div><div>B2</div><div>B3</div>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Column Span",
+      "description": "Span multiple columns with .ui-grid-col-span-{2,3,4,full} utilities.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--4",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Span 2",
+                  "style": {
+                    "grid-column": "span 2",
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "Span 3",
+                  "style": {
+                    "grid-column": "span 3",
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "Span full",
+                  "style": {
+                    "grid-column": "1 / -1",
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "{% set spans = ['2', '3', '4', 'full'] %}<div class=\"ui-grid ui-grid--4\">\n{% for s in spans %}  <div class=\"ui-grid-col-span-{{ s }}\">Span {{ s }}</div>\n{% endfor %}</div>"
+        }
+      ]
+    },
+    {
+      "title": "Row Span",
+      "description": "Span multiple rows with .ui-grid-row-span-{2,3,full} utilities.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--3",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Row span 2",
+                  "style": {
+                    "grid-row": "span 2",
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "2",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "3",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "4",
+                  "style": {
+                    "background": "var(--ui-color-bg-subtle)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "{% set spans = ['2', '3', 'full'] %}<div class=\"ui-grid ui-grid--3\">\n{% for s in spans %}  <div class=\"ui-grid-row-span-{{ s }}\">Row span {{ s }}</div>\n{% endfor %}</div>"
         }
       ]
     }

package/src/layout/grid/index.scss CHANGED Viewed

@@ -17,4 +17,34 @@
   .grid--auto {
     grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
   }
+  // @modifier boolean subgrid
+  .grid--subgrid {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+  // @modifier boolean subgrid-rows
+  .grid--subgrid-rows {
+    display: grid;
+    grid-template-rows: subgrid;
+  }
+  // @modifier boolean subgrid-both
+  .grid--subgrid-both {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+  // Column spanning
+  .grid-col-span-2 { grid-column: span 2; }
+  .grid-col-span-3 { grid-column: span 3; }
+  .grid-col-span-4 { grid-column: span 4; }
+  .grid-col-span-full { grid-column: 1 / -1; }
+  // Row spanning
+  .grid-row-span-2 { grid-row: span 2; }
+  .grid-row-span-3 { grid-row: span 3; }
+  .grid-row-span-full { grid-row: 1 / -1; }
 }

package/src/layout/row/row-visual.png CHANGED Viewed

Binary file

package/src/layout/row/row.docs.json CHANGED Viewed

@@ -122,6 +122,114 @@
               ]
             }
           ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "sm",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "sm",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "sm",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Alignment",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--start",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Start",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Center",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--end",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "End",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--between",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Between A",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                },
+                {
+                  "tag": "div",
+                  "text": "Between B",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
         }
       ]
     }

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

@@ -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 ADDED Viewed

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