@vielzeug/refine 1.1.1

package/dist/text.js

@@ -0,0 +1,34 @@
+import e from "./content/text/text.css?inline.js";
+import { define as t, html as n, prop as r } from "@vielzeug/ore";
+//#region src/content/text/text.ts
+var i = "ore-text";
+t(i, {
+	props: {
+		align: r.string(),
+		as: r.string(),
+		color: r.string(),
+		italic: r.bool(),
+		lines: r.number(),
+		size: r.string(),
+		truncate: r.bool(),
+		variant: r.string(),
+		weight: r.string()
+	},
+	setup(e, { bind: t, el: r }) {
+		return t({
+			attr: {
+				"aria-level": () => {
+					let t = /^h([1-6])$/.exec(e.as.value ?? "");
+					return t ? t[1] : null;
+				},
+				role: () => /^h([1-6])$/.test(e.as.value ?? "") ? "heading" : null
+			},
+			style: { "--_lines": () => e.lines.value == null ? null : String(e.lines.value) }
+		}), n`<slot></slot>`;
+	},
+	styles: [e]
+});
+//#endregion
+export { i as TEXT_TAG };
+
+//# sourceMappingURL=text.js.map

package/dist/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../src/content/text/text.ts"],"sourcesContent":["import { 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, { bind, el: _el }) {\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,EAAE,SAAM,IAAI,KAAO;EAe9B,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"}

package/dist/textarea.cjs

@@ -0,0 +1,33 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/live.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.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/text-field.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/textarea/textarea.css?inline.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ripple");var f=`ore-textarea`;(0,u.define)(f,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,...i.roundableBundle,"auto-resize":u.prop.bool(!1),error:u.prop.string(),fullwidth:u.prop.bool(!1),helper:u.prop.string(),label:u.prop.string(),"label-placement":u.prop.oneOf([`inset`,`outside`],`inset`),maxlength:u.prop.json(void 0),name:u.prop.string(),"no-resize":u.prop.bool(!1),placeholder:u.prop.string(),readonly:u.prop.bool(!1),ref:u.prop.json(void 0),required:u.prop.bool(!1),resize:u.prop.string(),rows:u.prop.json(void 0),value:u.prop.string(),variant:u.prop.string()},setup(t,{bind:n,emit:r,onCleanup:i,onElement:a,watch:l}){let f=(0,u.inject)(c.FORM_CTX),p=c.useFormContext(n,t,f),m=(0,u.ref)(),h=()=>{if(!t[`auto-resize`].value||!m.value)return;let e=m.value;e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`},g=o.lifecycleSignal(i),_=null,v=s.createTextField({disabled:p.disabled,error:t.error,getFormField:()=>_,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],maxLength:t.maxlength,onBeforeInput:h,onChange:(e,t)=>{r(`change`,{originalEvent:e,value:t})},onInput:(e,t)=>{r(`input`,{originalEvent:e,value:t})},prefix:`textarea`,signal:g,validateOn:f?.validateOn,value:t.value});_=(0,u.useField)({disabled:v.disabled,toFormValue:e=>e,value:v.value});let{ariaDescribedBy:y,ariaErrorMessage:b,ariaInvalid:x,ariaLabelledBy:S,assistiveId:C,counter:w,errorId:T,errorText:E,fieldId:D,helperText:O,labelId:k,labelVisible:A}=v;return a(m,e=>{let n=v.wire(e);t.ref.value?.(e);let r=(0,d.watch)(t.ref,t=>{t?.(e)}),i=l(()=>{e.style.resize=t[`auto-resize`].value||t[`no-resize`].value?`none`:t.resize.value||`vertical`,t[`auto-resize`].value&&requestAnimationFrame(h)});return()=>{r.dispose(),t.ref.value?.(null),n(),i()}}),n({attr:{error:()=>E.value||void 0,size:p.size,variant:p.variant}}),u.html`
+      <div class="textarea-wrapper" part="wrapper">
+        <label class="label" part="label" for="${D}" id="${k}" ?hidden="${()=>!A.value}"
+          >${t.label}</label
+        >
+        <div class="field" part="field">
+          <textarea
+            part="textarea"
+            ref="${m}"
+            id="${D}"
+            :name="${t.name}"
+            :placeholder="${t.placeholder}"
+            :rows="${t.rows}"
+            :maxlength="${t.maxlength}"
+            ?disabled="${t.disabled}"
+            ?readonly="${t.readonly}"
+            ?required="${t.required}"
+            :value="${e.live(v.value)}"
+            :aria-describedby="${y}"
+            :aria-errormessage="${b}"
+            :aria-invalid="${x}"
+            :aria-labelledby="${S}"></textarea>
+        </div>
+        <span class="${()=>w?.value.counterAtLimit?`counter at-limit`:w?.value.counterNearLimit?`counter near-limit`:`counter`}" aria-live="polite" ?hidden="${()=>!w}">${()=>w?.value.counterText.replace(` / `,`/`)??``}</span>
+        <div id="${C}" class="helper-text" aria-live="polite" part="helper" ?hidden="${()=>!!E.value||!O.value}">
+          ${()=>O.value}
+        </div>
+        <div id="${T}" class="helper-text" role="alert" part="error" ?hidden="${()=>!E.value}">
+          ${()=>E.value}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[...r.fieldMixins,t.sizeVariantMixin(a.TEXTAREA_SIZE_PRESET),n.forcedColorsFocusMixin(`textarea`),l.default]}),exports.TEXTAREA_TAG=f;
+//# sourceMappingURL=textarea.cjs.map

