@vielzeug/refine 1.1.1

package/dist/input.js

@@ -0,0 +1,184 @@
+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 { FIELD_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/input/input.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 { computed as b, signal as x, watch as S } from "@vielzeug/ripple";
+//#region src/inputs/input/input.ts
+var C = [
+	"text",
+	"email",
+	"password",
+	"search",
+	"url",
+	"tel",
+	"number",
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week"
+], w = "ore-input";
+m(w, {
+	formAssociated: !0,
+	props: {
+		...s,
+		...o,
+		...i,
+		...a,
+		autocomplete: _.string(),
+		clearable: _.bool(!1),
+		error: _.string(),
+		fullwidth: _.bool(!1),
+		helper: _.string(),
+		inputmode: _.string(),
+		label: _.string(),
+		"label-placement": _.oneOf(["inset", "outside"], "inset"),
+		maxlength: _.json(void 0),
+		minlength: _.json(void 0),
+		name: _.string(),
+		pattern: _.string(),
+		placeholder: _.string(),
+		readonly: _.bool(!1),
+		ref: _.json(void 0),
+		required: _.bool(!1),
+		type: _.oneOf(C, "text"),
+		value: _.string(),
+		variant: _.string()
+	},
+	setup(t, { bind: n, emit: r, onCleanup: i, onElement: a, slots: o }) {
+		let s = g(d), c = f(n, t, s), p = x(!1), m = v(), _ = b(() => !!t.label.value || o.has("label").value), C = l(i), w = null, T = u({
+			disabled: c.disabled,
+			error: t.error,
+			getFormField: () => w,
+			hasLabel: _,
+			helper: t.helper,
+			label: t.label,
+			labelPlacement: t["label-placement"],
+			maxLength: t.maxlength,
+			onChange: (e, t) => {
+				r("change", {
+					originalEvent: e,
+					value: t
+				});
+			},
+			onInput: (e, t) => {
+				r("input", {
+					originalEvent: e,
+					value: t
+				});
+			},
+			prefix: "input",
+			signal: C,
+			validateOn: s?.validateOn,
+			value: t.value
+		});
+		w = y({
+			disabled: T.disabled,
+			toFormValue: (e) => e,
+			value: T.value
+		});
+		let { ariaDescribedBy: E, ariaErrorMessage: D, ariaInvalid: O, ariaLabelledBy: k, assistiveId: A, clear: j, counter: M, errorId: N, errorText: P, fieldId: F, helperText: I, labelId: L, labelVisible: R, value: z, wire: B } = T;
+		return a(m, (e) => {
+			B(e, C), t.ref.value?.(e);
+			let n = S(t.ref, (t) => {
+				t?.(e);
+			});
+			return () => {
+				n.dispose(), t.ref.value?.(null);
+			};
+		}), n({ attr: {
+			error: () => P.value || void 0,
+			"has-value": () => z.value ? !0 : void 0,
+			size: c.size,
+			variant: c.variant
+		} }), h`
+      <div class="input-wrapper" part="wrapper">
+        <label class="label" for="${F}" id="${L}" part="label" ?hidden="${() => !R.value}"
+          ><slot name="label">${t.label}</slot></label
+        >
+        <div class="field" part="field">
+          <div class="input-row" part="input-row">
+            <slot name="prefix"></slot>
+            <input
+              part="input"
+              id="${F}"
+              :type="${() => t.type.value === "password" && p.value ? "text" : t.type.value ?? "text"}"
+              :name="${t.name}"
+              :placeholder="${t.placeholder}"
+              :autocomplete="${t.autocomplete}"
+              :inputmode="${t.inputmode}"
+              :maxlength="${t.maxlength}"
+              :minlength="${t.minlength}"
+              :pattern="${t.pattern}"
+              ?disabled="${t.disabled}"
+              ?readonly="${t.readonly}"
+              ?required="${t.required}"
+              :value="${e(z)}"
+              :aria-labelledby="${k}"
+              :aria-describedby="${E}"
+              :aria-errormessage="${D}"
+              :aria-invalid="${O}"
+              ref="${m}" />
+            <slot name="suffix"></slot>
+            <button
+              class="pwd-toggle-btn"
+              part="pwd-toggle"
+              type="button"
+              :aria-label="${() => p.value ? "Hide password" : "Show password"}"
+              :aria-pressed="${() => String(p.value)}"
+              :tabindex="${() => t.type.value === "password" ? "0" : "-1"}"
+              @click="${() => {
+			p.value = !p.value, m.value?.focus();
+		}}">
+              ${() => p.value ? h`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>` : h`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
+            </button>
+            <button
+              aria-label="Clear"
+              class="clear-btn"
+              part="clear"
+              type="button"
+              :tabindex="${() => z.value ? "0" : "-1"}"
+              @click="${(e) => {
+			j(e), m.value?.focus();
+		}}">
+              <ore-icon aria-hidden="true" name="x" size="12" stroke-width="2.5"></ore-icon>
+            </button>
+          </div>
+        </div>
+        <div class="helper-text" aria-live="polite" id="${A}" part="helper" ?hidden="${() => !!P.value || !I.value}">
+          <slot name="helper">${() => I.value}</slot>
+        </div>
+        <div class="helper-text" id="${N}" role="alert" part="error" ?hidden="${() => !P.value}">
+          <slot name="error">${() => P.value}</slot>
+        </div>
+        <div
+          class="char-counter"
+          part="char-counter"
+          :data-near-limit="${() => M?.value.counterNearLimit && !M?.value.counterAtLimit ? "" : null}"
+          :data-at-limit="${() => M?.value.counterAtLimit ? "" : null}"
+          ?hidden="${() => !M}">
+          ${() => M?.value.counterText ?? ""}
+        </div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		...r,
+		t(c),
+		n("input"),
+		p
+	]
+});
+//#endregion
+export { w as INPUT_TAG };
+
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /** Maximum character length — shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw input element.\n   * Set as a JS property: `bitInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element ore-input\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input (fallback when the `helper` slot is empty)\n * @attr {string} error - Error message — marks the field as invalid (fallback when the `error` slot is empty)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke). detail: { value: string; originalEvent: Event }\n * @fires change - Emitted when input loses focus with changed value. detail: { value: string; originalEvent: Event }\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot label - Replaces the label text — slotted content takes precedence over the `label` prop\n * @slot helper - Replaces the helper text — slotted content takes precedence over the `helper` prop\n * @slot error - Replaces the error text — slotted content takes precedence over the `error` prop\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (block inline)\n * @cssprop --input-gap - Gap between prefix/suffix icons and input text\n * @cssprop --input-font-size - Font size\n * @cssprop --input-height - Field height\n * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --input-focus-bg - Field background when focused (flat variant)\n * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)\n *\n * @example\n * ```html\n * <ore-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <ore-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const INPUT_TAG = 'ore-input' as const;\ndefine<OreInputProps, OreInputEvents>(INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    autocomplete: prop.string(),\n    clearable: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    inputmode: prop.string<'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'>(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    maxlength: prop.json(undefined as number | undefined),\n    minlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    pattern: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    type: prop.oneOf(VALID_INPUT_TYPES, 'text'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'text' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props, { bind, emit, onCleanup, onElement, slots }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\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      hasLabel,\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: 'input',\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      clear: clearValue,\n      counter,\n      errorId,\n      errorText,\n      fieldId: inputId,\n      helperText,\n      labelId,\n      labelVisible,\n      value: fieldValue,\n      wire,\n    } = tf;\n\n    onElement(inputRef, (el) => {\n      wire(el, abortSignal);\n\n      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(el);\n\n      // Reactive watcher so that if props.ref is set *after* the inner\n      // <input> mounts (e.g. parent sets it via a ref callback after render),\n      // the new callback still receives the live element.\n      const sub = watch(props.ref, (cb) => {\n        cb?.(el);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    const clear = (event?: Event): void => {\n      clearValue(event);\n      inputRef.value?.focus();\n    };\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : (props.type.value ?? 'text');\n\n    bind({\n      attr: {\n        error: () => errorText.value || undefined,\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const labelHidden = () => !labelVisible.value;\n    const passwordToggleLabel = () => (showPassword.value ? 'Hide password' : 'Show password');\n    const passwordTogglePressed = () => String(showPassword.value);\n    const passwordToggleIcon = () =>\n      showPassword.value\n        ? html`<ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`;\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n    const counterNearLimit = () => (counter?.value.counterNearLimit && !counter?.value.counterAtLimit ? '' : null);\n    const counterAtLimit = () => (counter?.value.counterAtLimit ? '' : null);\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText ?? '';\n\n    const clearTabIndex = () => (fieldValue.value ? '0' : '-1');\n    const pwdToggleTabIndex = () => (props.type.value === 'password' ? '0' : '-1');\n\n    const togglePassword = () => {\n      showPassword.value = !showPassword.value;\n      inputRef.value?.focus();\n    };\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label class=\"label\" for=\"${inputId}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\"\n          ><slot name=\"label\">${props.label}</slot></label\n        >\n        <div class=\"field\" part=\"field\">\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              :type=\"${resolvedInputType}\"\n              :name=\"${props.name}\"\n              :placeholder=\"${props.placeholder}\"\n              :autocomplete=\"${props.autocomplete}\"\n              :inputmode=\"${props.inputmode}\"\n              :maxlength=\"${props.maxlength}\"\n              :minlength=\"${props.minlength}\"\n              :pattern=\"${props.pattern}\"\n              ?disabled=\"${props.disabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              :value=\"${live(fieldValue)}\"\n              :aria-labelledby=\"${ariaLabelledBy}\"\n              :aria-describedby=\"${ariaDescribedBy}\"\n              :aria-errormessage=\"${ariaErrorMessage}\"\n              :aria-invalid=\"${ariaInvalid}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${passwordToggleLabel}\"\n              :aria-pressed=\"${passwordTogglePressed}\"\n              :tabindex=\"${pwdToggleTabIndex}\"\n              @click=\"${togglePassword}\">\n              ${passwordToggleIcon}\n            </button>\n            <button\n              aria-label=\"Clear\"\n              class=\"clear-btn\"\n              part=\"clear\"\n              type=\"button\"\n              :tabindex=\"${clearTabIndex}\"\n              @click=\"${clear}\">\n              <ore-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></ore-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" aria-live=\"polite\" id=\"${assistiveId}\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          <slot name=\"helper\">${() => helperText.value}</slot>\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          <slot name=\"error\">${() => errorText.value}</slot>\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          :data-near-limit=\"${counterNearLimit}\"\n          :data-at-limit=\"${counterAtLimit}\"\n          ?hidden=\"${counterHidden}\">\n          ${counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles],\n});\n"],"mappings":";;;;;;;;;;;;;;AA6CA,IAAM,IAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GA2Da,IAAY;AACzB,EAAsC,GAAW;CAC/C,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,cAAc,EAAK,OAAO;EAC1B,WAAW,EAAK,KAAK,EAAK;EAC1B,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,OAAO;EACpB,WAAW,EAAK,OAAqF;EACrG,OAAO,EAAK,OAAO;EACnB,mBAAmB,EAAK,MAAM,CAAC,SAAS,SAAS,GAAY,OAAO;EACpE,WAAW,EAAK,KAAK,KAAA,CAA+B;EACpD,WAAW,EAAK,KAAK,KAAA,CAA+B;EACpD,MAAM,EAAK,OAAO;EAClB,SAAS,EAAK,OAAO;EACrB,aAAa,EAAK,OAAO;EACzB,UAAU,EAAK,KAAK,EAAK;EACzB,KAAK,EAAK,KAAK,KAAA,CAAuE;EACtF,UAAU,EAAK,KAAK,EAAK;EACzB,MAAM,EAAK,MAAM,GAAmB,MAAM;EAC1C,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAqE;CACrF;CACA,MAAM,GAAO,EAAE,SAAM,SAAM,cAAW,cAAW,YAAS;EACxD,IAAM,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAM,GAAO,CAAO,GAC/C,IAAe,EAAO,EAAK,GAC3B,IAAW,EAAsB,GAEjC,IAAW,QAAe,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,IAAI,OAAO,CAAC,CAAC,KAAK,GAEzE,IAAc,EAAgB,CAAS,GACzC,IAAgD,MAC9C,IAAK,EAAgB;GACzB,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,oBAAoB;GACpB;GACA,QAAQ,EAAM;GACd,OAAO,EAAM;GACb,gBAAgB,EAAM;GACtB,WAAW,EAAM;GACjB,WAAW,GAAc,MAAkB;IACzC,EAAK,UAAU;KAAE,eAAe;KAAO;IAAM,CAAC;GAChD;GACA,UAAU,GAAc,MAAkB;IACxC,EAAK,SAAS;KAAE,eAAe;KAAO;IAAM,CAAC;GAC/C;GACA,QAAQ;GACR,QAAQ;GACR,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAED,IAAa,EAAiB;GAAE,UAAU,EAAG;GAAU,cAAc,MAAM;GAAG,OAAO,EAAG;EAAM,CAAC;EAE/F,IAAM,EACJ,oBACA,qBACA,gBACA,mBACA,gBACA,OAAO,GACP,YACA,YACA,cACA,SAAS,GACT,eACA,YACA,iBACA,OAAO,GACP,YACE;EA4DJ,OA1DA,EAAU,IAAW,MAAO;GAI1B,AAHA,EAAK,GAAI,CAAW,GAGpB,EAAM,IAAI,QAAQ,CAAE;GAKpB,IAAM,IAAM,EAAM,EAAM,MAAM,MAAO;IACnC,IAAK,CAAE;GACT,CAAC;GAED,aAAa;IAEX,AADA,EAAI,QAAQ,GACZ,EAAM,IAAI,QAAQ,IAAI;GACxB;EACF,CAAC,GAUD,EAAK,EACH,MAAM;GACJ,aAAa,EAAU,SAAS,KAAA;GAChC,mBAAoB,EAAW,QAAQ,KAAO,KAAA;GAC9C,MAAM,EAAU;GAChB,SAAS,EAAU;EACrB,EACF,CAAC,GAwBM,CAAI;;oCAEqB,EAAQ,QAAQ,EAAQ,gCAxB9B,CAAC,EAAa,MAwBsD;gCAClE,EAAM,MAAM;;;;;;;oBAOxB,EAAQ;6BA3CtB,EAAM,KAAK,UAAU,cAAc,EAAa,QAAQ,SAAU,EAAM,KAAK,SAAS,OA4CnD;uBAClB,EAAM,KAAK;8BACJ,EAAM,YAAY;+BACjB,EAAM,aAAa;4BACtB,EAAM,UAAU;4BAChB,EAAM,UAAU;4BAChB,EAAM,UAAU;0BAClB,EAAM,QAAQ;2BACb,EAAM,SAAS;2BACf,EAAM,SAAS;2BACf,EAAM,SAAS;wBAClB,EAAK,CAAU,EAAE;kCACP,EAAe;mCACd,EAAgB;oCACf,EAAiB;+BACtB,EAAY;qBACtB,EAAS;;;;;;mCAhDS,EAAa,QAAQ,kBAAkB,gBAsD7B;qCArDT,OAAO,EAAa,KAAK,EAsDZ;iCAzChB,EAAM,KAAK,UAAU,aAAa,MAAM,KA0ChC;8BAxCZ;GAE3B,AADA,EAAa,QAAQ,CAAC,EAAa,OACnC,EAAS,OAAO,MAAM;EACxB,EAsCmC;sBAtDjC,EAAa,QACT,CAAI,uFACJ,CAAI,iFAqDqB;;;;;;;iCA7CF,EAAW,QAAQ,MAAM,KAoDjB;yBAnFtB,MAAwB;GAErC,AADA,EAAW,CAAK,GAChB,EAAS,OAAO,MAAM;EACxB,EAiF0B;;;;;0DAK4B,EAAY,iCAjEvC,CAAC,CAAC,EAAU,SAAS,CAAC,EAAW,MAiE8C;sCACxE,EAAW,MAAM;;uCAEhB,EAAQ,6CAnEjB,CAAC,EAAU,MAmEyD;qCAC7D,EAAU,MAAM;;;;;oCAnEjB,GAAS,MAAM,oBAAoB,CAAC,GAAS,MAAM,iBAAiB,KAAK,KAwE9D;kCAvEb,GAAS,MAAM,iBAAiB,KAAK,KAwE5B;2BAvEX,CAAC,EAwEE;kBAvEL,GAAS,MAAM,eAAe,GAwEpC;;;;CAItB;CACA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EAAC,GAAG;EAAa,EAAiB,CAAiB;EAAG,EAAuB,OAAO;EAAG;CAAe;AAChH,CAAC"}

package/dist/inputs/button/button.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));display:flex;position:relative}[part=button]:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
+//# sourceMappingURL=button.css?inline.cjs.map

package/dist/inputs/button/button.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.css?inline.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button/button.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/button/button.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));display:flex;position:relative}[part=button]:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=button.css?inline.js.map

package/dist/inputs/button/button.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.css?inline.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button/button.d.ts

@@ -0,0 +1,85 @@
+import type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';
+export declare const BUTTON_VARIANTS: readonly ["solid", "flat", "bordered", "outline", "ghost", "text", "frost"];
+/** Visual variant for ore-button — derived from BUTTON_VARIANTS for a single source of truth. */
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+/** Animated border effect for ore-button. */
+export type ButtonEffect = 'shine' | 'rainbow';
+/** Button component properties */
+export type OreButtonProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Animated border effect: 'shine' (color-aware neon sweep) or 'rainbow' */
+    effect?: ButtonEffect;
+    /** Full width button (100% of container) */
+    fullwidth?: boolean;
+    /** When set, renders an `<a>` instead of `<button>` */
+    href?: string;
+    /** Icon-only mode (square aspect ratio, no padding) */
+    iconOnly?: boolean;
+    /** Accessible label for the inner button — required for icon-only buttons */
+    label?: string;
+    /** Show loading state with spinner */
+    loading?: boolean;
+    /** Link rel attribute (requires href) */
+    rel?: string;
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** Component size */
+    size?: ComponentSize;
+    /** Link target (requires href) */
+    target?: LinkTarget;
+    /** HTML button type attribute */
+    type?: ButtonType;
+    /** Visual style variant */
+    variant?: ButtonVariant;
+};
+/**
+ * A customizable button component with multiple variants, sizes, and states.
+ * Supports icons, loading states, and animated border effects.
+ *
+ * @element ore-button
+ *
+ * @attr {string} type - HTML button type: 'button' | 'submit' | 'reset'
+ * @attr {boolean} disabled - Disable button interaction
+ * @attr {boolean} loading - Show loading state with spinner
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost'
+ * @attr {string} size - Button size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {string} effect - Animated border effect: 'shine' | 'rainbow'
+ * @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)
+ * @attr {boolean} fullwidth - Full width button (100% of container)
+ *
+ * @fires click - Emitted when button is clicked (unless disabled/loading)
+ *
+ * @slot - Button content (text, icons, etc.)
+ * @slot prefix - Content before the button text (e.g., icons)
+ * @slot suffix - Content after the button text (e.g., icons, badges)
+ *
+ * @part button - The inner button or anchor element
+ * @part loader - The loading spinner element
+ * @part content - The button content wrapper
+ *
+ * @cssprop --button-bg - Background color override
+ * @cssprop --button-color - Text color override
+ * @cssprop --button-border - Border width override
+ * @cssprop --button-border-color - Border color override
+ * @cssprop --button-radius - Border radius override
+ * @cssprop --button-padding - Inner padding override
+ * @cssprop --button-gap - Gap between icon and text override
+ * @cssprop --button-font-size - Font size override
+ * @cssprop --button-frost-active-bg - Background when pressed (frost variant)
+ * @cssprop --button-frost-active-border-color - Border color when pressed (frost variant)
+ *
+ * @example
+ * ```html
+ * <ore-button variant="solid" color="primary">Click me</ore-button>
+ * <ore-button loading color="success">Processing...</ore-button>
+ * <ore-button effect="shine" color="primary">Shine</ore-button>
+ * <ore-button effect="rainbow" variant="frost">Rainbow</ore-button>
+ * ```
+ */
+export declare const BUTTON_TAG: "ore-button";
+//# sourceMappingURL=button.d.ts.map

