@threadlabs/looma 0.40.0 → 0.41.1

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.40.0",
+  "version": "0.41.1",
   "groups": [
     {
       "id": "layout",
@@ -2999,7 +3004,7 @@
           {
             "name": "--ui-callout-surface",
             "declarations": [
-              "oklch(from var(--_callout-border) l c h / 10%)",
+              "light-dark( oklch(from var(--_callout-border) 96% min(c, calc(0.02 + 0.03 * max(0, cos(calc((h - 140) * 1deg))))) h), oklch(from var(--_callout-border) 25% min(c, 0.035) h) )",
               "var(--ui-surface-muted)"
             ]
           },
@@ -20387,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.40.0",
+  "version": "0.41.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-callout.css

@@ -59,7 +59,11 @@
       --_ui-callout-icon: var(--ui-callout-icon);
       --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-      --_callout-surface: oklch(from var(--_callout-border) l c h / 10%);
+      /* Near white, sRGB retains more green chroma than blue/red; bound chroma by hue to avoid clipping. */
+      --_callout-surface: light-dark(
+        oklch(from var(--_callout-border) 96% min(c, calc(0.02 + 0.03 * max(0, cos(calc((h - 140) * 1deg))))) h),
+        oklch(from var(--_callout-border) 25% min(c, 0.035) h)
+      );
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)

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/UiSiteHeader.d.ts

@@ -0,0 +1,25 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiSiteHeaderEventMap {
+}
+export interface UiSiteHeaderElement extends HTMLElement {
+  addEventListener<K extends keyof UiSiteHeaderEventMap>(type: K, listener: (this: UiSiteHeaderElement, event: UiSiteHeaderEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSiteHeaderElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSiteHeaderEventMap>(type: K, listener: (this: UiSiteHeaderElement, event: UiSiteHeaderEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSiteHeaderElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSiteHeaderProps {
+  breakpoint?: "sm" | "md" | "lg" | null;
+  label?: string | null;
+  sticky?: boolean | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSiteHeader(props?: UiSiteHeaderProps): UiSiteHeaderElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-site-header": { element: UiSiteHeaderElement; props: Omit<UiSiteHeaderProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiSiteHeader.js

@@ -0,0 +1,96 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, toAttribute, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkFormat, checkString, defineComponent } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-site-header.css";
+
+const T0 = ["",[],"\n    ",["span",["class","menu"],4],"\n    ",["div",["class","identity"],"\n      ",["div",["class","brand"],4],"\n      ",["nav",["class","navigation"],4],"\n    "],"\n    ",["div",["class","actions"],4],"\n  "];
+const T1 = ["",[]];
+const T2 = ["",[]];
+const T3 = ["",[]];
+const T4 = ["",[]];
+let P0, P1, P2, P3, P4;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-site-header", b: generatedInputs };
+const D = { g: "ui-site-header", props: { "breakpoint": { "required":false,"values":["sm","md","lg"],"default":"lg", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "label": { "required":false,"default":"Main", c: checkString, t: "string", j: 0, m: "s" }, "sticky": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+
+export function createUiSiteHeader(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("header");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-site-header");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const r = { n };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 2) {
+      const x0 = v[1];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a2, "aria-label", r.v0 = s0);
+    }
+    if (c & 5) {
+      const x1 = hostState(["sticky","breakpoint"], [v[2], v[0]]);
+      const s1 = x1;
+      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-site-header-state", (r.v1 = s1) === "" ? null : s1);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a0, r.e0, "menu", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a1, r.e1, "brand", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "navigation", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m3(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p3(r.b2, c, d);
+    if (r.f3 === undefined) { r.f3 = 1; const at = fillSlot(r.a4, r.e3, "actions", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b3 = m4(d); at.before(r.b3.n); } }
+    else if (r.b3 !== undefined) p4(r.b3, c, d);
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild;
+  const t2 = t0.nextSibling.nextSibling;
+  const t3 = t2.firstChild.nextSibling;
+  const t4 = t3.firstChild;
+  const t5 = t3.nextSibling.nextSibling;
+  const t6 = t5.firstChild;
+  const t7 = t2.nextSibling.nextSibling.firstChild;
+  const R = { n: element, a2: t5, v0: null, v1: undefined, a0: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a1: t4, e1: t4.nextSibling, b1: undefined, f1: undefined, a3: t6, e2: t6.nextSibling, b2: undefined, f2: undefined, a4: t7, e3: t7.nextSibling, b3: undefined, f3: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-site-header", createUiSiteHeader, ["breakpoint","label","sticky"]);

package/vanilla/index.js

@@ -71,6 +71,7 @@ export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSiteHeader.js";
 export * from "./UiSkeleton.js";
 export * from "./UiSlider.js";
 export * from "./UiSpinner.js";

package/vue/UiCallout.vue

@@ -325,7 +325,15 @@ const hostState = computed(() =>
     --_ui-callout-icon: var(--ui-callout-icon);
     --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-    --_callout-surface: oklch(from var(--_callout-border) l c h / 10%);
+    /* Near white, sRGB retains more green chroma than blue/red; bound chroma by hue to avoid clipping. */
+    --_callout-surface: light-dark(
+      oklch(
+        from var(--_callout-border)
+        96% min(c, calc(0.02 + 0.03 * max(0, cos(calc((h - 140) * 1deg)))))
+        h
+      ),
+      oklch(from var(--_callout-border) 25% min(c, 0.035) h)
+    );
     --_ui-selection-context-surface: light-dark(
       oklch(
         from var(--ui-callout-surface, var(--_callout-surface))

package/vue/UiSiteHeader.d.ts

@@ -0,0 +1,47 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    menu?: (props: typeof __VLS_1) => any;
+} & {
+    brand?: (props: typeof __VLS_3) => any;
+} & {
+    navigation?: (props: typeof __VLS_5) => any;
+} & {
+    actions?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    breakpoint: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    sticky: {
+        type: PropType<boolean | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    breakpoint: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    sticky: {
+        type: PropType<boolean | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiSiteHeader.js

@@ -0,0 +1,2 @@
+import { t as UiSiteHeader_default } from "./chunks/UiSiteHeader.js";
+export { UiSiteHeader_default as default };