@threadlabs/looma 0.39.6 → 0.41.0

package/vue/chunks/UiSiteHeader.js

@@ -0,0 +1,150 @@
+import { C as useReflectedProp, _ as nativeAttrs, a as checkHydratedRoot, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { h as vuePropInputs, i as checkPropInput, m as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
+//#region .build/vue/UiSiteHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-ui-site-header-prop-breakpoint",
+	"data-ui-site-header-prop-label",
+	"data-ui-site-header-prop-sticky",
+	"data-ui-site-header-state"
+];
+var _hoisted_2 = {
+	class: "menu",
+	"data-hn-ui-site-header": ""
+};
+var _hoisted_3 = {
+	class: "identity",
+	"data-hn-ui-site-header": ""
+};
+var _hoisted_4 = {
+	class: "brand",
+	"data-hn-ui-site-header": ""
+};
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = {
+	class: "actions",
+	"data-hn-ui-site-header": ""
+};
+//#endregion
+//#region .build/vue/UiSiteHeader.vue
+var UiSiteHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiSiteHeader",
+	props: {
+		breakpoint: { type: null },
+		label: { type: null },
+		sticky: { type: null },
+		[BINDING_INPUTS_PROP]: { type: null }
+	},
+	setup(__props) {
+		const propValidityContract = { props: {
+			breakpoint: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "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\n      opens.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "lg"
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "Accessible name for the primary navigation region.",
+				default: "Main"
+			},
+			sticky: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "sticky" },
+				description: "Keeps the header at the top of its scrolling container.",
+				default: false
+			}
+		} };
+		const props = __props;
+		const inputTracking = vuePropInputs({
+			breakpoint: "lg",
+			label: "Main",
+			sticky: false
+		}, {
+			breakpoint: "lg",
+			label: "Main",
+			sticky: false
+		}, (name, value, source, values) => {
+			switch (name) {
+				case "breakpoint": return checkPropInput(value, {
+					kind: "terminal",
+					name: "keyword"
+				}, true, true);
+				case "label": return checkPropInput(value, {
+					kind: "terminal",
+					name: "string"
+				}, true, true);
+				case "sticky": return checkPropInput(value, {
+					kind: "terminal",
+					name: "boolean"
+				}, true, true);
+				default: return { ok: false };
+			}
+		}, () => {
+			checkedProps.value;
+		});
+		const propInputs = inputTracking.inputs;
+		const checkedProps = computed(() => {
+			inputTracking.version.value;
+			return {
+				breakpoint: propInputs.value("breakpoint", props["breakpoint"], props[BINDING_INPUTS_PROP]),
+				label: propInputs.value("label", props["label"], props[BINDING_INPUTS_PROP]),
+				sticky: propInputs.value("sticky", props["sticky"], props[BINDING_INPUTS_PROP])
+			};
+		});
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		checkHydratedRoot("header", "ui-site-header");
+		/** The values the styles' :host() and :state() rules test. */
+		const hostState = computed(() => [
+			checkedProps.value.sticky && "sticky",
+			checkedProps.value.breakpoint && "breakpoint",
+			checkedProps.value.breakpoint != null && `breakpoint=${encodeURIComponent(checkedProps.value.breakpoint)}`
+		].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("header", mergeProps({ class: "ui-site-header" }, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-hn-ui-site-header": "",
+				"data-ui-site-header-prop-breakpoint": unref(reflectedProp)("breakpoint", "breakpoint", checkedProps.value.breakpoint, void 0, false),
+				"data-ui-site-header-prop-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-ui-site-header-prop-sticky": unref(reflectedProp)("sticky", "sticky", checkedProps.value.sticky, void 0, false),
+				"data-ui-site-header-state": hostState.value || void 0
+			}), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "menu", {}, void 0, true)]),
+				createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "brand", {}, void 0, true)]), createElementVNode("nav", {
+					class: "navigation",
+					"data-hn-ui-site-header": "",
+					"aria-label": checkedProps.value.label ?? void 0
+				}, [renderSlot(_ctx.$slots, "navigation", {}, void 0, true)], 8, _hoisted_5)]),
+				createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-a60b14b2"]]);
+//#endregion
+export { UiSiteHeader_default as t };