package/dist/inputs/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAoBlG,eAAO,MAAM,eAAe,6EAA8E,CAAC;AAE3G,iGAAiG;AACjG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,6CAA6C;AAC7C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

package/dist/inputs/button-group/button-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--group-gap:var(--size-2);--group-radius:var(--rounded-lg);display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer refine.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(ore-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(ore-button:hover),:host([attached]) ::slotted(ore-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(ore-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(ore-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(ore-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(ore-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}`;exports.default=e;
+//# sourceMappingURL=button-group.css?inline.cjs.map

package/dist/inputs/button-group/button-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--rounded-lg);\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(ore-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(ore-button:hover),\n  :host([attached]) ::slotted(ore-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button-group/button-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/button-group/button-group.css?inline
+var e = "@layer refine.base{:host{--group-gap:var(--size-2);--group-radius:var(--rounded-lg);display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer refine.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(ore-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(ore-button:hover),:host([attached]) ::slotted(ore-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(ore-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(ore-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(ore-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(ore-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=button-group.css?inline.js.map

package/dist/inputs/button-group/button-group.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.css?inline.js","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--rounded-lg);\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(ore-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(ore-button:hover),\n  :host([attached]) ::slotted(ore-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button-group/button-group.d.ts

@@ -0,0 +1,64 @@
+import { type Readable } from '@vielzeug/ripple';
+import type { ComponentSize, ThemeColor } from '../../shared';
+import type { ButtonVariant } from '../button/button';
+/** Button group properties */
+export type OreButtonGroupProps = {
+    /** Join buttons together into a single unit */
+    attached?: boolean;
+    /** Theme color tint for all child buttons */
+    color?: ThemeColor;
+    /** Group children span full width */
+    fullwidth?: boolean;
+    /** Label for screen readers */
+    label?: string;
+    /** Layout direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Shared size for all child buttons */
+    size?: ComponentSize;
+    /** Shared visual variant for all child buttons */
+    variant?: ButtonVariant;
+};
+/** Shared context propagated from ore-button-group to child ore-button elements */
+export type ButtonGroupContext = {
+    color: Readable<ThemeColor | undefined>;
+    size: Readable<ComponentSize | undefined>;
+    variant: Readable<ButtonVariant | undefined>;
+};
+export declare const BUTTON_GROUP_CTX: import("@vielzeug/ore").InjectionKey<ButtonGroupContext | undefined>;
+/**
+ * A container for grouping related buttons.
+ * Child `ore-button` components automatically inherit the group's color, size, and variant.
+ *
+ * @element ore-button-group
+ *
+ * @attr {boolean} attached - Join buttons together into a unit
+ * @attr {string} color - Shared color tint: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {boolean} fullwidth - Group spans full width
+ * @attr {string} label - Accessible label
+ * @attr {string} orientation - 'horizontal' | 'vertical'
+ * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'
+ *
+ * @slot - Place ore-button elements here
+ *
+ * @cssprop --group-gap - Gap between buttons (non-attached mode)
+ * @cssprop --group-radius - Border radius of the group container
+ * @cssprop --button-radius - Passed through to child buttons to control corner radius
+ * @cssprop --button-border-start - Passed through to suppress start borders in attached mode
+ * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode
+ * @part group - Group container.
+ * @example
+ * ```html
+ * <ore-button-group attached>
+ *   <ore-button variant="solid" color="primary">Save</ore-button>
+ *   <ore-button variant="solid" color="primary">Save &amp; Continue</ore-button>
+ * </ore-button-group>
+ * <ore-button-group orientation="vertical" size="sm">
+ *   <ore-button>Top</ore-button>
+ *   <ore-button>Middle</ore-button>
+ *   <ore-button>Bottom</ore-button>
+ * </ore-button-group>
+ * ```
+ */
+export declare const BUTTON_GROUP_TAG: "ore-button-group";
+//# sourceMappingURL=button-group.d.ts.map

package/dist/inputs/button-group/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/button-group/button-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,8BAA8B;AAC9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,OAAO,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,sEAAkE,CAAC;AAEhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

package/dist/inputs/calendar/calendar.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_day-selected-bg:var(--calendar-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--calendar-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--calendar-day-outside-opacity,.35);--_bg:var(--calendar-bg,var(--color-canvas));--_border-color:var(--calendar-border-color,var(--color-contrast-200));--_radius:var(--calendar-radius,var(--rounded-xl));display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--calendar-day-selected-bg,var(--_theme-base));--_day-today-color:var(--calendar-day-today-color,var(--_theme-base))}.calendar{gap:var(--size-2);min-width:18rem;padding:var(--size-3);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--calendar-shadow,var(--shadow-md));flex-direction:column;display:flex}:host([fullwidth]) .calendar{min-width:0}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover:not(:disabled){color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.nav-btn:disabled{cursor:not-allowed;opacity:.4}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover:not(:disabled){background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn:disabled{cursor:not-allowed;opacity:.5}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}[hidden]{display:none!important}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{gap:var(--size-0-5);min-width:0;height:var(--size-10);color:var(--color-contrast-800);flex-direction:column;overflow:hidden}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-dots{margin-top:var(--size-0-5);justify-content:center;align-items:center;gap:2px;display:flex}.cal-dot{--badge-bg:var(--_day-selected-bg);--badge-border-color:var(--_day-selected-bg)}.cal-dot-overflow{font-size:8px;font-weight:var(--font-semibold);color:var(--color-contrast-500);line-height:1}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}:host([expanded]){width:100%;display:block}:host([expanded]) .calendar{width:100%;min-width:0;padding:0;overflow:hidden}:host([expanded]) .cal-header{padding:var(--size-3) var(--size-4)}:host([expanded]) .cal-label-btn{font-size:var(--text-base)}:host([expanded]) .cal-grid{gap:0}:host([expanded]) .cal-grid-days{border-top:var(--border) solid var(--_border-color);gap:0}:host([expanded]) .cal-cell{border-radius:0}:host([expanded]) .cal-cell-head{height:var(--size-9);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;border-bottom:var(--border) solid var(--_border-color)}:host([expanded]) .cal-cell-day{height:auto;min-height:var(--calendar-expanded-cell-height,var(--size-28));aspect-ratio:auto;padding:var(--size-2);font-size:var(--text-sm);vertical-align:top;border-bottom:var(--border) solid var(--_border-color);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;position:relative}:host([expanded]) .cal-cell-day:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:var(--border) solid var(--_border-color)}:host([expanded]) .cal-cell-day:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_border-color)}:host([expanded]) .cal-cell-day:nth-child(7n):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:none}:host([expanded]) .cal-cell-day:nth-child(7n):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:none}:host([expanded]) .cal-cell-day:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 6%, transparent)}:host([expanded]) .cal-cell-day[data-selected]{color:inherit;background:0 0}:host([expanded]) .cal-cell-day[data-selected]:before{top:var(--size-1-5);left:var(--size-1-5);width:var(--size-7);height:var(--size-7);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-white,#fff);content:attr(data-day);background:var(--_day-selected-bg);border-radius:var(--rounded-full);justify-content:center;align-items:center;display:flex;position:absolute}:host([expanded]) .cal-cell-day[data-today]{font-weight:inherit;color:inherit}:host([expanded]) .cal-cell-day[data-today]:before{top:var(--size-1-5);left:var(--size-1-5);width:var(--size-7);height:var(--size-7);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-white,#fff);content:attr(data-day);background:var(--_day-today-color);border-radius:var(--rounded-full);justify-content:center;align-items:center;display:flex;position:absolute}:host([expanded]) .cal-cell-day[data-today][data-selected]:before{background:var(--_day-selected-bg)}:host([expanded]) .cal-events{width:100%;margin-top:var(--size-4);flex-direction:column;gap:2px;display:flex;overflow:hidden}:host([expanded]) .cal-event-pill{--badge-max-width:100%;max-width:100%}:host([expanded]) .cal-event-pill-overflow{padding-inline:var(--size-1);font-size:10px;font-weight:var(--font-semibold);color:var(--color-contrast-500)}:host([expanded]) .cal-dots{display:none}:host([expanded]) .cal-cell-day[data-outside]{background:color-mix(in oklch, var(--color-contrast-900) 2%, transparent)}:host([expanded]) .cal-grid-months,:host([expanded]) .cal-grid-years{gap:var(--size-2);min-height:0;padding:var(--size-4)}:host([expanded]) .cal-cell-month,:host([expanded]) .cal-cell-year{min-height:var(--size-16);font-size:var(--text-base);border:var(--border) solid var(--_border-color);border-radius:var(--rounded-lg)}:host([expanded]) .cal-cell-month[data-selected],:host([expanded]) .cal-cell-year[data-selected]{border-color:#0000}:host(.is-disabled) .calendar{pointer-events:none;opacity:.6}@media (prefers-reduced-motion:reduce){.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}`;exports.default=e;
+//# sourceMappingURL=calendar.css?inline.cjs.map

package/dist/inputs/calendar/calendar.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.css?inline.cjs","names":[],"sources":["../../../src/inputs/calendar/calendar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--calendar-day-outside-opacity, 0.35);\n    --_bg: var(--calendar-bg, var(--color-canvas));\n    --_border-color: var(--calendar-border-color, var(--color-contrast-200));\n    --_radius: var(--calendar-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-base));\n  }\n\n  /* ── Root panel ──────────────────────────────────────────────────────────── */\n\n  .calendar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--calendar-shadow, var(--shadow-md));\n  }\n\n  :host([fullwidth]) .calendar {\n    min-width: 0;\n  }\n\n  /* ── Header ──────────────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .nav-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Grid base ───────────────────────────────────────────────────────────── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    gap: var(--size-0-5);\n\n    /* Reserve max height (6 week rows + 1 header) so the panel never shrinks\n       on 5-week months or when switching to month/year view. */\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* ── Column headers ──────────────────────────────────────────────────────── */\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  /* ── Day cells ───────────────────────────────────────────────────────────── */\n\n  .cal-cell-day {\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n    height: var(--size-10);\n    overflow: hidden;\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Event dots (normal mode) ────────────────────────────────────────────── */\n\n  .cal-dots {\n    display: flex;\n    gap: 2px;\n    align-items: center;\n    justify-content: center;\n    margin-block-start: var(--size-0-5);\n  }\n\n  .cal-dot {\n    --badge-bg: var(--_day-selected-bg);\n    --badge-border-color: var(--_day-selected-bg);\n  }\n\n  .cal-dot-overflow {\n    font-size: 8px;\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-500);\n  }\n\n  /* ── Month / year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Expanded variant ────────────────────────────────────────────────────── */\n\n  :host([expanded]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([expanded]) .calendar {\n    width: 100%;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-header {\n    padding: var(--size-3) var(--size-4);\n  }\n\n  :host([expanded]) .cal-label-btn {\n    font-size: var(--text-base);\n  }\n\n  :host([expanded]) .cal-grid {\n    gap: 0;\n  }\n\n  :host([expanded]) .cal-grid-days {\n    gap: 0;\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell {\n    border-radius: 0;\n  }\n\n  :host([expanded]) .cal-cell-head {\n    height: var(--size-9);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell-day {\n    position: relative;\n    flex-direction: column;\n    gap: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: auto;\n    min-height: var(--calendar-expanded-cell-height, var(--size-28));\n    aspect-ratio: auto;\n    padding: var(--size-2);\n    font-size: var(--text-sm);\n    vertical-align: top;\n    border-block-end: var(--border) solid var(--_border-color);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Remove right border on last column */\n  :host([expanded]) .cal-cell-day:nth-child(7n) {\n    border-inline-end: none;\n  }\n\n  :host([expanded]) .cal-cell-day:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 6%, transparent);\n  }\n\n  /* Selected day — circle around the number only */\n  :host([expanded]) .cal-cell-day[data-selected] {\n    color: inherit;\n    background: transparent;\n  }\n\n  :host([expanded]) .cal-cell-day[data-selected]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-selected-bg);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Today — circle in accent colour */\n  :host([expanded]) .cal-cell-day[data-today] {\n    font-weight: inherit;\n    color: inherit;\n  }\n\n  :host([expanded]) .cal-cell-day[data-today]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-today-color);\n    border-radius: var(--rounded-full);\n  }\n\n  /* When both today AND selected — selected wins */\n  :host([expanded]) .cal-cell-day[data-today][data-selected]::before {\n    background: var(--_day-selected-bg);\n  }\n\n  /* ── Expanded event pills ────────────────────────────────────────────────── */\n\n  /* Push events below the day-number circle row */\n  :host([expanded]) .cal-events {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    margin-block-start: var(--size-4);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-event-pill {\n    max-width: 100%;\n\n    --badge-max-width: 100%;\n  }\n\n  :host([expanded]) .cal-event-pill-overflow {\n    padding-inline: var(--size-1);\n    font-size: 10px;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n  }\n\n  /* Dots are hidden in expanded mode — pills take over */\n  :host([expanded]) .cal-dots {\n    display: none;\n  }\n\n  :host([expanded]) .cal-cell-day[data-outside] {\n    background: color-mix(in oklch, var(--color-contrast-900) 2%, transparent);\n  }\n\n  /* Expanded month / year grids */\n  :host([expanded]) .cal-grid-months,\n  :host([expanded]) .cal-grid-years {\n    gap: var(--size-2);\n    min-height: 0;\n    padding: var(--size-4);\n  }\n\n  :host([expanded]) .cal-cell-month,\n  :host([expanded]) .cal-cell-year {\n    min-height: var(--size-16);\n    font-size: var(--text-base);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--rounded-lg);\n  }\n\n  :host([expanded]) .cal-cell-month[data-selected],\n  :host([expanded]) .cal-cell-year[data-selected] {\n    border-color: transparent;\n  }\n\n  /* ── Disabled host ───────────────────────────────────────────────────────── */\n\n  :host(.is-disabled) .calendar {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/calendar/calendar.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/calendar/calendar.css?inline
+var e = "@layer refine.base{:host{--_day-selected-bg:var(--calendar-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--calendar-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--calendar-day-outside-opacity,.35);--_bg:var(--calendar-bg,var(--color-canvas));--_border-color:var(--calendar-border-color,var(--color-contrast-200));--_radius:var(--calendar-radius,var(--rounded-xl));display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--calendar-day-selected-bg,var(--_theme-base));--_day-today-color:var(--calendar-day-today-color,var(--_theme-base))}.calendar{gap:var(--size-2);min-width:18rem;padding:var(--size-3);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--calendar-shadow,var(--shadow-md));flex-direction:column;display:flex}:host([fullwidth]) .calendar{min-width:0}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover:not(:disabled){color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.nav-btn:disabled{cursor:not-allowed;opacity:.4}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover:not(:disabled){background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn:disabled{cursor:not-allowed;opacity:.5}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}[hidden]{display:none!important}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{gap:var(--size-0-5);min-width:0;height:var(--size-10);color:var(--color-contrast-800);flex-direction:column;overflow:hidden}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-dots{margin-top:var(--size-0-5);justify-content:center;align-items:center;gap:2px;display:flex}.cal-dot{--badge-bg:var(--_day-selected-bg);--badge-border-color:var(--_day-selected-bg)}.cal-dot-overflow{font-size:8px;font-weight:var(--font-semibold);color:var(--color-contrast-500);line-height:1}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}:host([expanded]){width:100%;display:block}:host([expanded]) .calendar{width:100%;min-width:0;padding:0;overflow:hidden}:host([expanded]) .cal-header{padding:var(--size-3) var(--size-4)}:host([expanded]) .cal-label-btn{font-size:var(--text-base)}:host([expanded]) .cal-grid{gap:0}:host([expanded]) .cal-grid-days{border-top:var(--border) solid var(--_border-color);gap:0}:host([expanded]) .cal-cell{border-radius:0}:host([expanded]) .cal-cell-head{height:var(--size-9);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;border-bottom:var(--border) solid var(--_border-color)}:host([expanded]) .cal-cell-day{height:auto;min-height:var(--calendar-expanded-cell-height,var(--size-28));aspect-ratio:auto;padding:var(--size-2);font-size:var(--text-sm);vertical-align:top;border-bottom:var(--border) solid var(--_border-color);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;position:relative}:host([expanded]) .cal-cell-day:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:var(--border) solid var(--_border-color)}:host([expanded]) .cal-cell-day:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_border-color)}:host([expanded]) .cal-cell-day:nth-child(7n):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:none}:host([expanded]) .cal-cell-day:nth-child(7n):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:none}:host([expanded]) .cal-cell-day:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 6%, transparent)}:host([expanded]) .cal-cell-day[data-selected]{color:inherit;background:0 0}:host([expanded]) .cal-cell-day[data-selected]:before{top:var(--size-1-5);left:var(--size-1-5);width:var(--size-7);height:var(--size-7);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-white,#fff);content:attr(data-day);background:var(--_day-selected-bg);border-radius:var(--rounded-full);justify-content:center;align-items:center;display:flex;position:absolute}:host([expanded]) .cal-cell-day[data-today]{font-weight:inherit;color:inherit}:host([expanded]) .cal-cell-day[data-today]:before{top:var(--size-1-5);left:var(--size-1-5);width:var(--size-7);height:var(--size-7);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-white,#fff);content:attr(data-day);background:var(--_day-today-color);border-radius:var(--rounded-full);justify-content:center;align-items:center;display:flex;position:absolute}:host([expanded]) .cal-cell-day[data-today][data-selected]:before{background:var(--_day-selected-bg)}:host([expanded]) .cal-events{width:100%;margin-top:var(--size-4);flex-direction:column;gap:2px;display:flex;overflow:hidden}:host([expanded]) .cal-event-pill{--badge-max-width:100%;max-width:100%}:host([expanded]) .cal-event-pill-overflow{padding-inline:var(--size-1);font-size:10px;font-weight:var(--font-semibold);color:var(--color-contrast-500)}:host([expanded]) .cal-dots{display:none}:host([expanded]) .cal-cell-day[data-outside]{background:color-mix(in oklch, var(--color-contrast-900) 2%, transparent)}:host([expanded]) .cal-grid-months,:host([expanded]) .cal-grid-years{gap:var(--size-2);min-height:0;padding:var(--size-4)}:host([expanded]) .cal-cell-month,:host([expanded]) .cal-cell-year{min-height:var(--size-16);font-size:var(--text-base);border:var(--border) solid var(--_border-color);border-radius:var(--rounded-lg)}:host([expanded]) .cal-cell-month[data-selected],:host([expanded]) .cal-cell-year[data-selected]{border-color:#0000}:host(.is-disabled) .calendar{pointer-events:none;opacity:.6}@media (prefers-reduced-motion:reduce){.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=calendar.css?inline.js.map