@vielzeug/refine 1.8.0 → 2.0.0

package/dist/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../src/content/text/text.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\n\nimport styles from './text.css?inline';\n\n/** Text component properties */\nexport type OreTextProps = {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right' | 'justify';\n  /** Semantic HTML element to render as — sets the correct ARIA role/level on the host */\n  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code';\n  /** Text color (semantic + theme colors) */\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'heading'\n    | 'body'\n    | 'muted'\n    | 'tertiary'\n    | 'disabled'\n    | 'contrast';\n  /** Italic text style */\n  italic?: boolean;\n  /** Clamp text to N lines with an ellipsis (multi-line truncation) */\n  lines?: number;\n  /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Enable single-line text truncation with ellipsis */\n  truncate?: boolean;\n  /** Text semantic variant */\n  variant?: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code';\n  /** Font weight */\n  weight?: 'normal' | 'medium' | 'semibold' | 'bold';\n};\n\n/**\n * A typography component with semantic variants and responsive sizing.\n *\n * @element ore-text\n *\n * @attr {string} variant - Text variant: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'\n * @attr {string} size - Font size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'. Maps to --text-* tokens for body variants and --heading-* tokens for the heading variant.\n * @attr {string} weight - Font weight: 'normal' | 'medium' | 'semibold' | 'bold'\n * @attr {string} color - Text color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast'\n * @attr {string} align - Text alignment: 'left' | 'center' | 'right' | 'justify'\n * @attr {boolean} truncate - Truncate text with ellipsis when it overflows (single-line)\n * @attr {number} lines - Clamp to N lines with ellipsis (multi-line truncation)\n * @attr {boolean} italic - Italic text style\n * @attr {string} as - Semantic HTML element: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'\n *\n * @slot - Text content\n *\n * @cssprop --text-size - Font size\n * @cssprop --text-weight - Font weight\n * @cssprop --text-color - Text color\n * @cssprop --text-line-height - Line height\n * @cssprop --text-letter-spacing - Letter spacing\n *\n * @example\n * ```html\n * <ore-text variant=\"heading\" size=\"2xl\" weight=\"bold\">Welcome</ore-text>\n * <ore-text as=\"h2\" variant=\"heading\" size=\"xl\">Section title</ore-text>\n * <ore-text color=\"primary\" weight=\"semibold\">Important notice</ore-text>\n * <ore-text variant=\"code\">npm install</ore-text>\n * <ore-text lines=\"2\">Long paragraph that clamps at two lines…</ore-text>\n * ```\n */\n\nexport const TEXT_TAG = 'ore-text' as const;\ndefine<OreTextProps>(TEXT_TAG, {\n  props: {\n    align: prop.string<'left' | 'center' | 'right' | 'justify'>(),\n    as: prop.string<'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'>(),\n    color: prop.string<\n      | 'primary'\n      | 'secondary'\n      | 'info'\n      | 'success'\n      | 'warning'\n      | 'error'\n      | 'heading'\n      | 'body'\n      | 'muted'\n      | 'tertiary'\n      | 'disabled'\n      | 'contrast'\n    >(),\n    italic: prop.bool(),\n    lines: prop.number(),\n    size: prop.string<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    truncate: prop.bool(),\n    variant: prop.string<'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'>(),\n    weight: prop.string<'normal' | 'medium' | 'semibold' | 'bold'>(),\n  },\n  setup(props) {\n    bind({\n      attr: {\n        'aria-level': () => {\n          const match = /^h([1-6])$/.exec((props.as.value as string) ?? '');\n\n          return match ? match[1] : null;\n        },\n        role: () => (/^h([1-6])$/.test((props.as.value as string) ?? '') ? 'heading' : null),\n      },\n      style: {\n        '--_lines': () => (props.lines.value != null ? String(props.lines.value) : null),\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":";;;AAuEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,OAAO,EAAK,OAAgD;EAC5D,IAAI,EAAK,OAA0F;EACnG,OAAO,EAAK,OAaV;EACF,QAAQ,EAAK,KAAK;EAClB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,OAAiD;EAC5D,UAAU,EAAK,KAAK;EACpB,SAAS,EAAK,OAAuE;EACrF,QAAQ,EAAK,OAAkD;CACjE;CACA,MAAM,GAAO;EAeX,OAdA,EAAK;GACH,MAAM;IACJ,oBAAoB;KAClB,IAAM,IAAQ,aAAa,KAAM,EAAM,GAAG,SAAoB,EAAE;KAEhE,OAAO,IAAQ,EAAM,KAAK;IAC5B;IACA,YAAa,aAAa,KAAM,EAAM,GAAG,SAAoB,EAAE,IAAI,YAAY;GACjF;GACA,OAAO,EACL,kBAAmB,EAAM,MAAM,SAAS,OAAmC,OAA5B,OAAO,EAAM,MAAM,KAAK,EACzE;EACF,CAAC,GAEM,CAAI;CACb;CACA,QAAQ,CAAC,CAAM;AACjB,CAAC"}
+{"version":3,"file":"text.js","names":[],"sources":["../src/content/text/text.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\n\nimport styles from './text.css?inline';\n\n/** Text component properties */\nexport type OreTextProps = {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right' | 'justify';\n  /** Semantic HTML element to render as — sets the correct ARIA role/level on the host */\n  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code';\n  /** Text color (semantic + theme colors) */\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'heading'\n    | 'body'\n    | 'muted'\n    | 'tertiary'\n    | 'disabled'\n    | 'contrast';\n  /** Italic text style */\n  italic?: boolean;\n  /** Clamp text to N lines with an ellipsis (multi-line truncation) */\n  lines?: number;\n  /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Enable single-line text truncation with ellipsis */\n  truncate?: boolean;\n  /** Text semantic variant */\n  variant?: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code';\n  /** Font weight */\n  weight?: 'normal' | 'medium' | 'semibold' | 'bold';\n};\n\n/**\n * A typography component with semantic variants and responsive sizing.\n *\n * @element ore-text\n *\n * @attr {string} variant - Text variant: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'\n * @attr {string} size - Font size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'. Maps to --text-* tokens for body variants and --heading-* tokens for the heading variant.\n * @attr {string} weight - Font weight: 'normal' | 'medium' | 'semibold' | 'bold'\n * @attr {string} color - Text color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast'\n * @attr {string} align - Text alignment: 'left' | 'center' | 'right' | 'justify'\n * @attr {boolean} truncate - Truncate text with ellipsis when it overflows (single-line)\n * @attr {number} lines - Clamp to N lines with ellipsis (multi-line truncation)\n * @attr {boolean} italic - Italic text style\n * @attr {string} as - Semantic HTML element: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'\n *\n * @slot - Text content\n *\n * @cssprop --text-size - Font size\n * @cssprop --text-weight - Font weight\n * @cssprop --text-color - Text color\n * @cssprop --text-line-height - Line height\n * @cssprop --text-letter-spacing - Letter spacing\n *\n * @example\n * ```html\n * <ore-text variant=\"heading\" size=\"2xl\" weight=\"bold\">Welcome</ore-text>\n * <ore-text as=\"h2\" variant=\"heading\" size=\"xl\">Section title</ore-text>\n * <ore-text color=\"primary\" weight=\"semibold\">Important notice</ore-text>\n * <ore-text variant=\"code\">npm install</ore-text>\n * <ore-text lines=\"2\">Long paragraph that clamps at two lines…</ore-text>\n * ```\n */\n\nexport const TEXT_TAG = 'ore-text' as const;\ndefine<OreTextProps>(TEXT_TAG, {\n  props: {\n    align: prop.string<'left' | 'center' | 'right' | 'justify'>(),\n    as: prop.string<'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'>(),\n    color: prop.string<\n      | 'primary'\n      | 'secondary'\n      | 'info'\n      | 'success'\n      | 'warning'\n      | 'error'\n      | 'heading'\n      | 'body'\n      | 'muted'\n      | 'tertiary'\n      | 'disabled'\n      | 'contrast'\n    >(),\n    italic: prop.bool(),\n    lines: prop.number(),\n    size: prop.string<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    truncate: prop.bool(),\n    variant: prop.string<'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'>(),\n    weight: prop.string<'normal' | 'medium' | 'semibold' | 'bold'>(),\n  },\n  setup(props) {\n    bind({\n      attr: {\n        'aria-level': () => {\n          const match = /^h([1-6])$/.exec((props.as.value as string) ?? '');\n\n          return match ? match[1] : null;\n        },\n        role: () => (/^h([1-6])$/.test((props.as.value as string) ?? '') ? 'heading' : null),\n      },\n      style: {\n        '--_lines': () => (props.lines.value != null ? String(props.lines.value) : null),\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":";;;AAuEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,OAAO,EAAK,OAAgD;EAC5D,IAAI,EAAK,OAA0F;EACnG,OAAO,EAAK,OAaV;EACF,QAAQ,EAAK,KAAK;EAClB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,OAAiD;EAC5D,UAAU,EAAK,KAAK;EACpB,SAAS,EAAK,OAAuE;EACrF,QAAQ,EAAK,OAAkD;CACjE;CACA,MAAM,GAAO;EAeX,OAdA,EAAK;GACH,MAAM;IACJ,oBAAoB;KAClB,IAAM,IAAQ,aAAa,KAAM,EAAM,GAAG,SAAoB,EAAE;KAEhE,OAAO,IAAQ,EAAM,KAAK;IAC5B;IACA,YAAa,aAAa,KAAM,EAAM,GAAG,SAAoB,EAAE,IAAI,YAAY;GACjF;GACA,OAAO,EACL,kBAAmB,EAAM,MAAM,SAAS,OAAmC,OAA5B,OAAO,EAAM,MAAM,KAAK,EACzE;EACF,CAAC,GAEM,CAAI;;;CAGb;CACA,QAAQ,CAAC,CAAM;AACjB,CAAC"}

package/dist/textarea.cjs

@@ -1,30 +1,30 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/mixins/field-variants.css.cjs"),r=require("./styles/index.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/auto-resize.cjs"),c=require("./headless/ref-callback.cjs"),l=require("./headless/text-field.cjs"),u=require("./inputs/shared/field-binding.cjs"),d=require("./inputs/shared/form-context.cjs"),f=require("./inputs/shared/templates.cjs"),p=require("./inputs/textarea/textarea.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple"),g=require("@vielzeug/ore/forms"),_=require("@vielzeug/ore/directives");var v=`ore-textarea`;(0,m.define)(v,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,...i.roundableBundle,"auto-resize":m.prop.bool(!1),error:m.prop.string(),fullwidth:m.prop.bool(!1),helper:m.prop.string(),label:m.prop.string(),"label-placement":m.prop.oneOf([`inset`,`outside`],`inset`),loading:m.prop.bool(!1),maxlength:m.prop.json(void 0),name:m.prop.string(),"no-resize":m.prop.bool(!1),placeholder:m.prop.string(),readonly:m.prop.bool(!1),ref:m.prop.data(),required:m.prop.bool(!1),resize:m.prop.string(),rows:m.prop.json(void 0),success:m.prop.bool(!1),value:m.prop.string(),variant:m.prop.string()},setup(e){let t=(0,m.useEmit)(),n=m.watchEffect,r=(0,m.inject)(d.FORM_CTX),i=d.useFormContext(e,r),a=(0,m.ref)(),p=s.createAutoResize({enabled:e[`auto-resize`]}),v=(0,h.computed)(()=>i.disabled.value||e.loading.value),y=o.lifecycleSignal(m.onCleanup),b=l.createTextField({disabled:v,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],maxLength:e.maxlength,onChange:(e,n)=>{t(`change`,{originalEvent:e,value:n})},onInput:(e,n)=>{t(`input`,{originalEvent:e,value:n})},prefix:`textarea`,readonly:e.readonly,required:e.required,signal:y,validateOn:r?.validateOn,value:e.value});b.attachFormField((0,g.useField)({disabled:b.disabled,onReset:()=>{b.reset(),requestAnimationFrame(()=>p.recompute())},toFormValue:e=>e,validationMessage:b.validationMessage,validity:b.validity,value:b.value}));let{ariaDescribedBy:x,ariaErrorMessage:S,ariaInvalid:C,ariaLabelledBy:w,assistiveId:T,counter:E,errorId:D,errorText:O,fieldId:k,helperText:A,labelId:j,labelVisible:M}=b;return(0,m.onElement)(a,t=>{let r=b.wire(t),i=p.wire(t),a=c.bindRefCallback(e.ref,t),o=n(()=>{t.style.resize=e[`auto-resize`].value||e[`no-resize`].value?`none`:e.resize.value||`vertical`,requestAnimationFrame(()=>p.recompute())});return()=>{a(),r(),i(),o()}}),(0,m.bind)({attr:{error:u.errorAttr(O),size:i.size,success:()=>e.success.value&&!O.value?!0:void 0,variant:i.variant}}),m.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/auto-resize.cjs"),n=require("./core/ref-callback.cjs"),r=require("./core/text-field.cjs"),i=require("./styles/mixins/accessibility.css.cjs"),a=require("./styles/mixins/shape.css.cjs"),o=require("./styles/mixins/states.css.cjs"),s=require("./styles/mixins/theme.css.cjs"),c=require("./styles/mixins/field-variants.css.cjs"),l=require("./shared/prop-bundles.cjs"),u=require("./shared/size-presets.cjs"),d=require("./inputs/shared/field-binding.cjs"),f=require("./inputs/shared/templates.cjs"),p=require("./inputs/shared/native-field-event.cjs"),m=require("./inputs/textarea/textarea.css.cjs");let h=require("@vielzeug/ore"),g=require("@vielzeug/ripple");var _=`ore-textarea`;(0,h.define)(_,{formAssociated:!0,props:{...l.themableBundle,...l.sizableBundle,...l.disablableBundle,...l.roundableBundle,"auto-resize":h.prop.bool(!1),error:h.prop.string(),fullwidth:h.prop.bool(!1),helper:h.prop.string(),label:h.prop.string(),"label-placement":h.prop.oneOf([`inset`,`outside`],`inset`),loading:h.prop.bool(!1),maxlength:h.prop.json(void 0),name:h.prop.string(),"no-resize":h.prop.bool(!1),placeholder:h.prop.string(),readonly:h.prop.bool(!1),ref:h.prop.data(),required:h.prop.bool(!1),resize:h.prop.string(),rows:h.prop.json(void 0),success:h.prop.bool(!1),value:h.prop.string(),variant:h.prop.string()},setup(i){let a=(0,h.getHost)(),o=h.watchEffect,s=(0,h.ref)(),c=t.createAutoResize({enabled:i[`auto-resize`]}),l=(0,g.computed)(()=>i.disabled.value||i.loading.value),u=e.lifecycleSignal(h.onCleanup),m=r.createTextField({disabled:l,error:i.error,helper:i.helper,label:i.label,labelPlacement:i[`label-placement`],maxLength:i.maxlength,onChange:(e,t)=>{p.setFieldValue(a,t),p.dispatchNativeFieldEvent(a,`change`)},onInput:(e,t)=>{p.setFieldValue(a,t),p.dispatchNativeFieldEvent(a,`input`)},prefix:`textarea`,readonly:i.readonly,required:i.required,signal:u,value:i.value});p.defineFieldValue(a,()=>m.value.value,e=>{m.value.value=e}),m.attachFormField((0,h.useField)({disabled:m.disabled,onReset:()=>{m.reset(),requestAnimationFrame(()=>c.recompute())},toFormValue:e=>e,validationMessage:m.validationMessage,validity:m.validity,value:m.value}));let{ariaDescribedBy:_,ariaErrorMessage:v,ariaInvalid:y,ariaLabelledBy:b,assistiveId:x,counter:S,errorId:C,errorText:w,fieldId:T,helperText:E,labelId:D,labelVisible:O}=m;return(0,h.onElement)(s,e=>{let t=m.wire(e),r=c.wire(e),a=n.bindRefCallback(i.ref,e),s=o(()=>{e.style.resize=i[`auto-resize`].value||i[`no-resize`].value?`none`:i.resize.value||`vertical`,requestAnimationFrame(()=>c.recompute())});return()=>{a(),t(),r(),s()}}),(0,h.bind)({attr:{error:d.errorAttr(w),size:i.size,success:()=>i.success.value&&!w.value?!0:void 0,variant:i.variant}}),h.html`
       <div class="textarea-wrapper" part="wrapper">
-        <label class="label" part="label" for="${k}" id="${j}" ?hidden="${()=>!M.value}"
-          >${e.label}</label
-        >
+        <label class="label" part="label" for="${T}" id="${D}" ?hidden="${()=>!O.value}">
+          ${i.label}
+        </label>
         <div class="field" part="field">
           <textarea
             part="textarea"
-            ref="${a}"
-            id="${k}"
-            :name="${e.name}"
-            :placeholder="${e.placeholder}"
-            :rows="${e.rows}"
-            :maxlength="${e.maxlength}"
-            ?disabled="${v}"
-            ?readonly="${e.readonly}"
-            ?required="${e.required}"
-            :value="${(0,_.live)(b.value)}"
-            :aria-describedby="${x}"
-            :aria-errormessage="${S}"
-            :aria-invalid="${C}"
-            :aria-labelledby="${w}"
-            :aria-busy="${()=>e.loading.value?`true`:null}"></textarea>
-          ${f.renderStatusIcon(O)}
+            ref="${s}"
+            id="${T}"
+            name="${i.name}"
+            placeholder="${i.placeholder}"
+            rows="${i.rows}"
+            maxlength="${i.maxlength}"
+            ?disabled="${l}"
+            ?readonly="${i.readonly}"
+            ?required="${i.required}"
+            value="${(0,h.live)(m.value)}"
+            aria-describedby="${_}"
+            aria-errormessage="${v}"
+            aria-invalid="${y}"
+            aria-labelledby="${b}"
+            aria-busy="${()=>i.loading.value?`true`:null}"></textarea>
+          ${f.renderStatusIcon(w)}
           <span class="field-spinner" part="spinner" role="status" aria-label="Loading"></span>
         </div>
-        ${f.renderFieldStatusRegion({assistiveId:T,counter:E,errorId:D,errorText:O,helperText:A})}
+        ${f.renderFieldStatusRegion({assistiveId:x,counter:S,errorId:C,errorText:w,helperText:E})}
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[...r.fieldMixins,e.sizeVariantMixin(a.TEXTAREA_SIZE_PRESET),t.forcedColorsFocusMixin(`textarea`),p.default,n.fieldVariantMixin({container:`.field`,text:`textarea`,tokenPrefix:`textarea`})]}),exports.TEXTAREA_TAG=v;
+    `},shadow:{delegatesFocus:!0},styles:[s.colorThemeMixin,i.coarsePointerMixin,i.reducedMotionMixin,a.roundedVariantMixin,o.disabledLoadingMixin,a.sizeVariantMixin(u.TEXTAREA_SIZE_PRESET),s.forcedColorsFocusMixin(`textarea`),m.default,c.fieldVariantMixin({container:`.field`,text:`textarea`,tokenPrefix:`textarea`})]}),exports.TEXTAREA_TAG=_;
 //# sourceMappingURL=textarea.cjs.map

package/dist/textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.cjs","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, watchEffect } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { bindRefCallback, createAutoResize, lifecycleSignal, createTextField } from '../../headless';\nimport '../../content/icon/icon';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport { fieldMixins, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderFieldStatusRegion, renderStatusIcon } from '../shared/templates';\nimport componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type OreTextareaEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /**\n   * Shows an inline spinner inside the field and forces the inner `<textarea>` into\n   * `disabled` for the duration — use while an async validation/submission request\n   * is in flight to prevent double-submits.\n   */\n  loading?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable a manual resize handle */\n  'no-resize'?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw element.\n   * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element ore-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Fired on every keystroke with current value. detail: { value: string; originalEvent: Event }\n * @fires change - Fired on blur with changed value. detail: { value: string; originalEvent: Event }\n *\n * @slot helper - Complex helper content\n *\n * @part status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\n *\n * @cssprop --textarea-bg - Background color\n * @cssprop --textarea-border-color - Border color\n * @cssprop --textarea-placeholder-color - Placeholder text color\n * @cssprop --textarea-radius - Border radius\n * @cssprop --textarea-padding - Inner padding (block inline)\n * @cssprop --textarea-gap - Gap between label and field\n * @cssprop --textarea-font-size - Font size\n * @cssprop --textarea-min-height - Minimum field height\n * @cssprop --textarea-max-height - Maximum field height (none = unlimited)\n * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')\n * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --textarea-focus-bg - Field background when focused (flat variant)\n * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)\n *\n * @part wrapper - Outer wrapper element.\n * @part label - Label element.\n * @part field - Field container.\n * @part textarea - The native `<textarea>` element.\n * @part helper - The helper text element.\n * @part error - The error text element (`role=\"alert\"`).\n *\n * @example\n * ```html\n * <ore-textarea></ore-textarea>\n * <ore-textarea label=\"Bio\" success></ore-textarea>\n * <ore-textarea label=\"Bio\" loading></ore-textarea>\n * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps>(TEXTAREA_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'auto-resize': prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    'no-resize': prop.bool(false),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLTextAreaElement | null) => void) | null>(),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreTextareaEvents>();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => fCtxProps.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (event: Event, value: string) => {\n        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event: Event, value: string) => {\n        emit('input', { originalEvent: event, value });\n      },\n      prefix: 'textarea',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          requestAnimationFrame(() => autoResize.recompute());\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      counter,\n      errorId,\n      errorText,\n      fieldId: textareaId,\n      helperText,\n      labelId,\n      labelVisible,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireEl = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const unwireRef = bindRefCallback(props.ref, textareaEl);\n\n      const stopLayoutEffect = watch(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        // Deferred a frame: on mount (or right after `auto-resize` flips true) the browser\n        // hasn't necessarily finished laying out the textarea yet, so `scrollHeight` read\n        // synchronously here could be stale.\n        requestAnimationFrame(() => autoResize.recompute());\n      });\n\n      return () => {\n        unwireRef();\n        unwireEl();\n        unwireAutoResize();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(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 && !errorText.value ? true : undefined),\n        variant: fCtxProps.variant,\n      },\n    });\n\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <label class=\"label\" part=\"label\" for=\"${textareaId}\" id=\"${labelId}\" ?hidden=\"${() => !labelVisible.value}\"\n          >${props.label}</label\n        >\n        <div class=\"field\" part=\"field\">\n          <textarea\n            part=\"textarea\"\n            ref=\"${textareaRef}\"\n            id=\"${textareaId}\"\n            :name=\"${props.name}\"\n            :placeholder=\"${props.placeholder}\"\n            :rows=\"${props.rows}\"\n            :maxlength=\"${props.maxlength}\"\n            ?disabled=\"${isDisabled}\"\n            ?readonly=\"${props.readonly}\"\n            ?required=\"${props.required}\"\n            :value=\"${live(tf.value)}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            :aria-errormessage=\"${ariaErrorMessage}\"\n            :aria-invalid=\"${ariaInvalid}\"\n            :aria-labelledby=\"${ariaLabelledBy}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"></textarea>\n          ${renderStatusIcon(errorText)}\n          <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n        </div>\n        ${renderFieldStatusRegion({ assistiveId, counter, errorId, errorText, helperText })}\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(TEXTAREA_SIZE_PRESET),\n    forcedColorsFocusMixin('textarea'),\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: '.field', text: 'textarea', tokenPrefix: 'textarea' }),\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"textarea.cjs","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, html, prop, ref, bind, getHost, onCleanup, onElement, watchEffect } from '@vielzeug/ore';\nimport { live, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { bindRefCallback, createAutoResize, lifecycleSignal, createTextField } from '../../core';\nimport '../../content/icon/icon';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\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 componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type OreTextareaEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\nexport type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /**\n   * Shows an inline spinner inside the field and forces the inner `<textarea>` into\n   * `disabled` for the duration — use while an async validation/submission request\n   * is in flight to prevent double-submits.\n   */\n  loading?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable a manual resize handle */\n  'no-resize'?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw element.\n   * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element ore-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Fired on every keystroke with current value.\n * @fires change - Fired on blur with changed value.\n *\n * @slot helper - Complex helper content\n *\n * @part status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\n *\n * @cssprop --textarea-bg - Background color\n * @cssprop --textarea-border-color - Border color\n * @cssprop --textarea-placeholder-color - Placeholder text color\n * @cssprop --textarea-radius - Border radius\n * @cssprop --textarea-padding - Inner padding (block inline)\n * @cssprop --textarea-gap - Gap between label and field\n * @cssprop --textarea-font-size - Font size\n * @cssprop --textarea-min-height - Minimum field height\n * @cssprop --textarea-max-height - Maximum field height (none = unlimited)\n * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')\n * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --textarea-focus-bg - Field background when focused (flat variant)\n * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)\n *\n * @part wrapper - Outer wrapper element.\n * @part label - Label element.\n * @part field - Field container.\n * @part textarea - The native `<textarea>` element.\n * @part helper - The helper text element.\n * @part error - The error text element (`role=\"alert\"`).\n *\n * @example\n * ```html\n * <ore-textarea></ore-textarea>\n * <ore-textarea label=\"Bio\" success></ore-textarea>\n * <ore-textarea label=\"Bio\" loading></ore-textarea>\n * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps>(TEXTAREA_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'auto-resize': prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    'no-resize': prop.bool(false),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLTextAreaElement | null) => void) | null>(),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      onInput: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'textarea',\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    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          requestAnimationFrame(() => autoResize.recompute());\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      counter,\n      errorId,\n      errorText,\n      fieldId: textareaId,\n      helperText,\n      labelId,\n      labelVisible,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireEl = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const unwireRef = bindRefCallback(props.ref, textareaEl);\n\n      const stopLayoutEffect = watch(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        // Deferred a frame: on mount (or right after `auto-resize` flips true) the browser\n        // hasn't necessarily finished laying out the textarea yet, so `scrollHeight` read\n        // synchronously here could be stale.\n        requestAnimationFrame(() => autoResize.recompute());\n      });\n\n      return () => {\n        unwireRef();\n        unwireEl();\n        unwireAutoResize();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(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 && !errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <label class=\"label\" part=\"label\" for=\"${textareaId}\" id=\"${labelId}\" ?hidden=\"${() => !labelVisible.value}\">\n          ${props.label}\n        </label>\n        <div class=\"field\" part=\"field\">\n          <textarea\n            part=\"textarea\"\n            ref=\"${textareaRef}\"\n            id=\"${textareaId}\"\n            name=\"${props.name}\"\n            placeholder=\"${props.placeholder}\"\n            rows=\"${props.rows}\"\n            maxlength=\"${props.maxlength}\"\n            ?disabled=\"${isDisabled}\"\n            ?readonly=\"${props.readonly}\"\n            ?required=\"${props.required}\"\n            value=\"${live(tf.value)}\"\n            aria-describedby=\"${ariaDescribedBy}\"\n            aria-errormessage=\"${ariaErrorMessage}\"\n            aria-invalid=\"${ariaInvalid}\"\n            aria-labelledby=\"${ariaLabelledBy}\"\n            aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"></textarea>\n          ${renderStatusIcon(errorText)}\n          <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n        </div>\n        ${renderFieldStatusRegion({ assistiveId, counter, errorId, errorText, helperText })}\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    disabledLoadingMixin,\n    sizeVariantMixin(TEXTAREA_SIZE_PRESET),\n    forcedColorsFocusMixin('textarea'),\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: '.field', text: 'textarea', tokenPrefix: 'textarea' }),\n  ],\n});\n"],"mappings":"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"}

