@threadlabs/looma 0.41.0 → 0.41.2

package/docs/catalog.json

@@ -463,7 +463,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "groups": [
     {
       "id": "layout",
@@ -3004,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)"
             ]
           },
@@ -20449,6 +20449,9 @@
           {
             "name": "--ui-border-width"
           },
+          {
+            "name": "--ui-control-min-block-size"
+          },
           {
             "name": "--ui-focus-ring"
           },
@@ -20575,8 +20578,8 @@
           "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>",
+          "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. Pass actions individually so the header can reserve space for their adjustable hit areas.",
+          "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-icon-button slot=\"actions\" id=\"site-header-search-trigger\" size=\"sm\" label=\"Search pages\"><ui-icon name=\"search\"></ui-icon></ui-icon-button>\n  <ui-icon-button slot=\"actions\" id=\"site-header-account-trigger\" size=\"sm\" label=\"Account\"><ui-icon name=\"user-round\"></ui-icon></ui-icon-button>\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": {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "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

@@ -39,6 +39,7 @@
       align-items: center !important;
       align-content: center !important;
       gap: var(--ui-space-2) !important;
+      inline-size: 100%;
       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;
@@ -60,13 +61,16 @@
       max-inline-size: 100%;
     }
     .actions {
-      flex-wrap: wrap !important;
+      display: grid !important;
+      grid-auto-flow: column !important;
+      grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
+      justify-items: center !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: 1 1 0;
       flex-wrap: wrap !important;
       align-items: baseline !important;
       gap: var(--ui-space-2) var(--ui-space-6) !important;

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.vue

@@ -172,6 +172,7 @@ const hostState = computed(() =>
     align-items: center !important;
     align-content: center !important;
     gap: var(--ui-space-2) !important;
+    inline-size: 100%;
     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;
@@ -194,12 +195,15 @@ const hostState = computed(() =>
     max-inline-size: 100%;
   }
   :global(.actions:where([data-hn-ui-site-header])) {
-    flex-wrap: wrap !important;
+    display: grid !important;
+    grid-auto-flow: column !important;
+    grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
+    justify-items: center !important;
     margin-inline-start: auto !important;
   }
   :global(.identity:where([data-hn-ui-site-header])) {
     display: flex !important;
-    flex: 1 1 auto;
+    flex: 1 1 0;
     flex-wrap: wrap !important;
     align-items: baseline !important;
     gap: var(--ui-space-2) var(--ui-space-6) !important;

package/vue/chunks/UiCallout.js

@@ -297,6 +297,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-591f8e62"]]);
+}), [["__scopeId", "data-v-15314c87"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiSiteHeader.js

@@ -145,6 +145,6 @@ var UiSiteHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a60b14b2"]]);
+}), [["__scopeId", "data-v-32e025db"]]);
 //#endregion
 export { UiSiteHeader_default as t };

package/vue/components.css

@@ -1647,7 +1647,15 @@ html[data-ui-input-modality="touch"]
     --_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))
@@ -10619,6 +10627,7 @@ dialog:where([data-hn-ui-search-shell]) {
     align-items: center !important;
     align-content: center !important;
     gap: var(--ui-space-2) !important;
+    inline-size: 100%;
     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;
@@ -10640,12 +10649,15 @@ dialog:where([data-hn-ui-search-shell]) {
     max-inline-size: 100%;
 }
 .actions:where([data-hn-ui-site-header]) {
-    flex-wrap: wrap !important;
+    display: grid !important;
+    grid-auto-flow: column !important;
+    grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
+    justify-items: center !important;
     margin-inline-start: auto !important;
 }
 .identity:where([data-hn-ui-site-header]) {
     display: flex !important;
-    flex: 1 1 auto;
+    flex: 1 1 0;
     flex-wrap: wrap !important;
     align-items: baseline !important;
     gap: var(--ui-space-2) var(--ui-space-6) !important;
@@ -17478,7 +17490,11 @@ html[data-ui-input-modality="touch"]
       --_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)