@vielzeug/refine 1.1.1

package/dist/skeleton.js

@@ -0,0 +1,59 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizableBundle as t } from "./shared/prop-bundles.js";
+import { safeCSSLength as n } from "./utils/css.js";
+import { intersectionObserver as r } from "./ore/dist/observers/intersection-observe.js";
+import "./ore/dist/observers.js";
+import i from "./feedback/skeleton/skeleton.css?inline.js";
+import { define as a, html as o, prop as s } from "@vielzeug/ore";
+import { computed as c, signal as l, watch as u } from "@vielzeug/ripple";
+//#region src/feedback/skeleton/skeleton.ts
+var d = "ore-skeleton";
+a(d, {
+	props: {
+		...t,
+		animated: s.bool(!0),
+		height: s.string(),
+		lines: s.number(1),
+		radius: s.string(),
+		striped: s.bool(!1),
+		variant: s.oneOf([
+			"rect",
+			"circle",
+			"text"
+		], "rect"),
+		width: s.string()
+	},
+	setup(e, { bind: t, el: i, onMounted: a }) {
+		let s = l(!1), d = () => {
+			let t = Math.floor(Number(e.lines.value));
+			return Number.isFinite(t) && t > 0 ? t : 1;
+		}, f = () => e.variant.value === "text" ? d() : 1;
+		return u(c(() => `${e.width.value ?? ""}|${e.height.value ?? ""}|${e.radius.value ?? ""}|${e.animated.value === !1 ? "0" : "1"}`), () => {
+			let t = n(e.width.value), r = n(e.height.value), a = n(e.radius.value);
+			t ? i.style.setProperty("--skeleton-width", t) : i.style.removeProperty("--skeleton-width"), r ? i.style.setProperty("--skeleton-height", r) : i.style.removeProperty("--skeleton-height"), a ? i.style.setProperty("--skeleton-radius", a) : i.style.removeProperty("--skeleton-radius");
+			let o = i.getAttribute("animated") !== "false" && e.animated.value !== !1;
+			i.setAttribute("data-animated", o ? "true" : "false");
+		}, { immediate: !0 }), t({ attr: { "data-paused": () => s.value ? !0 : void 0 } }), a(() => {
+			u(r(i, { threshold: 0 }), (e) => {
+				let t = typeof e == "object" && e && "isIntersecting" in e ? !e.isIntersecting : !1;
+				s.value = t;
+			});
+		}), o`
+      <div class="stack" part="stack">
+        ${() => Array.from({ length: f() }, (t, n) => {
+			let r = e.variant.value === "text" && f() > 1 && n === f() - 1;
+			return o`<div
+              class="bone"
+              part="bone"
+              aria-hidden="true"
+              :data-last="${() => r ? "true" : null}"></div>`;
+		})}
+      </div>
+    `;
+	},
+	styles: [e, i]
+});
+//#endregion
+export { d as SKELETON_TAG };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { intersectionObserver } from '@vielzeug/ore/observers';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { sizableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { safeCSSLength } from '../../utils';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type OreSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element ore-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @part stack - Stack container.\n * @part bone - Skeleton bone element.\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n *\n * <!-- Avatar -->\n * <ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n *\n * <!-- Card image -->\n * <ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n * ```\n */\nexport const SKELETON_TAG = 'ore-skeleton' as const;\ndefine<OreSkeletonProps>(SKELETON_TAG, {\n  props: {\n    ...sizableBundle,\n    animated: prop.bool(true),\n    height: prop.string(),\n    lines: prop.number(1),\n    radius: prop.string(),\n    striped: prop.bool(false),\n    variant: prop.oneOf(['rect', 'circle', 'text'] as const, 'rect'),\n    width: prop.string(),\n  },\n  setup(props, { bind, el, onMounted }) {\n    const isPaused = signal(false);\n    const lineCount = () => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    };\n    const renderLineCount = () => (props.variant.value === 'text' ? lineCount() : 1);\n    const styleDeps = () =>\n      `${props.width.value ?? ''}|${props.height.value ?? ''}|${props.radius.value ?? ''}|${props.animated.value === false ? '0' : '1'}`;\n\n    watch(\n      computed(styleDeps),\n      () => {\n        const safeWidth = safeCSSLength(props.width.value);\n        const safeHeight = safeCSSLength(props.height.value);\n        const safeRadius = safeCSSLength(props.radius.value);\n\n        if (safeWidth) el.style.setProperty('--skeleton-width', safeWidth);\n        else el.style.removeProperty('--skeleton-width');\n\n        if (safeHeight) el.style.setProperty('--skeleton-height', safeHeight);\n        else el.style.removeProperty('--skeleton-height');\n\n        if (safeRadius) el.style.setProperty('--skeleton-radius', safeRadius);\n        else el.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = el.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        el.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    bind({\n      attr: {\n        'data-paused': () => (isPaused.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const entry = intersectionObserver(el, { threshold: 0 });\n\n      watch(entry, (e) => {\n        const paused =\n          typeof e === 'object' && e !== null && 'isIntersecting' in e\n            ? !(e as IntersectionObserverEntry).isIntersecting\n            : false;\n\n        isPaused.value = paused;\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount() }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount() > 1 && index === renderLineCount() - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AAwEA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,OAAO;EACL,GAAG;EACH,UAAU,EAAK,KAAK,EAAI;EACxB,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO,CAAC;EACpB,QAAQ,EAAK,OAAO;EACpB,SAAS,EAAK,KAAK,EAAK;EACxB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAU;EAAM,GAAY,MAAM;EAC/D,OAAO,EAAK,OAAO;CACrB;CACA,MAAM,GAAO,EAAE,SAAM,OAAI,gBAAa;EACpC,IAAM,IAAW,EAAO,EAAK,GACvB,UAAkB;GACtB,IAAM,IAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,KAAK,CAAC;GAElD,OAAO,OAAO,SAAS,CAAK,KAAK,IAAQ,IAAI,IAAQ;EACvD,GACM,UAAyB,EAAM,QAAQ,UAAU,SAAS,EAAU,IAAI;EA+C9E,OA3CA,EACE,QAHA,GAAG,EAAM,MAAM,SAAS,GAAG,GAAG,EAAM,OAAO,SAAS,GAAG,GAAG,EAAM,OAAO,SAAS,GAAG,GAAG,EAAM,SAAS,UAAU,KAAQ,MAAM,KAG3G,SACZ;GACJ,IAAM,IAAY,EAAc,EAAM,MAAM,KAAK,GAC3C,IAAa,EAAc,EAAM,OAAO,KAAK,GAC7C,IAAa,EAAc,EAAM,OAAO,KAAK;GAQnD,AANI,IAAW,EAAG,MAAM,YAAY,oBAAoB,CAAS,IAC5D,EAAG,MAAM,eAAe,kBAAkB,GAE3C,IAAY,EAAG,MAAM,YAAY,qBAAqB,CAAU,IAC/D,EAAG,MAAM,eAAe,mBAAmB,GAE5C,IAAY,EAAG,MAAM,YAAY,qBAAqB,CAAU,IAC/D,EAAG,MAAM,eAAe,mBAAmB;GAGhD,IAAM,IADc,EAAG,aAAa,UACjB,MAAgB,WAAW,EAAM,SAAS,UAAU;GAEvE,EAAG,aAAa,iBAAiB,IAAa,SAAS,OAAO;EAChE,GACA,EAAE,WAAW,GAAK,CACpB,GAEA,EAAK,EACH,MAAM,EACJ,qBAAsB,EAAS,QAAQ,KAAO,KAAA,EAChD,EACF,CAAC,GAED,QAAgB;GAGd,EAFc,EAAqB,GAAI,EAAE,WAAW,EAAE,CAEhD,IAAQ,MAAM;IAClB,IAAM,IACJ,OAAO,KAAM,YAAY,KAAc,oBAAoB,IACvD,CAAE,EAAgC,iBAClC;IAEN,EAAS,QAAQ;GACnB,CAAC;EACH,CAAC,GAEM,CAAI;;gBAGL,MAAM,KAAK,EAAE,QAAQ,EAAgB,EAAE,IAAI,GAAG,MAAU;GACtD,IAAM,IACJ,EAAM,QAAQ,UAAU,UAAU,EAAgB,IAAI,KAAK,MAAU,EAAgB,IAAI;GAE3F,OAAO,CAAI;;;;kCAIY,IAAa,SAAS,KAAM;EACrD,CAAC,EAAE;;;CAGX;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/slider.cjs

@@ -0,0 +1,27 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/field-base.cjs"),s=require("./headless/slider.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/slider/slider.css?inline.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple");var p=(e,t)=>n=>{e()&&t(n)},m=`ore-slider`;(0,d.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:d.prop.string(),from:d.prop.number(0),"from-value-text":d.prop.string(),helper:d.prop.string(),max:d.prop.number(100),min:d.prop.number(0),name:d.prop.string(),range:d.prop.bool(!1),step:d.prop.number(1),to:d.prop.number(100),"to-value-text":d.prop.string(),value:d.prop.number(0),"value-text":d.prop.string()},setup(e,{aria:t,bind:n,el:r,emit:i,onCleanup:a,onEvent:u,onMounted:m,slots:h}){let g=e.range.value,_=s.createSliderControl({max:e.max,min:e.min,step:e.step}),v=(0,d.inject)(c.FORM_CTX),y=c.useFormContext(n,e,v),b=(0,f.signal)(!1),x=y.disabled,S=(0,f.signal)(void 0),C=(0,d.createStableId)(`helper`),w=o.createErrorHelperState({error:e.error,helper:e.helper}),T=(0,f.computed)(()=>w.value.errorText),E=(0,f.computed)(()=>w.value.helperText),D=(0,f.computed)(()=>T.value||E.value?C:null);n({attr:{"data-dragging":()=>b.value?!0:void 0,size:y.size}});let O,k=(0,f.signal)(`0`);g||(O=(0,d.useField)({disabled:x,value:k}),(0,f.watch)(e.value,e=>{k.value=String(e)},{immediate:!0}),n({attr:{ariaDescribedby:()=>D.value??null,ariaDisabled:()=>x.value?`true`:null,ariaLabelledby:()=>S.value??null,ariaValuemax:()=>_.max(),ariaValuemin:()=>_.min(),ariaValuenow:()=>Number(k.value||0),ariaValuetext:()=>e[`value-text`].value??null,role:()=>`slider`,tabindex:()=>x.value?null:`0`}}));let A=(0,f.signal)(0),j=(0,f.signal)(100);g&&(O=(0,d.useField)({disabled:x,toFormValue:({from:t,to:n})=>{let r=e.name.value;if(!r)return null;let i=new FormData;return i.append(`${r}[from]`,String(t)),i.append(`${r}[to]`,String(n)),i},value:(0,f.computed)(()=>({from:A.value,to:j.value}))}),(0,f.watch)(e.from,e=>{A.value=_.snap(Number(e))},{immediate:!0}),(0,f.watch)(e.to,e=>{j.value=_.snap(Number(e))},{immediate:!0}));let M=(0,d.ref)(),N=(0,d.ref)(),P=(0,d.ref)(),F=(0,d.ref)(),I=(0,d.createStableId)(`slider-start`),L=(0,d.createStableId)(`slider-end`),R=e=>{let t=_.toPercent(e);r.style.setProperty(`--_thumb-pos`,`${t}%`),r.style.setProperty(`--_fill-start`,`0%`),r.style.setProperty(`--_fill-width`,`${t}%`)},z=()=>{let e=_.toPercent(A.value),t=_.toPercent(j.value);r.style.setProperty(`--_thumb-start`,`${e}%`),r.style.setProperty(`--_thumb-end`,`${t}%`),r.style.setProperty(`--_fill-start`,`${e}%`),r.style.setProperty(`--_fill-width`,`${t-e}%`)},B=e=>{v?.validateOn?.value===e&&O?.reportValidity()},V=n=>{z();let r=e=>{let t=n.getBoundingClientRect();return _.fromClientX(e,t)},o=null,s=e=>{o===`start`?A.value=Math.min(_.snap(e),j.value):o===`end`&&(j.value=Math.max(_.snap(e),A.value)),A.value=_.clamp(A.value),j.value=_.clamp(j.value),z(),i(`change`,{from:A.value,to:j.value,value:{from:A.value,to:j.value}}),B(`change`)};u(n,`pointerdown`,p(()=>!x.value,e=>{e.preventDefault();let t=r(e.clientX);o=Math.abs(t-A.value)<=Math.abs(t-j.value)?`start`:`end`,e.target.setPointerCapture(e.pointerId),s(t)})),u(n,`pointermove`,p(()=>!!o,e=>{e.preventDefault(),b.value||=!0,s(r(e.clientX))})),u(n,`pointerup`,p(()=>!!o,e=>{e.preventDefault(),o=null,b.value=!1,e.target.releasePointerCapture(e.pointerId)}));let c=(e,t)=>n=>{if(x.value)return;let r=_.nextFromKey(n.key,e());r!==null&&(n.preventDefault(),t(_.snap(r)),z(),i(`change`,{from:A.value,originalEvent:n,to:j.value,value:{from:A.value,to:j.value}}),B(`change`))},l=P.value,d=F.value;l&&(u(l,`keydown`,c(()=>A.value,e=>{A.value=Math.min(e,j.value)})),a(t(l,{label:`Range start`,valuemax:()=>j.value,valuemin:()=>_.min(),valuenow:()=>A.value,valuetext:()=>e[`from-value-text`].value??null}))),d&&(u(d,`keydown`,c(()=>j.value,e=>{j.value=Math.max(e,A.value)})),a(t(d,{label:`Range end`,valuemax:()=>_.max(),valuemin:()=>A.value,valuenow:()=>j.value,valuetext:()=>e[`to-value-text`].value??null})))},H=e=>{R(Number(k.value));let t=t=>{if(x.value)return;let n=e.getBoundingClientRect(),r=_.fromClientX(t,n);Number(k.value)!==r&&(k.value=r.toString(),R(r),i(`change`,{value:r}),B(`change`))},n=!1;u(e,`pointerdown`,p(()=>!x.value,e=>{e.preventDefault(),n=!0,t(e.clientX),e.target.setPointerCapture(e.pointerId)})),u(e,`pointermove`,p(()=>n,e=>{e.preventDefault(),b.value||=!0,t(e.clientX)})),u(e,`pointerup`,p(()=>n,e=>{e.preventDefault(),n=!1,b.value=!1,e.target.releasePointerCapture(e.pointerId)})),u(r,`keydown`,p(()=>!x.value,e=>{let t=Number(k.value||0),n=_.nextFromKey(e.key,t);if(n===null)return;e.preventDefault();let r=_.clamp(n);r!==t&&(k.value=r.toString(),R(r),i(`change`,{originalEvent:e,value:r}),B(`change`))}))};return m(()=>{let e=M.value;if(e){if(h.has().value&&N.value){let e=(0,d.createStableId)(`slider-label`);N.value.id=e,g||(S.value=e)}g?V(e):H(e)}}),d.html`
+      <div class="slider-container" part="slider" ref=${M}>
+        <div class="slider-track" part="track">
+          <div class="slider-fill" part="fill"></div>
+          <div class="slider-thumb slider-thumb-sole" part="thumb"></div>
+          <div
+            class="slider-thumb slider-thumb-start"
+            part="thumb-start"
+            ref=${P}
+            role="slider"
+            tabindex="${()=>x.value?`-1`:`0`}"
+            :aria-describedby="${D}"
+            id="${I}"></div>
+          <div
+            class="slider-thumb slider-thumb-end"
+            part="thumb-end"
+            ref=${F}
+            role="slider"
+            tabindex="${()=>x.value?`-1`:`0`}"
+            :aria-describedby="${D}"
+            id="${L}"></div>
+        </div>
+      </div>
+      <span class="label" part="label" ref=${N}><slot></slot></span>
+      ${l.renderHelperRegion(C,T,E)}
+    `},styles:[n.disabledStateMixin,r.colorThemeMixin,t.sizeVariantMixin(a.SLIDER_SIZE_PRESET),u.default,e.coarsePointerMixin]}),exports.SLIDER_TAG=m;
+//# sourceMappingURL=slider.cjs.map

package/dist/slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.cjs","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import { createStableId, define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../headless';\nimport { disablableBundle, sizableBundle, SLIDER_SIZE_PRESET, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './slider.css?inline';\n\nconst guard =\n  <E extends Event = Event>(condition: () => unknown, handler: (e: E) => void): ((e: E) => void) =>\n  (e) => {\n    if (condition()) handler(e);\n  };\n\n/** Slider component properties */\n\nexport type OreSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type OreSliderProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Range mode: lower bound */\n  from?: number | string;\n  /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n  'from-value-text'?: string;\n  /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Maximum value */\n  max?: number | string;\n  /** Minimum value */\n  min?: number | string;\n  /** Single-value mode: form field name */\n  name?: string;\n  /** Activate two-thumb range selection */\n  range?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step increment */\n  step?: number | string;\n  /** Range mode: upper bound */\n  to?: number | string;\n  /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n  'to-value-text'?: string;\n  /** Single-value mode: current value */\n  value?: number | string;\n  /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n  'value-text'?: string;\n};\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element ore-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n * @attr {string}  helper - Helper text below the slider\n * @attr {string}  error  - Error message below the slider\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n * @part helper-text - The helper/error text element\n *\n * @cssprop --slider-height    - Track height\n * @cssprop --slider-size      - Thumb dimensions\n * @cssprop --slider-track-bg  - Track background color\n * @cssprop --slider-fill      - Active fill color\n * @cssprop --slider-thumb-bg  - Thumb background color\n *\n * @example\n * ```html\n * <ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n * <ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n * ```\n */\nexport const SLIDER_TAG = 'ore-slider' as const;\ndefine<OreSliderProps, OreSliderEvents>(SLIDER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    from: prop.number(0),\n    'from-value-text': prop.string(),\n    helper: prop.string(),\n    max: prop.number(100),\n    min: prop.number(0),\n    name: prop.string(),\n    range: prop.bool(false),\n    step: prop.number(1),\n    to: prop.number(100),\n    'to-value-text': prop.string(),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n  setup(props, { aria, bind, el, emit, onCleanup, onEvent, onMounted, slots }) {\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const sliderControl = createSliderControl({\n      max: props.max,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDragging = signal(false);\n    const isDisabled = fCtxProps.disabled;\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        sliderFd?.reportValidity();\n      }\n    };\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbStartEl, {\n            label: 'Range start',\n            valuemax: () => endVal.value,\n            valuemin: () => sliderControl.min(),\n            valuenow: () => startVal.value,\n            valuetext: () => props['from-value-text'].value ?? null,\n          }),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbEndEl, {\n            label: 'Range end',\n            valuemax: () => sliderControl.max(),\n            valuemin: () => startVal.value,\n            valuenow: () => endVal.value,\n            valuetext: () => props['to-value-text'].value ?? null,\n          }),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"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"}

package/dist/slider.js

@@ -0,0 +1,219 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as r } from "./styles/mixins/theme.css.js";
+import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "./shared/prop-bundles.js";
+import { SLIDER_SIZE_PRESET as s } from "./shared/size-presets.js";
+import { createErrorHelperState as c } from "./headless/field-base.js";
+import { createSliderControl as l } from "./headless/slider.js";
+import { FORM_CTX as u, useFormContext as d } from "./inputs/shared/form-context.js";
+import { renderHelperRegion as f } from "./inputs/shared/templates.js";
+import p from "./inputs/slider/slider.css?inline.js";
+import { createStableId as m, define as h, html as g, inject as _, prop as v, ref as y, useField as b } from "@vielzeug/ore";
+import { computed as x, signal as S, watch as C } from "@vielzeug/ripple";
+//#region src/inputs/slider/slider.ts
+var w = (e, t) => (n) => {
+	e() && t(n);
+}, T = "ore-slider";
+h(T, {
+	formAssociated: !0,
+	props: {
+		...o,
+		...a,
+		...i,
+		error: v.string(),
+		from: v.number(0),
+		"from-value-text": v.string(),
+		helper: v.string(),
+		max: v.number(100),
+		min: v.number(0),
+		name: v.string(),
+		range: v.bool(!1),
+		step: v.number(1),
+		to: v.number(100),
+		"to-value-text": v.string(),
+		value: v.number(0),
+		"value-text": v.string()
+	},
+	setup(e, { aria: t, bind: n, el: r, emit: i, onCleanup: a, onEvent: o, onMounted: s, slots: p }) {
+		let h = e.range.value, v = l({
+			max: e.max,
+			min: e.min,
+			step: e.step
+		}), T = _(u), E = d(n, e, T), D = S(!1), O = E.disabled, k = S(void 0), A = m("helper"), j = c({
+			error: e.error,
+			helper: e.helper
+		}), M = x(() => j.value.errorText), N = x(() => j.value.helperText), P = x(() => M.value || N.value ? A : null);
+		n({ attr: {
+			"data-dragging": () => D.value ? !0 : void 0,
+			size: E.size
+		} });
+		let F, I = S("0");
+		h || (F = b({
+			disabled: O,
+			value: I
+		}), C(e.value, (e) => {
+			I.value = String(e);
+		}, { immediate: !0 }), n({ attr: {
+			ariaDescribedby: () => P.value ?? null,
+			ariaDisabled: () => O.value ? "true" : null,
+			ariaLabelledby: () => k.value ?? null,
+			ariaValuemax: () => v.max(),
+			ariaValuemin: () => v.min(),
+			ariaValuenow: () => Number(I.value || 0),
+			ariaValuetext: () => e["value-text"].value ?? null,
+			role: () => "slider",
+			tabindex: () => O.value ? null : "0"
+		} }));
+		let L = S(0), R = S(100);
+		h && (F = b({
+			disabled: O,
+			toFormValue: ({ from: t, to: n }) => {
+				let r = e.name.value;
+				if (!r) return null;
+				let i = new FormData();
+				return i.append(`${r}[from]`, String(t)), i.append(`${r}[to]`, String(n)), i;
+			},
+			value: x(() => ({
+				from: L.value,
+				to: R.value
+			}))
+		}), C(e.from, (e) => {
+			L.value = v.snap(Number(e));
+		}, { immediate: !0 }), C(e.to, (e) => {
+			R.value = v.snap(Number(e));
+		}, { immediate: !0 }));
+		let z = y(), B = y(), V = y(), H = y(), U = m("slider-start"), W = m("slider-end"), G = (e) => {
+			let t = v.toPercent(e);
+			r.style.setProperty("--_thumb-pos", `${t}%`), r.style.setProperty("--_fill-start", "0%"), r.style.setProperty("--_fill-width", `${t}%`);
+		}, K = () => {
+			let e = v.toPercent(L.value), t = v.toPercent(R.value);
+			r.style.setProperty("--_thumb-start", `${e}%`), r.style.setProperty("--_thumb-end", `${t}%`), r.style.setProperty("--_fill-start", `${e}%`), r.style.setProperty("--_fill-width", `${t - e}%`);
+		}, q = (e) => {
+			T?.validateOn?.value === e && F?.reportValidity();
+		}, J = (n) => {
+			K();
+			let r = (e) => {
+				let t = n.getBoundingClientRect();
+				return v.fromClientX(e, t);
+			}, s = null, c = (e) => {
+				s === "start" ? L.value = Math.min(v.snap(e), R.value) : s === "end" && (R.value = Math.max(v.snap(e), L.value)), L.value = v.clamp(L.value), R.value = v.clamp(R.value), K(), i("change", {
+					from: L.value,
+					to: R.value,
+					value: {
+						from: L.value,
+						to: R.value
+					}
+				}), q("change");
+			};
+			o(n, "pointerdown", w(() => !O.value, (e) => {
+				e.preventDefault();
+				let t = r(e.clientX);
+				s = Math.abs(t - L.value) <= Math.abs(t - R.value) ? "start" : "end", e.target.setPointerCapture(e.pointerId), c(t);
+			})), o(n, "pointermove", w(() => !!s, (e) => {
+				e.preventDefault(), D.value ||= !0, c(r(e.clientX));
+			})), o(n, "pointerup", w(() => !!s, (e) => {
+				e.preventDefault(), s = null, D.value = !1, e.target.releasePointerCapture(e.pointerId);
+			}));
+			let l = (e, t) => (n) => {
+				if (O.value) return;
+				let r = v.nextFromKey(n.key, e());
+				r !== null && (n.preventDefault(), t(v.snap(r)), K(), i("change", {
+					from: L.value,
+					originalEvent: n,
+					to: R.value,
+					value: {
+						from: L.value,
+						to: R.value
+					}
+				}), q("change"));
+			}, u = V.value, d = H.value;
+			u && (o(u, "keydown", l(() => L.value, (e) => {
+				L.value = Math.min(e, R.value);
+			})), a(t(u, {
+				label: "Range start",
+				valuemax: () => R.value,
+				valuemin: () => v.min(),
+				valuenow: () => L.value,
+				valuetext: () => e["from-value-text"].value ?? null
+			}))), d && (o(d, "keydown", l(() => R.value, (e) => {
+				R.value = Math.max(e, L.value);
+			})), a(t(d, {
+				label: "Range end",
+				valuemax: () => v.max(),
+				valuemin: () => L.value,
+				valuenow: () => R.value,
+				valuetext: () => e["to-value-text"].value ?? null
+			})));
+		}, Y = (e) => {
+			G(Number(I.value));
+			let t = (t) => {
+				if (O.value) return;
+				let n = e.getBoundingClientRect(), r = v.fromClientX(t, n);
+				Number(I.value) !== r && (I.value = r.toString(), G(r), i("change", { value: r }), q("change"));
+			}, n = !1;
+			o(e, "pointerdown", w(() => !O.value, (e) => {
+				e.preventDefault(), n = !0, t(e.clientX), e.target.setPointerCapture(e.pointerId);
+			})), o(e, "pointermove", w(() => n, (e) => {
+				e.preventDefault(), D.value ||= !0, t(e.clientX);
+			})), o(e, "pointerup", w(() => n, (e) => {
+				e.preventDefault(), n = !1, D.value = !1, e.target.releasePointerCapture(e.pointerId);
+			})), o(r, "keydown", w(() => !O.value, (e) => {
+				let t = Number(I.value || 0), n = v.nextFromKey(e.key, t);
+				if (n === null) return;
+				e.preventDefault();
+				let r = v.clamp(n);
+				r !== t && (I.value = r.toString(), G(r), i("change", {
+					originalEvent: e,
+					value: r
+				}), q("change"));
+			}));
+		};
+		return s(() => {
+			let e = z.value;
+			if (e) {
+				if (p.has().value && B.value) {
+					let e = m("slider-label");
+					B.value.id = e, h || (k.value = e);
+				}
+				h ? J(e) : Y(e);
+			}
+		}), g`
+      <div class="slider-container" part="slider" ref=${z}>
+        <div class="slider-track" part="track">
+          <div class="slider-fill" part="fill"></div>
+          <div class="slider-thumb slider-thumb-sole" part="thumb"></div>
+          <div
+            class="slider-thumb slider-thumb-start"
+            part="thumb-start"
+            ref=${V}
+            role="slider"
+            tabindex="${() => O.value ? "-1" : "0"}"
+            :aria-describedby="${P}"
+            id="${U}"></div>
+          <div
+            class="slider-thumb slider-thumb-end"
+            part="thumb-end"
+            ref=${H}
+            role="slider"
+            tabindex="${() => O.value ? "-1" : "0"}"
+            :aria-describedby="${P}"
+            id="${W}"></div>
+        </div>
+      </div>
+      <span class="label" part="label" ref=${B}><slot></slot></span>
+      ${f(A, M, N)}
+    `;
+	},
+	styles: [
+		n,
+		r,
+		t(s),
+		p,
+		e
+	]
+});
+//#endregion
+export { T as SLIDER_TAG };
+
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import { createStableId, define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../headless';\nimport { disablableBundle, sizableBundle, SLIDER_SIZE_PRESET, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './slider.css?inline';\n\nconst guard =\n  <E extends Event = Event>(condition: () => unknown, handler: (e: E) => void): ((e: E) => void) =>\n  (e) => {\n    if (condition()) handler(e);\n  };\n\n/** Slider component properties */\n\nexport type OreSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type OreSliderProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Range mode: lower bound */\n  from?: number | string;\n  /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n  'from-value-text'?: string;\n  /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Maximum value */\n  max?: number | string;\n  /** Minimum value */\n  min?: number | string;\n  /** Single-value mode: form field name */\n  name?: string;\n  /** Activate two-thumb range selection */\n  range?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step increment */\n  step?: number | string;\n  /** Range mode: upper bound */\n  to?: number | string;\n  /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n  'to-value-text'?: string;\n  /** Single-value mode: current value */\n  value?: number | string;\n  /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n  'value-text'?: string;\n};\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element ore-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n * @attr {string}  helper - Helper text below the slider\n * @attr {string}  error  - Error message below the slider\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n * @part helper-text - The helper/error text element\n *\n * @cssprop --slider-height    - Track height\n * @cssprop --slider-size      - Thumb dimensions\n * @cssprop --slider-track-bg  - Track background color\n * @cssprop --slider-fill      - Active fill color\n * @cssprop --slider-thumb-bg  - Thumb background color\n *\n * @example\n * ```html\n * <ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n * <ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n * ```\n */\nexport const SLIDER_TAG = 'ore-slider' as const;\ndefine<OreSliderProps, OreSliderEvents>(SLIDER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    from: prop.number(0),\n    'from-value-text': prop.string(),\n    helper: prop.string(),\n    max: prop.number(100),\n    min: prop.number(0),\n    name: prop.string(),\n    range: prop.bool(false),\n    step: prop.number(1),\n    to: prop.number(100),\n    'to-value-text': prop.string(),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n  setup(props, { aria, bind, el, emit, onCleanup, onEvent, onMounted, slots }) {\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const sliderControl = createSliderControl({\n      max: props.max,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDragging = signal(false);\n    const isDisabled = fCtxProps.disabled;\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        sliderFd?.reportValidity();\n      }\n    };\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbStartEl, {\n            label: 'Range start',\n            valuemax: () => endVal.value,\n            valuemin: () => sliderControl.min(),\n            valuenow: () => startVal.value,\n            valuetext: () => props['from-value-text'].value ?? null,\n          }),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbEndEl, {\n            label: 'Range end',\n            valuemax: () => sliderControl.max(),\n            valuemin: () => startVal.value,\n            valuenow: () => endVal.value,\n            valuetext: () => props['to-value-text'].value ?? null,\n          }),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"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"}

package/dist/styles/animation.css

@@ -0,0 +1,94 @@
+@layer refine.base {
+  /* animation: spin 1s linear infinite; */
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; */
+  @keyframes ping {
+    75%,
+    100% {
+      opacity: 0;
+      transform: scale(2);
+    }
+  }
+
+  /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  /* animation: bounce 1s infinite; */
+  @keyframes bounce {
+    0% {
+      transform: translateY(0);
+      animation-timing-function: var(--ease-spring);
+    }
+
+    60% {
+      transform: translateY(-8%);
+      animation-timing-function: var(--ease-spring);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes progress-bar {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+@layer refine.utilities {
+  .animate-fade-in-up {
+    animation: fade-in-up var(--transition-normal) forwards;
+  }
+
+  .animate-scale-in {
+    animation: scale-in var(--transition-normal) var(--ease-spring) forwards;
+  }
+}

package/dist/styles/index.cjs

@@ -0,0 +1,2 @@
+const e=require("./mixins/accessibility.css.cjs"),t=require("./mixins/shape.css.cjs"),n=require("./mixins/states.css.cjs"),r=require("./mixins/theme.css.cjs"),i=require("./mixins/animation.css.cjs"),a=require("./mixins/variants.css.cjs"),o=require("./mixins/table-base.css.cjs");var s=[r.colorThemeMixin,r.elevationMixin,t.paddingMixin,t.roundedVariantMixin],c=[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin,n.disabledLoadingMixin];exports.SR_ONLY_INLINE_STYLE=e.SR_ONLY_INLINE_STYLE,exports.coarsePointerMixin=e.coarsePointerMixin,exports.colorThemeMixin=r.colorThemeMixin,exports.disabledLoadingMixin=n.disabledLoadingMixin,exports.disabledStateMixin=n.disabledStateMixin,exports.elevationMixin=r.elevationMixin,exports.fieldMixins=c,exports.forcedColorsFocusMixin=r.forcedColorsFocusMixin,exports.forcedColorsFormControlMixin=r.forcedColorsFormControlMixin,exports.forcedColorsMixin=r.forcedColorsMixin,exports.frostVariantMixin=a.frostVariantMixin,exports.rainbowEffectMixin=i.rainbowEffectMixin,exports.reducedMotionMixin=e.reducedMotionMixin,exports.roundedVariantMixin=t.roundedVariantMixin,exports.shineEffectMixin=i.shineEffectMixin,exports.sizeVariantMixin=t.sizeVariantMixin,exports.srOnlyMixin=e.srOnlyMixin,exports.surfaceMixins=s,exports.tableBaseMixin=o.tableBaseMixin;
+//# sourceMappingURL=index.cjs.map

package/dist/styles/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * Shared Mixins & Effects\n *\n * Reusable CSS mixins for common component patterns.\n */\n\nimport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\nimport { paddingMixin, roundedVariantMixin } from './mixins/shape.css';\nimport { disabledLoadingMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';\n// Effects\nexport {\n  rainbowEffectMixin,\n  registerRainbowProperty,\n  registerShineProperty,\n  shineEffectMixin,\n} from './mixins/animation.css';\n// Shape Mixins (padding, rounded, size)\nexport { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';\n// State Mixins\nexport { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';\n// Theme Mixins (color, elevation, forced-colors)\nexport {\n  colorThemeMixin,\n  elevationMixin,\n  forcedColorsFocusMixin,\n  forcedColorsFormControlMixin,\n  forcedColorsMixin,\n} from './mixins/theme.css';\n// Frost Mixin\nexport { frostVariantMixin } from './mixins/variants.css';\n// Table Base Mixin\nexport { tableBaseMixin } from './mixins/table-base.css';\n\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for elevated surface components (box, card).\n * Covers theming, elevation shadows, padding, and border radius.\n *\n * @example\n * ```ts\n * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]\n * ```\n */\nexport const surfaceMixins = [colorThemeMixin, elevationMixin, paddingMixin, roundedVariantMixin] as const;\n\n/**\n * Base mixins shared by every text input component (input, textarea, file-input).\n * Covers theming, coarse-pointer targets, reduced-motion, border radius, and\n * disabled/loading states.\n *\n * **Required additions** (component-specific arguments, so not included here):\n * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.\n * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors\n *   compliance. Pass the CSS selector for the component's focusable inner\n *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this\n *   removes the focus ring in Windows High Contrast mode.\n *\n * @example\n * ```ts\n * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const fieldMixins = [\n  colorThemeMixin,\n  coarsePointerMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  disabledLoadingMixin,\n] as const;\n"],"mappings":"uRAgDA,IAAa,EAAgB,CAAC,EAAA,gBAAiB,EAAA,eAAgB,EAAA,aAAc,EAAA,mBAAmB,EAmBnF,EAAc,CACzB,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,oBACA,EAAA,oBACF"}

