@teseor/css 1.6.0 → 1.8.0

package/src/components/feedback/alert/alert.docs.json

@@ -0,0 +1,325 @@
+{
+  "id": "alert",
+  "type": "component",
+  "title": "Alert",
+  "description": "Informational banner for important messages. Use variants for different message types.",
+  "api": "./alert.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-alert",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-alert__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-alert__title", "text": "Note" },
+                    {
+                      "tag": "p",
+                      "class": "ui-alert__description",
+                      "text": "This is a default alert message."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-alert\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__title\">Note</p>\n    <p class=\"ui-alert__description\">This is a default alert.</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column",
+              "attrs": { "style": "--column-gap: var(--ui-space-2);" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--info",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        { "tag": "p", "class": "ui-alert__title", "text": "Info" },
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Informational message for the user."
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--success",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        { "tag": "p", "class": "ui-alert__title", "text": "Success" },
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Your action was completed successfully."
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--warning",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        { "tag": "p", "class": "ui-alert__title", "text": "Warning" },
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Please review before continuing."
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--danger",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        { "tag": "p", "class": "ui-alert__title", "text": "Error" },
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Something went wrong. Please try again."
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-alert ui-alert--info\">...</div>\n<div class=\"ui-alert ui-alert--success\">...</div>\n<div class=\"ui-alert ui-alert--warning\">...</div>\n<div class=\"ui-alert ui-alert--danger\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Icon",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-alert ui-alert--info",
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-icon--sm ui-alert__icon",
+                  "attrs": { "viewBox": "0 0 24 24" },
+                  "children": [
+                    { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "10" } },
+                    { "tag": "path", "attrs": { "d": "M12 16v-4" } },
+                    { "tag": "path", "attrs": { "d": "M12 8h.01" } }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-alert__content",
+                  "children": [
+                    {
+                      "tag": "p",
+                      "class": "ui-alert__description",
+                      "text": "Your session will expire in 5 minutes."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-alert ui-alert--info\">\n  <svg class=\"ui-icon ui-alert__icon\">...</svg>\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">Your session will expire.</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Description Only",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-alert ui-alert--success",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-alert__content",
+                  "children": [
+                    {
+                      "tag": "p",
+                      "class": "ui-alert__description",
+                      "text": "File uploaded successfully."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-alert ui-alert--success\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">File uploaded.</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column",
+              "attrs": { "style": "--column-gap: var(--ui-space-2);" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--info ui-alert--sm",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Small alert with compact padding."
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--info",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Default alert size."
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-alert ui-alert--info ui-alert--lg",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-alert__content",
+                      "children": [
+                        {
+                          "tag": "p",
+                          "class": "ui-alert__description",
+                          "text": "Large alert with extra padding."
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-alert ui-alert--sm\">...</div>\n<div class=\"ui-alert\">...</div>\n<div class=\"ui-alert ui-alert--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Dismissible",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-alert ui-alert--info ui-alert--dismissible",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-alert__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-alert__title", "text": "Dismissible" },
+                    {
+                      "tag": "p",
+                      "class": "ui-alert__description",
+                      "text": "This alert can be closed by the user."
+                    }
+                  ]
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-alert__close ui-close-button",
+                  "attrs": { "aria-label": "Close" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-alert ui-alert--info ui-alert--dismissible\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__title\">Dismissible</p>\n    <p class=\"ui-alert__description\">This alert can be closed.</p>\n  </div>\n  <button class=\"ui-alert__close\" aria-label=\"Close\">...</button>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-alert-padding",
+      "default": "var(--ui-space-2)",
+      "description": "Inner padding"
+    },
+    {
+      "token": "--ui-alert-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between icon and content"
+    },
+    {
+      "token": "--ui-alert-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-alert-border-width",
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border width"
+    },
+    {
+      "token": "--ui-alert-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-alert-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-alert-color", "default": "var(--ui-color-text)", "description": "Text color" },
+    { "token": "--ui-alert-icon-color", "default": "currentcolor", "description": "Icon color" }
+  ]
+}

package/src/{04-components → components}/feedback/alert/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component alert
 // @element div
@@ -15,6 +15,8 @@
     --_bg: color-mix(in oklch, var(--_accent) 8%, white);
     --_border-color: var(--_accent);
     --_color: var(--ui-alert-color, var(--ui-color-text, #{t.$color-text}));
+    --_font-size: var(--ui-alert-font-size, inherit);
+    --_padding-end: 0;
     --_icon-color: var(--_accent);
   }
 
@@ -34,6 +36,24 @@
   .alert--danger {
     --_accent: var(--ui-color-danger, #{t.$color-danger});
   }
+
+  // @modifier size
+  .alert--sm {
+    --_padding: var(--ui-alert-padding-sm, var(--ui-space-1, #{t.$space-1}));
+    --_gap: var(--ui-alert-gap-sm, calc(#{t.$unit} * 0.5));
+    --_font-size: var(--ui-alert-font-size-sm, var(--ui-font-size-sm, #{t.$font-size-sm}));
+  }
+
+  .alert--lg {
+    --_padding: var(--ui-alert-padding-lg, var(--ui-space-4, #{t.$space-4}));
+    --_gap: var(--ui-alert-gap-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-alert-font-size-lg, var(--ui-font-size-lg, #{t.$font-size-lg}));
+  }
+
+  // @modifier boolean dismissible
+  .alert--dismissible {
+    --_padding-end: var(--ui-alert-padding-end, calc(#{t.$unit} * 5));
+  }
 }
 
 @layer components.styles {
@@ -45,7 +65,9 @@
     // Subtract border from padding to maintain grid rhythm
     padding: calc(var(--_padding) - var(--_border-width));
     padding-inline: var(--_padding);
+    padding-inline-end: calc(var(--_padding) + var(--_padding-end));
 
+    font-size: var(--_font-size);
     color: var(--_color);
 
     background: var(--_bg);

package/src/{04-components → components}/feedback/progress/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Progress - progress bar indicator
 // Shows completion status of a task
@@ -87,6 +87,16 @@
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .progress--indeterminate .progress__bar {
+      animation: none;
+    }
+
+    .progress--animated .progress__bar {
+      animation: none;
+    }
+  }
+
   // Color variants
   .progress--success {
     --_fill: var(--ui-color-success);

package/src/{04-components → components}/feedback/progress/progress.api.json

@@ -24,7 +24,7 @@
   "cssVars": [
     {
       "name": "--ui-progress-height",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-progress-bg",

package/src/components/feedback/progress/progress.docs.json

@@ -0,0 +1,257 @@
+{
+  "id": "progress",
+  "type": "component",
+  "title": "Progress",
+  "description": "Progress bar indicator showing completion status. Use aria-valuenow for accessibility.",
+  "api": "./progress.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-progress",
+              "attrs": {
+                "role": "progressbar",
+                "aria-valuenow": "60",
+                "aria-valuemin": "0",
+                "aria-valuemax": "100",
+                "aria-label": "Loading"
+              },
+              "children": [
+                { "tag": "div", "class": "ui-progress__bar", "attrs": { "style": "width: 60%;" } }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-progress\" role=\"progressbar\"\n     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n  <div class=\"ui-progress__bar\" style=\"width: 60%;\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-progress ui-progress--sm",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "40",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "attrs": { "style": "width: 40%;" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-progress",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "60",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "attrs": { "style": "width: 60%;" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-progress ui-progress--lg",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "80",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "attrs": { "style": "width: 80%;" }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-progress ui-progress--sm\">...</div>\n<div class=\"ui-progress\">...</div>\n<div class=\"ui-progress ui-progress--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Colors",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-progress ui-progress--success",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "100",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "attrs": { "style": "width: 100%;" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-progress ui-progress--warning",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "60",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "attrs": { "style": "width: 60%;" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-progress ui-progress--danger",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "25",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "attrs": { "style": "width: 25%;" }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-progress ui-progress--success\">...</div>\n<div class=\"ui-progress ui-progress--warning\">...</div>\n<div class=\"ui-progress ui-progress--danger\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Striped",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-progress ui-progress--striped",
+              "attrs": {
+                "role": "progressbar",
+                "aria-valuenow": "70",
+                "aria-valuemin": "0",
+                "aria-valuemax": "100"
+              },
+              "children": [
+                { "tag": "div", "class": "ui-progress__bar", "attrs": { "style": "width: 70%;" } }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-progress ui-progress--striped\">\n  <div class=\"ui-progress__bar\" style=\"width: 70%;\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Animated Stripes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-progress ui-progress--striped ui-progress--animated",
+              "attrs": {
+                "role": "progressbar",
+                "aria-valuenow": "50",
+                "aria-valuemin": "0",
+                "aria-valuemax": "100"
+              },
+              "children": [
+                { "tag": "div", "class": "ui-progress__bar", "attrs": { "style": "width: 50%;" } }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-progress ui-progress--striped ui-progress--animated\">\n  <div class=\"ui-progress__bar\" style=\"width: 50%;\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Indeterminate",
+      "description": "For unknown progress duration",
+      "api": "./progress.api.json",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-progress ui-progress--indeterminate",
+              "attrs": { "role": "progressbar", "aria-label": "Loading" },
+              "children": [{ "tag": "div", "class": "ui-progress__bar" }]
+            }
+          ],
+          "code": "<div class=\"ui-progress ui-progress--indeterminate\"\n     role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"ui-progress__bar\"></div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-progress-height",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Bar height"
+    },
+    {
+      "token": "--ui-progress-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
+    },
+    {
+      "token": "--ui-progress-fill",
+      "default": "var(--ui-color-primary)",
+      "description": "Fill color"
+    },
+    {
+      "token": "--ui-progress-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Border radius"
+    }
+  ]
+}