@teseor/css 1.8.0 → 1.10.0

package/src/components/navigation/menu/index.scss

@@ -1,19 +1,43 @@
 @use '../../../config/tokens/variables' as t;
+// @component menu
+// @element div
 
 // Menu - action menu
 // Dropdown list of actions or options
 
 @layer components.tokens {
   .menu {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-size-xs: var(--ui-font-size-xs, #{t.$font-size-xs});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-danger: var(--ui-color-danger, #{t.$color-danger});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-border: var(--ui-color-border, #{t.$color-border});
+    // @desc Minimum width
     --_min-width: var(--ui-menu-min-width, calc(#{t.$unit} * 16));
+    // @desc Maximum height
     --_max-height: var(--ui-menu-max-height, calc(#{t.$unit} * 40));
+    // @desc Padding on all sides
     --_padding: var(--ui-menu-padding, calc(#{t.$unit} * 1));
+    // @desc Corner radius
     --_radius: var(--ui-menu-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-menu-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-menu-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Box shadow
     --_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
+    // @desc Item padding on all sides
     --_item-padding: var(--ui-menu-item-padding, calc(#{t.$unit} * 1) calc(#{t.$unit} * 2));
+    // @desc Item corner radius
     --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Item bg hover
     --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
   }
 }
@@ -27,9 +51,9 @@
 
     background: var(--_bg);
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
     box-shadow: var(--_shadow);
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    outline-offset: calc(var(--_border-width-sm) * -1);
   }
 
   .menu__group {
@@ -42,12 +66,12 @@
   .menu__label {
     padding: var(--_item-padding);
 
-    font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-xs);
+    font-weight: var(--_weight-medium);
+    line-height: var(--_row-1);
     letter-spacing: 0.05em;
     text-transform: uppercase;
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
   }
 
   .menu__item {
@@ -57,17 +81,17 @@
 
     padding: var(--_item-padding);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-sm);
+    line-height: var(--_row-1);
     text-decoration: none;
-    color: var(--ui-color-text, #{t.$color-text});
+    color: var(--_color-text);
 
     background: transparent;
     border: none;
     border-radius: var(--_item-radius);
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
 
     &:hover,
     &:focus-visible {
@@ -77,17 +101,17 @@
   }
 
   .menu__item--danger {
-    color: var(--ui-color-danger, #{t.$color-danger});
+    color: var(--_color-danger);
 
     &:hover,
     &:focus-visible {
-      color: var(--ui-color-danger, #{t.$color-danger});
+      color: var(--_color-danger);
     }
   }
 
   .menu__item--disabled,
   .menu__item[aria-disabled="true"] {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     pointer-events: none;
   }
 
@@ -101,8 +125,8 @@
   .menu__item-shortcut {
     margin-inline-start: auto;
 
-    font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-size: var(--_font-size-xs);
+    color: var(--_color-text-muted);
   }
 
   .menu__separator {
@@ -116,9 +140,9 @@
       content: '';
       flex: 1;
 
-      block-size: var(--ui-border-width-sm, 1px);
+      block-size: var(--_border-width-sm);
 
-      background: var(--ui-color-border, #{t.$color-border});
+      background: var(--_color-border);
     }
   }
 

package/src/components/navigation/menu/menu.api.json

@@ -1,17 +1,17 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "menu",
   "element": "div",
   "modifiers": {},
   "elements": {
     "group": {},
     "label": {},
-    "separator": {},
     "item": {
       "modifiers": {
-        "disabled": {
+        "danger": {
           "type": "boolean"
         },
-        "danger": {
+        "disabled": {
           "type": "boolean"
         },
         "check": {
@@ -24,48 +24,59 @@
     },
     "item-icon": {},
     "item-shortcut": {},
+    "separator": {},
     "item-indicator": {}
   },
   "cssVars": [
     {
       "name": "--ui-menu-min-width",
-      "default": "calc(var(--ui-unit) * 16"
+      "default": "calc(var(--ui-unit) * 16)",
+      "description": "Minimum width"
     },
     {
       "name": "--ui-menu-max-height",
-      "default": "calc(var(--ui-unit) * 40"
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum height"
     },
     {
       "name": "--ui-menu-padding",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-menu-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-menu-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-menu-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-menu-shadow",
-      "default": "var(--shadow-lg)"
+      "default": "var(--ui-shadow-lg)",
+      "description": "Box shadow"
     },
     {
       "name": "--ui-menu-item-padding",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1) calc(var(--ui-unit) * 2)",
+      "description": "Item padding on all sides"
     },
     {
       "name": "--ui-menu-item-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
     },
     {
       "name": "--ui-menu-item-bg-hover",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item bg hover"
     }
   ]
 }

package/src/components/navigation/nav/index.scss

@@ -5,22 +5,41 @@
 
 @layer components.tokens {
   .nav {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-sans: var(--ui-font-sans, #{t.$font-sans});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_duration-base: var(--ui-duration-base);
+    --_ease-default: var(--ui-ease-default);
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Gap between children
     --_gap: var(--ui-nav-gap, var(--ui-space-1, #{t.$space-1}));
+    // @desc Item overall height
     --_item-height: var(--ui-nav-item-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Item horizontal padding
     --_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Item font size
     --_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Item font weight
     --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Item text color
     --_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Item color hover
     --_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, #{t.$color-text}));
+    // @desc Item color active
     --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Item corner radius
     --_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Border color
     --_border-color: var(--ui-nav-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 
   // @modifier pills
   .nav--pills {
+    // @desc Item bg hover
     --_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Item bg active
     --_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Item color active
     --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
@@ -41,7 +60,7 @@
     list-style: none;
 
     // Bottom border via box-shadow to avoid height impact
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   .nav__item {
@@ -52,7 +71,7 @@
     block-size: var(--_item-height);
     padding-inline: var(--_item-padding-x);
 
-    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-family: var(--_font-sans);
     font-size: var(--_item-font-size);
     font-weight: var(--_item-font-weight);
     line-height: 1;
@@ -63,13 +82,13 @@
     background: transparent;
     border: none;
     // Underline indicator via box-shadow
-    box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 transparent;
+    box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 transparent;
     cursor: pointer;
 
     transition:
-      color var(--ui-duration-base) var(--ui-ease-default),
-      background var(--ui-duration-base) var(--ui-ease-default),
-      box-shadow var(--ui-duration-base) var(--ui-ease-default);
+      color var(--_duration-base) var(--_ease-default),
+      background var(--_duration-base) var(--_ease-default),
+      box-shadow var(--_duration-base) var(--_ease-default);
 
     &:hover {
       color: var(--_item-color-hover);
@@ -78,11 +97,11 @@
     &--active {
       color: var(--_item-color-active);
 
-      box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 var(--_item-color-active);
+      box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 var(--_item-color-active);
     }
 
     &--disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       pointer-events: none;
     }
   }
@@ -117,14 +136,14 @@
 
       block-size: auto;
 
-      box-shadow: inset calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 0 var(--_border-color);
+      box-shadow: inset calc(var(--_border-width-sm) * -1) 0 0 var(--_border-color);
     }
 
     .nav__item {
-      box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 transparent;
+      box-shadow: inset calc(var(--_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(--_item-color-active);
+        box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 var(--_item-color-active);
       }
     }
   }

package/src/components/navigation/nav/nav.api.json

@@ -1,9 +1,10 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "nav",
   "element": "nav",
   "modifiers": {
     "pills": {
-      "type": "boolean"
+      "values": ["pills"]
     },
     "vertical": {
       "type": "boolean"
@@ -11,45 +12,68 @@
   },
   "elements": {
     "list": {},
-    "item": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        },
-        "disabled": {
-          "type": "boolean"
-        }
-      }
-    }
+    "item": {}
   },
   "cssVars": [
     {
       "name": "--ui-nav-gap",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-nav-item-height",
-      "default": "var(--ui-row-2)"
+      "default": "var(--ui-row-2)",
+      "description": "Item overall height"
     },
     {
       "name": "--ui-nav-item-padding-x",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Item horizontal padding"
     },
     {
       "name": "--ui-nav-item-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Item font size"
+    },
+    {
+      "name": "--ui-nav-item-font-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Item font weight"
     },
     {
       "name": "--ui-nav-item-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Item text color"
+    },
+    {
+      "name": "--ui-nav-item-color-hover",
+      "default": "var(--ui-color-text)",
+      "description": "Item color hover"
     },
     {
       "name": "--ui-nav-item-color-active",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Item color active"
+    },
+    {
+      "name": "--ui-nav-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
     },
     {
       "name": "--ui-nav-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-nav-item-bg-hover",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Item bg hover"
+    },
+    {
+      "name": "--ui-nav-item-bg-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Item bg active"
     }
   ]
 }

package/src/components/navigation/pagination/index.scss

@@ -1,17 +1,32 @@
 @use '../../../config/tokens/variables' as t;
+// @component pagination
+// @element div
 
 // Pagination - page navigation
 // Navigation through paginated content
 
 @layer components.tokens {
   .pagination {
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Gap between children
     --_gap: var(--ui-pagination-gap, calc(#{t.$unit} * 0.5));
+    // @desc Item overall size
     --_item-size: var(--ui-pagination-item-size, calc(#{t.$unit} * 4));
+    // @desc Item corner radius
     --_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Item background color
     --_item-bg: var(--ui-pagination-item-bg, transparent);
+    // @desc Item bg hover
     --_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Item bg active
     --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
+    // @desc Item text color
     --_item-color: var(--ui-pagination-item-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Item color active
     --_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 }
@@ -47,7 +62,7 @@
     min-inline-size: var(--_item-size);
     padding-inline: calc(#{t.$unit} * 1);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     text-decoration: none;
     color: var(--_item-color);
 
@@ -55,8 +70,8 @@
     border-radius: var(--_item-radius);
 
     transition:
-      background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease),
-      color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+      background var(--_duration-fast) var(--_ease-default),
+      color var(--_duration-fast) var(--_ease-default);
 
     &:hover {
       background: var(--_item-bg-hover);
@@ -75,7 +90,7 @@
   // Disabled state
   .pagination__link[aria-disabled="true"],
   .pagination__link--disabled {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     pointer-events: none;
   }
 
@@ -98,10 +113,11 @@
     block-size: var(--_item-size);
     min-inline-size: var(--_item-size);
 
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
   }
 
   // Size variants
+  // @modifier size
   .pagination--sm {
     --_item-size: calc(#{t.$unit} * 3);
     --_gap: calc(#{t.$unit} * 0.25);

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "pagination",
   "element": "div",
   "modifiers": {
@@ -7,11 +8,8 @@
     }
   },
   "elements": {
-    "prev": {},
-    "next": {},
     "list": {},
     "item": {},
-    "ellipsis": {},
     "link": {
       "modifiers": {
         "active": {
@@ -21,40 +19,51 @@
           "type": "boolean"
         }
       }
-    }
+    },
+    "prev": {},
+    "next": {},
+    "ellipsis": {}
   },
   "cssVars": [
     {
       "name": "--ui-pagination-gap",
-      "default": "calc(var(--ui-unit) * 0.5"
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-pagination-item-size",
-      "default": "calc(var(--ui-unit) * 4"
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Item overall size"
     },
     {
       "name": "--ui-pagination-item-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
     },
     {
       "name": "--ui-pagination-item-bg",
-      "default": "transparent"
+      "default": "transparent",
+      "description": "Item background color"
     },
     {
       "name": "--ui-pagination-item-bg-hover",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item bg hover"
     },
     {
       "name": "--ui-pagination-item-bg-active",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Item bg active"
     },
     {
       "name": "--ui-pagination-item-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Item text color"
     },
     {
       "name": "--ui-pagination-item-color-active",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Item color active"
     }
   ]
 }