package/dist/styles/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Shared Mixins & Effects
+ *
+ * Reusable CSS mixins for common component patterns.
+ */
+export { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';
+export { rainbowEffectMixin, registerRainbowProperty, registerShineProperty, shineEffectMixin, } from './mixins/animation.css';
+export { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';
+export { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';
+export { colorThemeMixin, elevationMixin, forcedColorsFocusMixin, forcedColorsFormControlMixin, forcedColorsMixin, } from './mixins/theme.css';
+export { frostVariantMixin } from './mixins/variants.css';
+export { tableBaseMixin } from './mixins/table-base.css';
+/**
+ * Base mixins for elevated surface components (box, card).
+ * Covers theming, elevation shadows, padding, and border radius.
+ *
+ * @example
+ * ```ts
+ * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]
+ * ```
+ */
+export declare const surfaceMixins: readonly [import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult];
+/**
+ * Base mixins shared by every text input component (input, textarea, file-input).
+ * Covers theming, coarse-pointer targets, reduced-motion, border radius, and
+ * disabled/loading states.
+ *
+ * **Required additions** (component-specific arguments, so not included here):
+ * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.
+ * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors
+ *   compliance. Pass the CSS selector for the component's focusable inner
+ *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this
+ *   removes the focus ring in Windows High Contrast mode.
+ *
+ * @example
+ * ```ts
+ * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]
+ * ```
+ */
+export declare const fieldMixins: readonly [import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult];
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAElG,OAAO,EACL,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,uJAAgF,CAAC;AAE3G;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,0LAMd,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,24 @@
+import { SR_ONLY_INLINE_STYLE as e, coarsePointerMixin as t, reducedMotionMixin as n, srOnlyMixin as r } from "./mixins/accessibility.css.js";
+import { paddingMixin as i, roundedVariantMixin as a, sizeVariantMixin as o } from "./mixins/shape.css.js";
+import { disabledLoadingMixin as s, disabledStateMixin as c } from "./mixins/states.css.js";
+import { colorThemeMixin as l, elevationMixin as u, forcedColorsFocusMixin as d, forcedColorsFormControlMixin as f, forcedColorsMixin as p } from "./mixins/theme.css.js";
+import { rainbowEffectMixin as m, shineEffectMixin as h } from "./mixins/animation.css.js";
+import { frostVariantMixin as g } from "./mixins/variants.css.js";
+import { tableBaseMixin as _ } from "./mixins/table-base.css.js";
+//#region src/styles/index.ts
+var v = [
+	l,
+	u,
+	i,
+	a
+], y = [
+	l,
+	t,
+	n,
+	a,
+	s
+];
+//#endregion
+export { e as SR_ONLY_INLINE_STYLE, t as coarsePointerMixin, l as colorThemeMixin, s as disabledLoadingMixin, c as disabledStateMixin, u as elevationMixin, y as fieldMixins, d as forcedColorsFocusMixin, f as forcedColorsFormControlMixin, p as forcedColorsMixin, g as frostVariantMixin, m as rainbowEffectMixin, n as reducedMotionMixin, a as roundedVariantMixin, h as shineEffectMixin, o as sizeVariantMixin, r as srOnlyMixin, v as surfaceMixins, _ as tableBaseMixin };
+
+//# sourceMappingURL=index.js.map