@teseor/css 1.6.0 → 1.8.0

package/src/components/navigation/dropdown-menu/dropdown-menu.docs.json

@@ -0,0 +1,272 @@
+{
+  "id": "dropdown-menu",
+  "type": "component",
+  "title": "Dropdown Menu",
+  "description": "Trigger button with floating menu panel. Reuses the menu component for consistent item styling.",
+  "api": "./dropdown-menu.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-dropdown-menu ui-dropdown-menu--open",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-dropdown-menu__trigger ui-button",
+                  "attrs": { "type": "button" },
+                  "children": [
+                    { "tag": "span", "text": "Actions" },
+                    { "tag": "span", "class": "ui-dropdown-menu__trigger-icon", "text": "\u25BE" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-dropdown-menu__panel",
+                  "attrs": { "role": "menu" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-menu",
+                      "children": [
+                        {
+                          "tag": "ul",
+                          "class": "ui-menu__group",
+                          "children": [
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "Edit"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "Duplicate"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item ui-menu__item--danger",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "Delete"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open\">\n  <button class=\"ui-dropdown-menu__trigger ui-button\">Actions \u25BE</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">...</div>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Separator",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-dropdown-menu ui-dropdown-menu--open",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-dropdown-menu__trigger ui-button ui-button--secondary",
+                  "attrs": { "type": "button" },
+                  "text": "File"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-dropdown-menu__panel",
+                  "attrs": { "role": "menu" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-menu",
+                      "children": [
+                        {
+                          "tag": "ul",
+                          "class": "ui-menu__group",
+                          "children": [
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "New"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "Open"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "Save"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [{ "tag": "hr", "class": "ui-menu__separator" }]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "button",
+                                  "class": "ui-menu__item ui-menu__item--danger",
+                                  "attrs": { "role": "menuitem" },
+                                  "text": "Close"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open\">\n  <button class=\"ui-dropdown-menu__trigger ui-button ui-button--secondary\">File</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">\n      <ul class=\"ui-menu__group\">\n        <li><button class=\"ui-menu__item\">New</button></li>\n        <li><hr class=\"ui-menu__separator\"></li>\n        <li><button class=\"ui-menu__item--danger\">Close</button></li>\n      </ul>\n    </div>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Align End",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "style": { "display": "flex", "justify-content": "flex-end" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end",
+                  "children": [
+                    {
+                      "tag": "button",
+                      "class": "ui-dropdown-menu__trigger ui-button ui-button--ghost",
+                      "attrs": { "type": "button" },
+                      "text": "\u22EE"
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-dropdown-menu__panel",
+                      "attrs": { "role": "menu" },
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-menu",
+                          "children": [
+                            {
+                              "tag": "ul",
+                              "class": "ui-menu__group",
+                              "children": [
+                                {
+                                  "tag": "li",
+                                  "children": [
+                                    {
+                                      "tag": "button",
+                                      "class": "ui-menu__item",
+                                      "attrs": { "role": "menuitem" },
+                                      "text": "View"
+                                    }
+                                  ]
+                                },
+                                {
+                                  "tag": "li",
+                                  "children": [
+                                    {
+                                      "tag": "button",
+                                      "class": "ui-menu__item",
+                                      "attrs": { "role": "menuitem" },
+                                      "text": "Share"
+                                    }
+                                  ]
+                                },
+                                {
+                                  "tag": "li",
+                                  "children": [
+                                    {
+                                      "tag": "button",
+                                      "class": "ui-menu__item ui-menu__item--danger",
+                                      "attrs": { "role": "menuitem" },
+                                      "text": "Remove"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end\">\n  <button class=\"ui-dropdown-menu__trigger ui-button ui-button--ghost\">\u22EE</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">...</div>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-dropdown-menu-z",
+      "default": "200",
+      "description": "Z-index for floating panel"
+    },
+    {
+      "token": "--ui-dropdown-menu-panel-offset",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between trigger and panel"
+    },
+    {
+      "token": "--ui-dropdown-menu-panel-min-width",
+      "default": "auto",
+      "description": "Minimum panel width"
+    }
+  ]
+}

package/src/components/navigation/dropdown-menu/dropdown-menu.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'dropdown-menu.docs.json');
+
+test.describe('dropdown-menu visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'dropdown-menu');
+    await saveForLostPixel(page, 'dropdown-menu');
+    await expect(page.locator('body')).toHaveScreenshot('dropdown-menu-visual.png');
+  });
+});

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

@@ -0,0 +1,84 @@
+@use '../../../config/tokens/variables' as t;
+
+// @component dropdown-menu
+// @element div
+// Composite: trigger button + floating menu panel
+
+@layer components.tokens {
+  .dropdown-menu {
+    --_z: var(--ui-dropdown-menu-z, 200);
+    --_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, #{t.$space-1}));
+    --_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto);
+  }
+}
+
+@layer components.styles {
+  .dropdown-menu {
+    display: inline-block;
+    position: relative;
+  }
+
+  .dropdown-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-0, #{t.$space-0});
+  }
+
+  .dropdown-menu__trigger-icon {
+    display: inline-flex;
+
+    font-size: 0.6em;
+
+    transition: transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+  }
+
+  .dropdown-menu--open .dropdown-menu__trigger-icon {
+    transform: rotate(180deg);
+  }
+
+  .dropdown-menu__panel {
+    position: absolute;
+    inset-block-start: calc(100% + var(--_panel-offset));
+    inset-inline-start: 0;
+    z-index: var(--_z);
+
+    min-inline-size: var(--_panel-min-width);
+
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(calc(#{t.$unit} * -1));
+
+    transition:
+      opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+  }
+
+  .dropdown-menu--open .dropdown-menu__panel {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  // Position above trigger
+  .dropdown-menu--top .dropdown-menu__panel {
+    inset-block-start: auto;
+    inset-block-end: calc(100% + var(--_panel-offset));
+
+    transform: translateY(#{t.$unit});
+  }
+
+  .dropdown-menu--top.dropdown-menu--open .dropdown-menu__panel {
+    transform: translateY(0);
+  }
+
+  // Align to end edge
+  .dropdown-menu--align-end .dropdown-menu__panel {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  // Full-width panel matches trigger width
+  .dropdown-menu--full-width .dropdown-menu__panel {
+    min-inline-size: 100%;
+  }
+}

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Menu - action menu
 // Dropdown list of actions or options
@@ -11,7 +11,7 @@
     --_radius: var(--ui-menu-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--ui-menu-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-menu-border-color, var(--ui-color-border, #{t.$color-border}));
-    --_shadow: var(--ui-menu-shadow, var(--shadow-lg));
+    --_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
     --_item-padding: var(--ui-menu-item-padding, calc(#{t.$unit} * 1) calc(#{t.$unit} * 2));
     --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
     --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
@@ -87,7 +87,7 @@
 
   .menu__item--disabled,
   .menu__item[aria-disabled="true"] {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     pointer-events: none;
   }
 

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

@@ -29,15 +29,15 @@
   "cssVars": [
     {
       "name": "--ui-menu-min-width",
-      "default": "calc(#{t.$unit} * 16"
+      "default": "calc(var(--ui-unit) * 16"
     },
     {
       "name": "--ui-menu-max-height",
-      "default": "calc(#{t.$unit} * 40"
+      "default": "calc(var(--ui-unit) * 40"
     },
     {
       "name": "--ui-menu-padding",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-menu-radius",
@@ -57,7 +57,7 @@
     },
     {
       "name": "--ui-menu-item-padding",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-menu-item-radius",