@vielzeug/refine 1.5.1 → 1.5.2

package/dist/message-composer.js

@@ -1,128 +1,126 @@
-import { live as e } from "./ore/dist/directives/live.js";
-import "./ore/dist/directives.js";
-import { coarsePointerMixin as t, reducedMotionMixin as n } from "./styles/mixins/accessibility.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 { disablableBundle as c, loadableBundle as l, sizableBundle as u, themableBundle as d } from "./shared/prop-bundles.js";
-import { MESSAGE_COMPOSER_SIZE_PRESET as f } from "./shared/size-presets.js";
-import { lifecycleSignal as p } from "./headless/ore.js";
-import { createAutoResize as m } from "./headless/auto-resize.js";
-import { counterClassName as h } from "./headless/field-base.js";
-import { createTextField as g } from "./headless/text-field.js";
-import { createComposerControl as _ } from "./headless/composer.js";
-import { useField as v } from "./ore/dist/forms/field.js";
-import "./ore/dist/forms.js";
-import { errorAttr as y } from "./inputs/shared/field-binding.js";
-import { FORM_CTX as b, useFormContext as x } from "./inputs/shared/form-context.js";
-import S from "./inputs/message-composer/message-composer.css.js";
-import { bind as C, define as w, html as T, inject as E, onCleanup as D, onElement as O, prop as k, ref as A, useEmit as j, useSlots as M } from "@vielzeug/ore";
-import { computed as N, watch as P } from "@vielzeug/ripple";
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as n } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as r } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as i, forcedColorsFocusMixin as a, forcedColorsMixin as o } from "./styles/mixins/theme.css.js";
+import { disablableBundle as s, loadableBundle as c, sizableBundle as l, themableBundle as u } from "./shared/prop-bundles.js";
+import { MESSAGE_COMPOSER_SIZE_PRESET as d } from "./shared/size-presets.js";
+import { lifecycleSignal as f } from "./headless/ore.js";
+import { createAutoResize as p } from "./headless/auto-resize.js";
+import { counterClassName as m } from "./headless/field-base.js";
+import { createTextField as h } from "./headless/text-field.js";
+import { createComposerControl as g } from "./headless/composer.js";
+import { errorAttr as _ } from "./inputs/shared/field-binding.js";
+import { FORM_CTX as v, useFormContext as y } from "./inputs/shared/form-context.js";
+import b from "./inputs/message-composer/message-composer.css.js";
+import { bind as x, define as S, html as C, inject as w, onCleanup as T, onElement as E, prop as D, ref as O, useEmit as k, useSlots as A } from "@vielzeug/ore";
+import { live as j } from "@vielzeug/ore/directives";
+import { computed as M, watch as N } from "@vielzeug/ripple";
+import { useField as P } from "@vielzeug/ore/forms";
 //#region src/inputs/message-composer/message-composer.ts
 var F = "Send message", I = "arrow-up", L = "ore-message-composer";
