@vielzeug/refine 1.7.0 → 2.0.0

package/dist/message-composer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-composer.cjs","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 } 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 '../../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  fieldVariantMixin,\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 { renderFieldStatusRegion, renderStatusIcon } from '../shared/templates';\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  /**\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 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} 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 `<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 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 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 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: fCtxProps.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: fCtxProps.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`<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    // 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.cjs","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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"}

package/dist/message-composer.js

@@ -1,121 +1,119 @@
-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 { fieldVariantMixin as s } from "./styles/mixins/field-variants.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 { bindRefCallback as h } from "./headless/ref-callback.js";
-import { createTextField as g } from "./headless/text-field.js";
-import { createComposerControl as _ } from "./headless/composer.js";
+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 { 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";
-import { FORM_CTX as y, useFormContext as b } from "./inputs/shared/form-context.js";
-import { renderFieldStatusRegion as x, renderStatusIcon as S } from "./inputs/shared/templates.js";
-import C from "./inputs/message-composer/message-composer.css.js";
-import { bind as w, define as T, html as E, inject as D, onCleanup as O, onElement as k, prop as A, ref as j, useEmit as M, useSlots as N } from "@vielzeug/ore";
-import { live as P } from "@vielzeug/ore/directives";
-import { computed as F } from "@vielzeug/ripple";
-import { useField as I } from "@vielzeug/ore/forms";
+import { renderFieldStatusRegion as y, renderStatusIcon as b } from "./inputs/shared/templates.js";
+import { defineFieldValue as x, dispatchNativeFieldEvent as S, setFieldValue as C } from "./inputs/shared/native-field-event.js";
+import w from "./inputs/message-composer/message-composer.css.js";
+import { bind as T, define as E, getHost as D, html as O, live as k, onCleanup as A, onElement as j, prop as M, ref as N, useEmit as P, useField as F, useSlots as I } from "@vielzeug/ore";
+import { computed as L } from "@vielzeug/ripple";
 //#region src/inputs/message-composer/message-composer.ts
-var L = "Send message", R = "arrow-up", z = "ore-message-composer";
-T(z, {
+var R = "Send message", z = "arrow-up", B = "ore-message-composer";
+E(B, {
 	formAssociated: !0,
 	props: {
-		...d,
-		...u,
-		...c,
-		...l,
-		"clear-on-send": A.bool(!0),
-		error: A.string(),
-		fullwidth: A.bool(!1),
-		helper: A.string(),
-		label: A.string(),
-		maxlength: A.json(void 0),
-		name: A.string(),
-		placeholder: A.string(),
-		readonly: A.bool(!1),
-		ref: A.data(),
-		required: A.bool(!1),
-		rows: A.json(void 0),
-		"send-icon": A.string(),
-		"send-label": A.string(),
-		"send-shortcut": A.oneOf(["enter", "mod+enter"], "enter"),
-		success: A.bool(!1),
-		value: A.string(),
-		variant: A.string()
+		...g,
+		...h,
+		...p,
+		...m,
+		"clear-on-send": M.bool(!0),
+		error: M.string(),
+		fullwidth: M.bool(!1),
+		helper: M.string(),
+		label: M.string(),
+		maxlength: M.json(void 0),
+		name: M.string(),
+		placeholder: M.string(),
+		readonly: M.bool(!1),
+		ref: M.data(),
+		required: M.bool(!1),
+		rows: M.json(void 0),
+		"send-icon": M.string(),
+		"send-label": M.string(),
+		"send-shortcut": M.oneOf(["enter", "mod+enter"], "enter"),
+		success: M.bool(!1),
+		value: M.string(),
+		variant: M.string()
 	},
-	setup(e) {
-		let t = M(), n = N(), r = D(y), i = b(e, r), a = i.disabled, o = p(O), s = j(), c = m(), l = g({
-			disabled: a,
-			error: e.error,
-			helper: e.helper,
-			maxLength: e.maxlength,
-			onInput: (e, n) => t("input", {
-				originalEvent: e,
-				value: n
-			}),
+	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");
+			},
 			prefix: "composer",
-			readonly: e.readonly,
-			required: e.required,
-			signal: o,
-			validateOn: r?.validateOn,
-			value: e.value
+			readonly: a.readonly,
+			required: a.required,
+			signal: u,
+			value: a.value
 		});
-		l.attachFormField(I({
-			disabled: l.disabled,
+		x(o, () => p.value.value, (e) => {
+			p.value.value = e;
+		}), p.attachFormField(F({
+			disabled: p.disabled,
 			onReset: () => {
-				l.reset(), c.recompute();
+				p.reset(), f.recompute();
 			},
 			toFormValue: (e) => e,
-			validationMessage: l.validationMessage,
-			validity: l.validity,
-			value: l.value
+			validationMessage: p.validationMessage,
+			validity: p.validity,
+			value: p.value
 		}));
-		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());
+		function m(e) {
+			s("send", {
+				originalEvent: e,
+				value: p.value.value.trim()
+			}) && a["clear-on-send"].value !== !1 && (p.clear(), f.recompute(), d.value?.focus());
 		}
-		let d = _({
-			disabled: a,
-			loading: F(() => !!e.loading.value),
-			onSend: u,
-			sendShortcut: e["send-shortcut"],
-			value: l.value
+		let h = i({
+			disabled: l,
+			loading: L(() => !!a.loading.value),
+			onSend: m,
+			sendShortcut: a["send-shortcut"],
+			value: p.value
 		});
-		return k(s, (t) => {
-			let n = l.wire(t), r = c.wire(t), i = h(e.ref, t), a = (e) => d.handleKeydown(e);
-			return t.addEventListener("keydown", a), () => {
-				t.removeEventListener("keydown", a), n(), r(), i();
+		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();
 			};
-		}), w({ attr: {
-			error: v(l.errorText),
-			size: i.size,
-			success: () => e.success.value && !l.errorText.value ? !0 : void 0,
-			variant: i.variant
-		} }), E`
+		}), T({ attr: {
+			error: v(p.errorText),
+			size: a.size,
+			success: () => a.success.value && !p.errorText.value ? !0 : void 0,
+			variant: a.variant
+		} }), O`
       <div class="composer" part="composer">
         <textarea
           class="field"
           part="field"
-          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="${P(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>
-        ${S(l.errorText)} ${x(l)}
+          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}"
+          value="${k(p.value)}"
+          aria-label="${() => a.label.value || "Message"}"
+          aria-keyshortcuts="${h.keyShortcutsHint}"
+          aria-describedby="${p.ariaDescribedBy}"
+          aria-errormessage="${p.ariaErrorMessage}"
+          aria-invalid="${p.ariaInvalid}"></textarea>
+        ${b(p.errorText)} ${y(p)}
         <div class="toolbar" part="toolbar">
           <div class="toolbar-start" part="toolbar-start">
             <slot name="prefix"></slot>
@@ -123,20 +121,22 @@ T(z, {
           <div class="toolbar-end" part="toolbar-end">
             <slot name="suffix"></slot>
             <slot name="send"></slot>
-            ${() => n.has("send").value ? "" : E`<ore-button
-                    class="send-btn"
-                    part="send-button"
-                    type="button"
-                    icon-only
-                    variant="solid"
-                    :color="${() => e.color.value || "primary"}"
-                    :size="${i.size}"
-                    :label="${() => e["send-label"].value || L}"
-                    ?loading="${() => !!e.loading.value}"
-                    ?disabled="${() => !d.canSend.value}"
-                    @click="${(e) => d.send(e)}">
-                    <ore-icon name="${() => e["send-icon"].value || R}" size="16"></ore-icon>
-                  </ore-button>`}
+            ${() => c.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}"
+                      ?disabled="${() => !h.canSend.value}"
+                      @click="${(e) => h.send(e)}">
+                      <ore-icon name="${() => a["send-icon"].value || z}" size="16"></ore-icon>
+                    </ore-button>
+                  `}
           </div>
         </div>
       </div>
@@ -144,15 +144,15 @@ T(z, {
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		i,
-		e,
-		t,
-		r,
+		l,
+		a,
 		o,
-		a(".field"),
-		n(f),
-		C,
-		s({
+		c,
+		d,
+		u(".field"),
+		s(_),
+		w,
+		f({
 			container: ".composer",
 			text: ".field",
 			tokenPrefix: "message-composer"
@@ -160,6 +160,6 @@ T(z, {
 	]
 });
 //#endregion
-export { z as MESSAGE_COMPOSER_TAG };
+export { B as MESSAGE_COMPOSER_TAG };
 
 //# sourceMappingURL=message-composer.js.map

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 } 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 '../../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  fieldVariantMixin,\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 { renderFieldStatusRegion, renderStatusIcon } from '../shared/templates';\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  /**\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 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} 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 `<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 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 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 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: fCtxProps.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: fCtxProps.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`<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    // 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 { 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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"}

package/dist/navbar.cjs

@@ -1,7 +1,7 @@
-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`
+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`
       <nav part="nav" aria-label="${e.label}">
         <div class="navbar" part="bar">
-          <div class="navbar-logo" part="logo" ?hidden=${()=>!i()}>
+          <div class="navbar-logo" part="logo" ?hidden=${()=>!i.value}>
             <slot name="logo"></slot>
           </div>
 
@@ -21,13 +21,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             class="mobile-toggle"
             part="mobile-toggle"
             type="button"
-            aria-label="${()=>a()?b.value?`Close navigation menu`:`Open navigation menu`:v.value?`Close navigation menu`:`Open navigation menu`}"
+            aria-label="${()=>g.value?x.value?`Close navigation menu`:`Open navigation menu`:y.value?`Close navigation menu`:`Open navigation menu`}"
             aria-controls="mobile-menu-panel"
-            aria-expanded="${()=>String(a()?b.value:v.value)}"
-            ?hidden=${()=>!y.value||!a()&&!g.value}
-            @click="${N}">
+            aria-expanded="${()=>String(g.value?x.value:y.value)}"
+            ?hidden=${()=>!b.value||!g.value&&!_.value}
+            @click="${P}">
             <ore-icon
-              name="${()=>(a()?b.value:v.value)?`x`:`menu`}"
+              name="${()=>(g.value?x.value:y.value)?`x`:`menu`}"
               size="18"
               stroke-width="2.5"
               aria-hidden="true"></ore-icon>
@@ -39,12 +39,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           class="mobile-menu-panel"
           part="mobile-menu"
           role="navigation"
-          :aria-label="${()=>`${e.label.value} mobile menu`}"
-          ?hidden=${()=>!y.value||!b.value||!a()}>
+          aria-label="${()=>`${e.label.value} mobile menu`}"
+          ?hidden=${()=>!b.value||!x.value||!g.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(),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 _=`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`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!n()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -58,14 +58,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               class="item"
               part="item"
               href="${e.href}"
-              :rel="${l}"
-              :target="${e.target}"
+              rel="${l}"
+              target="${e.target}"
               aria-current="${()=>e.active.value?`page`:null}"
               @click=${u}>
               ${d()}
             </a>
-          `: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>`}
+          `: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,a.default]}),exports.NAVBAR_CTX=h,exports.NAVBAR_ITEM_TAG=_,exports.NAVBAR_TAG=g;
 //# sourceMappingURL=navbar.cjs.map