@vielzeug/refine 2.1.0 → 2.1.2

package/dist/message-composer.js

@@ -1,13 +1,13 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { createAutoResize as t } from "./core/auto-resize.js";
-import { bindRefCallback as n } from "./core/ref-callback.js";
-import { createTextField as r } from "./core/text-field.js";
-import { createComposerControl as i } from "./core/composer.js";
-import { coarsePointerMixin as a, reducedMotionMixin as o } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as s } from "./styles/mixins/shape.css.js";
-import { disabledLoadingMixin as c } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as l, forcedColorsFocusMixin as u, forcedColorsMixin as d } from "./styles/mixins/theme.css.js";
-import { fieldVariantMixin as f } from "./styles/mixins/field-variants.css.js";
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { fieldVariantMixin as n } from "./styles/mixins/field-variants.css.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as i } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as a, forcedColorsFocusMixin as o, forcedColorsMixin as s } from "./styles/mixins/theme.css.js";
+import { createAutoResize as c } from "./core/auto-resize.js";
+import { createComposerControl as l } from "./core/composer.js";
+import { lifecycleSignal as u } from "./core/ore.js";
+import { bindRefCallback as d } from "./core/ref-callback.js";
+import { createTextField as f } from "./core/text-field.js";
 import { disablableBundle as p, loadableBundle as m, sizableBundle as h, themableBundle as g } from "./shared/prop-bundles.js";
 import { MESSAGE_COMPOSER_SIZE_PRESET as _ } from "./shared/size-presets.js";
 import { errorAttr as v } from "./inputs/shared/field-binding.js";
