@threadlabs/looma 0.39.6 → 0.41.0

package/docs/card.html

@@ -32,7 +32,7 @@
       <p class="owner" $if="$packageName">{$packageName}</p>
       <p class="example-caption" $if="$exampleTitle">{$exampleTitle}</p>
 
-      <footer><ui-button $if="$href" as="a" from:href="$href" variant="link" size="sm">View component</ui-button><ui-button $if="$removable" $ref="remove" variant="ghost" size="sm">Remove</ui-button><slot name="actions"></slot></footer>
+      <footer><ui-button $if="$href" from:href="$href" variant="link" size="sm">View component</ui-button><ui-button $if="$removable" $ref="remove" variant="ghost" size="sm">Remove</ui-button><slot name="actions"></slot></footer>
     </ui-stack></div>
   </article>
   <style>

package/docs/catalog.json

@@ -365,6 +365,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-sidebar/ui-sidebar.html"
     },
+    {
+      "tag": "ui-site-header",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-site-header/ui-site-header.html"
+    },
     {
       "tag": "ui-skeleton",
       "package": "@threadlabs/looma",
@@ -458,7 +463,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.39.6",
+  "version": "0.41.0",
   "groups": [
     {
       "id": "layout",
@@ -2484,28 +2489,17 @@
             "start"
           ]
         },
-        {
-          "name": "as",
-          "property": "as",
-          "description": "The native element the button renders: a button, or a link (a) that navigates to href.",
-          "type": "keyword",
-          "default": "button",
-          "options": [
-            "button",
-            "a"
-          ]
-        },
         {
           "name": "disabled",
           "property": "disabled",
-          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as=\"a\" with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
+          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
           "type": "boolean",
           "default": false
         },
         {
           "name": "href",
           "property": "href",
-          "description": "The link's destination. Pair it with as=\"a\" so the button renders as a real link that navigates. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
+          "description": "The link's destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
           "type": "string"
         },
         {
@@ -2539,7 +2533,7 @@
         {
           "name": "rel",
           "property": "rel",
-          "description": "The link's relationship to its destination, as on a native link. Only meaningful with as=\"a\".",
+          "description": "The link's relationship to its destination, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2583,7 +2577,7 @@
         {
           "name": "target",
           "property": "target",
-          "description": "Where a link opens, as on a native link. Only meaningful with as=\"a\".",
+          "description": "Where a link opens, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2641,25 +2635,15 @@
             "start"
           ]
         },
-        {
-          "name": "as",
-          "description": "The native element the button renders: a button, or a link (a) that navigates to href.",
-          "type": "\"button\" | \"a\"",
-          "default": "button",
-          "options": [
-            "button",
-            "a"
-          ]
-        },
         {
           "name": "disabled",
-          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as=\"a\" with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
+          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
           "type": "boolean",
           "default": false
         },
         {
           "name": "href",
-          "description": "The link's destination. Pair it with as=\"a\" so the button renders as a real link that navigates. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
+          "description": "The link's destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
           "type": "string"
         },
         {
@@ -2689,7 +2673,7 @@
         },
         {
           "name": "rel",
-          "description": "The link's relationship to its destination, as on a native link. Only meaningful with as=\"a\".",
+          "description": "The link's relationship to its destination, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2728,7 +2712,7 @@
         },
         {
           "name": "target",
-          "description": "Where a link opens, as on a native link. Only meaningful with as=\"a\".",
+          "description": "Where a link opens, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2864,8 +2848,8 @@
           "id": "@threadlabs/looma/ui-button/07-as-link",
           "name": "07-as-link",
           "title": "as a link",
-          "description": "as=\"a\" with href renders a real link that looks and responds exactly like the button, in every variant. target and rel pass to the link. A disabled link drops its href and states aria-disabled, so it cannot be followed.",
-          "markup": "<ui-cluster gap=\"s\">\n  <ui-button as=\"a\" href=\"#get-started\" variant=\"solid\">Get started</ui-button>\n  <ui-button as=\"a\" href=\"https://example.com/\" target=\"_blank\" rel=\"noreferrer\">Read the guide</ui-button>\n  <ui-button as=\"a\" href=\"#get-started\" disabled>Unavailable</ui-button>\n</ui-cluster>",
+          "description": "Supplying href automatically renders a real link that looks and responds exactly like the button, in every variant. target and rel pass to the link. A disabled link drops its href and states aria-disabled, so it cannot be followed.",
+          "markup": "<ui-cluster gap=\"s\">\n  <ui-button href=\"#get-started\" variant=\"solid\">Get started</ui-button>\n  <ui-button href=\"https://example.com/\" target=\"_blank\" rel=\"noreferrer\">Read the guide</ui-button>\n  <ui-button href=\"#get-started\" disabled>Unavailable</ui-button>\n</ui-cluster>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -20408,6 +20392,197 @@
         }
       ]
     },
