@teseor/css 1.7.0 → 1.9.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/components/navigation/tabs/index.scss

@@ -0,0 +1,149 @@
+@use '../../../config/tokens/variables' as t;
+// @component tabs
+// @element div
+
+// Token definitions
+@layer components.tokens {
+  .tabs {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-sans: var(--ui-font-sans, #{t.$font-sans});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_duration-base: var(--ui-duration-base);
+    --_ease-default: var(--ui-ease-default);
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_color-primary: var(--ui-color-primary, #{t.$color-primary});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    // @desc Border color
+    --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Tab height
+    --_tab-height: var(--ui-tabs-tab-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Tab padding x
+    --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Tab padding y
+    --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, #{t.$space-1}));
+    // @desc Tab font size
+    --_tab-font-size: var(--ui-tabs-tab-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Tab bg
+    --_tab-bg: var(--ui-tabs-tab-bg, transparent);
+    // @desc Tab bg active
+    --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Panel padding on all sides
+    --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
+  }
+
+  // @modifier size
+  .tabs--sm {
+    // @desc Tab height sm
+    --_tab-height: var(--ui-tabs-tab-height-sm, var(--ui-row-1, #{t.$row}));
+    // @desc Tab padding x sm
+    --_tab-padding-x: var(--ui-tabs-tab-padding-x-sm, var(--ui-space-1, #{t.$space-1}));
+    // @desc Tab font size sm
+    --_tab-font-size: var(--ui-tabs-tab-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .tabs--lg {
+    // @desc Tab height lg
+    --_tab-height: var(--ui-tabs-tab-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Tab padding x lg
+    --_tab-padding-x: var(--ui-tabs-tab-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
+    // @desc Tab font size lg
+    --_tab-font-size: var(--ui-tabs-tab-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+}
+
+// Implementation
+@layer components.styles {
+  .tabs__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--_space-1);
+
+    box-sizing: border-box;
+    block-size: var(--_tab-height);
+
+    // Use box-shadow instead of border to avoid affecting height
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
+  }
+
+  .tabs__tab {
+    display: inline-flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    block-size: var(--_tab-height);
+    padding-inline: var(--_tab-padding-x);
+    margin: 0;
+
+    font-family: var(--_font-sans);
+    font-size: var(--_tab-font-size);
+    font-weight: var(--_weight-medium);
+    line-height: 1;
+    color: var(--_color-text-muted);
+
+    background: var(--_tab-bg);
+    border: none;
+    // Use box-shadow for indicator to avoid affecting height
+    box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 transparent;
+    cursor: pointer;
+
+    transition:
+      color var(--_duration-base) var(--_ease-default),
+      box-shadow var(--_duration-base) var(--_ease-default);
+
+    &:hover {
+      color: var(--_color-text);
+    }
+
+    &--active {
+      color: var(--_color-primary);
+
+      background: var(--_tab-bg-active);
+      box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 var(--_color-primary);
+    }
+  }
+
+  .tabs__panel {
+    display: none;
+
+    padding: var(--_panel-padding);
+
+    line-height: var(--_row-1);
+
+    &--active {
+      display: block;
+    }
+  }
+
+  // Vertical orientation
+  // @modifier boolean vertical
+  .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(--_border-width-sm) * -1) 0 0 var(--_border-color);
+    }
+
+    > .tabs__list > .tabs__tab {
+      block-size: var(--_tab-height);
+
+      box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 transparent;
+
+      &--active {
+        box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 var(--_color-primary);
+      }
+    }
+
+    > .tabs__panel {
+      flex: 1;
+    }
+  }
+}