-w(L, {
+S(L, {
 	formAssociated: !0,
 	props: {
-		...d,
 		...u,
-		...c,
 		...l,
-		"clear-on-send": k.bool(!0),
-		error: k.string(),
-		fullwidth: k.bool(!1),
-		helper: k.string(),
-		label: k.string(),
-		maxlength: k.json(void 0),
-		name: k.string(),
-		placeholder: k.string(),
-		readonly: k.bool(!1),
-		ref: k.json(void 0),
-		required: k.bool(!1),
-		rows: k.json(void 0),
-		"send-icon": k.string(),
-		"send-label": k.string(),
-		"send-shortcut": k.oneOf(["enter", "mod+enter"], "enter"),
-		value: k.string(),
-		variant: k.string()
+		...s,
+		...c,
+		"clear-on-send": D.bool(!0),
+		error: D.string(),
+		fullwidth: D.bool(!1),
+		helper: D.string(),
+		label: D.string(),
+		maxlength: D.json(void 0),
+		name: D.string(),
+		placeholder: D.string(),
+		readonly: D.bool(!1),
+		ref: D.json(void 0),
+		required: D.bool(!1),
+		rows: D.json(void 0),
+		"send-icon": D.string(),
+		"send-label": D.string(),
+		"send-shortcut": D.oneOf(["enter", "mod+enter"], "enter"),
+		value: D.string(),
+		variant: D.string()
 	},
-	setup(t) {
-		let n = j(), r = M(), i = E(b), a = x(t, i), o = a.disabled, s = p(D), c = A(), l = m(), u = g({
-			disabled: o,
-			error: t.error,
-			helper: t.helper,
-			maxLength: t.maxlength,
-			onInput: (e, t) => n("input", {
+	setup(e) {
+		let t = k(), n = A(), r = w(v), i = y(e, r), a = i.disabled, o = f(T), s = O(), c = p(), l = h({
+			disabled: a,
+			error: e.error,
+			helper: e.helper,
+			maxLength: e.maxlength,
+			onInput: (e, n) => t("input", {
 				originalEvent: e,
-				value: t
+				value: n
 			}),
 			prefix: "composer",
-			readonly: t.readonly,
-			required: t.required,
-			signal: s,
-			validateOn: i?.validateOn,
-			value: t.value
+			readonly: e.readonly,
+			required: e.required,
+			signal: o,
+			validateOn: r?.validateOn,
+			value: e.value
 		});
-		u.attachFormField(v({
-			disabled: u.disabled,
+		l.attachFormField(P({
+			disabled: l.disabled,
 			onReset: () => {
-				u.reset(), l.recompute();
+				l.reset(), c.recompute();
 			},
 			toFormValue: (e) => e,
-			validationMessage: u.validationMessage,
-			validity: u.validity,
-			value: u.value
+			validationMessage: l.validationMessage,
+			validity: l.validity,
+			value: l.value
 		}));
-		function d(e) {
-			n("send", {
-				originalEvent: e,
-				value: u.value.value.trim()
-			}) && t["clear-on-send"].value !== !1 && (u.clear(), l.recompute(), c.value?.focus());
+		function u(n) {
+			t("send", {
+				originalEvent: n,
+				value: l.value.value.trim()
+			}) && e["clear-on-send"].value !== !1 && (l.clear(), c.recompute(), s.value?.focus());
 		}
-		let f = _({
-			disabled: o,
-			loading: N(() => !!t.loading.value),
-			onSend: d,
-			sendShortcut: t["send-shortcut"],
-			value: u.value
+		let d = g({
+			disabled: a,
+			loading: M(() => !!e.loading.value),
+			onSend: u,
+			sendShortcut: e["send-shortcut"],
+			value: l.value
 		});
-		return O(c, (e) => {
-			let n = u.wire(e), r = l.wire(e), i = (e) => f.handleKeydown(e);
-			e.addEventListener("keydown", i), t.ref.value?.(e);
-			let a = P(t.ref, (t) => {
-				t?.(e);
+		return E(s, (t) => {
+			let n = l.wire(t), r = c.wire(t), i = (e) => d.handleKeydown(e);
+			t.addEventListener("keydown", i), e.ref.value?.(t);
+			let a = N(e.ref, (e) => {
+				e?.(t);
 			});
 			return () => {
-				e.removeEventListener("keydown", i), n(), r(), a.dispose(), t.ref.value?.(null);
+				t.removeEventListener("keydown", i), n(), r(), a.dispose(), e.ref.value?.(null);
 			};
-		}), C({ attr: {
-			error: y(u.errorText),
-			size: a.size,
-			variant: a.variant
-		} }), T`
+		}), x({ attr: {
+			error: _(l.errorText),
+			size: i.size,
+			variant: i.variant
+		} }), C`
       <div class="composer" part="composer">
         <textarea
           class="field"
           part="field"
-          ref="${c}"
-          :rows="${() => t.rows.value ?? 1}"
-          :name="${() => t.name.value ?? ""}"
-          :placeholder="${() => t.placeholder.value ?? "Message…"}"
-          :maxlength="${() => t.maxlength.value}"
-          ?disabled="${o}"
-          ?readonly="${() => !!t.readonly.value}"
-          ?required="${() => !!t.required.value}"
-          :value="${e(u.value)}"
-          :aria-label="${() => t.label.value || "Message"}"
-          :aria-keyshortcuts="${f.keyShortcutsHint}"
-          :aria-describedby="${u.ariaDescribedBy}"
-          :aria-errormessage="${u.ariaErrorMessage}"
-          :aria-invalid="${u.ariaInvalid}"></textarea>
-        <span class="${() => h(u.counter?.value)}" aria-live="polite" ?hidden="${() => !u.counter}">${() => u.counter?.value.counterText.replace(" / ", "/") ?? ""}</span>
-        <div id="${u.assistiveId}" class="helper-text" aria-live="polite" part="helper" ?hidden="${() => !!u.errorText.value || !u.helperText.value}">
-          ${() => u.helperText.value}
+          ref="${s}"
+          :rows="${() => e.rows.value ?? 1}"
+          :name="${() => e.name.value ?? ""}"
+          :placeholder="${() => e.placeholder.value ?? "Message…"}"
+          :maxlength="${() => e.maxlength.value}"
+          ?disabled="${a}"
+          ?readonly="${() => !!e.readonly.value}"
+          ?required="${() => !!e.required.value}"
+          :value="${j(l.value)}"
+          :aria-label="${() => e.label.value || "Message"}"
+          :aria-keyshortcuts="${d.keyShortcutsHint}"
+          :aria-describedby="${l.ariaDescribedBy}"
+          :aria-errormessage="${l.ariaErrorMessage}"
+          :aria-invalid="${l.ariaInvalid}"></textarea>
+        <span class="${() => m(l.counter?.value)}" aria-live="polite" ?hidden="${() => !l.counter}">${() => l.counter?.value.counterText.replace(" / ", "/") ?? ""}</span>
+        <div id="${l.assistiveId}" class="helper-text" aria-live="polite" part="helper" ?hidden="${() => !!l.errorText.value || !l.helperText.value}">
+          ${() => l.helperText.value}
         </div>
-        <div id="${u.errorId}" class="helper-text" role="alert" part="error" ?hidden="${() => !u.errorText.value}">
-          ${() => u.errorText.value}
+        <div id="${l.errorId}" class="helper-text" role="alert" part="error" ?hidden="${() => !l.errorText.value}">
+          ${() => l.errorText.value}
         </div>
         <div class="toolbar" part="toolbar">
           <div class="toolbar-start" part="toolbar-start">
@@ -131,19 +129,19 @@ w(L, {
           <div class="toolbar-end" part="toolbar-end">
             <slot name="suffix"></slot>
             <slot name="send"></slot>
-            ${() => r.has("send").value ? "" : T`<ore-button
+            ${() => n.has("send").value ? "" : C`<ore-button
                     class="send-btn"
                     part="send-button"
                     type="button"
                     icon-only
                     variant="solid"
-                    :color="${() => t.color.value || "primary"}"
-                    :size="${a.size}"
-                    :label="${() => t["send-label"].value || F}"
-                    ?loading="${() => !!t.loading.value}"
-                    ?disabled="${() => !f.canSend.value}"
-                    @click="${(e) => f.send(e)}">
-                    <ore-icon name="${() => t["send-icon"].value || I}" size="16"></ore-icon>
+                    :color="${() => e.color.value || "primary"}"
+                    :size="${i.size}"
+                    :label="${() => e["send-label"].value || F}"
+                    ?loading="${() => !!e.loading.value}"
+                    ?disabled="${() => !d.canSend.value}"
+                    @click="${(e) => d.send(e)}">
+                    <ore-icon name="${() => e["send-icon"].value || I}" size="16"></ore-icon>
                   </ore-button>`}
           </div>
         </div>
@@ -152,14 +150,14 @@ w(L, {
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		a,
-		t,
-		n,
 		i,
-		s,
-		o(".field"),
-		r(f),
-		S
+		e,
+		t,
+		r,
+		o,
+		a(".field"),
+		n(d),
+		b
 	]
 });
 //#endregion

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, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport {\n  counterClassName,\n  createAutoResize,\n  createComposerControl,\n  createTextField,\n  lifecycleSignal,\n  type SendShortcut,\n} from '../../headless';\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  forcedColorsFocusMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport '../../content/icon/icon';\nimport '../button/button';\nimport componentStyles from './message-composer.css?inline';\n\nexport type { SendShortcut } from '../../headless';\n\nconst DEFAULT_SEND_LABEL = 'Send message';\nconst SEND_ICON = 'arrow-up';\n\n/** Events emitted by the message composer */\nexport type OreMessageComposerEvents = {\n  /** Fired on every keystroke with the current value. */\n  input: { originalEvent: Event; value: string };\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 `<ore-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  /** 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 headless 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} disabled - Disable the whole composer\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Require a non-blank value for `<ore-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 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.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\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    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'frost' | 'text'>>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreMessageComposerEvents>();\n    const slots = useSlots<'prefix' | 'send' | 'suffix'>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.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) => emit('input', { originalEvent: event, value }),\n      prefix: 'composer',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\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 handleKeydown = (e: KeyboardEvent) => composer.handleKeydown(e);\n\n      textareaEl.addEventListener('keydown', handleKeydown);\n\n      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(textareaEl);\n\n      // Reactive watcher so that if props.ref is set *after* the inner <textarea> mounts\n      // (e.g. a parent sets it via a ref callback after render), the new callback still\n      // receives the live element.\n      const refSub = watch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\n\n      return () => {\n        textareaEl.removeEventListener('keydown', handleKeydown);\n        unwireField();\n        unwireAutoResize();\n        refSub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(tf.errorText),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () => counterClassName(tf.counter?.value);\n    const counterHidden = () => !tf.counter;\n    const counterText = () => tf.counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!tf.errorText.value || !tf.helperText.value;\n    const errorHidden = () => !tf.errorText.value;\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        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${tf.assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => tf.helperText.value}\n        </div>\n        <div id=\"${tf.errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => tf.errorText.value}\n        </div>\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`<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=\"${fCtxProps.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          </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  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"message-composer.js","names":[],"sources":["../src/inputs/message-composer/message-composer.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport {\n  counterClassName,\n  createAutoResize,\n  createComposerControl,\n  createTextField,\n  lifecycleSignal,\n  type SendShortcut,\n} from '../../headless';\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  forcedColorsFocusMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport '../../content/icon/icon';\nimport '../button/button';\nimport componentStyles from './message-composer.css?inline';\n\nexport type { SendShortcut } from '../../headless';\n\nconst DEFAULT_SEND_LABEL = 'Send message';\nconst SEND_ICON = 'arrow-up';\n\n/** Events emitted by the message composer */\nexport type OreMessageComposerEvents = {\n  /** Fired on every keystroke with the current value. */\n  input: { originalEvent: Event; value: string };\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 `<ore-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  /** 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 headless 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} disabled - Disable the whole composer\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Require a non-blank value for `<ore-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 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.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\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    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'frost' | 'text'>>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreMessageComposerEvents>();\n    const slots = useSlots<'prefix' | 'send' | 'suffix'>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.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) => emit('input', { originalEvent: event, value }),\n      prefix: 'composer',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\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 handleKeydown = (e: KeyboardEvent) => composer.handleKeydown(e);\n\n      textareaEl.addEventListener('keydown', handleKeydown);\n\n      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(textareaEl);\n\n      // Reactive watcher so that if props.ref is set *after* the inner <textarea> mounts\n      // (e.g. a parent sets it via a ref callback after render), the new callback still\n      // receives the live element.\n      const refSub = watch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\n\n      return () => {\n        textareaEl.removeEventListener('keydown', handleKeydown);\n        unwireField();\n        unwireAutoResize();\n        refSub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(tf.errorText),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () => counterClassName(tf.counter?.value);\n    const counterHidden = () => !tf.counter;\n    const counterText = () => tf.counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!tf.errorText.value || !tf.helperText.value;\n    const errorHidden = () => !tf.errorText.value;\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        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${tf.assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => tf.helperText.value}\n        </div>\n        <div id=\"${tf.errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => tf.errorText.value}\n        </div>\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`<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=\"${fCtxProps.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          </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  ],\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("./ore/dist/observers/resize-observe.cjs");require("./ore/dist/observers.cjs");const o=require("./layout/navbar/navbar.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");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,s.createContext)(`NavbarContext`),g=`ore-navbar`;(0,s.define)(g,{props:{breakpoint:s.prop.string(`(max-width: 768px)`),color:s.prop.string(),"container-breakpoints":s.prop.bool(!1),elevation:s.prop.number(),floating:s.prop.bool(!1),label:s.prop.string(`Main navigation`),"mobile-sidebar":s.prop.string(),rounded:s.prop.string(),"scroll-threshold":s.prop.number(80),sticky:s.prop.bool(!1),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),i=()=>r.has(`logo`).value,o=()=>r.elements(`mobile-menu`).value.some(u),g=(0,c.signal)(null),_=(0,c.signal)(!1),v=(0,c.signal)(!1),y=(0,c.signal)(!1),b=(0,c.signal)(!1),x=(0,c.signal)(!1),S=(0,c.signal)(!1),C=(0,c.signal)(0),w=(0,c.signal)(!1),T=(0,c.signal)(!1),E=(0,c.signal)(d(e.breakpoint.value)),D=(0,c.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,s.provide)(h,{closeMobileMenu:()=>j(),isMobile:(0,c.computed)(()=>y.value),mobileMenuOpen:(0,c.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(!o()){let e=g.value??O();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!o()||b.value!==t&&(b.value=t,n(`mobile-menu-change`,{open:t}))},j=()=>A(!1),M=()=>A(!0),N=()=>{if(!o()){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&&!o()?_.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,s.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,s.onMounted)(()=>{let n=t,r=m(t);n.closeMobileMenu=j,n.openMobileMenu=M,n.toggleMobileMenu=N;let i=l(window,`scroll`,()=>{L(r)},{passive:!0}),s=r?l(r,`scroll`,()=>{L(r)},{passive:!0}):void 0,u=l(t,`keydown`,e=>{e.key!==`Escape`||!b.value||j()}),h,y,C,A,F=()=>{y?.(),y=void 0,g.value=null,_.value=!1,v.value=!1;let e=O();if(!e)return;let t=t=>{let n=e.hasAttribute(`data-bottom-nav`),r=e.hasAttribute(`data-mobile-open`);_.value=n,v.value=t?.detail?t.detail.open:r,v.value&&!_.value&&(_.value=!0),P()},n=new MutationObserver(()=>{t()});t(),n.observe(e,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),e.addEventListener(`mobile-open-change`,t),y=()=>{n.disconnect(),e.removeEventListener(`mobile-open-change`,t)},g.value=e},R=()=>{x.value=!0,C!=null&&clearTimeout(C),C=setTimeout(()=>{x.value=!1,C=void 0},220)},z=(0,c.watch)((0,c.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){S.value&&=!1,x.value&&=!1,A=void 0,C!=null&&(clearTimeout(C),C=void 0);return}I(r),L(r),A=k()},{immediate:!0}),B=(0,c.watch)(e[`mobile-sidebar`],()=>{F()},{immediate:!0}),V=(0,c.watch)((0,c.computed)(()=>k()),t=>{if(!(e.floating.value&&e.sticky.value)){A=t??void 0;return}let n=t??void 0;A&&n&&A!==n&&R(),A=n},{immediate:!0}),H=(0,c.watch)((0,c.computed)(()=>o()),e=>{!e&&b.value&&j()},{immediate:!0});(0,c.watch)(e.breakpoint,n=>{h?.(),h=void 0;let r=String(n??``).trim();E.value=d(r),w.value=!1;let i=p(t);if(T.value=i>0&&E.value!=null?i<=E.value:!1,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),h=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let U=typeof ResizeObserver==`function`?(()=>{let e=a.resizeObserver(t),n=t.parentElement,r=f(t),i=n?a.resizeObserver(n):void 0,o=r&&r!==n?a.resizeObserver(r):void 0;return(0,c.watch)((0,c.computed)(()=>[e.value.width,e.value.height,i?.value.width,i?.value.height,o?.value.width,o?.value.height]),()=>{let e=p(t),n=f(t)?.clientWidth??0;T.value=e>0&&E.value!=null?e<=E.value:!1,D.value=n>0&&n<window.innerWidth,P()})})():void 0;return()=>{u?.(),i?.(),s?.(),z?.dispose(),V?.dispose(),H?.dispose(),B?.dispose(),h?.(),y?.(),U?.dispose(),C!=null&&(clearTimeout(C),C=void 0)}}),s.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"),c=require("@vielzeug/ore/observers");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`).value,a=()=>r.elements(`mobile-menu`).value.some(u),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)(d(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)(h,{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(!a()){let e=g.value??O();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!a()||b.value!==t&&(b.value=t,n(`mobile-menu-change`,{open:t}))},j=()=>A(!1),M=()=>A(!0),N=()=>{if(!a()){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&&!a()?_.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=m(t);n.closeMobileMenu=j,n.openMobileMenu=M,n.toggleMobileMenu=N;let i=l(window,`scroll`,()=>{L(r)},{passive:!0}),o=r?l(r,`scroll`,()=>{L(r)},{passive:!0}):void 0,u=l(t,`keydown`,e=>{e.key!==`Escape`||!b.value||j()}),h,y,C,A,F=()=>{y?.(),y=void 0,g.value=null,_.value=!1,v.value=!1;let e=O();if(!e)return;let t=t=>{let n=e.hasAttribute(`data-bottom-nav`),r=e.hasAttribute(`data-mobile-open`);_.value=n,v.value=t?.detail?t.detail.open:r,v.value&&!_.value&&(_.value=!0),P()},n=new MutationObserver(()=>{t()});t(),n.observe(e,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),e.addEventListener(`mobile-open-change`,t),y=()=>{n.disconnect(),e.removeEventListener(`mobile-open-change`,t)},g.value=e},R=()=>{x.value=!0,C!=null&&clearTimeout(C),C=setTimeout(()=>{x.value=!1,C=void 0},220)},z=(0,s.watch)((0,s.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){S.value&&=!1,x.value&&=!1,A=void 0,C!=null&&(clearTimeout(C),C=void 0);return}I(r),L(r),A=k()},{immediate:!0}),B=(0,s.watch)(e[`mobile-sidebar`],()=>{F()},{immediate:!0}),V=(0,s.watch)((0,s.computed)(()=>k()),t=>{if(!(e.floating.value&&e.sticky.value)){A=t??void 0;return}let n=t??void 0;A&&n&&A!==n&&R(),A=n},{immediate:!0}),H=(0,s.watch)((0,s.computed)(()=>a()),e=>{!e&&b.value&&j()},{immediate:!0});(0,s.watch)(e.breakpoint,n=>{h?.(),h=void 0;let r=String(n??``).trim();E.value=d(r),w.value=!1;let i=p(t);if(T.value=i>0&&E.value!=null?i<=E.value:!1,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),h=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let U=typeof ResizeObserver==`function`?(()=>{let e=(0,c.resizeObserver)(t),n=t.parentElement,r=f(t),i=n?(0,c.resizeObserver)(n):void 0,a=r&&r!==n?(0,c.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=p(t),n=f(t)?.clientWidth??0;T.value=e>0&&E.value!=null?e<=E.value:!1,D.value=n>0&&n<window.innerWidth,P()})})():void 0;return()=>{u?.(),i?.(),o?.(),z?.dispose(),V?.dispose(),H?.dispose(),B?.dispose(),h?.(),y?.(),U?.dispose(),C!=null&&(clearTimeout(C),C=void 0)}}),o.html`
       <nav part="nav" aria-label="${e.label}">
         <div class="navbar" part="bar">
           <div class="navbar-logo" part="logo" ?hidden=${()=>!i()}>
@@ -21,13 +21,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             class="mobile-toggle"
             part="mobile-toggle"
             type="button"
-            aria-label="${()=>o()?b.value?`Close navigation menu`:`Open navigation menu`:v.value?`Close navigation menu`:`Open navigation menu`}"
+            aria-label="${()=>a()?b.value?`Close navigation menu`:`Open navigation menu`:v.value?`Close navigation menu`:`Open navigation menu`}"
             aria-controls="mobile-menu-panel"
-            aria-expanded="${()=>String(o()?b.value:v.value)}"
-            ?hidden=${()=>!y.value||!o()&&!g.value}
+            aria-expanded="${()=>String(a()?b.value:v.value)}"
+            ?hidden=${()=>!y.value||!a()&&!g.value}
             @click="${N}">
             <ore-icon
-              name="${()=>(o()?b.value:v.value)?`x`:`menu`}"
+              name="${()=>(a()?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=${()=>!y.value||!b.value||!o()}>
+          ?hidden=${()=>!y.value||!b.value||!a()}>
           <slot name="mobile-menu"></slot>
         </div>
       </nav>
-    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),o.default]});var _=`ore-navbar-item`;(0,s.define)(_,{props:{active:s.prop.bool(!1),disabled:s.prop.bool(!1),href:s.prop.string(),rel:s.prop.string(),target:s.prop.string()},setup(e){let t=(0,s.useSlots)(),n=()=>t.has(`icon`).value,r=()=>t.has(`end`).value,a=(0,s.inject)(h);(0,s.bind)({attr:{"navbar-mobile":()=>a?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>a?.mobileMenuOpen.value?!0:void 0}});let o=()=>!!e.href.value&&!e.disabled.value,l=(0,c.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),u=()=>{a?.mobileMenuOpen.value&&a.closeMobileMenu()},d=()=>s.html`
+    `},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(),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`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!n()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -52,8 +52,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <span class="item-end" part="item-end" ?hidden=${()=>!r()}>
         <slot name="end"></slot>
       </span>
-    `;return s.html`
-      ${()=>o()?s.html`
+    `;return o.html`
+      ${()=>c()?o.html`
             <a
               class="item"
               part="item"
@@ -64,8 +64,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               @click=${u}>
               ${d()}
             </a>
-          `:e.disabled.value?s.html`<div class="item" part="item" tabindex="-1" aria-disabled="true">${d()}</div>`:s.html`<button class="item" part="item" type="button" @click=${u}>
+          `:e.disabled.value?o.html`<div class="item" part="item" tabindex="-1" aria-disabled="true">${d()}</div>`:o.html`<button class="item" part="item" type="button" @click=${u}>
           ${d()}
         </button>`}
-    `},styles:[e.coarsePointerMixin,o.default]}),exports.NAVBAR_CTX=h,exports.NAVBAR_ITEM_TAG=_,exports.NAVBAR_TAG=g;
+    `},styles:[e.coarsePointerMixin,a.default]}),exports.NAVBAR_CTX=h,exports.NAVBAR_ITEM_TAG=_,exports.NAVBAR_TAG=g;
 //# sourceMappingURL=navbar.cjs.map