+    {
+      "tag": "ui-site-header",
+      "package": "@threadlabs/looma",
+      "root": "header",
+      "description": "A responsive site banner with slots for branding, navigation links, actions, and a consumer-owned mobile menu trigger. Keeps text baselines aligned while centering controls of different heights.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-site-header/ui-site-header.html"
+        ],
+        "component": [
+          {
+            "name": "--ui-site-header-border",
+            "fallbacks": [
+              "var(--ui-border)"
+            ]
+          },
+          {
+            "name": "--ui-site-header-compact-height",
+            "fallbacks": [
+              "3.75rem"
+            ]
+          },
+          {
+            "name": "--ui-site-header-height",
+            "fallbacks": [
+              "4.25rem"
+            ]
+          },
+          {
+            "name": "--ui-site-header-padding-inline",
+            "fallbacks": [
+              "var(--ui-space-4)"
+            ]
+          },
+          {
+            "name": "--ui-site-header-surface",
+            "fallbacks": [
+              "var(--ui-surface)"
+            ]
+          },
+          {
+            "name": "--ui-site-header-z-index",
+            "fallbacks": [
+              "10"
+            ]
+          }
+        ],
+        "shared": [
+          {
+            "name": "--ui-accent-active"
+          },
+          {
+            "name": "--ui-border"
+          },
+          {
+            "name": "--ui-border-width"
+          },
+          {
+            "name": "--ui-focus-ring"
+          },
+          {
+            "name": "--ui-focus-width"
+          },
+          {
+            "name": "--ui-font-bold"
+          },
+          {
+            "name": "--ui-font-semibold"
+          },
+          {
+            "name": "--ui-font-size-lg"
+          },
+          {
+            "name": "--ui-font-size-sm"
+          },
+          {
+            "name": "--ui-space-2"
+          },
+          {
+            "name": "--ui-space-3"
+          },
+          {
+            "name": "--ui-space-4"
+          },
+          {
+            "name": "--ui-space-5"
+          },
+          {
+            "name": "--ui-space-6"
+          },
+          {
+            "name": "--ui-surface"
+          },
+          {
+            "name": "--ui-text-primary"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "breakpoint",
+          "property": "breakpoint",
+          "description": "The viewport width at which navigation replaces the menu trigger: sm is 40rem, md 48rem, and lg 64rem. The consumer owns the menu or drawer the trigger opens.",
+          "type": "keyword",
+          "default": "lg",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "label",
+          "property": "label",
+          "description": "Accessible name for the primary navigation region.",
+          "type": "string",
+          "default": "Main"
+        },
+        {
+          "name": "sticky",
+          "property": "sticky",
+          "description": "Keeps the header at the top of its scrolling container.",
+          "type": "boolean",
+          "default": false
+        }
+      ],
+      "properties": [
+        {
+          "name": "breakpoint",
+          "description": "The viewport width at which navigation replaces the menu trigger: sm is 40rem, md 48rem, and lg 64rem. The consumer owns the menu or drawer the trigger opens.",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "lg",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the primary navigation region.",
+          "type": "string",
+          "default": "Main"
+        },
+        {
+          "name": "sticky",
+          "description": "Keeps the header at the top of its scrolling container.",
+          "type": "boolean",
+          "default": false
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "menu",
+          "description": "Named content for the menu region."
+        },
+        {
+          "name": "brand",
+          "description": "Named content for the brand region."
+        },
+        {
+          "name": "navigation",
+          "description": "Named content for the navigation region."
+        },
+        {
+          "name": "actions",
+          "description": "Named content for the actions region."
+        }
+      ],
+      "group": "display",
+      "id": "@threadlabs/looma/ui-site-header",
+      "title": "Site Header",
+      "resource": "@threadlabs/looma/components/ui-site-header/ui-site-header.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-site-header/01-default",
+          "name": "01-default",
+          "title": "Site navigation",
+          "description": "A full-width header keeps its logo visible, places desktop navigation beside it, and puts search and account controls at the trailing edge. On mobile, the navigation moves into the menu.",
+          "markup": "<ui-site-header>\n  <a slot=\"brand\" href=\"#home\" aria-label=\"Folio home\"><ui-icon name=\"compass\"></ui-icon>Folio</a>\n  <a slot=\"navigation\" href=\"#guide\" aria-current=\"page\">Guide</a>\n  <a slot=\"navigation\" href=\"#components\">Components</a>\n  <a slot=\"navigation\" href=\"#journal\">Journal</a>\n  <ui-icon-button id=\"site-header-menu-trigger\" slot=\"menu\" size=\"sm\" label=\"Open navigation\"><ui-icon name=\"panel-left\"></ui-icon></ui-icon-button>\n  <ui-cluster slot=\"actions\" gap=\"xs\">\n    <ui-icon-button id=\"site-header-search-trigger\" size=\"sm\" label=\"Search pages\"><ui-icon name=\"search\"></ui-icon></ui-icon-button>\n    <ui-icon-button id=\"site-header-account-trigger\" size=\"sm\" label=\"Account\"><ui-icon name=\"user-round\"></ui-icon></ui-icon-button>\n  </ui-cluster>\n</ui-site-header>\n<ui-popover for=\"site-header-menu-trigger\"><nav aria-label=\"Compact navigation\">\n    <ui-stack gap=\"s\"><a href=\"#guide\" aria-current=\"page\">Guide</a><a href=\"#components\">Components</a><a href=\"#journal\">Journal</a></ui-stack>\n  </nav></ui-popover>\n<ui-popover for=\"site-header-search-trigger\"><ui-form-field>\n    <label slot=\"label\" for=\"site-header-search\">Search pages</label><ui-input id=\"site-header-search\" type=\"search\" placeholder=\"Find a page\"></ui-input>\n  </ui-form-field></ui-popover>\n<ui-popover for=\"site-header-account-trigger\"><nav aria-label=\"Account\">\n    <ui-stack gap=\"s\"><a href=\"#profile\">Your profile</a><a href=\"#settings\">Settings</a></ui-stack>\n  </nav></ui-popover>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
     {
       "tag": "ui-skeleton",
       "package": "@threadlabs/looma",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.39.6",
+  "version": "0.41.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-site-header.css

@@ -0,0 +1,165 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-site-header"] { --html-next-scope-owner: "ui-site-header" !important; }
+}
+@scope ([data-component~="ui-site-header"]) to ([data-component], [data-slotted]) {
+@property --ui-site-header-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-compact-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-z-index {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-site-header"]) {
+      box-sizing: border-box !important;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      align-content: center !important;
+      gap: var(--ui-space-2) !important;
+      min-inline-size: 0;
+      min-block-size: var(--ui-site-header-compact-height, 3.75rem);
+      padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
+      border-block-end: var(--ui-border-width) solid var(--ui-site-header-border, var(--ui-border));
+      background: var(--ui-site-header-surface, var(--ui-surface));
+      color: var(--ui-text-primary);
+    }
+    :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="sticky"] {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--ui-site-header-z-index, 10);
+    }
+    .menu, .actions {
+      display: flex !important;
+      flex: none;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
+    .actions {
+      flex-wrap: wrap !important;
+      margin-inline-start: auto !important;
+    }
+    /* Text shares a baseline inside one group; the group is centred beside any control height. */
+    .identity {
+      display: flex !important;
+      flex: 1 1 auto;
+      flex-wrap: wrap !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-2) var(--ui-space-6) !important;
+      min-inline-size: 0;
+    }
+    .brand {
+      min-inline-size: 0;
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-bold);
+    }
+    .navigation {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-2) var(--ui-space-5) !important;
+      min-inline-size: 0;
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-semibold);
+    }
+    /* Without a supplied menu trigger, keep the destinations available on narrow screens. */
+    :scope:where([data-component~="ui-site-header"]):has(> .menu:not(:empty)) .navigation {
+      display: none !important;
+    }
+    .menu:empty, .actions:empty, .brand:empty, .navigation:empty {
+      display: none !important;
+    }
+    @media (min-width: 40rem) {
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=sm"] {
+        min-block-size: var(--ui-site-header-height, 4.25rem);
+        column-gap: var(--ui-space-4) !important;
+      }
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=sm"] .navigation:not(:empty) {
+        display: flex !important;
+      }
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=sm"] .menu {
+        display: none !important;
+      }
+    }
+    @media (min-width: 48rem) {
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=md"] {
+        min-block-size: var(--ui-site-header-height, 4.25rem);
+        column-gap: var(--ui-space-4) !important;
+      }
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=md"] .navigation:not(:empty) {
+        display: flex !important;
+      }
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=md"] .menu {
+        display: none !important;
+      }
+    }
+    @media (min-width: 64rem) {
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=lg"] {
+        min-block-size: var(--ui-site-header-height, 4.25rem);
+        column-gap: var(--ui-space-4) !important;
+      }
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=lg"] .navigation:not(:empty) {
+        display: flex !important;
+      }
+      :scope:where([data-component~="ui-site-header"])[data-ui-site-header-state~="breakpoint=lg"] .menu {
+        display: none !important;
+      }
+    }
+    :scope:where([data-component~="ui-site-header"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-component~="ui-site-header"]) to ([data-component]) {
+/* Text shares a baseline inside one group; the group is centred beside any control height. */
+    .brand > :where([data-slotted], [data-slotted] *):is(a) {
+      display: inline-flex !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-3) !important;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      color: inherit;
+      text-decoration: none;
+    }
+    /* Without a supplied menu trigger, keep the destinations available on narrow screens. */
+    .navigation > :where([data-slotted], [data-slotted] *):is(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+    .navigation > :where([data-slotted], [data-slotted] *):is(a):is(:hover, [aria-current="page"], [aria-current="true"]) {
+      color: var(--ui-accent-active);
+    }
+    .brand > :where([data-slotted], [data-slotted] *):is(a):focus-visible, .navigation > :where([data-slotted], [data-slotted] *):is(a):focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+    }
+    @media (min-width: 40rem) {
+    }
+    @media (min-width: 48rem) {
+    }
+    @media (min-width: 64rem) {
+    }
+}

package/vanilla/UiButton.d.ts

@@ -11,7 +11,6 @@ export interface UiButtonElement extends HTMLElement {
 }
 export interface UiButtonProps {
   align?: "center" | "start" | null;
-  as?: "button" | "a" | null;
   disabled?: boolean | null;
   href?: string | null;
   loading?: boolean | null;