@teseor/css 1.0.0 → 1.2.0

package/src/04-components/icon/icon.docs.json

@@ -27,18 +27,82 @@
     },
     {
       "title": "Sizes",
-      "data": {
-        "sizes": [
-          { "mod": "xs", "label": "2u" },
-          { "mod": "sm", "label": "3u" },
-          { "mod": "md", "label": "4u" },
-          { "mod": "lg", "label": "5u" },
-          { "mod": "xl", "label": "6u" }
-        ]
-      },
+      "description": "Scale icons from extra small to extra large.",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster ui-cluster--gap-2\" style=\"align-items: center\">{% for s in sizes %}<div class=\"ui-stack ui-stack--gap-half\" style=\"align-items: center\"><svg class=\"ui-icon ui-icon--{{ s.mod }}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg><small>{{ s.label }}</small></div>{% endfor %}</div>"
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stack",
+              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-icon--xs",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                { "tag": "small", "text": "xs" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack",
+              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-icon--sm",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                { "tag": "small", "text": "sm" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack",
+              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-icon--md",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                { "tag": "small", "text": "md" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack",
+              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-icon--lg",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                { "tag": "small", "text": "lg" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack",
+              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-icon--xl",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                { "tag": "small", "text": "xl" }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -120,33 +184,33 @@
   "customization": [
     {
       "token": "--ui-icon-size",
-      "default": "1em",
-      "description": "Default size (inherits from font)"
+      "default": "var(--ui-ctx-size, 1rem)",
+      "description": "3-tier: global > context > default"
     },
     {
       "token": "--ui-icon-size-xs",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Extra small size (16px)"
+      "default": "var(--ui-size-xs)",
+      "description": "Extra small size"
     },
     {
       "token": "--ui-icon-size-sm",
-      "default": "calc(var(--unit) * 3)",
-      "description": "Small size (24px)"
+      "default": "var(--ui-size-sm)",
+      "description": "Small size"
     },
     {
       "token": "--ui-icon-size-md",
-      "default": "calc(var(--unit) * 4)",
-      "description": "Medium size (32px)"
+      "default": "var(--ui-size-md)",
+      "description": "Medium size"
     },
     {
       "token": "--ui-icon-size-lg",
-      "default": "calc(var(--unit) * 5)",
-      "description": "Large size (40px)"
+      "default": "var(--ui-size-lg)",
+      "description": "Large size"
     },
     {
       "token": "--ui-icon-size-xl",
-      "default": "calc(var(--unit) * 6)",
-      "description": "Extra large size (48px)"
+      "default": "var(--ui-size-xl)",
+      "description": "Extra large size"
     },
     { "token": "--ui-icon-stroke", "default": "2", "description": "Default stroke width" },
     { "token": "--ui-icon-stroke-thin", "default": "1", "description": "Thin stroke width" },

package/src/04-components/icon/index.scss

@@ -5,29 +5,16 @@
 
 @layer components.tokens {
   .icon {
-    --_size: var(--ui-icon-size, 1em);
+    // 3-tier inheritance: global > context > default
+    --_size: var(--ui-icon-size, var(--ui-ctx-size, #{t.size(md)}));
     --_stroke: var(--ui-icon-stroke, 2);
   }
 
   // @modifier size
-  .icon--xs {
-    --_size: var(--ui-icon-size-xs, calc(#{t.$unit} * 2));
-  }
-
-  .icon--sm {
-    --_size: var(--ui-icon-size-sm, calc(#{t.$unit} * 3));
-  }
-
-  .icon--md {
-    --_size: var(--ui-icon-size-md, calc(#{t.$unit} * 4));
-  }
-
-  .icon--lg {
-    --_size: var(--ui-icon-size-lg, calc(#{t.$unit} * 5));
-  }
-
-  .icon--xl {
-    --_size: var(--ui-icon-size-xl, calc(#{t.$unit} * 6));
+  @each $name, $value in t.$sizes {
+    .icon--#{$name} {
+      --_size: var(--ui-icon-size-#{$name}, var(--ui-size-#{$name}, #{$value}));
+    }
   }
 
   // @modifier stroke

package/src/04-components/index.scss

@@ -23,6 +23,7 @@
 @forward './link/index';
 @forward './menu/index';
 @forward './modal/index';
+@forward './nav/index';
 @forward './overlay/index';
 @forward './pagination/index';
 @forward './popover/index';

package/src/04-components/input/input.api.json

@@ -10,8 +10,39 @@
     },
     "state": {
       "values": ["error", "success"]
+    },
+    "block": {
+      "type": "boolean"
     }
   },
+  "relatedComponents": [
+    {
+      "name": "input-group",
+      "modifiers": {
+        "has-prefix": {
+          "type": "boolean"
+        },
+        "has-suffix": {
+          "type": "boolean"
+        }
+      },
+      "elements": {
+        "addon": {
+          "modifiers": {
+            "start": {
+              "type": "boolean"
+            },
+            "end": {
+              "type": "boolean"
+            },
+            "interactive": {
+              "type": "boolean"
+            }
+          }
+        }
+      }
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-input-height",

package/src/04-components/label/label.api.json

@@ -6,6 +6,10 @@
       "values": ["lg"]
     }
   },
+  "elements": {
+    "required": {},
+    "optional": {}
+  },
   "cssVars": [
     {
       "name": "--ui-label-font-size",

package/src/04-components/link/link.api.json

@@ -4,6 +4,12 @@
   "modifiers": {
     "variant": {
       "values": ["muted", "subtle"]
+    },
+    "external": {
+      "type": "boolean"
+    },
+    "disabled": {
+      "type": "boolean"
     }
   },
   "cssVars": [

package/src/04-components/menu/menu.api.json

@@ -2,6 +2,30 @@
   "name": "menu",
   "element": "div",
   "modifiers": {},
+  "elements": {
+    "group": {},
+    "label": {},
+    "separator": {},
+    "item": {
+      "modifiers": {
+        "disabled": {
+          "type": "boolean"
+        },
+        "danger": {
+          "type": "boolean"
+        },
+        "check": {
+          "type": "boolean"
+        },
+        "radio": {
+          "type": "boolean"
+        }
+      }
+    },
+    "item-icon": {},
+    "item-shortcut": {},
+    "item-indicator": {}
+  },
   "cssVars": [
     {
       "name": "--ui-menu-min-width",

package/src/04-components/modal/modal.api.json

@@ -1,7 +1,18 @@
 {
   "name": "modal",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "visible": {
+      "type": "boolean"
+    },
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "elements": {
+    "content": {},
+    "body": {}
+  },
   "cssVars": [
     {
       "name": "--ui-modal-bg",

package/src/04-components/nav/index.scss

@@ -0,0 +1,142 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component nav
+// @element nav
+
+@layer components.tokens {
+  .nav {
+    --_gap: var(--ui-nav-gap, var(--ui-space-1, #{t.$space-1}));
+    --_item-height: var(--ui-nav-item-height, var(--ui-row-2, #{t.$row-2}));
+    --_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, #{t.$space-2}));
+    --_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, #{t.$color-text}));
+    --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, #{t.$color-primary}));
+    --_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    --_border-color: var(--ui-nav-border-color, var(--ui-color-border, #{t.$color-border}));
+  }
+
+  // @modifier pills
+  .nav--pills {
+    --_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, #{t.$color-primary}));
+    --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  // @modifier boolean vertical
+}
+
+@layer components.styles {
+  .nav__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--_gap);
+
+    box-sizing: border-box;
+    block-size: var(--_item-height);
+    padding: 0;
+    margin: 0;
+
+    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);
+  }
+
+  .nav__item {
+    display: inline-flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    block-size: var(--_item-height);
+    padding-inline: var(--_item-padding-x);
+
+    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-size: var(--_item-font-size);
+    font-weight: var(--_item-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--_item-color);
+
+    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;
+    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);
+
+    &:hover {
+      color: var(--_item-color-hover);
+    }
+
+    &--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);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  // Pills variant - background instead of underline
+  .nav--pills {
+    .nav__list {
+      box-shadow: none;
+    }
+
+    .nav__item {
+      border-radius: var(--_item-radius);
+      box-shadow: none;
+
+      &:hover {
+        background: var(--_item-bg-hover);
+      }
+
+      &--active {
+        color: var(--_item-color-active);
+
+        background: var(--_item-bg-active);
+      }
+    }
+  }
+
+  // Vertical orientation
+  .nav--vertical {
+    .nav__list {
+      flex-direction: column;
+      align-items: stretch;
+
+      block-size: auto;
+
+      box-shadow: inset calc(var(--ui-border-width-sm, #{t.$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;
+
+      &--active {
+        box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 var(--_item-color-active);
+      }
+    }
+  }
+
+  // Vertical + pills
+  .nav--vertical.nav--pills {
+    .nav__list {
+      box-shadow: none;
+    }
+
+    .nav__item {
+      box-shadow: none;
+    }
+  }
+}

package/src/04-components/nav/nav.api.json

@@ -0,0 +1,55 @@
+{
+  "name": "nav",
+  "element": "nav",
+  "modifiers": {
+    "pills": {
+      "type": "boolean"
+    },
+    "vertical": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "list": {},
+    "item": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-nav-gap",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-nav-item-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-nav-item-padding-x",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-nav-item-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-nav-item-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-nav-item-color-active",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-nav-border-color",
+      "default": "var(--ui-color-border)"
+    }
+  ]
+}