@teseor/css 1.6.0 → 1.8.0

package/src/components/navigation/pagination/pagination.docs.json

@@ -0,0 +1,483 @@
+{
+  "id": "pagination",
+  "type": "component",
+  "title": "Pagination",
+  "api": "./pagination.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-pagination",
+              "children": [
+                {
+                  "tag": "a",
+                  "class": "ui-pagination__link ui-pagination__prev",
+                  "attrs": { "href": "#" },
+                  "text": "Prev"
+                },
+                {
+                  "tag": "ul",
+                  "class": "ui-pagination__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "1"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link ui-pagination__link--active",
+                          "attrs": { "aria-current": "page", "href": "#" },
+                          "text": "2"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "3"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "4"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "5"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "a",
+                  "class": "ui-pagination__link ui-pagination__next",
+                  "attrs": { "href": "#" },
+                  "text": "Next"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Ellipsis",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-pagination",
+              "children": [
+                {
+                  "tag": "a",
+                  "class": "ui-pagination__link ui-pagination__prev",
+                  "attrs": { "href": "#" },
+                  "text": "Prev"
+                },
+                {
+                  "tag": "ul",
+                  "class": "ui-pagination__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "1"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        { "tag": "span", "class": "ui-pagination__ellipsis", "text": "..." }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "4"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link ui-pagination__link--active",
+                          "attrs": { "aria-current": "page", "href": "#" },
+                          "text": "5"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "6"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        { "tag": "span", "class": "ui-pagination__ellipsis", "text": "..." }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "20"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "a",
+                  "class": "ui-pagination__link ui-pagination__next",
+                  "attrs": { "href": "#" },
+                  "text": "Next"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Disabled States",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-pagination",
+              "children": [
+                {
+                  "tag": "a",
+                  "class": "ui-pagination__link ui-pagination__prev ui-pagination__link--disabled",
+                  "attrs": { "aria-disabled": "true" },
+                  "text": "Prev"
+                },
+                {
+                  "tag": "ul",
+                  "class": "ui-pagination__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link ui-pagination__link--active",
+                          "attrs": { "aria-current": "page", "href": "#" },
+                          "text": "1"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "2"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "3"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "a",
+                  "class": "ui-pagination__link ui-pagination__next",
+                  "attrs": { "href": "#" },
+                  "text": "Next"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-pagination ui-pagination--sm",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-pagination__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "1"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link ui-pagination__link--active",
+                          "attrs": { "aria-current": "page", "href": "#" },
+                          "text": "2"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "3"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-pagination",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-pagination__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "1"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link ui-pagination__link--active",
+                          "attrs": { "aria-current": "page", "href": "#" },
+                          "text": "2"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "3"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-pagination ui-pagination--lg",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-pagination__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "1"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link ui-pagination__link--active",
+                          "attrs": { "aria-current": "page", "href": "#" },
+                          "text": "2"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-pagination__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-pagination__link",
+                          "attrs": { "href": "#" },
+                          "text": "3"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-pagination-gap",
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-pagination-item-size",
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Item size"
+    },
+    {
+      "token": "--ui-pagination-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item border radius"
+    },
+    {
+      "token": "--ui-pagination-item-bg",
+      "default": "transparent",
+      "description": "Item background"
+    },
+    {
+      "token": "--ui-pagination-item-bg-hover",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item hover background"
+    },
+    {
+      "token": "--ui-pagination-item-bg-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Active item background"
+    },
+    {
+      "token": "--ui-pagination-item-color",
+      "default": "var(--ui-color-text)",
+      "description": "Item text color"
+    },
+    {
+      "token": "--ui-pagination-item-color-active",
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Active item text color"
+    }
+  ]
+}

package/src/{04-components → components}/navigation/tabs/index.scss

@@ -1,15 +1,30 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Token definitions
 @layer components.tokens {
   .tabs {
     --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_tab-height: var(--ui-tabs-tab-height, var(--ui-row-2, #{t.$row-2}));
     --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, #{t.$space-2}));
     --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, #{t.$space-1}));
+    --_tab-font-size: var(--ui-tabs-tab-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     --_tab-bg: var(--ui-tabs-tab-bg, transparent);
     --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
     --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
   }
+
+  // @modifier size
+  .tabs--sm {
+    --_tab-height: var(--ui-tabs-tab-height-sm, var(--ui-row-1, #{t.$row}));
+    --_tab-padding-x: var(--ui-tabs-tab-padding-x-sm, var(--ui-space-1, #{t.$space-1}));
+    --_tab-font-size: var(--ui-tabs-tab-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .tabs--lg {
+    --_tab-height: var(--ui-tabs-tab-height-lg, calc(#{t.$row} * 2.5));
+    --_tab-padding-x: var(--ui-tabs-tab-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
+    --_tab-font-size: var(--ui-tabs-tab-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
 }
 
 // Implementation
@@ -20,7 +35,7 @@
     gap: var(--ui-space-1, #{t.$space-1});
 
     box-sizing: border-box;
-    block-size: var(--ui-row-2, #{t.$row-2});
+    block-size: var(--_tab-height);
 
     // Use box-shadow instead of border to avoid affecting height
     box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
@@ -31,12 +46,12 @@
     align-items: center;
 
     box-sizing: border-box;
-    block-size: var(--ui-row-2, #{t.$row-2});
+    block-size: var(--_tab-height);
     padding-inline: var(--_tab-padding-x);
     margin: 0;
 
     font-family: var(--ui-font-sans, #{t.$font-sans});
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_tab-font-size);
     font-weight: var(--ui-weight-medium, #{t.$weight-medium});
     line-height: 1;
     color: var(--ui-color-text-muted, #{t.$color-text-muted});
@@ -74,4 +89,33 @@
       display: block;
     }
   }
+
+  // Vertical orientation
+  .tabs--vertical {
+    display: flex;
+
+    > .tabs__list {
+      flex-direction: column;
+
+      block-size: auto;
+      inline-size: auto;
+
+      // Move indicator to inline-start instead of block-end
+      box-shadow: inset calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 0 var(--_border-color);
+    }
+
+    > .tabs__list > .tabs__tab {
+      block-size: var(--_tab-height);
+
+      box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 transparent;
+
+      &--active {
+        box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 var(--ui-color-primary, #{t.$color-primary});
+      }
+    }
+
+    > .tabs__panel {
+      flex: 1;
+    }
+  }
 }

package/src/{04-components → components}/navigation/tabs/tabs.api.json

@@ -1,7 +1,14 @@
 {
   "name": "tabs",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "vertical": {
+      "type": "boolean"
+    }
+  },
   "elements": {
     "list": {},
     "tab": {
@@ -24,6 +31,10 @@
       "name": "--ui-tabs-border-color",
       "default": "var(--ui-color-border)"
     },
+    {
+      "name": "--ui-tabs-tab-height",
+      "default": "var(--ui-row-2)"
+    },
     {
       "name": "--ui-tabs-tab-padding-x",
       "default": "var(--ui-space-2)"
@@ -32,6 +43,10 @@
       "name": "--ui-tabs-tab-padding-y",
       "default": "var(--ui-space-1)"
     },
+    {
+      "name": "--ui-tabs-tab-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
     {
       "name": "--ui-tabs-tab-bg",
       "default": "transparent"