package/vue/components.css

@@ -10585,6 +10585,160 @@ dialog:where([data-hn-ui-search-shell]) {
 }
 }
 
+@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;
+}
+/* Text shares a baseline inside one group; the group is centred beside any control height. */
+/* Without a supplied menu trigger, keep the destinations available on narrow screens. */
+@scope (.ui-site-header) to ([data-hn]) {
+:scope:where([data-hn-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[data-ui-site-header-state~="sticky"]:where([data-hn-ui-site-header]) {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--ui-site-header-z-index, 10);
+}
+.menu:where([data-hn-ui-site-header]),.actions:where([data-hn-ui-site-header]) {
+    display: flex !important;
+    flex: none;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+}
+.actions:where([data-hn-ui-site-header]) {
+    flex-wrap: wrap !important;
+    margin-inline-start: auto !important;
+}
+.identity:where([data-hn-ui-site-header]) {
+    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:where([data-hn-ui-site-header]) {
+    min-inline-size: 0;
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-bold);
+}
+.brand > :where(:not([data-hn-ui-site-header])):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;
+}
+.navigation:where([data-hn-ui-site-header]) {
+    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);
+}
+:scope:has(> .menu:not(:empty)) .navigation:where([data-hn-ui-site-header]) {
+    display: none !important;
+}
+.navigation > :where(:not([data-hn-ui-site-header])):is(a) {
+    color: inherit;
+    text-decoration: none;
+}
+.navigation
+    > :where(:not([data-hn-ui-site-header])):is(a):is(:hover, [aria-current="page"], [aria-current="true"]) {
+    color: var(--ui-accent-active);
+}
+.brand > :where(:not([data-hn-ui-site-header])):is(a):focus-visible,.navigation > :where(:not([data-hn-ui-site-header])):is(a):focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+}
+.menu:empty:where([data-hn-ui-site-header]),.actions:empty:where([data-hn-ui-site-header]),.brand:empty:where([data-hn-ui-site-header]),.navigation:empty:where([data-hn-ui-site-header]) {
+    display: none !important;
+}
+@media (min-width: 40rem) {
+:scope[data-ui-site-header-state~="breakpoint=sm"]:where([data-hn-ui-site-header]) {
+      min-block-size: var(--ui-site-header-height, 4.25rem);
+      column-gap: var(--ui-space-4) !important;
+}
+:scope[data-ui-site-header-state~="breakpoint=sm"]
+      .navigation:not(:empty):where([data-hn-ui-site-header]) {
+      display: flex !important;
+}
+:scope[data-ui-site-header-state~="breakpoint=sm"]
+      .menu:where([data-hn-ui-site-header]) {
+      display: none !important;
+}
+}
+@media (min-width: 48rem) {
+:scope[data-ui-site-header-state~="breakpoint=md"]:where([data-hn-ui-site-header]) {
+      min-block-size: var(--ui-site-header-height, 4.25rem);
+      column-gap: var(--ui-space-4) !important;
+}
+:scope[data-ui-site-header-state~="breakpoint=md"]
+      .navigation:not(:empty):where([data-hn-ui-site-header]) {
+      display: flex !important;
+}
+:scope[data-ui-site-header-state~="breakpoint=md"]
+      .menu:where([data-hn-ui-site-header]) {
+      display: none !important;
+}
+}
+@media (min-width: 64rem) {
+:scope[data-ui-site-header-state~="breakpoint=lg"]:where([data-hn-ui-site-header]) {
+      min-block-size: var(--ui-site-header-height, 4.25rem);
+      column-gap: var(--ui-space-4) !important;
+}
+:scope[data-ui-site-header-state~="breakpoint=lg"]
+      .navigation:not(:empty):where([data-hn-ui-site-header]) {
+      display: flex !important;
+}
+:scope[data-ui-site-header-state~="breakpoint=lg"]
+      .menu:where([data-hn-ui-site-header]) {
+      display: none !important;
+}
+}
+:scope[hidden]:where([data-hn-ui-site-header]) {
+    display: none !important;
+}
+}
+
 /* Dimensions belong to this placeholder, never a nested or neighbouring one. */
 @property --ui-skeleton-width {
   syntax: "*";