@@ -44,71 +44,71 @@ E(B, {
 		value: M.string(),
 		variant: M.string()
 	},
-	setup(a) {
-		let o = D(), s = P(), c = I(), l = a.disabled, u = e(A), d = N(), f = t(), p = r({
-			disabled: l,
-			error: a.error,
-			helper: a.helper,
-			maxLength: a.maxlength,
-			onInput: (e, t) => {
-				C(o, t), S(o, "input");
+	setup(e) {
+		let t = D(), n = P(), r = I(), i = e.disabled, a = u(A), o = N(), s = c(), p = f({
+			disabled: i,
+			error: e.error,
+			helper: e.helper,
+			maxLength: e.maxlength,
+			onInput: (e, n) => {
+				C(t, n), S(t, "input");
 			},
 			prefix: "composer",
-			readonly: a.readonly,
-			required: a.required,
-			signal: u,
-			value: a.value
+			readonly: e.readonly,
+			required: e.required,
+			signal: a,
+			value: e.value
 		});
-		x(o, () => p.value.value, (e) => {
+		x(t, () => p.value.value, (e) => {
 			p.value.value = e;
 		}), p.attachFormField(F({
 			disabled: p.disabled,
 			onReset: () => {
-				p.reset(), f.recompute();
+				p.reset(), s.recompute();
 			},
 			toFormValue: (e) => e,
 			validationMessage: p.validationMessage,
 			validity: p.validity,
 			value: p.value
 		}));
-		function m(e) {
-			s("send", {
-				originalEvent: e,
+		function m(t) {
+			n("send", {
+				originalEvent: t,
 				value: p.value.value.trim()
-			}) && a["clear-on-send"].value !== !1 && (p.clear(), f.recompute(), d.value?.focus());
+			}) && e["clear-on-send"].value !== !1 && (p.clear(), s.recompute(), o.value?.focus());
 		}
-		let h = i({
-			disabled: l,
-			loading: L(() => !!a.loading.value),
+		let h = l({
+			disabled: i,
+			loading: L(() => !!e.loading.value),
 			onSend: m,
-			sendShortcut: a["send-shortcut"],
+			sendShortcut: e["send-shortcut"],
 			value: p.value
 		});
-		return j(d, (e) => {
-			let t = p.wire(e), r = f.wire(e), i = n(a.ref, e), o = (e) => h.handleKeydown(e);
-			return e.addEventListener("keydown", o), () => {
-				e.removeEventListener("keydown", o), t(), r(), i();
+		return j(o, (t) => {
+			let n = p.wire(t), r = s.wire(t), i = d(e.ref, t), a = (e) => h.handleKeydown(e);
+			return t.addEventListener("keydown", a), () => {
+				t.removeEventListener("keydown", a), n(), r(), i();
 			};
 		}), T({ attr: {
 			error: v(p.errorText),
-			size: a.size,
-			success: () => a.success.value && !p.errorText.value ? !0 : void 0,
-			variant: a.variant
+			size: e.size,
+			success: () => e.success.value && !p.errorText.value ? !0 : void 0,
+			variant: e.variant
 		} }), O`
       <div class="composer" part="composer">
         <textarea
           class="field"
           part="field"
-          ref="${d}"
-          rows="${() => a.rows.value ?? 1}"
-          name="${() => a.name.value ?? ""}"
-          placeholder="${() => a.placeholder.value ?? "Message…"}"
-          maxlength="${() => a.maxlength.value}"
-          ?disabled="${l}"
-          ?readonly="${() => !!a.readonly.value}"
-          ?required="${() => !!a.required.value}"
+          ref="${o}"
+          rows="${() => e.rows.value ?? 1}"
+          name="${() => e.name.value ?? ""}"
+          placeholder="${() => e.placeholder.value ?? "Message…"}"
+          maxlength="${() => e.maxlength.value}"
+          ?disabled="${i}"
+          ?readonly="${() => !!e.readonly.value}"
+          ?required="${() => !!e.required.value}"
           value="${k(p.value)}"
-          aria-label="${() => a.label.value || "Message"}"
+          aria-label="${() => e.label.value || "Message"}"
           aria-keyshortcuts="${h.keyShortcutsHint}"
           aria-describedby="${p.ariaDescribedBy}"
           aria-errormessage="${p.ariaErrorMessage}"
@@ -121,20 +121,20 @@ E(B, {
           <div class="toolbar-end" part="toolbar-end">
             <slot name="suffix"></slot>
             <slot name="send"></slot>
-            ${() => c.has("send").value ? "" : O`
+            ${() => r.has("send").value ? "" : O`
                     <ore-button
                       class="send-btn"
                       part="send-button"
                       type="button"
                       icon-only
                       variant="solid"
-                      color="${() => a.color.value || "primary"}"
-                      size="${a.size}"
-                      label="${() => a["send-label"].value || R}"
-                      ?loading="${() => !!a.loading.value}"
+                      color="${() => e.color.value || "primary"}"
+                      size="${e.size}"
+                      label="${() => e["send-label"].value || R}"
+                      ?loading="${() => !!e.loading.value}"
                       ?disabled="${() => !h.canSend.value}"
                       @click="${(e) => h.send(e)}">
-                      <ore-icon name="${() => a["send-icon"].value || z}" size="16"></ore-icon>
+                      <ore-icon name="${() => e["send-icon"].value || z}" size="16"></ore-icon>
                     </ore-button>
                   `}
           </div>
@@ -144,15 +144,15 @@ E(B, {
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		l,
 		a,
-		o,
-		c,
-		d,
-		u(".field"),
-		s(_),
+		e,
+		t,
+		i,
+		s,
+		o(".field"),
+		r(_),
 		w,
-		f({
+		n({
 			container: ".composer",
 			text: ".field",
 			tokenPrefix: "message-composer"

package/dist/message-composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-composer.js","names":[],"sources":["../src/inputs/message-composer/message-composer.ts"],"sourcesContent":["import { define, html, prop, ref, bind, getHost, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport {\n  bindRefCallback,\n  createAutoResize,\n  createComposerControl,\n  createTextField,\n  lifecycleSignal,\n  type SendShortcut,\n} from '../../core';\nimport {\n  disablableBundle,\n  loadableBundle,\n  MESSAGE_COMPOSER_SIZE_PRESET,\n  sizableBundle,\n  themableBundle,\n} from '../../shared';\nimport {\n  colorThemeMixin,\n  coarsePointerMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderFieldStatusRegion, renderStatusIcon } from '../shared/templates';\nimport '../../content/icon/icon';\nimport '../button/button';\nimport componentStyles from './message-composer.css?inline';\n\nexport type { SendShortcut } from '../../core';\n\nconst DEFAULT_SEND_LABEL = 'Send message';\nconst SEND_ICON = 'arrow-up';\n\n/** Events emitted by the message composer */\nexport type OreMessageComposerEvents = {\n  input: InputEvent;\n  /**\n   * Fired for a send attempt (the resolved `send-shortcut` or the send button) while the\n   * composer isn't blank/disabled/loading. Cancelable — call `preventDefault()` to keep the\n   * current text in the field instead of the default clear + refocus.\n   */\n  send: { originalEvent: KeyboardEvent | MouseEvent; value: string };\n};\n\n/** Message composer properties */\nexport type OreMessageComposerProps = {\n  /** Clear the value and refocus after a non-cancelled `send` (default `true`) */\n  'clear-on-send'?: boolean;\n  /** Theme color (card focus ring + default send button color) */\n  color?: ThemeColor;\n  /** Disable the whole composer (field, slots, and send action) */\n  disabled?: boolean;\n  /** Error message shown below the field */\n  error?: string;\n  /** Stretch the composer to the full width of its container */\n  fullwidth?: boolean;\n  /** Helper text shown below the field */\n  helper?: string;\n  /** Accessible name for the field — never rendered visually, only as `aria-label` */\n  label?: string;\n  /** Blocks further sends (e.g. a send is already in flight) without disabling editing */\n  loading?: boolean;\n  /** Maximum character count; shows a counter */\n  maxlength?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the field read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts, and with\n   * `null` when it unmounts. Set as a JS property: `composer.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Require a non-blank value for native form validation */\n  required?: boolean;\n  /** Number of visible rows before auto-resize grows the field */\n  rows?: number;\n  /** Lucide icon name for the default send button (default `'arrow-up'`) */\n  'send-icon'?: string;\n  /** Accessible label for the send button (default `'Send message'`) */\n  'send-label'?: string;\n  /** Keyboard shortcut that sends: 'enter' (Shift+Enter for a newline) or 'mod+enter' (Enter always inserts a newline; Ctrl/Cmd+Enter sends) */\n  'send-shortcut'?: SendShortcut;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\n  /** Current text value */\n  value?: string;\n  /** Visual variant of the card — same variant set as `ore-textarea`, applied to the card. */\n  variant?: Exclude<VisualVariant, 'frost' | 'text'>;\n};\n\n/**\n * A message/comment composer — a card with an auto-resizing field on top and a toolbar row\n * below it, built directly on the same core primitives as `ore-textarea` (`createTextField`,\n * `createAutoResize`) rather than composing `ore-textarea` itself. Nesting a fully-styled sibling\n * component and suppressing most of its chrome (as an earlier version of this component did) is\n * a leaky composition — this owns its single `<textarea>` outright, so there's exactly one\n * implementation of the field's appearance to reason about, not two fighting each other.\n *\n * Handles the send gesture (Enter to send, Shift+Enter for a newline, or a Ctrl/Cmd+Enter\n * alternative), IME-safe composition, and clear-and-refocus after sending.\n *\n * @element ore-message-composer\n *\n * @attr {string} value - Current text value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} label - Accessible name for the field (not rendered visually)\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text shown below the field\n * @attr {string} error - Error message shown below the field\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {boolean} disabled - Disable the whole composer\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Require a non-blank value for native form validation\n * @attr {boolean} loading - Blocks further sends without disabling editing\n * @attr {number} maxlength - Max character count; shows a counter\n * @attr {number} rows - Visible rows before auto-resize grows the field (default 1)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant of the card: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {boolean} fullwidth - Stretch to the full width of the container\n * @attr {string} send-icon - Lucide icon name for the default send button (default 'arrow-up')\n * @attr {string} send-label - Accessible label for the send button (default 'Send message')\n * @attr {string} send-shortcut - 'enter' (default) | 'mod+enter'\n * @attr {boolean} clear-on-send - Clear the value and refocus after a non-cancelled send (default true)\n *\n * @fires input - Fired on every keystroke. detail: { value, originalEvent }\n * @fires send - Fired on a send attempt. Cancelable. detail: { value, originalEvent }\n *\n * @slot prefix - Content at the start of the toolbar row (e.g. an attach menu)\n * @slot suffix - Content at the end of the toolbar row, before the send button (e.g. a model picker)\n * @slot send - Replaces the default send button entirely — the only supported way to customize it\n *\n * @cssprop --message-composer-bg - Card background color\n * @cssprop --message-composer-border-color - Card border color\n * @cssprop --message-composer-radius - Card border radius\n * @cssprop --message-composer-padding - Card inner padding\n * @cssprop --message-composer-gap - Gap between the field/toolbar rows and between toolbar items\n * @cssprop --message-composer-placeholder-color - Field placeholder text color\n * @cssprop --message-composer-min-height - Minimum field height (default one line)\n * @cssprop --message-composer-hover-bg - Card background on hover (flat/ghost variants)\n * @cssprop --message-composer-hover-border-color - Card border on hover (flat/bordered variants)\n * @cssprop --message-composer-focus-bg - Card background when focused (flat variant)\n * @cssprop --message-composer-focus-border-color - Card border when focused (flat variant)\n *\n * @part composer - Root card container\n * @part field - The native `<textarea>` element\n * @part status-icon - The inline error/success icon shown inside the field\n * @part helper - Helper text element\n * @part error - Error text element (`role=\"alert\"`)\n * @part toolbar - Toolbar row below the field\n * @part toolbar-start - Toolbar group holding the `prefix` slot\n * @part toolbar-end - Toolbar group holding the `suffix` slot and the send button\n * @part send-button - The default send button (absent when the `send` slot is used)\n *\n * @example\n * ```html\n * <ore-message-composer placeholder=\"Message…\" send-shortcut=\"mod+enter\"></ore-message-composer>\n * ```\n */\nexport const MESSAGE_COMPOSER_TAG = 'ore-message-composer' as const;\ndefine<OreMessageComposerProps>(MESSAGE_COMPOSER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    'clear-on-send': prop.bool(true),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLTextAreaElement | null) => void) | null>(),\n    required: prop.bool(false),\n    rows: prop.json(undefined as number | undefined),\n    'send-icon': prop.string(),\n    'send-label': prop.string(),\n    'send-shortcut': prop.oneOf(['enter', 'mod+enter'] as const, 'enter'),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'frost' | 'text'>>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMessageComposerEvents>();\n    const slots = useSlots<'prefix' | 'send' | 'suffix'>();\n\n    const isDisabled = props.disabled;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize();\n\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      maxLength: props.maxlength,\n      onInput: (_event, value) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'composer',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    defineFieldValue(\n      el,\n      () => tf.value.value,\n      (value) => {\n        tf.value.value = value;\n      },\n    );\n\n    // Directly form-associated now that the field is owned here rather than borrowed from a\n    // nested `ore-textarea` (which previously registered with the ancestor `<form>` on this\n    // component's behalf).\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          autoResize.recompute();\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    function attemptSend(event: KeyboardEvent | MouseEvent): void {\n      const notPrevented = emit('send', { originalEvent: event, value: tf.value.value.trim() });\n\n      // `preventDefault()` on `send` means \"keep the current text — skip the default clear\n      // + refocus\" (see the event's own doc comment): both halves of that default are gated on\n      // the same condition, not just the clear.\n      if (notPrevented && props['clear-on-send'].value !== false) {\n        tf.clear();\n        autoResize.recompute();\n        textareaRef.value?.focus();\n      }\n    }\n\n    const composer = createComposerControl({\n      disabled: isDisabled,\n      loading: computed(() => Boolean(props.loading.value)),\n      onSend: attemptSend,\n      sendShortcut: props['send-shortcut'],\n      value: tf.value,\n    });\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireField = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const unwireRef = bindRefCallback(props.ref, textareaEl);\n      const handleKeydown = (e: KeyboardEvent) => composer.handleKeydown(e);\n\n      textareaEl.addEventListener('keydown', handleKeydown);\n\n      return () => {\n        textareaEl.removeEventListener('keydown', handleKeydown);\n        unwireField();\n        unwireAutoResize();\n        unwireRef();\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(tf.errorText),\n        size: props.size,\n        // Reflects `success` only once `error` is confirmed empty — keeps the two host\n        // attributes mutually exclusive even if a consumer sets both props at once.\n        success: () => (props.success.value && !tf.errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    return html`\n      <div class=\"composer\" part=\"composer\">\n        <textarea\n          class=\"field\"\n          part=\"field\"\n          ref=\"${textareaRef}\"\n          rows=\"${() => props.rows.value ?? 1}\"\n          name=\"${() => props.name.value ?? ''}\"\n          placeholder=\"${() => props.placeholder.value ?? 'Message…'}\"\n          maxlength=\"${() => props.maxlength.value}\"\n          ?disabled=\"${isDisabled}\"\n          ?readonly=\"${() => Boolean(props.readonly.value)}\"\n          ?required=\"${() => Boolean(props.required.value)}\"\n          value=\"${live(tf.value)}\"\n          aria-label=\"${() => props.label.value || 'Message'}\"\n          aria-keyshortcuts=\"${composer.keyShortcutsHint}\"\n          aria-describedby=\"${tf.ariaDescribedBy}\"\n          aria-errormessage=\"${tf.ariaErrorMessage}\"\n          aria-invalid=\"${tf.ariaInvalid}\"></textarea>\n        ${renderStatusIcon(tf.errorText)} ${renderFieldStatusRegion(tf)}\n        <div class=\"toolbar\" part=\"toolbar\">\n          <div class=\"toolbar-start\" part=\"toolbar-start\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div class=\"toolbar-end\" part=\"toolbar-end\">\n            <slot name=\"suffix\"></slot>\n            <slot name=\"send\"></slot>\n            ${() =>\n              slots.has('send').value\n                ? ''\n                : html`\n                    <ore-button\n                      class=\"send-btn\"\n                      part=\"send-button\"\n                      type=\"button\"\n                      icon-only\n                      variant=\"solid\"\n                      color=\"${() => props.color.value || 'primary'}\"\n                      size=\"${props.size}\"\n                      label=\"${() => props['send-label'].value || DEFAULT_SEND_LABEL}\"\n                      ?loading=\"${() => Boolean(props.loading.value)}\"\n                      ?disabled=\"${() => !composer.canSend.value}\"\n                      @click=\"${(e: MouseEvent) => composer.send(e)}\">\n                      <ore-icon name=\"${() => props['send-icon'].value || SEND_ICON}\" size=\"16\"></ore-icon>\n                    </ore-button>\n                  `}\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    disabledLoadingMixin,\n    forcedColorsMixin,\n    forcedColorsFocusMixin('.field'),\n    sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET),\n    componentStyles,\n    // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why\n    // (`@layer` precedence is fixed by which layer name is *first* referenced across this whole\n    // array; `componentStyles` establishes `refine.base`, which this mixin's `refine.variants`\n    // rules need to win over).\n    fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"message-composer.js","names":[],"sources":["../src/inputs/message-composer/message-composer.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  live,\n  onCleanup,\n  onElement,\n  prop,\n  ref,\n  useEmit,\n  useField,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport {\n  bindRefCallback,\n  createAutoResize,\n  createComposerControl,\n  createTextField,\n  lifecycleSignal,\n  type SendShortcut,\n} from '../../core';\nimport {\n  disablableBundle,\n  loadableBundle,\n  MESSAGE_COMPOSER_SIZE_PRESET,\n  sizableBundle,\n  themableBundle,\n} from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport { errorAttr } from '../shared/field-binding';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderFieldStatusRegion, renderStatusIcon } from '../shared/templates';\nimport '../../content/icon/icon';\nimport '../button/button';\nimport componentStyles from './message-composer.css?inline';\n\nexport type { SendShortcut } from '../../core';\n\nconst DEFAULT_SEND_LABEL = 'Send message';\nconst SEND_ICON = 'arrow-up';\n\n/** Events emitted by the message composer */\nexport type OreMessageComposerEvents = {\n  input: InputEvent;\n  /**\n   * Fired for a send attempt (the resolved `send-shortcut` or the send button) while the\n   * composer isn't blank/disabled/loading. Cancelable — call `preventDefault()` to keep the\n   * current text in the field instead of the default clear + refocus.\n   */\n  send: { originalEvent: KeyboardEvent | MouseEvent; value: string };\n};\n\n/** Message composer properties */\nexport type OreMessageComposerProps = {\n  /** Clear the value and refocus after a non-cancelled `send` (default `true`) */\n  'clear-on-send'?: boolean;\n  /** Theme color (card focus ring + default send button color) */\n  color?: ThemeColor;\n  /** Disable the whole composer (field, slots, and send action) */\n  disabled?: boolean;\n  /** Error message shown below the field */\n  error?: string;\n  /** Stretch the composer to the full width of its container */\n  fullwidth?: boolean;\n  /** Helper text shown below the field */\n  helper?: string;\n  /** Accessible name for the field — never rendered visually, only as `aria-label` */\n  label?: string;\n  /** Blocks further sends (e.g. a send is already in flight) without disabling editing */\n  loading?: boolean;\n  /** Maximum character count; shows a counter */\n  maxlength?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the field read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts, and with\n   * `null` when it unmounts. Set as a JS property: `composer.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Require a non-blank value for native form validation */\n  required?: boolean;\n  /** Number of visible rows before auto-resize grows the field */\n  rows?: number;\n  /** Lucide icon name for the default send button (default `'arrow-up'`) */\n  'send-icon'?: string;\n  /** Accessible label for the send button (default `'Send message'`) */\n  'send-label'?: string;\n  /** Keyboard shortcut that sends: 'enter' (Shift+Enter for a newline) or 'mod+enter' (Enter always inserts a newline; Ctrl/Cmd+Enter sends) */\n  'send-shortcut'?: SendShortcut;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\n  /** Current text value */\n  value?: string;\n  /** Visual variant of the card — same variant set as `ore-textarea`, applied to the card. */\n  variant?: Exclude<VisualVariant, 'frost' | 'text'>;\n};\n\n/**\n * A message/comment composer — a card with an auto-resizing field on top and a toolbar row\n * below it, built directly on the same core primitives as `ore-textarea` (`createTextField`,\n * `createAutoResize`) rather than composing `ore-textarea` itself. Nesting a fully-styled sibling\n * component and suppressing most of its chrome (as an earlier version of this component did) is\n * a leaky composition — this owns its single `<textarea>` outright, so there's exactly one\n * implementation of the field's appearance to reason about, not two fighting each other.\n *\n * Handles the send gesture (Enter to send, Shift+Enter for a newline, or a Ctrl/Cmd+Enter\n * alternative), IME-safe composition, and clear-and-refocus after sending.\n *\n * @element ore-message-composer\n *\n * @attr {string} value - Current text value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} label - Accessible name for the field (not rendered visually)\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text shown below the field\n * @attr {string} error - Error message shown below the field\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {boolean} disabled - Disable the whole composer\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Require a non-blank value for native form validation\n * @attr {boolean} loading - Blocks further sends without disabling editing\n * @attr {number} maxlength - Max character count; shows a counter\n * @attr {number} rows - Visible rows before auto-resize grows the field (default 1)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant of the card: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {boolean} fullwidth - Stretch to the full width of the container\n * @attr {string} send-icon - Lucide icon name for the default send button (default 'arrow-up')\n * @attr {string} send-label - Accessible label for the send button (default 'Send message')\n * @attr {string} send-shortcut - 'enter' (default) | 'mod+enter'\n * @attr {boolean} clear-on-send - Clear the value and refocus after a non-cancelled send (default true)\n *\n * @fires input - Fired on every keystroke. detail: { value, originalEvent }\n * @fires send - Fired on a send attempt. Cancelable. detail: { value, originalEvent }\n *\n * @slot prefix - Content at the start of the toolbar row (e.g. an attach menu)\n * @slot suffix - Content at the end of the toolbar row, before the send button (e.g. a model picker)\n * @slot send - Replaces the default send button entirely — the only supported way to customize it\n *\n * @cssprop --message-composer-bg - Card background color\n * @cssprop --message-composer-border-color - Card border color\n * @cssprop --message-composer-radius - Card border radius\n * @cssprop --message-composer-padding - Card inner padding\n * @cssprop --message-composer-gap - Gap between the field/toolbar rows and between toolbar items\n * @cssprop --message-composer-placeholder-color - Field placeholder text color\n * @cssprop --message-composer-min-height - Minimum field height (default one line)\n * @cssprop --message-composer-hover-bg - Card background on hover (flat/ghost variants)\n * @cssprop --message-composer-hover-border-color - Card border on hover (flat/bordered variants)\n * @cssprop --message-composer-focus-bg - Card background when focused (flat variant)\n * @cssprop --message-composer-focus-border-color - Card border when focused (flat variant)\n *\n * @part composer - Root card container\n * @part field - The native `<textarea>` element\n * @part status-icon - The inline error/success icon shown inside the field\n * @part helper - Helper text element\n * @part error - Error text element (`role=\"alert\"`)\n * @part toolbar - Toolbar row below the field\n * @part toolbar-start - Toolbar group holding the `prefix` slot\n * @part toolbar-end - Toolbar group holding the `suffix` slot and the send button\n * @part send-button - The default send button (absent when the `send` slot is used)\n *\n * @example\n * ```html\n * <ore-message-composer placeholder=\"Message…\" send-shortcut=\"mod+enter\"></ore-message-composer>\n * ```\n */\nexport const MESSAGE_COMPOSER_TAG = 'ore-message-composer' as const;\ndefine<OreMessageComposerProps>(MESSAGE_COMPOSER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    'clear-on-send': prop.bool(true),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLTextAreaElement | null) => void) | null>(),\n    required: prop.bool(false),\n    rows: prop.json(undefined as number | undefined),\n    'send-icon': prop.string(),\n    'send-label': prop.string(),\n    'send-shortcut': prop.oneOf(['enter', 'mod+enter'] as const, 'enter'),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'frost' | 'text'>>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMessageComposerEvents>();\n    const slots = useSlots<'prefix' | 'send' | 'suffix'>();\n\n    const isDisabled = props.disabled;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize();\n\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      maxLength: props.maxlength,\n      onInput: (_event, value) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'composer',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    defineFieldValue(\n      el,\n      () => tf.value.value,\n      (value) => {\n        tf.value.value = value;\n      },\n    );\n\n    // Directly form-associated now that the field is owned here rather than borrowed from a\n    // nested `ore-textarea` (which previously registered with the ancestor `<form>` on this\n    // component's behalf).\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          autoResize.recompute();\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    function attemptSend(event: KeyboardEvent | MouseEvent): void {\n      const notPrevented = emit('send', { originalEvent: event, value: tf.value.value.trim() });\n\n      // `preventDefault()` on `send` means \"keep the current text — skip the default clear\n      // + refocus\" (see the event's own doc comment): both halves of that default are gated on\n      // the same condition, not just the clear.\n      if (notPrevented && props['clear-on-send'].value !== false) {\n        tf.clear();\n        autoResize.recompute();\n        textareaRef.value?.focus();\n      }\n    }\n\n    const composer = createComposerControl({\n      disabled: isDisabled,\n      loading: computed(() => Boolean(props.loading.value)),\n      onSend: attemptSend,\n      sendShortcut: props['send-shortcut'],\n      value: tf.value,\n    });\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireField = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const unwireRef = bindRefCallback(props.ref, textareaEl);\n      const handleKeydown = (e: KeyboardEvent) => composer.handleKeydown(e);\n\n      textareaEl.addEventListener('keydown', handleKeydown);\n\n      return () => {\n        textareaEl.removeEventListener('keydown', handleKeydown);\n        unwireField();\n        unwireAutoResize();\n        unwireRef();\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(tf.errorText),\n        size: props.size,\n        // Reflects `success` only once `error` is confirmed empty — keeps the two host\n        // attributes mutually exclusive even if a consumer sets both props at once.\n        success: () => (props.success.value && !tf.errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    return html`\n      <div class=\"composer\" part=\"composer\">\n        <textarea\n          class=\"field\"\n          part=\"field\"\n          ref=\"${textareaRef}\"\n          rows=\"${() => props.rows.value ?? 1}\"\n          name=\"${() => props.name.value ?? ''}\"\n          placeholder=\"${() => props.placeholder.value ?? 'Message…'}\"\n          maxlength=\"${() => props.maxlength.value}\"\n          ?disabled=\"${isDisabled}\"\n          ?readonly=\"${() => Boolean(props.readonly.value)}\"\n          ?required=\"${() => Boolean(props.required.value)}\"\n          value=\"${live(tf.value)}\"\n          aria-label=\"${() => props.label.value || 'Message'}\"\n          aria-keyshortcuts=\"${composer.keyShortcutsHint}\"\n          aria-describedby=\"${tf.ariaDescribedBy}\"\n          aria-errormessage=\"${tf.ariaErrorMessage}\"\n          aria-invalid=\"${tf.ariaInvalid}\"></textarea>\n        ${renderStatusIcon(tf.errorText)} ${renderFieldStatusRegion(tf)}\n        <div class=\"toolbar\" part=\"toolbar\">\n          <div class=\"toolbar-start\" part=\"toolbar-start\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div class=\"toolbar-end\" part=\"toolbar-end\">\n            <slot name=\"suffix\"></slot>\n            <slot name=\"send\"></slot>\n            ${() =>\n              slots.has('send').value\n                ? ''\n                : html`\n                    <ore-button\n                      class=\"send-btn\"\n                      part=\"send-button\"\n                      type=\"button\"\n                      icon-only\n                      variant=\"solid\"\n                      color=\"${() => props.color.value || 'primary'}\"\n                      size=\"${props.size}\"\n                      label=\"${() => props['send-label'].value || DEFAULT_SEND_LABEL}\"\n                      ?loading=\"${() => Boolean(props.loading.value)}\"\n                      ?disabled=\"${() => !composer.canSend.value}\"\n                      @click=\"${(e: MouseEvent) => composer.send(e)}\">\n                      <ore-icon name=\"${() => props['send-icon'].value || SEND_ICON}\" size=\"16\"></ore-icon>\n                    </ore-button>\n                  `}\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    disabledLoadingMixin,\n    forcedColorsMixin,\n    forcedColorsFocusMixin('.field'),\n    sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET),\n    componentStyles,\n    // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why\n    // (`@layer` precedence is fixed by which layer name is *first* referenced across this whole\n    // array; `componentStyles` establishes `refine.base`, which this mixin's `refine.variants`\n    // rules need to win over).\n    fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n  ],\n});\n"],"mappings":"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"}

package/dist/navbar.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./utils/link.cjs"),a=require("./layout/navbar/navbar.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/ripple/watch");var l=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},u=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,d=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},f=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},p=e=>{let t=f(e)?.clientWidth??0;return t>0?t:e.offsetWidth},m=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},h=(0,o.createContext)(`NavbarContext`),g=`ore-navbar`;(0,o.define)(g,{props:{breakpoint:o.prop.string(`(max-width: 768px)`),color:o.prop.string(),"container-breakpoints":o.prop.bool(!1),elevation:o.prop.number(),floating:o.prop.bool(!1),label:o.prop.string(`Main navigation`),"mobile-sidebar":o.prop.string(),rounded:o.prop.string(),"scroll-threshold":o.prop.number(80),sticky:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),i=r.has(`logo`),a=r.elements(`mobile-menu`),g=(0,s.signal)(!1),_=(0,s.signal)(null),v=(0,s.signal)(!1),y=(0,s.signal)(!1),b=(0,s.signal)(!1),x=(0,s.signal)(!1),S=(0,s.signal)(!1),C=(0,s.signal)(!1),w=(0,s.signal)(0),T=(0,s.signal)(!1),E=(0,s.signal)(!1),D=(0,s.signal)(d(e.breakpoint.value)),O=(0,s.signal)(!1),k=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};(0,o.provide)(h,{closeMobileMenu:()=>M(),isMobile:(0,s.computed)(()=>b.value),mobileMenuOpen:(0,s.computed)(()=>x.value)});let A=()=>{if(e.floating.value&&e.sticky.value)return C.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},j=e=>{let t=!!e;if(!g.value){let e=_.value??k();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!g.value||x.value!==t&&(x.value=t,n(`mobile-menu-change`,{open:t}))},M=()=>j(!1),N=()=>j(!0),P=()=>{if(!g.value){let e=_.value??k();if(e){typeof e.toggleMobile==`function`?e.toggleMobile():typeof e.openMobile==`function`&&typeof e.closeMobile==`function`&&(e.hasAttribute(`data-mobile-open`)?e.closeMobile():e.openMobile());return}}j(!x.value)},F=()=>{let e=(_.value&&!g.value?v.value:!1)||T.value||E.value;b.value=e,e||M()},I=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,L=e=>{w.value=I(e)},R=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){C.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=I(t)-w.value;C.value=r>n};return(0,o.bind)({attr:{"data-mobile":()=>b.value?!0:void 0,"data-mobile-open":()=>b.value&&x.value?!0:void 0,"data-mode":()=>A()??null,"data-mode-transitioning":()=>S.value?!0:void 0,"data-preview-mode":()=>O.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&C.value?!0:void 0}}),(0,o.onMounted)(()=>{let n=t,r=m(t);n.closeMobileMenu=M,n.openMobileMenu=N,n.toggleMobileMenu=P;let i=l(window,`scroll`,()=>{R(r)},{passive:!0}),h=r?l(r,`scroll`,()=>{R(r)},{passive:!0}):void 0,b=l(t,`keydown`,e=>{e.key!==`Escape`||!x.value||M()}),w,j,I,z,B=()=>{if(j?.(),j=void 0,_.value=null,v.value=!1,y.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=k();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{k()&&B()});r.observe(n,{childList:!0,subtree:!0}),j=()=>r.disconnect();return}let r=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-mobile-open`);v.value=t,y.value=e?.detail?e.detail.open:r,y.value&&!v.value&&(v.value=!0),F()},i=new MutationObserver(()=>{r()});r(),i.observe(n,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),n.addEventListener(`mobile-open-change`,r),j=()=>{i.disconnect(),n.removeEventListener(`mobile-open-change`,r)},_.value=n},V=()=>{S.value=!0,I!=null&&clearTimeout(I),I=setTimeout(()=>{S.value=!1,I=void 0},220)},H=(0,c.watch)((0,s.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){C.value&&=!1,S.value&&=!1,z=void 0,I!=null&&(clearTimeout(I),I=void 0);return}L(r),R(r),z=A()},{immediate:!0}),U=(0,c.watch)(e[`mobile-sidebar`],()=>{B()},{immediate:!0}),W=(0,c.watch)((0,s.computed)(()=>A()),t=>{if(!(e.floating.value&&e.sticky.value)){z=t??void 0;return}let n=t??void 0;z&&n&&z!==n&&V(),z=n},{immediate:!0}),G=(0,c.watch)(g,e=>{!e&&x.value&&M()},{immediate:!0}),K=()=>{g.value=a.value.some(u)},q=(0,c.watch)(a,K,{immediate:!0}),J=new MutationObserver(()=>{K()});J.observe(t,{childList:!0,subtree:!0}),(0,c.watch)(e.breakpoint,n=>{w?.(),w=void 0;let r=String(n??``).trim();D.value=d(r),T.value=!1;let i=p(t);if(E.value=i>0&&D.value!=null&&i<=D.value,F(),e[`container-breakpoints`].value&&D.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{T.value=e,F()},s=e=>{o(e.matches)};o(a.matches),a.addEventListener(`change`,s),w=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let Y=typeof ResizeObserver==`function`?(()=>{let e=(0,o.resizeObserver)(t),n=t.parentElement,r=f(t),i=n?(0,o.resizeObserver)(n):void 0,a=r&&r!==n?(0,o.resizeObserver)(r):void 0;return(0,c.watch)((0,s.computed)(()=>[e.value.width,e.value.height,i?.value.width,i?.value.height,a?.value.width,a?.value.height]),()=>{let e=p(t),n=f(t)?.clientWidth??0;E.value=e>0&&D.value!=null&&e<=D.value,O.value=n>0&&n<window.innerWidth,F()})})():void 0;return()=>{b?.(),i?.(),h?.(),H?.dispose(),W?.dispose(),G?.dispose(),q?.dispose(),U?.dispose(),J.disconnect(),w?.(),j?.(),Y?.dispose(),I!=null&&(clearTimeout(I),I=void 0)}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./utils/link.cjs"),a=require("./layout/navbar/navbar.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},l=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,u=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},d=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},f=e=>{let t=d(e)?.clientWidth??0;return t>0?t:e.offsetWidth},p=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},m=(0,o.createContext)(`NavbarContext`),h=`ore-navbar`;(0,o.define)(h,{props:{breakpoint:o.prop.string(`(max-width: 768px)`),color:o.prop.string(),"container-breakpoints":o.prop.bool(!1),elevation:o.prop.number(),floating:o.prop.bool(!1),label:o.prop.string(`Main navigation`),"mobile-sidebar":o.prop.string(),rounded:o.prop.string(),"scroll-threshold":o.prop.number(80),sticky:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),i=r.has(`logo`),a=r.elements(`mobile-menu`),h=(0,s.signal)(!1),g=(0,s.signal)(null),_=(0,s.signal)(!1),v=(0,s.signal)(!1),y=(0,s.signal)(!1),b=(0,s.signal)(!1),x=(0,s.signal)(!1),S=(0,s.signal)(!1),C=(0,s.signal)(0),w=(0,s.signal)(!1),T=(0,s.signal)(!1),E=(0,s.signal)(u(e.breakpoint.value)),D=(0,s.signal)(!1),O=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};(0,o.provide)(m,{closeMobileMenu:()=>j(),isMobile:(0,s.computed)(()=>y.value),mobileMenuOpen:(0,s.computed)(()=>b.value)});let k=()=>{if(e.floating.value&&e.sticky.value)return S.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},A=e=>{let t=!!e;if(!h.value){let e=g.value??O();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!h.value||b.value!==t&&(b.value=t,n(`mobile-menu-change`,{open:t}))},j=()=>A(!1),M=()=>A(!0),N=()=>{if(!h.value){let e=g.value??O();if(e){typeof e.toggleMobile==`function`?e.toggleMobile():typeof e.openMobile==`function`&&typeof e.closeMobile==`function`&&(e.hasAttribute(`data-mobile-open`)?e.closeMobile():e.openMobile());return}}A(!b.value)},P=()=>{let e=(g.value&&!h.value?_.value:!1)||w.value||T.value;y.value=e,e||j()},F=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,I=e=>{C.value=F(e)},L=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){S.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=F(t)-C.value;S.value=r>n};return(0,o.bind)({attr:{"data-mobile":()=>y.value?!0:void 0,"data-mobile-open":()=>y.value&&b.value?!0:void 0,"data-mode":()=>k()??null,"data-mode-transitioning":()=>x.value?!0:void 0,"data-preview-mode":()=>D.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&S.value?!0:void 0}}),(0,o.onMounted)(()=>{let n=t,r=p(t);n.closeMobileMenu=j,n.openMobileMenu=M,n.toggleMobileMenu=N;let i=c(window,`scroll`,()=>{L(r)},{passive:!0}),m=r?c(r,`scroll`,()=>{L(r)},{passive:!0}):void 0,y=c(t,`keydown`,e=>{e.key!==`Escape`||!b.value||j()}),C,A,F,R,z=()=>{if(A?.(),A=void 0,g.value=null,_.value=!1,v.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=O();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{O()&&z()});r.observe(n,{childList:!0,subtree:!0}),A=()=>r.disconnect();return}let r=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-mobile-open`);_.value=t,v.value=e?.detail?e.detail.open:r,v.value&&!_.value&&(_.value=!0),P()},i=new MutationObserver(()=>{r()});r(),i.observe(n,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),n.addEventListener(`mobile-open-change`,r),A=()=>{i.disconnect(),n.removeEventListener(`mobile-open-change`,r)},g.value=n},B=()=>{x.value=!0,F!=null&&clearTimeout(F),F=setTimeout(()=>{x.value=!1,F=void 0},220)},V=(0,s.watch)((0,s.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){S.value&&=!1,x.value&&=!1,R=void 0,F!=null&&(clearTimeout(F),F=void 0);return}I(r),L(r),R=k()},{immediate:!0}),H=(0,s.watch)(e[`mobile-sidebar`],()=>{z()},{immediate:!0}),U=(0,s.watch)((0,s.computed)(()=>k()),t=>{if(!(e.floating.value&&e.sticky.value)){R=t??void 0;return}let n=t??void 0;R&&n&&R!==n&&B(),R=n},{immediate:!0}),W=(0,s.watch)(h,e=>{!e&&b.value&&j()},{immediate:!0}),G=()=>{h.value=a.value.some(l)},K=(0,s.watch)(a,G,{immediate:!0}),q=new MutationObserver(()=>{G()});q.observe(t,{childList:!0,subtree:!0}),(0,s.watch)(e.breakpoint,n=>{C?.(),C=void 0;let r=String(n??``).trim();E.value=u(r),w.value=!1;let i=f(t);if(T.value=i>0&&E.value!=null&&i<=E.value,P(),e[`container-breakpoints`].value&&E.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{w.value=e,P()},s=e=>{o(e.matches)};o(a.matches),a.addEventListener(`change`,s),C=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let J=typeof ResizeObserver==`function`?(()=>{let e=(0,o.resizeObserver)(t),n=t.parentElement,r=d(t),i=n?(0,o.resizeObserver)(n):void 0,a=r&&r!==n?(0,o.resizeObserver)(r):void 0;return(0,s.watch)((0,s.computed)(()=>[e.value.width,e.value.height,i?.value.width,i?.value.height,a?.value.width,a?.value.height]),()=>{let e=f(t),n=d(t)?.clientWidth??0;T.value=e>0&&E.value!=null&&e<=E.value,D.value=n>0&&n<window.innerWidth,P()})})():void 0;return()=>{y?.(),i?.(),m?.(),V?.dispose(),U?.dispose(),W?.dispose(),K?.dispose(),H?.dispose(),q.disconnect(),C?.(),A?.(),J?.dispose(),F!=null&&(clearTimeout(F),F=void 0)}}),o.html`
       <nav part="nav" aria-label="${e.label}">
         <div class="navbar" part="bar">
           <div class="navbar-logo" part="logo" ?hidden=${()=>!i.value}>
@@ -21,13 +21,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             class="mobile-toggle"
             part="mobile-toggle"
             type="button"
-            aria-label="${()=>g.value?x.value?`Close navigation menu`:`Open navigation menu`:y.value?`Close navigation menu`:`Open navigation menu`}"
+            aria-label="${()=>h.value?b.value?`Close navigation menu`:`Open navigation menu`:v.value?`Close navigation menu`:`Open navigation menu`}"
             aria-controls="mobile-menu-panel"
-            aria-expanded="${()=>String(g.value?x.value:y.value)}"
-            ?hidden=${()=>!b.value||!g.value&&!_.value}
-            @click="${P}">
+            aria-expanded="${()=>String(h.value?b.value:v.value)}"
+            ?hidden=${()=>!y.value||!h.value&&!g.value}
+            @click="${N}">
             <ore-icon
-              name="${()=>(g.value?x.value:y.value)?`x`:`menu`}"
+              name="${()=>(h.value?b.value:v.value)?`x`:`menu`}"
               size="18"
               stroke-width="2.5"
               aria-hidden="true"></ore-icon>
@@ -40,11 +40,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="mobile-menu"
           role="navigation"
           aria-label="${()=>`${e.label.value} mobile menu`}"
-          ?hidden=${()=>!b.value||!x.value||!g.value}>
+          ?hidden=${()=>!y.value||!b.value||!h.value}>
           <slot name="mobile-menu"></slot>
         </div>
       </nav>
-    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),a.default]});var _=`ore-navbar-item`;(0,o.define)(_,{props:{active:o.prop.bool(!1),disabled:o.prop.bool(!1),href:o.prop.string(),"icon-only":o.prop.bool(!1),rel:o.prop.string(),target:o.prop.string()},setup(e){let t=(0,o.useSlots)(),n=()=>t.has(`icon`).value,r=()=>t.has(`end`).value,a=(0,o.inject)(h);(0,o.bind)({attr:{"navbar-mobile":()=>a?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>a?.mobileMenuOpen.value?!0:void 0}});let c=()=>!!e.href.value&&!e.disabled.value,l=(0,s.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),u=()=>{a?.mobileMenuOpen.value&&a.closeMobileMenu()},d=()=>o.html`
+    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),a.default]});var g=`ore-navbar-item`;(0,o.define)(g,{props:{active:o.prop.bool(!1),disabled:o.prop.bool(!1),href:o.prop.string(),"icon-only":o.prop.bool(!1),rel:o.prop.string(),target:o.prop.string()},setup(e){let t=(0,o.useSlots)(),n=()=>t.has(`icon`).value,r=()=>t.has(`end`).value,a=(0,o.inject)(m);(0,o.bind)({attr:{"navbar-mobile":()=>a?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>a?.mobileMenuOpen.value?!0:void 0}});let c=()=>!!e.href.value&&!e.disabled.value,l=(0,s.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),u=()=>{a?.mobileMenuOpen.value&&a.closeMobileMenu()},d=()=>o.html`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!n()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -69,5 +69,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           `:o.html`
           <button class="item" part="item" type="button" @click=${u}>${d()}</button>
         `}
-    `},styles:[e.coarsePointerMixin,a.default]}),exports.NAVBAR_CTX=h,exports.NAVBAR_ITEM_TAG=_,exports.NAVBAR_TAG=g;
+    `},styles:[e.coarsePointerMixin,a.default]}),exports.NAVBAR_CTX=m,exports.NAVBAR_ITEM_TAG=g,exports.NAVBAR_TAG=h;
 //# sourceMappingURL=navbar.cjs.map

package/dist/navbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.cjs","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n  createContext,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onMounted,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n  el: EventTarget | null | undefined,\n  name: string,\n  handler: (e: E) => void,\n  options?: AddEventListenerOptions,\n): (() => void) => {\n  if (!el) return () => {};\n\n  el.addEventListener(name, handler as EventListener, options);\n\n  return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n  if (!(el instanceof HTMLElement)) return true;\n\n  if (el.tagName.includes('-')) return true;\n\n  if (el.childElementCount > 0) return true;\n\n  return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n  const value = String(query ?? '').trim();\n\n  if (!value) return undefined;\n\n  const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n  if (!match) return undefined;\n\n  const parsed = Number.parseFloat(match[1]);\n\n  return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n  let container = el.parentElement;\n\n  while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n    container = container.parentElement;\n  }\n\n  return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n  if (parentWidth > 0) return parentWidth;\n\n  return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n  let current: HTMLElement | null = start.parentElement;\n\n  while (current) {\n    const styles = window.getComputedStyle(current);\n    const overflowY = styles.overflowY;\n\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n      return current;\n    }\n\n    current = current.parentElement;\n  }\n\n  return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n  closeMobileMenu: () => void;\n  isMobile: Readable<boolean>;\n  mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n  'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n  OreNavbarProps & {\n    closeMobileMenu(): void;\n    openMobileMenu(): void;\n    toggleMobileMenu(): void;\n  };\n\ntype MobileSidebarElement = HTMLElement & {\n  closeMobile?: () => void;\n  openMobile?: () => void;\n  toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n  /** CSS media query used for mobile layout switching */\n  breakpoint?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Evaluate mobile breakpoint against container width only when possible. */\n  'container-breakpoints'?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Start as detached floating navbar */\n  floating?: boolean;\n  /** Accessible nav landmark label */\n  label?: string;\n  /** CSS selector for an external sidebar toggled by the mobile button */\n  'mobile-sidebar'?: string;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Scroll threshold in px used by floating+sticky transition */\n  'scroll-threshold'?: number;\n  /** Stick to top of viewport */\n  sticky?: boolean;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n  /** Whether this item represents the current page */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Link target URL. Renders an anchor when provided. */\n  href?: string;\n  /**\n   * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n   * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n   * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n   * otherwise the empty label still reserves its inter-element gap and the item ends up\n   * with lopsided padding around the icon.\n   */\n  'icon-only'?: boolean;\n  /** Relationship of linked URL (anchor-only) */\n  rel?: string;\n  /** Browsing context for link (anchor-only) */\n  target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n *   <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n *   <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n *   <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n *   <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n  props: {\n    breakpoint: prop.string('(max-width: 768px)'),\n    color: prop.string<ThemeColor>(),\n    'container-breakpoints': prop.bool(false),\n    elevation: prop.number<ElevationLevel>(),\n    floating: prop.bool(false),\n    label: prop.string('Main navigation'),\n    'mobile-sidebar': prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    'scroll-threshold': prop.number(80),\n    sticky: prop.bool(false),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreNavbarEvents>();\n    const slots = useSlots();\n\n    const hasLogo = slots.has('logo');\n    const mobileMenuElements = slots.elements('mobile-menu');\n    const hasMobileMenu = signal(false);\n    const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n    const isExternalMobileMode = signal(false);\n    const isExternalMobileOpen = signal(false);\n    const isMobile = signal(false);\n    const isMobileMenuOpen = signal(false);\n    const isModeTransitioning = signal(false);\n    const isScrolled = signal(false);\n    const scrollBase = signal(0);\n    const mediaMatches = signal(false);\n    const sizeMatches = signal(false);\n    const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n    const isPreviewMode = signal(false);\n\n    const getExternalSidebar = () => {\n      const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n      if (!selector) return null;\n\n      const root = el.getRootNode();\n      const scopedTarget =\n        root instanceof ShadowRoot || root instanceof Document\n          ? (root.querySelector(selector) as MobileSidebarElement | null)\n          : null;\n\n      return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n    };\n\n    provide(NAVBAR_CTX, {\n      // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n      // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n      closeMobileMenu: () => closeMobileMenu(),\n      isMobile: computed(() => isMobile.value) as Readable<boolean>,\n      mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n    });\n\n    const computeMode = (): NavbarMode | undefined => {\n      if (props.floating.value && props.sticky.value) {\n        return isScrolled.value ? 'sticky' : 'floating';\n      }\n\n      if (props.floating.value) return 'floating';\n\n      if (props.sticky.value) return 'sticky';\n\n      return undefined;\n    };\n\n    const setMobileMenu = (next: boolean) => {\n      const open = Boolean(next);\n\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (open) {\n            target.openMobile?.();\n          } else {\n            target.closeMobile?.();\n          }\n\n          return;\n        }\n      }\n\n      if (open && !hasMobileMenu.value) return;\n\n      if (isMobileMenuOpen.value === open) return;\n\n      isMobileMenuOpen.value = open;\n      emit('mobile-menu-change', { open });\n    };\n\n    const closeMobileMenu = () => setMobileMenu(false);\n    const openMobileMenu = () => setMobileMenu(true);\n    const toggleMobileMenu = () => {\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (typeof target.toggleMobile === 'function') {\n            target.toggleMobile();\n          } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n            const isOpen = target.hasAttribute('data-mobile-open');\n\n            if (isOpen) target.closeMobile();\n            else target.openMobile();\n          }\n\n          return;\n        }\n      }\n\n      setMobileMenu(!isMobileMenuOpen.value);\n    };\n\n    const syncMobileMode = () => {\n      const next =\n        (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n        mediaMatches.value ||\n        sizeMatches.value;\n\n      isMobile.value = next;\n\n      if (!next) closeMobileMenu();\n    };\n\n    const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n      if (scrollContainer) {\n        return scrollContainer.scrollTop || 0;\n      }\n\n      return window.scrollY || document.documentElement.scrollTop || 0;\n    };\n\n    const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n      scrollBase.value = readScrollOffset(scrollContainer);\n    };\n\n    const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n      if (!(props.floating.value && props.sticky.value)) {\n        if (isScrolled.value) isScrolled.value = false;\n\n        return;\n      }\n\n      const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n      const currentOffset = readScrollOffset(scrollContainer);\n      const delta = currentOffset - scrollBase.value;\n\n      isScrolled.value = delta > threshold;\n    };\n\n    bind({\n      attr: {\n        'data-mobile': () => (isMobile.value ? true : undefined),\n        'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n        'data-mode': () => computeMode() ?? null,\n        'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n        'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n        'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const navbarEl = el as NavbarElement;\n      const scrollContainer = findScrollContainer(el);\n\n      navbarEl.closeMobileMenu = closeMobileMenu;\n      navbarEl.openMobileMenu = openMobileMenu;\n      navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n      const stopScroll = listen(\n        window,\n        'scroll',\n        () => {\n          updateScrolled(scrollContainer);\n        },\n        { passive: true },\n      );\n      const stopContainerScroll = scrollContainer\n        ? listen(\n            scrollContainer,\n            'scroll',\n            () => {\n              updateScrolled(scrollContainer);\n            },\n            { passive: true },\n          )\n        : undefined;\n      const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n        closeMobileMenu();\n      });\n\n      let mediaCleanup: (() => void) | undefined;\n      let mobileSidebarCleanup: (() => void) | undefined;\n      let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n      let previousMode: NavbarMode | undefined;\n\n      const resolveMobileSidebarTarget = () => {\n        mobileSidebarCleanup?.();\n        mobileSidebarCleanup = undefined;\n        mobileSidebarTarget.value = null;\n        isExternalMobileMode.value = false;\n        isExternalMobileOpen.value = false;\n\n        if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n        const target = getExternalSidebar();\n\n        if (!target) {\n          const root = el.getRootNode();\n          const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n          const discoveryObserver = new MutationObserver(() => {\n            if (getExternalSidebar()) resolveMobileSidebarTarget();\n          });\n\n          discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n          mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n          return;\n        }\n\n        const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n          const hasBottomNav = target.hasAttribute('data-bottom-nav');\n          const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n          isExternalMobileMode.value = hasBottomNav;\n          isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n          // If the sidebar is reporting it's open, it must be in bottom-nav mode\n          // (either natural or forced). We honor this to avoid race conditions\n          // where attributes haven't reflected yet.\n          if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n            isExternalMobileMode.value = true;\n          }\n\n          syncMobileMode();\n        };\n\n        const targetObserver = new MutationObserver(() => {\n          syncTargetState();\n        });\n\n        syncTargetState();\n        targetObserver.observe(target, {\n          attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n          attributes: true,\n        });\n        target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n        mobileSidebarCleanup = () => {\n          targetObserver.disconnect();\n          target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n        };\n        mobileSidebarTarget.value = target;\n      };\n\n      const triggerModeTransition = () => {\n        isModeTransitioning.value = true;\n\n        if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n        modeTransitionTimeout = setTimeout(() => {\n          isModeTransitioning.value = false;\n          modeTransitionTimeout = undefined;\n        }, 220);\n      };\n\n      const stopModeWatch = watch(\n        computed(() => props.floating.value && props.sticky.value),\n        (enabled) => {\n          if (!enabled) {\n            if (isScrolled.value) isScrolled.value = false;\n\n            if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n            previousMode = undefined;\n\n            if (modeTransitionTimeout != null) {\n              clearTimeout(modeTransitionTimeout);\n              modeTransitionTimeout = undefined;\n            }\n\n            return;\n          }\n\n          resetScrollBase(scrollContainer);\n          updateScrolled(scrollContainer);\n\n          const currentMode = computeMode();\n\n          previousMode = currentMode;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileSidebarWatch = watch(\n        props['mobile-sidebar'],\n        () => {\n          resolveMobileSidebarTarget();\n        },\n        { immediate: true },\n      );\n\n      const stopModeTransitionWatch = watch(\n        computed(() => computeMode()),\n        (nextMode) => {\n          const comboEnabled = props.floating.value && props.sticky.value;\n\n          if (!comboEnabled) {\n            previousMode = nextMode ?? undefined;\n\n            return;\n          }\n\n          const next = nextMode ?? undefined;\n\n          if (previousMode && next && previousMode !== next) {\n            triggerModeTransition();\n          }\n\n          previousMode = next;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileMenuSlotWatch = watch(\n        hasMobileMenu,\n        (hasContent) => {\n          if (!hasContent && isMobileMenuOpen.value) {\n            closeMobileMenu();\n          }\n        },\n        { immediate: true },\n      );\n      const syncMobileMenuContent = () => {\n        hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n      };\n      const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n      const mobileMenuContentObserver = new MutationObserver(() => {\n        syncMobileMenuContent();\n      });\n\n      // Parser-created demo content can populate an already-assigned slot wrapper after this\n      // custom element connects; `slotchange` alone does not observe that nested content.\n      mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n      watch(\n        props.breakpoint,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n          mediaMatches.value = false;\n\n          const width = readContainerWidth(el);\n\n          sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n          syncMobileMode();\n\n          if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n            return;\n          }\n\n          if (!mediaQuery) {\n            return;\n          }\n\n          if (typeof window.matchMedia !== 'function') {\n            return;\n          }\n\n          const mql = window.matchMedia(mediaQuery);\n          const syncMedia = (next: boolean) => {\n            mediaMatches.value = next;\n            syncMobileMode();\n          };\n          const onChange = (event: MediaQueryListEvent) => {\n            syncMedia(event.matches);\n          };\n\n          syncMedia(mql.matches);\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      const stopResizeEffect =\n        typeof ResizeObserver === 'function'\n          ? (() => {\n              const hostSize = resizeObserver(el);\n              const wrapperEl = el.parentElement;\n              const containerEl = resolveContainerElement(el);\n              const wrapperSize = wrapperEl ? resizeObserver(wrapperEl) : undefined;\n              const parentSize = containerEl && containerEl !== wrapperEl ? resizeObserver(containerEl) : undefined;\n\n              return watch(\n                computed(() => [\n                  hostSize.value.width,\n                  hostSize.value.height,\n                  wrapperSize?.value.width,\n                  wrapperSize?.value.height,\n                  parentSize?.value.width,\n                  parentSize?.value.height,\n                ]),\n                () => {\n                  const width = readContainerWidth(el);\n                  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n                  sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n                  isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n                  syncMobileMode();\n                },\n              );\n            })()\n          : undefined;\n\n      return () => {\n        stopEscape?.();\n        stopScroll?.();\n        stopContainerScroll?.();\n        stopModeWatch?.dispose();\n        stopModeTransitionWatch?.dispose();\n        stopMobileMenuSlotWatch?.dispose();\n        stopMobileMenuElementsWatch?.dispose();\n        stopMobileSidebarWatch?.dispose();\n        mobileMenuContentObserver.disconnect();\n        mediaCleanup?.();\n        mobileSidebarCleanup?.();\n        stopResizeEffect?.dispose();\n\n        if (modeTransitionTimeout != null) {\n          clearTimeout(modeTransitionTimeout);\n          modeTransitionTimeout = undefined;\n        }\n      };\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <div class=\"navbar\" part=\"bar\">\n          <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n            <slot name=\"logo\"></slot>\n          </div>\n\n          <div class=\"navbar-start\" part=\"start\">\n            <slot name=\"start\"></slot>\n          </div>\n\n          <div class=\"navbar-center\" part=\"center\">\n            <slot></slot>\n          </div>\n\n          <div class=\"navbar-end\" part=\"end\">\n            <slot name=\"end\"></slot>\n          </div>\n\n          <button\n            class=\"mobile-toggle\"\n            part=\"mobile-toggle\"\n            type=\"button\"\n            aria-label=\"${() =>\n              hasMobileMenu.value\n                ? isMobileMenuOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'\n                : isExternalMobileOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'}\"\n            aria-controls=\"mobile-menu-panel\"\n            aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n            ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n            @click=\"${toggleMobileMenu}\">\n            <ore-icon\n              name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n              size=\"18\"\n              stroke-width=\"2.5\"\n              aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <div\n          id=\"mobile-menu-panel\"\n          class=\"mobile-menu-panel\"\n          part=\"mobile-menu\"\n          role=\"navigation\"\n          aria-label=\"${() => `${props.label.value} mobile menu`}\"\n          ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n          <slot name=\"mobile-menu\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    roundedVariantMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    frostVariantMixin('.navbar'),\n    navbarStyles,\n  ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    disabled: prop.bool(false),\n    href: prop.string(),\n    'icon-only': prop.bool(false),\n    rel: prop.string(),\n    target: prop.string(),\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasIcon = () => slots.has('icon').value;\n    const hasEnd = () => slots.has('end').value;\n    const navbarCtx = inject(NAVBAR_CTX);\n\n    bind({\n      attr: {\n        'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n        'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n      },\n    });\n\n    const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n    // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n    const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n    // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n    // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n    // open over the page until the user separately taps the toggle again. Only matters while\n    // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n    // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n    const closeMobileMenuIfOpen = (): void => {\n      if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n    };\n\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() => {\n        if (isLink()) {\n          return html`\n            <a\n              class=\"item\"\n              part=\"item\"\n              href=\"${props.href}\"\n              rel=\"${effectiveRel}\"\n              target=\"${props.target}\"\n              aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n              @click=${closeMobileMenuIfOpen}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n          `;\n        }\n\n        return html`\n          <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n        `;\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"navbar.cjs","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  define,\n  getHost,\n  html,\n  inject,\n  onMounted,\n  prop,\n  provide,\n  resizeObserver,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n  el: EventTarget | null | undefined,\n  name: string,\n  handler: (e: E) => void,\n  options?: AddEventListenerOptions,\n): (() => void) => {\n  if (!el) return () => {};\n\n  el.addEventListener(name, handler as EventListener, options);\n\n  return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n  if (!(el instanceof HTMLElement)) return true;\n\n  if (el.tagName.includes('-')) return true;\n\n  if (el.childElementCount > 0) return true;\n\n  return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n  const value = String(query ?? '').trim();\n\n  if (!value) return undefined;\n\n  const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n  if (!match) return undefined;\n\n  const parsed = Number.parseFloat(match[1]);\n\n  return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n  let container = el.parentElement;\n\n  while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n    container = container.parentElement;\n  }\n\n  return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n  if (parentWidth > 0) return parentWidth;\n\n  return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n  let current: HTMLElement | null = start.parentElement;\n\n  while (current) {\n    const styles = window.getComputedStyle(current);\n    const overflowY = styles.overflowY;\n\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n      return current;\n    }\n\n    current = current.parentElement;\n  }\n\n  return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n  closeMobileMenu: () => void;\n  isMobile: Readable<boolean>;\n  mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n  'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n  OreNavbarProps & {\n    closeMobileMenu(): void;\n    openMobileMenu(): void;\n    toggleMobileMenu(): void;\n  };\n\ntype MobileSidebarElement = HTMLElement & {\n  closeMobile?: () => void;\n  openMobile?: () => void;\n  toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n  /** CSS media query used for mobile layout switching */\n  breakpoint?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Evaluate mobile breakpoint against container width only when possible. */\n  'container-breakpoints'?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Start as detached floating navbar */\n  floating?: boolean;\n  /** Accessible nav landmark label */\n  label?: string;\n  /** CSS selector for an external sidebar toggled by the mobile button */\n  'mobile-sidebar'?: string;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Scroll threshold in px used by floating+sticky transition */\n  'scroll-threshold'?: number;\n  /** Stick to top of viewport */\n  sticky?: boolean;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n  /** Whether this item represents the current page */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Link target URL. Renders an anchor when provided. */\n  href?: string;\n  /**\n   * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n   * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n   * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n   * otherwise the empty label still reserves its inter-element gap and the item ends up\n   * with lopsided padding around the icon.\n   */\n  'icon-only'?: boolean;\n  /** Relationship of linked URL (anchor-only) */\n  rel?: string;\n  /** Browsing context for link (anchor-only) */\n  target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n *   <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n *   <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n *   <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n *   <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n  props: {\n    breakpoint: prop.string('(max-width: 768px)'),\n    color: prop.string<ThemeColor>(),\n    'container-breakpoints': prop.bool(false),\n    elevation: prop.number<ElevationLevel>(),\n    floating: prop.bool(false),\n    label: prop.string('Main navigation'),\n    'mobile-sidebar': prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    'scroll-threshold': prop.number(80),\n    sticky: prop.bool(false),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreNavbarEvents>();\n    const slots = useSlots();\n\n    const hasLogo = slots.has('logo');\n    const mobileMenuElements = slots.elements('mobile-menu');\n    const hasMobileMenu = signal(false);\n    const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n    const isExternalMobileMode = signal(false);\n    const isExternalMobileOpen = signal(false);\n    const isMobile = signal(false);\n    const isMobileMenuOpen = signal(false);\n    const isModeTransitioning = signal(false);\n    const isScrolled = signal(false);\n    const scrollBase = signal(0);\n    const mediaMatches = signal(false);\n    const sizeMatches = signal(false);\n    const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n    const isPreviewMode = signal(false);\n\n    const getExternalSidebar = () => {\n      const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n      if (!selector) return null;\n\n      const root = el.getRootNode();\n      const scopedTarget =\n        root instanceof ShadowRoot || root instanceof Document\n          ? (root.querySelector(selector) as MobileSidebarElement | null)\n          : null;\n\n      return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n    };\n\n    provide(NAVBAR_CTX, {\n      // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n      // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n      closeMobileMenu: () => closeMobileMenu(),\n      isMobile: computed(() => isMobile.value) as Readable<boolean>,\n      mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n    });\n\n    const computeMode = (): NavbarMode | undefined => {\n      if (props.floating.value && props.sticky.value) {\n        return isScrolled.value ? 'sticky' : 'floating';\n      }\n\n      if (props.floating.value) return 'floating';\n\n      if (props.sticky.value) return 'sticky';\n\n      return undefined;\n    };\n\n    const setMobileMenu = (next: boolean) => {\n      const open = Boolean(next);\n\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (open) {\n            target.openMobile?.();\n          } else {\n            target.closeMobile?.();\n          }\n\n          return;\n        }\n      }\n\n      if (open && !hasMobileMenu.value) return;\n\n      if (isMobileMenuOpen.value === open) return;\n\n      isMobileMenuOpen.value = open;\n      emit('mobile-menu-change', { open });\n    };\n\n    const closeMobileMenu = () => setMobileMenu(false);\n    const openMobileMenu = () => setMobileMenu(true);\n    const toggleMobileMenu = () => {\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (typeof target.toggleMobile === 'function') {\n            target.toggleMobile();\n          } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n            const isOpen = target.hasAttribute('data-mobile-open');\n\n            if (isOpen) target.closeMobile();\n            else target.openMobile();\n          }\n\n          return;\n        }\n      }\n\n      setMobileMenu(!isMobileMenuOpen.value);\n    };\n\n    const syncMobileMode = () => {\n      const next =\n        (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n        mediaMatches.value ||\n        sizeMatches.value;\n\n      isMobile.value = next;\n\n      if (!next) closeMobileMenu();\n    };\n\n    const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n      if (scrollContainer) {\n        return scrollContainer.scrollTop || 0;\n      }\n\n      return window.scrollY || document.documentElement.scrollTop || 0;\n    };\n\n    const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n      scrollBase.value = readScrollOffset(scrollContainer);\n    };\n\n    const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n      if (!(props.floating.value && props.sticky.value)) {\n        if (isScrolled.value) isScrolled.value = false;\n\n        return;\n      }\n\n      const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n      const currentOffset = readScrollOffset(scrollContainer);\n      const delta = currentOffset - scrollBase.value;\n\n      isScrolled.value = delta > threshold;\n    };\n\n    bind({\n      attr: {\n        'data-mobile': () => (isMobile.value ? true : undefined),\n        'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n        'data-mode': () => computeMode() ?? null,\n        'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n        'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n        'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const navbarEl = el as NavbarElement;\n      const scrollContainer = findScrollContainer(el);\n\n      navbarEl.closeMobileMenu = closeMobileMenu;\n      navbarEl.openMobileMenu = openMobileMenu;\n      navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n      const stopScroll = listen(\n        window,\n        'scroll',\n        () => {\n          updateScrolled(scrollContainer);\n        },\n        { passive: true },\n      );\n      const stopContainerScroll = scrollContainer\n        ? listen(\n            scrollContainer,\n            'scroll',\n            () => {\n              updateScrolled(scrollContainer);\n            },\n            { passive: true },\n          )\n        : undefined;\n      const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n        closeMobileMenu();\n      });\n\n      let mediaCleanup: (() => void) | undefined;\n      let mobileSidebarCleanup: (() => void) | undefined;\n      let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n      let previousMode: NavbarMode | undefined;\n\n      const resolveMobileSidebarTarget = () => {\n        mobileSidebarCleanup?.();\n        mobileSidebarCleanup = undefined;\n        mobileSidebarTarget.value = null;\n        isExternalMobileMode.value = false;\n        isExternalMobileOpen.value = false;\n\n        if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n        const target = getExternalSidebar();\n\n        if (!target) {\n          const root = el.getRootNode();\n          const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n          const discoveryObserver = new MutationObserver(() => {\n            if (getExternalSidebar()) resolveMobileSidebarTarget();\n          });\n\n          discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n          mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n          return;\n        }\n\n        const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n          const hasBottomNav = target.hasAttribute('data-bottom-nav');\n          const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n          isExternalMobileMode.value = hasBottomNav;\n          isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n          // If the sidebar is reporting it's open, it must be in bottom-nav mode\n          // (either natural or forced). We honor this to avoid race conditions\n          // where attributes haven't reflected yet.\n          if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n            isExternalMobileMode.value = true;\n          }\n\n          syncMobileMode();\n        };\n\n        const targetObserver = new MutationObserver(() => {\n          syncTargetState();\n        });\n\n        syncTargetState();\n        targetObserver.observe(target, {\n          attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n          attributes: true,\n        });\n        target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n        mobileSidebarCleanup = () => {\n          targetObserver.disconnect();\n          target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n        };\n        mobileSidebarTarget.value = target;\n      };\n\n      const triggerModeTransition = () => {\n        isModeTransitioning.value = true;\n\n        if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n        modeTransitionTimeout = setTimeout(() => {\n          isModeTransitioning.value = false;\n          modeTransitionTimeout = undefined;\n        }, 220);\n      };\n\n      const stopModeWatch = watch(\n        computed(() => props.floating.value && props.sticky.value),\n        (enabled) => {\n          if (!enabled) {\n            if (isScrolled.value) isScrolled.value = false;\n\n            if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n            previousMode = undefined;\n\n            if (modeTransitionTimeout != null) {\n              clearTimeout(modeTransitionTimeout);\n              modeTransitionTimeout = undefined;\n            }\n\n            return;\n          }\n\n          resetScrollBase(scrollContainer);\n          updateScrolled(scrollContainer);\n\n          const currentMode = computeMode();\n\n          previousMode = currentMode;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileSidebarWatch = watch(\n        props['mobile-sidebar'],\n        () => {\n          resolveMobileSidebarTarget();\n        },\n        { immediate: true },\n      );\n\n      const stopModeTransitionWatch = watch(\n        computed(() => computeMode()),\n        (nextMode) => {\n          const comboEnabled = props.floating.value && props.sticky.value;\n\n          if (!comboEnabled) {\n            previousMode = nextMode ?? undefined;\n\n            return;\n          }\n\n          const next = nextMode ?? undefined;\n\n          if (previousMode && next && previousMode !== next) {\n            triggerModeTransition();\n          }\n\n          previousMode = next;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileMenuSlotWatch = watch(\n        hasMobileMenu,\n        (hasContent) => {\n          if (!hasContent && isMobileMenuOpen.value) {\n            closeMobileMenu();\n          }\n        },\n        { immediate: true },\n      );\n      const syncMobileMenuContent = () => {\n        hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n      };\n      const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n      const mobileMenuContentObserver = new MutationObserver(() => {\n        syncMobileMenuContent();\n      });\n\n      // Parser-created demo content can populate an already-assigned slot wrapper after this\n      // custom element connects; `slotchange` alone does not observe that nested content.\n      mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n      watch(\n        props.breakpoint,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n          mediaMatches.value = false;\n\n          const width = readContainerWidth(el);\n\n          sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n          syncMobileMode();\n\n          if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n            return;\n          }\n\n          if (!mediaQuery) {\n            return;\n          }\n\n          if (typeof window.matchMedia !== 'function') {\n            return;\n          }\n\n          const mql = window.matchMedia(mediaQuery);\n          const syncMedia = (next: boolean) => {\n            mediaMatches.value = next;\n            syncMobileMode();\n          };\n          const onChange = (event: MediaQueryListEvent) => {\n            syncMedia(event.matches);\n          };\n\n          syncMedia(mql.matches);\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      const stopResizeEffect =\n        typeof ResizeObserver === 'function'\n          ? (() => {\n              const hostSize = resizeObserver(el);\n              const wrapperEl = el.parentElement;\n              const containerEl = resolveContainerElement(el);\n              const wrapperSize = wrapperEl ? resizeObserver(wrapperEl) : undefined;\n              const parentSize = containerEl && containerEl !== wrapperEl ? resizeObserver(containerEl) : undefined;\n\n              return watch(\n                computed(() => [\n                  hostSize.value.width,\n                  hostSize.value.height,\n                  wrapperSize?.value.width,\n                  wrapperSize?.value.height,\n                  parentSize?.value.width,\n                  parentSize?.value.height,\n                ]),\n                () => {\n                  const width = readContainerWidth(el);\n                  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n                  sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n                  isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n                  syncMobileMode();\n                },\n              );\n            })()\n          : undefined;\n\n      return () => {\n        stopEscape?.();\n        stopScroll?.();\n        stopContainerScroll?.();\n        stopModeWatch?.dispose();\n        stopModeTransitionWatch?.dispose();\n        stopMobileMenuSlotWatch?.dispose();\n        stopMobileMenuElementsWatch?.dispose();\n        stopMobileSidebarWatch?.dispose();\n        mobileMenuContentObserver.disconnect();\n        mediaCleanup?.();\n        mobileSidebarCleanup?.();\n        stopResizeEffect?.dispose();\n\n        if (modeTransitionTimeout != null) {\n          clearTimeout(modeTransitionTimeout);\n          modeTransitionTimeout = undefined;\n        }\n      };\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <div class=\"navbar\" part=\"bar\">\n          <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n            <slot name=\"logo\"></slot>\n          </div>\n\n          <div class=\"navbar-start\" part=\"start\">\n            <slot name=\"start\"></slot>\n          </div>\n\n          <div class=\"navbar-center\" part=\"center\">\n            <slot></slot>\n          </div>\n\n          <div class=\"navbar-end\" part=\"end\">\n            <slot name=\"end\"></slot>\n          </div>\n\n          <button\n            class=\"mobile-toggle\"\n            part=\"mobile-toggle\"\n            type=\"button\"\n            aria-label=\"${() =>\n              hasMobileMenu.value\n                ? isMobileMenuOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'\n                : isExternalMobileOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'}\"\n            aria-controls=\"mobile-menu-panel\"\n            aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n            ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n            @click=\"${toggleMobileMenu}\">\n            <ore-icon\n              name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n              size=\"18\"\n              stroke-width=\"2.5\"\n              aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <div\n          id=\"mobile-menu-panel\"\n          class=\"mobile-menu-panel\"\n          part=\"mobile-menu\"\n          role=\"navigation\"\n          aria-label=\"${() => `${props.label.value} mobile menu`}\"\n          ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n          <slot name=\"mobile-menu\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    roundedVariantMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    frostVariantMixin('.navbar'),\n    navbarStyles,\n  ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    disabled: prop.bool(false),\n    href: prop.string(),\n    'icon-only': prop.bool(false),\n    rel: prop.string(),\n    target: prop.string(),\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasIcon = () => slots.has('icon').value;\n    const hasEnd = () => slots.has('end').value;\n    const navbarCtx = inject(NAVBAR_CTX);\n\n    bind({\n      attr: {\n        'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n        'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n      },\n    });\n\n    const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n    // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n    const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n    // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n    // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n    // open over the page until the user separately taps the toggle again. Only matters while\n    // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n    // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n    const closeMobileMenuIfOpen = (): void => {\n      if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n    };\n\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() => {\n        if (isLink()) {\n          return html`\n            <a\n              class=\"item\"\n              part=\"item\"\n              href=\"${props.href}\"\n              rel=\"${effectiveRel}\"\n              target=\"${props.target}\"\n              aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n              @click=${closeMobileMenuIfOpen}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n          `;\n        }\n\n        return html`\n          <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n        `;\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}

package/dist/navbar.js

@@ -5,8 +5,7 @@ import { frostVariantMixin as a } from "./styles/mixins/variants.css.js";
 import { computeSafeRel as o } from "./utils/link.js";
 import s from "./layout/navbar/navbar.css.js";
 import { bind as c, createContext as l, define as u, getHost as d, html as f, inject as p, onMounted as m, prop as h, provide as g, resizeObserver as _, useEmit as v, useSlots as y } from "@vielzeug/ore";
-import { computed as b, signal as x } from "@vielzeug/ripple";
-import { watch as S } from "@vielzeug/ripple/watch";
+import { computed as b, signal as x, watch as S } from "@vielzeug/ripple";
 //#region src/layout/navbar/navbar.ts
 var C = (e, t, n, r) => e ? (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)) : () => {}, w = (e) => !(e instanceof HTMLElement) || e.tagName.includes("-") || e.childElementCount > 0 ? !0 : (e.textContent ?? "").trim().length > 0, T = (e) => {
 	let t = String(e ?? "").trim();