package/dist/textarea.js

@@ -1,143 +1,141 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { forcedColorsFocusMixin as t } from "./styles/mixins/theme.css.js";
-import { fieldVariantMixin as n } from "./styles/mixins/field-variants.css.js";
-import { fieldMixins as r } from "./styles/index.js";
-import { disablableBundle as i, roundableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
-import { TEXTAREA_SIZE_PRESET as c } from "./shared/size-presets.js";
-import { lifecycleSignal as l } from "./headless/ore.js";
-import { createAutoResize as u } from "./headless/auto-resize.js";
-import { bindRefCallback as d } from "./headless/ref-callback.js";
-import { createTextField as f } from "./headless/text-field.js";
-import { errorAttr as p } from "./inputs/shared/field-binding.js";
-import { FORM_CTX as m, useFormContext as h } from "./inputs/shared/form-context.js";
-import { renderFieldStatusRegion as g, renderStatusIcon as _ } from "./inputs/shared/templates.js";
-import v from "./inputs/textarea/textarea.css.js";
-import { bind as y, define as b, html as x, inject as S, onCleanup as C, onElement as w, prop as T, ref as E, useEmit as D, watchEffect as O } from "@vielzeug/ore";
-import { computed as k } from "@vielzeug/ripple";
-import { useField as A } from "@vielzeug/ore/forms";
-import { live as j } from "@vielzeug/ore/directives";
+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 { coarsePointerMixin as i, reducedMotionMixin as a } from "./styles/mixins/accessibility.css.js";
+import { roundedVariantMixin as o, 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 } from "./styles/mixins/theme.css.js";
+import { fieldVariantMixin as d } from "./styles/mixins/field-variants.css.js";
+import { disablableBundle as f, roundableBundle as p, sizableBundle as m, themableBundle as h } from "./shared/prop-bundles.js";
+import { TEXTAREA_SIZE_PRESET as g } from "./shared/size-presets.js";
+import { errorAttr as _ } from "./inputs/shared/field-binding.js";
+import { renderFieldStatusRegion as v, renderStatusIcon as y } from "./inputs/shared/templates.js";
+import { defineFieldValue as b, dispatchNativeFieldEvent as x, setFieldValue as S } from "./inputs/shared/native-field-event.js";
+import C from "./inputs/textarea/textarea.css.js";
+import { bind as w, define as T, getHost as E, html as D, live as O, onCleanup as k, onElement as A, prop as j, ref as M, useField as N, watchEffect as P } from "@vielzeug/ore";
+import { computed as F } from "@vielzeug/ripple";
 //#region src/inputs/textarea/textarea.ts
-var M = "ore-textarea";
-b(M, {
+var I = "ore-textarea";
+T(I, {
 	formAssociated: !0,
 	props: {
-		...s,
-		...o,
-		...i,
-		...a,
-		"auto-resize": T.bool(!1),
-		error: T.string(),
-		fullwidth: T.bool(!1),
-		helper: T.string(),
-		label: T.string(),
-		"label-placement": T.oneOf(["inset", "outside"], "inset"),
-		loading: T.bool(!1),
-		maxlength: T.json(void 0),
-		name: T.string(),
-		"no-resize": T.bool(!1),
-		placeholder: T.string(),
-		readonly: T.bool(!1),
-		ref: T.data(),
-		required: T.bool(!1),
-		resize: T.string(),
-		rows: T.json(void 0),
-		success: T.bool(!1),
-		value: T.string(),
-		variant: T.string()
+		...h,
+		...m,
+		...f,
+		...p,
+		"auto-resize": j.bool(!1),
+		error: j.string(),
+		fullwidth: j.bool(!1),
+		helper: j.string(),
+		label: j.string(),
+		"label-placement": j.oneOf(["inset", "outside"], "inset"),
+		loading: j.bool(!1),
+		maxlength: j.json(void 0),
+		name: j.string(),
+		"no-resize": j.bool(!1),
+		placeholder: j.string(),
+		readonly: j.bool(!1),
+		ref: j.data(),
+		required: j.bool(!1),
+		resize: j.string(),
+		rows: j.json(void 0),
+		success: j.bool(!1),
+		value: j.string(),
+		variant: j.string()
 	},
-	setup(e) {
-		let t = D(), n = O, r = S(m), i = h(e, r), a = E(), o = u({ enabled: e["auto-resize"] }), s = k(() => i.disabled.value || e.loading.value), c = l(C), v = f({
-			disabled: s,
-			error: e.error,
-			helper: e.helper,
-			label: e.label,
-			labelPlacement: e["label-placement"],
-			maxLength: e.maxlength,
-			onChange: (e, n) => {
-				t("change", {
-					originalEvent: e,
-					value: n
-				});
+	setup(i) {
+		let a = E(), o = P, s = M(), c = t({ enabled: i["auto-resize"] }), l = F(() => i.disabled.value || i.loading.value), u = e(k), d = r({
+			disabled: l,
+			error: i.error,
+			helper: i.helper,
+			label: i.label,
+			labelPlacement: i["label-placement"],
+			maxLength: i.maxlength,
+			onChange: (e, t) => {
+				S(a, t), x(a, "change");
 			},
-			onInput: (e, n) => {
-				t("input", {
-					originalEvent: e,
-					value: n
-				});
+			onInput: (e, t) => {
+				S(a, t), x(a, "input");
 			},
 			prefix: "textarea",
-			readonly: e.readonly,
-			required: e.required,
-			signal: c,
-			validateOn: r?.validateOn,
-			value: e.value
+			readonly: i.readonly,
+			required: i.required,
+			signal: u,
+			value: i.value
 		});
-		v.attachFormField(A({
-			disabled: v.disabled,
+		b(a, () => d.value.value, (e) => {
+			d.value.value = e;
+		}), d.attachFormField(N({
+			disabled: d.disabled,
 			onReset: () => {
-				v.reset(), requestAnimationFrame(() => o.recompute());
+				d.reset(), requestAnimationFrame(() => c.recompute());
 			},
 			toFormValue: (e) => e,
-			validationMessage: v.validationMessage,
-			validity: v.validity,
-			value: v.value
+			validationMessage: d.validationMessage,
+			validity: d.validity,
+			value: d.value
 		}));
-		let { ariaDescribedBy: b, ariaErrorMessage: T, ariaInvalid: M, ariaLabelledBy: N, assistiveId: P, counter: F, errorId: I, errorText: L, fieldId: R, helperText: z, labelId: B, labelVisible: V } = v;
-		return w(a, (t) => {
-			let r = v.wire(t), i = o.wire(t), a = d(e.ref, t), s = n(() => {
-				t.style.resize = e["auto-resize"].value || e["no-resize"].value ? "none" : e.resize.value || "vertical", requestAnimationFrame(() => o.recompute());
+		let { ariaDescribedBy: f, ariaErrorMessage: p, ariaInvalid: m, ariaLabelledBy: h, assistiveId: g, counter: C, errorId: T, errorText: j, fieldId: I, helperText: L, labelId: R, labelVisible: z } = d;
+		return A(s, (e) => {
+			let t = d.wire(e), r = c.wire(e), a = n(i.ref, e), s = o(() => {
+				e.style.resize = i["auto-resize"].value || i["no-resize"].value ? "none" : i.resize.value || "vertical", requestAnimationFrame(() => c.recompute());
 			});
 			return () => {
-				a(), r(), i(), s();
+				a(), t(), r(), s();
 			};
-		}), y({ attr: {
-			error: p(L),
+		}), w({ attr: {
+			error: _(j),
 			size: i.size,
-			success: () => e.success.value && !L.value ? !0 : void 0,
+			success: () => i.success.value && !j.value ? !0 : void 0,
 			variant: i.variant
-		} }), x`
+		} }), D`
       <div class="textarea-wrapper" part="wrapper">
-        <label class="label" part="label" for="${R}" id="${B}" ?hidden="${() => !V.value}"
-          >${e.label}</label
-        >
+        <label class="label" part="label" for="${I}" id="${R}" ?hidden="${() => !z.value}">
+          ${i.label}
+        </label>
         <div class="field" part="field">
           <textarea
             part="textarea"
-            ref="${a}"
-            id="${R}"
-            :name="${e.name}"
-            :placeholder="${e.placeholder}"
-            :rows="${e.rows}"
-            :maxlength="${e.maxlength}"
-            ?disabled="${s}"
-            ?readonly="${e.readonly}"
-            ?required="${e.required}"
-            :value="${j(v.value)}"
-            :aria-describedby="${b}"
-            :aria-errormessage="${T}"
-            :aria-invalid="${M}"
-            :aria-labelledby="${N}"
-            :aria-busy="${() => e.loading.value ? "true" : null}"></textarea>
-          ${_(L)}
+            ref="${s}"
+            id="${I}"
+            name="${i.name}"
+            placeholder="${i.placeholder}"
+            rows="${i.rows}"
+            maxlength="${i.maxlength}"
+            ?disabled="${l}"
+            ?readonly="${i.readonly}"
+            ?required="${i.required}"
+            value="${O(d.value)}"
+            aria-describedby="${f}"
+            aria-errormessage="${p}"
+            aria-invalid="${m}"
+            aria-labelledby="${h}"
+            aria-busy="${() => i.loading.value ? "true" : null}"></textarea>
+          ${y(j)}
           <span class="field-spinner" part="spinner" role="status" aria-label="Loading"></span>
         </div>
-        ${g({
-			assistiveId: P,
-			counter: F,
-			errorId: I,
-			errorText: L,
-			helperText: z
+        ${v({
+			assistiveId: g,
+			counter: C,
+			errorId: T,
+			errorText: j,
+			helperText: L
 		})}
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		...r,
-		e(c),
-		t("textarea"),
-		v,
-		n({
+		l,
+		i,
+		a,
+		o,
+		c,
+		s(g),
+		u("textarea"),
+		C,
+		d({
 			container: ".field",
 			text: "textarea",
 			tokenPrefix: "textarea"
@@ -145,6 +143,6 @@ b(M, {
 	]
 });
 //#endregion
-export { M as TEXTAREA_TAG };
+export { I as TEXTAREA_TAG };
 
 //# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, watchEffect } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { bindRefCallback, createAutoResize, lifecycleSignal, createTextField } from '../../headless';\nimport '../../content/icon/icon';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport { fieldMixins, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderFieldStatusRegion, renderStatusIcon } from '../shared/templates';\nimport componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type OreTextareaEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /**\n   * Shows an inline spinner inside the field and forces the inner `<textarea>` into\n   * `disabled` for the duration — use while an async validation/submission request\n   * is in flight to prevent double-submits.\n   */\n  loading?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable a manual resize handle */\n  'no-resize'?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw element.\n   * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element ore-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Fired on every keystroke with current value. detail: { value: string; originalEvent: Event }\n * @fires change - Fired on blur with changed value. detail: { value: string; originalEvent: Event }\n *\n * @slot helper - Complex helper content\n *\n * @part status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\n *\n * @cssprop --textarea-bg - Background color\n * @cssprop --textarea-border-color - Border color\n * @cssprop --textarea-placeholder-color - Placeholder text color\n * @cssprop --textarea-radius - Border radius\n * @cssprop --textarea-padding - Inner padding (block inline)\n * @cssprop --textarea-gap - Gap between label and field\n * @cssprop --textarea-font-size - Font size\n * @cssprop --textarea-min-height - Minimum field height\n * @cssprop --textarea-max-height - Maximum field height (none = unlimited)\n * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')\n * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --textarea-focus-bg - Field background when focused (flat variant)\n * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)\n *\n * @part wrapper - Outer wrapper element.\n * @part label - Label element.\n * @part field - Field container.\n * @part textarea - The native `<textarea>` element.\n * @part helper - The helper text element.\n * @part error - The error text element (`role=\"alert\"`).\n *\n * @example\n * ```html\n * <ore-textarea></ore-textarea>\n * <ore-textarea label=\"Bio\" success></ore-textarea>\n * <ore-textarea label=\"Bio\" loading></ore-textarea>\n * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps>(TEXTAREA_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'auto-resize': prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    'no-resize': prop.bool(false),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLTextAreaElement | null) => void) | null>(),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreTextareaEvents>();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => fCtxProps.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (event: Event, value: string) => {\n        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event: Event, value: string) => {\n        emit('input', { originalEvent: event, value });\n      },\n      prefix: 'textarea',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          requestAnimationFrame(() => autoResize.recompute());\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      counter,\n      errorId,\n      errorText,\n      fieldId: textareaId,\n      helperText,\n      labelId,\n      labelVisible,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireEl = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const unwireRef = bindRefCallback(props.ref, textareaEl);\n\n      const stopLayoutEffect = watch(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        // Deferred a frame: on mount (or right after `auto-resize` flips true) the browser\n        // hasn't necessarily finished laying out the textarea yet, so `scrollHeight` read\n        // synchronously here could be stale.\n        requestAnimationFrame(() => autoResize.recompute());\n      });\n\n      return () => {\n        unwireRef();\n        unwireEl();\n        unwireAutoResize();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(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 && !errorText.value ? true : undefined),\n        variant: fCtxProps.variant,\n      },\n    });\n\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <label class=\"label\" part=\"label\" for=\"${textareaId}\" id=\"${labelId}\" ?hidden=\"${() => !labelVisible.value}\"\n          >${props.label}</label\n        >\n        <div class=\"field\" part=\"field\">\n          <textarea\n            part=\"textarea\"\n            ref=\"${textareaRef}\"\n            id=\"${textareaId}\"\n            :name=\"${props.name}\"\n            :placeholder=\"${props.placeholder}\"\n            :rows=\"${props.rows}\"\n            :maxlength=\"${props.maxlength}\"\n            ?disabled=\"${isDisabled}\"\n            ?readonly=\"${props.readonly}\"\n            ?required=\"${props.required}\"\n            :value=\"${live(tf.value)}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            :aria-errormessage=\"${ariaErrorMessage}\"\n            :aria-invalid=\"${ariaInvalid}\"\n            :aria-labelledby=\"${ariaLabelledBy}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"></textarea>\n          ${renderStatusIcon(errorText)}\n          <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n        </div>\n        ${renderFieldStatusRegion({ assistiveId, counter, errorId, errorText, helperText })}\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(TEXTAREA_SIZE_PRESET),\n    forcedColorsFocusMixin('textarea'),\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: '.field', text: 'textarea', tokenPrefix: 'textarea' }),\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, html, prop, ref, bind, getHost, onCleanup, onElement, watchEffect } from '@vielzeug/ore';\nimport { live, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { bindRefCallback, createAutoResize, lifecycleSignal, createTextField } from '../../core';\nimport '../../content/icon/icon';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\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 componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type OreTextareaEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\nexport type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /**\n   * Shows an inline spinner inside the field and forces the inner `<textarea>` into\n   * `disabled` for the duration — use while an async validation/submission request\n   * is in flight to prevent double-submits.\n   */\n  loading?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable a manual resize handle */\n  'no-resize'?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw element.\n   * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element ore-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Fired on every keystroke with current value.\n * @fires change - Fired on blur with changed value.\n *\n * @slot helper - Complex helper content\n *\n * @part status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\n *\n * @cssprop --textarea-bg - Background color\n * @cssprop --textarea-border-color - Border color\n * @cssprop --textarea-placeholder-color - Placeholder text color\n * @cssprop --textarea-radius - Border radius\n * @cssprop --textarea-padding - Inner padding (block inline)\n * @cssprop --textarea-gap - Gap between label and field\n * @cssprop --textarea-font-size - Font size\n * @cssprop --textarea-min-height - Minimum field height\n * @cssprop --textarea-max-height - Maximum field height (none = unlimited)\n * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')\n * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --textarea-focus-bg - Field background when focused (flat variant)\n * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)\n *\n * @part wrapper - Outer wrapper element.\n * @part label - Label element.\n * @part field - Field container.\n * @part textarea - The native `<textarea>` element.\n * @part helper - The helper text element.\n * @part error - The error text element (`role=\"alert\"`).\n *\n * @example\n * ```html\n * <ore-textarea></ore-textarea>\n * <ore-textarea label=\"Bio\" success></ore-textarea>\n * <ore-textarea label=\"Bio\" loading></ore-textarea>\n * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps>(TEXTAREA_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'auto-resize': prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    'no-resize': prop.bool(false),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLTextAreaElement | null) => void) | null>(),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      onInput: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'textarea',\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    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          requestAnimationFrame(() => autoResize.recompute());\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      counter,\n      errorId,\n      errorText,\n      fieldId: textareaId,\n      helperText,\n      labelId,\n      labelVisible,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireEl = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const unwireRef = bindRefCallback(props.ref, textareaEl);\n\n      const stopLayoutEffect = watch(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        // Deferred a frame: on mount (or right after `auto-resize` flips true) the browser\n        // hasn't necessarily finished laying out the textarea yet, so `scrollHeight` read\n        // synchronously here could be stale.\n        requestAnimationFrame(() => autoResize.recompute());\n      });\n\n      return () => {\n        unwireRef();\n        unwireEl();\n        unwireAutoResize();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(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 && !errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <label class=\"label\" part=\"label\" for=\"${textareaId}\" id=\"${labelId}\" ?hidden=\"${() => !labelVisible.value}\">\n          ${props.label}\n        </label>\n        <div class=\"field\" part=\"field\">\n          <textarea\n            part=\"textarea\"\n            ref=\"${textareaRef}\"\n            id=\"${textareaId}\"\n            name=\"${props.name}\"\n            placeholder=\"${props.placeholder}\"\n            rows=\"${props.rows}\"\n            maxlength=\"${props.maxlength}\"\n            ?disabled=\"${isDisabled}\"\n            ?readonly=\"${props.readonly}\"\n            ?required=\"${props.required}\"\n            value=\"${live(tf.value)}\"\n            aria-describedby=\"${ariaDescribedBy}\"\n            aria-errormessage=\"${ariaErrorMessage}\"\n            aria-invalid=\"${ariaInvalid}\"\n            aria-labelledby=\"${ariaLabelledBy}\"\n            aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"></textarea>\n          ${renderStatusIcon(errorText)}\n          <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n        </div>\n        ${renderFieldStatusRegion({ assistiveId, counter, errorId, errorText, helperText })}\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    disabledLoadingMixin,\n    sizeVariantMixin(TEXTAREA_SIZE_PRESET),\n    forcedColorsFocusMixin('textarea'),\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: '.field', text: 'textarea', tokenPrefix: 'textarea' }),\n  ],\n});\n"],"mappings":"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"}