package/dist/textarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.cjs","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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  /** 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 {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 * @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 * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps, OreTextareaEvents>(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    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.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props, { bind, emit, onCleanup, onElement, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n\n    const autoGrow = () => {\n      if (!props['auto-resize'].value || !textareaRef.value) return;\n\n      const textareaEl = textareaRef.value;\n\n      textareaEl.style.height = 'auto';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n    };\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onBeforeInput: autoGrow,\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      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: tf.disabled, toFormValue: (v) => v, value: tf.value });\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\n      props.ref.value?.(textareaEl);\n\n      const sub = rippleWatch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\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        if (props['auto-resize'].value) {\n          requestAnimationFrame(autoGrow);\n        }\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n        unwireEl();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: () => errorText.value || undefined,\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () =>\n      counter?.value.counterAtLimit\n        ? 'counter at-limit'\n        : counter?.value.counterNearLimit\n          ? 'counter near-limit'\n          : 'counter';\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\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=\"${props.disabled}\"\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}\"></textarea>\n        </div>\n        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => helperText.value}\n        </div>\n        <div id=\"${errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => errorText.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [...fieldMixins, sizeVariantMixin(TEXTAREA_SIZE_PRESET), forcedColorsFocusMixin('textarea'), componentStyles],\n});\n"],"mappings":"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"}

package/dist/textarea.js

@@ -0,0 +1,137 @@
+import { live as e } from "./ore/dist/directives/live.js";
+import "./ore/dist/directives.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { forcedColorsFocusMixin as n } from "./styles/mixins/theme.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 { createTextField as u } from "./headless/text-field.js";
+import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
+import p from "./inputs/textarea/textarea.css?inline.js";
+import { define as m, html as h, inject as g, prop as _, ref as v, useField as y } from "@vielzeug/ore";
+import { watch as b } from "@vielzeug/ripple";
+//#region src/inputs/textarea/textarea.ts
+var x = "ore-textarea";
+m(x, {
+	formAssociated: !0,
+	props: {
+		...s,
+		...o,
+		...i,
+		...a,
+		"auto-resize": _.bool(!1),
+		error: _.string(),
+		fullwidth: _.bool(!1),
+		helper: _.string(),
+		label: _.string(),
+		"label-placement": _.oneOf(["inset", "outside"], "inset"),
+		maxlength: _.json(void 0),
+		name: _.string(),
+		"no-resize": _.bool(!1),
+		placeholder: _.string(),
+		readonly: _.bool(!1),
+		ref: _.json(void 0),
+		required: _.bool(!1),
+		resize: _.string(),
+		rows: _.json(void 0),
+		value: _.string(),
+		variant: _.string()
+	},
+	setup(t, { bind: n, emit: r, onCleanup: i, onElement: a, watch: o }) {
+		let s = g(d), c = f(n, t, s), p = v(), m = () => {
+			if (!t["auto-resize"].value || !p.value) return;
+			let e = p.value;
+			e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+		}, _ = l(i), x = null, S = u({
+			disabled: c.disabled,
+			error: t.error,
+			getFormField: () => x,
+			helper: t.helper,
+			label: t.label,
+			labelPlacement: t["label-placement"],
+			maxLength: t.maxlength,
+			onBeforeInput: m,
+			onChange: (e, t) => {
+				r("change", {
+					originalEvent: e,
+					value: t
+				});
+			},
+			onInput: (e, t) => {
+				r("input", {
+					originalEvent: e,
+					value: t
+				});
+			},
+			prefix: "textarea",
+			signal: _,
+			validateOn: s?.validateOn,
+			value: t.value
+		});
+		x = y({
+			disabled: S.disabled,
+			toFormValue: (e) => e,
+			value: S.value
+		});
+		let { ariaDescribedBy: C, ariaErrorMessage: w, ariaInvalid: T, ariaLabelledBy: E, assistiveId: D, counter: O, errorId: k, errorText: A, fieldId: j, helperText: M, labelId: N, labelVisible: P } = S;
+		return a(p, (e) => {
+			let n = S.wire(e);
+			t.ref.value?.(e);
+			let r = b(t.ref, (t) => {
+				t?.(e);
+			}), i = o(() => {
+				e.style.resize = t["auto-resize"].value || t["no-resize"].value ? "none" : t.resize.value || "vertical", t["auto-resize"].value && requestAnimationFrame(m);
+			});
+			return () => {
+				r.dispose(), t.ref.value?.(null), n(), i();
+			};
+		}), n({ attr: {
+			error: () => A.value || void 0,
+			size: c.size,
+			variant: c.variant
+		} }), h`
+      <div class="textarea-wrapper" part="wrapper">
+        <label class="label" part="label" for="${j}" id="${N}" ?hidden="${() => !P.value}"
+          >${t.label}</label
+        >
+        <div class="field" part="field">
+          <textarea
+            part="textarea"
+            ref="${p}"
+            id="${j}"
+            :name="${t.name}"
+            :placeholder="${t.placeholder}"
+            :rows="${t.rows}"
+            :maxlength="${t.maxlength}"
+            ?disabled="${t.disabled}"
+            ?readonly="${t.readonly}"
+            ?required="${t.required}"
+            :value="${e(S.value)}"
+            :aria-describedby="${C}"
+            :aria-errormessage="${w}"
+            :aria-invalid="${T}"
+            :aria-labelledby="${E}"></textarea>
+        </div>
+        <span class="${() => O?.value.counterAtLimit ? "counter at-limit" : O?.value.counterNearLimit ? "counter near-limit" : "counter"}" aria-live="polite" ?hidden="${() => !O}">${() => O?.value.counterText.replace(" / ", "/") ?? ""}</span>
+        <div id="${D}" class="helper-text" aria-live="polite" part="helper" ?hidden="${() => !!A.value || !M.value}">
+          ${() => M.value}
+        </div>
+        <div id="${k}" class="helper-text" role="alert" part="error" ?hidden="${() => !A.value}">
+          ${() => A.value}
+        </div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		...r,
+		t(c),
+		n("textarea"),
+		p
+	]
+});
+//#endregion
+export { x as TEXTAREA_TAG };
+
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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  /** 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 {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 * @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 * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps, OreTextareaEvents>(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    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.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props, { bind, emit, onCleanup, onElement, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n\n    const autoGrow = () => {\n      if (!props['auto-resize'].value || !textareaRef.value) return;\n\n      const textareaEl = textareaRef.value;\n\n      textareaEl.style.height = 'auto';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n    };\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onBeforeInput: autoGrow,\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      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: tf.disabled, toFormValue: (v) => v, value: tf.value });\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\n      props.ref.value?.(textareaEl);\n\n      const sub = rippleWatch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\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        if (props['auto-resize'].value) {\n          requestAnimationFrame(autoGrow);\n        }\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n        unwireEl();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: () => errorText.value || undefined,\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () =>\n      counter?.value.counterAtLimit\n        ? 'counter at-limit'\n        : counter?.value.counterNearLimit\n          ? 'counter near-limit'\n          : 'counter';\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\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=\"${props.disabled}\"\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}\"></textarea>\n        </div>\n        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => helperText.value}\n        </div>\n        <div id=\"${errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => errorText.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [...fieldMixins, sizeVariantMixin(TEXTAREA_SIZE_PRESET), forcedColorsFocusMixin('textarea'), componentStyles],\n});\n"],"mappings":"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"}

package/dist/time-picker.cjs

@@ -0,0 +1,98 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./inputs/shared/form-context.cjs"),i=require("./inputs/time-picker/time-picker.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");function s(e){if(!e)return null;let t=/^(\d{1,2}):(\d{2})$/.exec(e.trim());if(!t)return null;let n=Number(t[1]),r=Number(t[2]);return n<0||n>23||r<0||r>59?null:{hours:n,minutes:r}}function c(e,t){return`${String(e).padStart(2,`0`)}:${String(t).padStart(2,`0`)}`}function l(e,t,n){if(n===`12`){let n=e>=12?`PM`:`AM`,r=e%12==0?12:e%12;return`${String(r).padStart(2,`0`)}:${String(t).padStart(2,`0`)} ${n}`}return c(e,t)}function u(e,t,n,r){let i=e*60+t,a=s(n),o=s(r),c=a?a.hours*60+a.minutes:0,l=o?o.hours*60+o.minutes:1439,u=Math.min(Math.max(i,c),l);return{hours:Math.floor(u/60),minutes:u%60}}var d=`ore-time-picker`;(0,a.define)(d,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,error:a.prop.string(),fullwidth:a.prop.bool(!1),helper:a.prop.string(),label:a.prop.string(),"label-placement":a.prop.oneOf([`inset`,`outside`],`inset`),max:a.prop.string(),min:a.prop.string(),"minute-step":a.prop.number(5),name:a.prop.string(),placeholder:a.prop.string(),required:a.prop.bool(!1),"time-format":a.prop.oneOf([`12`,`24`],`24`),value:a.prop.string(),variant:a.prop.string()},setup(e,{bind:t,el:n,emit:i,onMounted:d}){let f=(0,o.signal)(!1),p=(0,o.signal)(s(e.value.value)),m=r.useFormContext(t,e,(0,a.inject)(r.FORM_CTX)),h=m.disabled;(0,a.useField)({disabled:h,toFormValue:e=>e||null,value:(0,o.computed)(()=>{let e=p.value;return e?c(e.hours,e.minutes):``})});let g=(0,o.computed)(()=>e[`time-format`].value??`24`),_=(0,o.computed)(()=>Math.max(1,Math.min(59,e[`minute-step`].value??5))),v=(0,o.computed)(()=>p.value?l(p.value.hours,p.value.minutes,g.value):e.placeholder.value||``),y=(0,o.computed)(()=>g.value===`12`?Array.from({length:12},(e,t)=>t+1):Array.from({length:24},(e,t)=>t)),b=(0,o.computed)(()=>{let e=_.value,t=[];for(let n=0;n<60;n+=e)t.push(n);return t}),x=`time-picker-${Math.random().toString(36).slice(2,9)}-dropdown`;function S(e){if(g.value===`24`)return e;let t=e%12;return t===0?12:t}function C(e,t){return g.value===`24`?e:t===`AM`?e===12?0:e:e===12?12:e+12}function w(t,n){let r=t*60+n,i=s(e.min.value),a=s(e.max.value);return!!(i&&r<i.hours*60+i.minutes||a&&r>a.hours*60+a.minutes)}let T=(0,o.signal)(p.value?.hours??0),E=(0,o.signal)(p.value?.minutes??0),D=(0,o.signal)((p.value?.hours??0)>=12?`PM`:`AM`),O=e.value.value;d(()=>{let t=setInterval(()=>{let t=e.value.value;if(t!==O){O=t;let e=s(t);p.value=e,e&&(T.value=e.hours,E.value=e.minutes,D.value=e.hours>=12?`PM`:`AM`)}},50);return()=>clearInterval(t)});function k(t,n){let r=u(t,n,e.min.value,e.max.value),a=Math.round(r.minutes/_.value)*_.value,o=Math.min(a,59);p.value={hours:r.hours,minutes:o},i(`change`,{value:c(r.hours,o)})}function A(e){let t=g.value===`12`?C(T.value,D.value):T.value;E.value=e,k(t,e),M()}function j(){if(h.value)return;let e=p.value;e?(T.value=g.value===`12`?S(e.hours):e.hours,E.value=e.minutes,D.value=e.hours>=12?`PM`:`AM`):(T.value=g.value===`12`?12:0,E.value=0,D.value=`AM`),f.value=!0}function M(){f.value=!1}function N(){f.value?M():j()}function P(e){f.value&&(e.composedPath().includes(n)||M())}d(()=>(document.addEventListener(`pointerdown`,P,{capture:!0}),()=>document.removeEventListener(`pointerdown`,P,{capture:!0})));function F(e){h.value||(e.key===`Enter`||e.key===` `?(e.preventDefault(),N()):e.key===`Escape`&&f.value?(e.preventDefault(),M()):(e.key===`ArrowDown`||e.key===`ArrowUp`)&&!f.value&&(e.preventDefault(),j()))}function I(e){e.key===`Escape`&&(e.preventDefault(),M())}function L(e){let t=y.value,n=t.indexOf(T.value);e.key===`ArrowUp`?(e.preventDefault(),T.value=t[(n-1+t.length)%t.length]):e.key===`ArrowDown`&&(e.preventDefault(),T.value=t[(n+1)%t.length])}function R(e){let t=b.value,n=t.indexOf(E.value);e.key===`ArrowUp`?(e.preventDefault(),E.value=t[(n-1+t.length)%t.length]):e.key===`ArrowDown`&&(e.preventDefault(),E.value=t[(n+1)%t.length])}function z(e){(e.key===`ArrowUp`||e.key===`ArrowDown`)&&(e.preventDefault(),D.value=D.value===`AM`?`PM`:`AM`)}return t({attr:{open:()=>f.value?!0:void 0}}),a.html`
+      <!-- Trigger -->
+      <ore-input
+        class="trigger"
+        readonly
+        tabindex="0"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls="${x}"
+        :aria-expanded="${()=>String(f.value)}"
+        :aria-disabled="${()=>h.value?`true`:null}"
+        :value="${()=>v.value}"
+        :label="${()=>e.label.value??``}"
+        :placeholder="${()=>e.placeholder.value??``}"
+        :label-placement="${()=>e[`label-placement`].value??`inset`}"
+        :color="${()=>e.color?.value??void 0}"
+        :size="${()=>m.size?.value??void 0}"
+        :variant="${()=>m.variant?.value??void 0}"
+        :rounded="${()=>e.rounded?.value??void 0}"
+        :helper="${()=>e.helper.value??``}"
+        :error="${()=>e.error.value??``}"
+        ?disabled="${()=>h.value?!0:void 0}"
+        ?required="${()=>e.required.value?!0:void 0}"
+        ?fullwidth="${()=>e.fullwidth.value?!0:void 0}"
+        @click="${N}"
+        @keydown="${F}">
+        <ore-icon slot="suffix" name="clock" size="16" stroke-width="1.75" aria-hidden="true"></ore-icon>
+      </ore-input>
+
+      <!-- Dropdown -->
+      <div
+        class="dropdown"
+        id="${x}"
+        role="listbox"
+        aria-label="${()=>e.label.value?`${e.label.value} — select time`:`Select time`}"
+        ?data-open="${f}"
+        @keydown="${I}">
+        <div class="cols-row">
+          <!-- Hours column -->
+          <div class="col" part="column" role="group" aria-label="Hours">
+            <div class="col-label" aria-hidden="true">HH</div>
+            <div class="col-scroll">
+              ${()=>y.value.map(e=>{let t=w(g.value===`12`?C(e,D.value):e,E.value);return a.html`<div
+                    class="option"
+                    part="option"
+                    role="option"
+                    tabindex="${()=>T.value===e&&!t?`0`:`-1`}"
+                    :aria-selected="${()=>String(T.value===e)}"
+                    :aria-disabled="${()=>String(t)}"
+                    ?data-disabled="${()=>t}"
+                    @click="${()=>{t||(T.value=e)}}"
+                    @keydown="${L}">
+                    ${String(e).padStart(2,`0`)}
+                  </div>`})}
+            </div>
+          </div>
+
+          <div class="col-sep" aria-hidden="true">:</div>
+
+          <!-- Minutes column -->
+          <div class="col" part="column" role="group" aria-label="Minutes">
+            <div class="col-label" aria-hidden="true">MM</div>
+            <div class="col-scroll">
+              ${()=>b.value.map(e=>{let t=w(g.value===`12`?C(T.value,D.value):T.value,e);return a.html`<div
+                    class="option"
+                    part="option"
+                    role="option"
+                    tabindex="${()=>E.value===e&&!t?`0`:`-1`}"
+                    :aria-selected="${()=>String(E.value===e)}"
+                    :aria-disabled="${()=>String(t)}"
+                    ?data-disabled="${()=>t}"
+                    @click="${()=>{t||A(e)}}"
+                    @keydown="${R}">
+                    ${String(e).padStart(2,`0`)}
+                  </div>`})}
+            </div>
+          </div>
+
+          <!-- AM/PM column (12h mode only) -->
+          ${()=>g.value===`12`?a.html` <div class="col col-period" part="column" role="group" aria-label="Period">
+                  <div class="col-label" aria-hidden="true">AM/PM</div>
+                  <div class="col-scroll">
+                    ${[`AM`,`PM`].map(e=>a.html`<div
+                          class="option"
+                          part="option"
+                          role="option"
+                          tabindex="${()=>D.value===e?`0`:`-1`}"
+                          :aria-selected="${()=>String(D.value===e)}"
+                          @click="${()=>{D.value=e}}"
+                          @keydown="${z}">
+                          ${e}
+                        </div>`)}
+                  </div>
+                </div>`:a.html``}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[t.colorThemeMixin,e.reducedMotionMixin,i.default]}),exports.TIME_PICKER_TAG=d;
+//# sourceMappingURL=time-picker.cjs.map

package/dist/time-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.cjs","names":[],"sources":["../src/inputs/time-picker/time-picker.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { VisualVariant } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './time-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreTimePickerEvents = {\n  change: { value: string | null };\n};\n\nexport type OreTimePickerProps = {\n  /** Theme color */\n  color?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Validation error message */\n  error?: string;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Helper text below the field */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement */\n  'label-placement'?: 'inset' | 'outside';\n  /** Maximum selectable time in HH:MM format (24-hour) */\n  max?: string;\n  /** Minimum selectable time in HH:MM format (24-hour) */\n  min?: string;\n  /** Minute step interval (1–59) */\n  'minute-step'?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder shown in the trigger */\n  placeholder?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: string;\n  /** Display format: '12' for AM/PM, '24' for 24-hour (default: '24') */\n  'time-format'?: '12' | '24';\n  /** Selected time in HH:MM format (24-hour) */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** Parse \"HH:MM\" → { hours: 0-23, minutes: 0-59 } | null */\nfunction parseTime(val: string | undefined | null): { hours: number; minutes: number } | null {\n  if (!val) return null;\n\n  const match = /^(\\d{1,2}):(\\d{2})$/.exec(val.trim());\n\n  if (!match) return null;\n\n  const h = Number(match[1]);\n  const m = Number(match[2]);\n\n  if (h < 0 || h > 23 || m < 0 || m > 59) return null;\n\n  return { hours: h, minutes: m };\n}\n\n/** Format { hours, minutes } → \"HH:MM\" (24-hour, zero-padded) */\nfunction formatTime(h: number, m: number): string {\n  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\n}\n\n/** Format for display label (respects 12/24 mode) */\nfunction formatDisplay(h: number, m: number, format: '12' | '24'): string {\n  if (format === '12') {\n    const period = h >= 12 ? 'PM' : 'AM';\n    const displayH = h % 12 === 0 ? 12 : h % 12;\n\n    return `${String(displayH).padStart(2, '0')}:${String(m).padStart(2, '0')} ${period}`;\n  }\n\n  return formatTime(h, m);\n}\n\n/** Clamp value to [min, max] in total minutes */\nfunction clampTime(\n  h: number,\n  m: number,\n  minVal: string | undefined | null,\n  maxVal: string | undefined | null,\n): { hours: number; minutes: number } {\n  const total = h * 60 + m;\n  const minParsed = parseTime(minVal);\n  const maxParsed = parseTime(maxVal);\n  const minMins = minParsed ? minParsed.hours * 60 + minParsed.minutes : 0;\n  const maxMins = maxParsed ? maxParsed.hours * 60 + maxParsed.minutes : 23 * 60 + 59;\n  const clamped = Math.min(Math.max(total, minMins), maxMins);\n\n  return { hours: Math.floor(clamped / 60), minutes: clamped % 60 };\n}\n\n/**\n * An accessible time picker with a scrollable clock dropdown.\n * Supports 12/24-hour display formats, min/max bounds, minute steps, and form association.\n *\n * @element ore-time-picker\n *\n * @attr {string} value - Selected time in HH:MM (24-hour) format\n * @attr {string} min - Minimum selectable time (HH:MM)\n * @attr {string} max - Maximum selectable time (HH:MM)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} time-format - '12' or '24' (default: '24')\n * @attr {number} minute-step - Minute increment (default: 5)\n *\n * @fires change - Fired when a time is selected. detail: { value: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --time-picker-bg - Dropdown background\n * @cssprop --time-picker-border-color - Dropdown border color\n * @cssprop --time-picker-radius - Dropdown border radius\n * @cssprop --time-picker-shadow - Dropdown shadow\n * @cssprop --time-picker-selected-bg - Selected option background\n * @cssprop --time-picker-option-hover-bg - Option hover background\n *\n * @part field - The trigger field\n * @part dropdown - The floating time dropdown\n * @part column - A scrollable column (hours / minutes / period)\n * @part option - An individual time option cell\n *\n * @example\n * ```html\n * <!-- 24-hour clock, 15-minute steps -->\n * <ore-time-picker label=\"Meeting time\" value=\"09:30\" minute-step=\"15\" color=\"primary\"></ore-time-picker>\n *\n * <!-- 12-hour AM/PM format -->\n * <ore-time-picker label=\"Appointment\" time-format=\"12\" minute-step=\"30\"></ore-time-picker>\n *\n * <!-- Outside label, bordered variant -->\n * <ore-time-picker label=\"Start time\" label-placement=\"outside\" variant=\"bordered\"></ore-time-picker>\n * ```\n */\nexport const TIME_PICKER_TAG = 'ore-time-picker' as const;\n\ndefine<OreTimePickerProps, OreTimePickerEvents>(TIME_PICKER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\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    max: prop.string(),\n    min: prop.string(),\n    'minute-step': prop.number(5),\n    name: prop.string(),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    'time-format': prop.oneOf(['12', '24'] as const, '24'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n\n  setup(props, { bind, el, emit, onMounted }) {\n    // ── Signals ──────────────────────────────────────────────────────────────\n\n    const isOpen = signal(false);\n    const selectedTime = signal<{ hours: number; minutes: number } | null>(parseTime(props.value.value));\n\n    // ── Form context ─────────────────────────────────────────────────────────\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n\n    // ── Form value ────────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => {\n        const t = selectedTime.value;\n\n        return t ? formatTime(t.hours, t.minutes) : '';\n      }),\n    });\n\n    // ── Computed helpers ──────────────────────────────────────────────────────\n\n    const fmt = computed(() => props['time-format'].value ?? '24');\n    const minuteStep = computed(() => Math.max(1, Math.min(59, props['minute-step'].value ?? 5)));\n\n    const triggerText = computed(() => {\n      if (!selectedTime.value) return props.placeholder.value || '';\n\n      return formatDisplay(selectedTime.value.hours, selectedTime.value.minutes, fmt.value as '12' | '24');\n    });\n\n    /** All hour options for the column (0-23 in 24h; 1-12 in 12h) */\n    const hourOptions = computed<number[]>(() => {\n      if (fmt.value === '12') {\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      }\n\n      return Array.from({ length: 24 }, (_, i) => i);\n    });\n\n    /** All minute options for the column, stepped */\n    const minuteOptions = computed<number[]>(() => {\n      const step = minuteStep.value;\n      const opts: number[] = [];\n\n      for (let m = 0; m < 60; m += step) opts.push(m);\n\n      return opts;\n    });\n\n    const dialogId = `time-picker-${Math.random().toString(36).slice(2, 9)}-dropdown`;\n\n    /** Convert 24h hour to display hour in current format */\n    function toDisplayHour(h24: number): number {\n      if (fmt.value === '24') return h24;\n\n      const h12 = h24 % 12;\n\n      return h12 === 0 ? 12 : h12;\n    }\n\n    /** Convert display hour + period → 24h hour */\n    function to24Hour(displayHour: number, period: 'AM' | 'PM'): number {\n      if (fmt.value === '24') return displayHour;\n\n      if (period === 'AM') return displayHour === 12 ? 0 : displayHour;\n\n      return displayHour === 12 ? 12 : displayHour + 12;\n    }\n\n    /** Whether a given HH:MM is out of [min, max] */\n    function isTimeDisabled(h: number, m: number): boolean {\n      const total = h * 60 + m;\n      const minParsed = parseTime(props.min.value);\n      const maxParsed = parseTime(props.max.value);\n\n      if (minParsed && total < minParsed.hours * 60 + minParsed.minutes) return true;\n\n      if (maxParsed && total > maxParsed.hours * 60 + maxParsed.minutes) return true;\n\n      return false;\n    }\n\n    // ── State for focused/pending selection ───────────────────────────────────\n\n    /** Pending hour (24h) while user is navigating columns */\n    const pendingHour = signal<number>(selectedTime.value?.hours ?? 0);\n    /** Pending minute */\n    const pendingMinute = signal<number>(selectedTime.value?.minutes ?? 0);\n    /** Pending period (12h mode) */\n    const pendingPeriod = signal<'AM' | 'PM'>((selectedTime.value?.hours ?? 0) >= 12 ? 'PM' : 'AM');\n\n    // ── Sync value prop externally ────────────────────────────────────────────\n\n    let lastValueProp = props.value.value;\n\n    onMounted(() => {\n      const interval = setInterval(() => {\n        const current = props.value.value;\n\n        if (current !== lastValueProp) {\n          lastValueProp = current;\n\n          const parsed = parseTime(current);\n\n          selectedTime.value = parsed;\n\n          if (parsed) {\n            pendingHour.value = parsed.hours;\n            pendingMinute.value = parsed.minutes;\n            pendingPeriod.value = parsed.hours >= 12 ? 'PM' : 'AM';\n          }\n        }\n      }, 50);\n\n      return () => clearInterval(interval);\n    });\n\n    // ── Commit ────────────────────────────────────────────────────────────────\n\n    function commit(h24: number, m: number): void {\n      const clamped = clampTime(h24, m, props.min.value, props.max.value);\n      const snapped = Math.round(clamped.minutes / minuteStep.value) * minuteStep.value;\n      const snappedMin = Math.min(snapped, 59);\n\n      selectedTime.value = { hours: clamped.hours, minutes: snappedMin };\n      emit('change', { value: formatTime(clamped.hours, snappedMin) });\n    }\n\n    function commitFromMinute(m: number): void {\n      const h24 = fmt.value === '12' ? to24Hour(pendingHour.value, pendingPeriod.value) : pendingHour.value;\n\n      pendingMinute.value = m;\n      commit(h24, m);\n      closePicker();\n    }\n\n    // ── Open / close ──────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      const current = selectedTime.value;\n\n      if (current) {\n        pendingHour.value = fmt.value === '12' ? toDisplayHour(current.hours) : current.hours;\n        pendingMinute.value = current.minutes;\n        pendingPeriod.value = current.hours >= 12 ? 'PM' : 'AM';\n      } else {\n        pendingHour.value = fmt.value === '12' ? 12 : 0;\n        pendingMinute.value = 0;\n        pendingPeriod.value = 'AM';\n      }\n\n      isOpen.value = true;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n    }\n\n    function handleTriggerClick(): void {\n      if (isOpen.value) closePicker();\n      else openPicker();\n    }\n\n    // ── Outside click ─────────────────────────────────────────────────────────\n\n    function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n      if (!isOpen.value) return;\n\n      if (!e.composedPath().includes(el)) closePicker();\n    }\n\n    onMounted(() => {\n      document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n      return () => document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n    });\n\n    // ── Keyboard ──────────────────────────────────────────────────────────────\n\n    function handleTriggerKeydown(e: KeyboardEvent): void {\n      if (isDisabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleTriggerClick();\n      } else if (e.key === 'Escape' && isOpen.value) {\n        e.preventDefault();\n        closePicker();\n      } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !isOpen.value) {\n        e.preventDefault();\n        openPicker();\n      }\n    }\n\n    function handleDropdownKeydown(e: KeyboardEvent): void {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleHourKeydown(e: KeyboardEvent): void {\n      const opts = hourOptions.value;\n      const idx = opts.indexOf(pendingHour.value);\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        pendingHour.value = opts[(idx - 1 + opts.length) % opts.length];\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingHour.value = opts[(idx + 1) % opts.length];\n      }\n    }\n\n    function handleMinuteKeydown(e: KeyboardEvent): void {\n      const opts = minuteOptions.value;\n      const idx = opts.indexOf(pendingMinute.value);\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        pendingMinute.value = opts[(idx - 1 + opts.length) % opts.length];\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingMinute.value = opts[(idx + 1) % opts.length];\n      }\n    }\n\n    function handlePeriodKeydown(e: KeyboardEvent): void {\n      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingPeriod.value = pendingPeriod.value === 'AM' ? 'PM' : 'AM';\n      }\n    }\n\n    // ── Host bindings ─────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    // ── ore-input prop helpers ────────────────────────────────────────────────\n\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <!-- Trigger -->\n      <ore-input\n        class=\"trigger\"\n        readonly\n        tabindex=\"0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${dialogId}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        @click=\"${handleTriggerClick}\"\n        @keydown=\"${handleTriggerKeydown}\">\n        <ore-icon slot=\"suffix\" name=\"clock\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n      </ore-input>\n\n      <!-- Dropdown -->\n      <div\n        class=\"dropdown\"\n        id=\"${dialogId}\"\n        role=\"listbox\"\n        aria-label=\"${() => (props.label.value ? `${props.label.value} — select time` : 'Select time')}\"\n        ?data-open=\"${isOpen}\"\n        @keydown=\"${handleDropdownKeydown}\">\n        <div class=\"cols-row\">\n          <!-- Hours column -->\n          <div class=\"col\" part=\"column\" role=\"group\" aria-label=\"Hours\">\n            <div class=\"col-label\" aria-hidden=\"true\">HH</div>\n            <div class=\"col-scroll\">\n              ${() =>\n                hourOptions.value.map((h) => {\n                  const h24 = fmt.value === '12' ? to24Hour(h, pendingPeriod.value) : h;\n                  const disabled = isTimeDisabled(h24, pendingMinute.value);\n\n                  return html`<div\n                    class=\"option\"\n                    part=\"option\"\n                    role=\"option\"\n                    tabindex=\"${() => (pendingHour.value === h && !disabled ? '0' : '-1')}\"\n                    :aria-selected=\"${() => String(pendingHour.value === h)}\"\n                    :aria-disabled=\"${() => String(disabled)}\"\n                    ?data-disabled=\"${() => disabled}\"\n                    @click=\"${() => {\n                      if (!disabled) pendingHour.value = h;\n                    }}\"\n                    @keydown=\"${handleHourKeydown}\">\n                    ${String(h).padStart(2, '0')}\n                  </div>`;\n                })}\n            </div>\n          </div>\n\n          <div class=\"col-sep\" aria-hidden=\"true\">:</div>\n\n          <!-- Minutes column -->\n          <div class=\"col\" part=\"column\" role=\"group\" aria-label=\"Minutes\">\n            <div class=\"col-label\" aria-hidden=\"true\">MM</div>\n            <div class=\"col-scroll\">\n              ${() =>\n                minuteOptions.value.map((m) => {\n                  const h24 = fmt.value === '12' ? to24Hour(pendingHour.value, pendingPeriod.value) : pendingHour.value;\n                  const disabled = isTimeDisabled(h24, m);\n\n                  return html`<div\n                    class=\"option\"\n                    part=\"option\"\n                    role=\"option\"\n                    tabindex=\"${() => (pendingMinute.value === m && !disabled ? '0' : '-1')}\"\n                    :aria-selected=\"${() => String(pendingMinute.value === m)}\"\n                    :aria-disabled=\"${() => String(disabled)}\"\n                    ?data-disabled=\"${() => disabled}\"\n                    @click=\"${() => {\n                      if (!disabled) commitFromMinute(m);\n                    }}\"\n                    @keydown=\"${handleMinuteKeydown}\">\n                    ${String(m).padStart(2, '0')}\n                  </div>`;\n                })}\n            </div>\n          </div>\n\n          <!-- AM/PM column (12h mode only) -->\n          ${() =>\n            fmt.value === '12'\n              ? html` <div class=\"col col-period\" part=\"column\" role=\"group\" aria-label=\"Period\">\n                  <div class=\"col-label\" aria-hidden=\"true\">AM/PM</div>\n                  <div class=\"col-scroll\">\n                    ${(['AM', 'PM'] as const).map(\n                      (p) =>\n                        html`<div\n                          class=\"option\"\n                          part=\"option\"\n                          role=\"option\"\n                          tabindex=\"${() => (pendingPeriod.value === p ? '0' : '-1')}\"\n                          :aria-selected=\"${() => String(pendingPeriod.value === p)}\"\n                          @click=\"${() => {\n                            pendingPeriod.value = p;\n                          }}\"\n                          @keydown=\"${handlePeriodKeydown}\">\n                          ${p}\n                        </div>`,\n                    )}\n                  </div>\n                </div>`\n              : html``}\n        </div>\n      </div>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}