@vielzeug/refine 2.1.2 → 2.2.3

package/dist/marquee.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.cjs","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"marquee.cjs","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => {\n          clone.remove();\n        });\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/marquee.js

@@ -25,7 +25,9 @@ t(s, {
 		}, { immediate: !0 }), i(() => {
 			f = t.shadowRoot?.querySelector(".track") ?? null;
 			let e = t.shadowRoot?.querySelector("slot") ?? null, n = () => {
-				s.forEach((e) => e.remove()), s = [];
+				s.forEach((e) => {
+					e.remove();
+				}), s = [];
 			}, r = () => {
 				s.push(...c.map((e) => {
 					let n = e.cloneNode(!0);

package/dist/marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.js","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"marquee.js","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => {\n          clone.remove();\n        });\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/refine.cjs

@@ -946,7 +946,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
             `:l.html`
               <span part="button" role="presentation" @click="${f}">${p}</span>
             `}
-    `},shadow:{delegatesFocus:!1},styles:[q,V,H,U,J,K({lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,height:`var(--size-12)`,iconSize:`var(--size-6)`,lineHeight:`var(--leading-relaxed)`,padding:`var(--size-2-5) var(--size-5)`},sm:{fontSize:`var(--text-sm)`,gap:`var(--size-1-5)`,height:`var(--size-8)`,iconSize:`var(--size-4)`,lineHeight:`var(--leading-tight)`,padding:`var(--size-1-5) var(--size-3)`}}),Ce(`[part="button"]`),de(`[part="button"]`),fe(`[part="button"]`),ge,An]});var Nn=`@layer refine.base{:host{--_bg:var(--color-canvas);--_radius:var(--rounded-xl);background:var(--_bg);border-radius:var(--_radius);width:100%;min-height:240px;display:block;position:relative;overflow:hidden}.track{gap:var(--marquee-gap,var(--size-4));width:max-content;animation:marquee-scroll var(--_marquee-duration,20s) linear infinite;will-change:transform;flex-direction:row;align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.track:not(: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))){left:0}.track: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)){right:0}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(: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))){right:var(--size-3)}:host>.controls: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)){left:var(--size-3)}.nav-btn{pointer-events:auto}:host([direction=right]) .track{animation-direction:reverse}:host([pause-on-hover]:hover) .track{animation-play-state:paused}::slotted(*){flex:none;height:100%;position:relative}::slotted([data-marquee-clone]){pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translateX(var(--_marquee-translate,-50%))}}}@media (prefers-reduced-motion:reduce){.track{animation:none}}`,Pn=`ore-marquee`;(0,l.define)(Pn,{props:{color:l.prop.string(),direction:l.prop.string(`left`),duration:l.prop.number(20),"pause-on-hover":l.prop.bool(!1),"show-controls":l.prop.bool(!0)},setup(e){let t=(0,l.getHost)(),n=0,r=[],i=[],a=null,o=0,s=null,c=null,d=t=>{if(!c||i.length===0)return;n=(t+i.length)%i.length;let r=i[n];if(!r||o===0)return;let a=e.duration.value??20,s=-(r.offsetLeft/o*a);c.style.setProperty(`animation-delay`,`${s}s`)};return(0,u.watch)(e.duration,e=>{t.style.setProperty(`--_marquee-duration`,`${e??20}s`)},{immediate:!0}),(0,l.onMounted)(()=>{c=t.shadowRoot?.querySelector(`.track`)??null;let e=t.shadowRoot?.querySelector(`slot`)??null,l=()=>{r.forEach(e=>e.remove()),r=[]},u=()=>{r.push(...i.map(e=>{let n=e.cloneNode(!0);return n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`data-marquee-clone`,``),n.setAttribute(`inert`,``),t.appendChild(n),n}))},d=()=>{if(!c||i.length===0)return;let e=c;a!==null&&cancelAnimationFrame(a),l(),o=0,e.style.removeProperty(`--_marquee-translate`),u(),a=requestAnimationFrame(()=>{a=null;let n=r[0],s=i[0];if(!n||!s||(o=n.offsetLeft-s.offsetLeft,o<=0))return;let c=Math.max(2,Math.ceil((t.clientWidth+o)/o));for(let e=2;e<c;e+=1)u();e.style.setProperty(`--_marquee-translate`,`-${o}px`)})},f=()=>{let t=(e?.assignedElements()??[]).filter(e=>e instanceof HTMLElement&&!e.hasAttribute(`data-marquee-clone`));(t.length!==i.length||t.some((e,t)=>e!==i[t]))&&(i=t,n=Math.min(n,Math.max(i.length-1,0)),d())};return s=typeof ResizeObserver>`u`?null:new ResizeObserver(d),s?.observe(t),e?.addEventListener(`slotchange`,f),f(),()=>{a!==null&&cancelAnimationFrame(a),s?.disconnect(),e?.removeEventListener(`slotchange`,f),l(),c=null,i=[],o=0}}),l.html`
+    `},shadow:{delegatesFocus:!1},styles:[q,V,H,U,J,K({lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,height:`var(--size-12)`,iconSize:`var(--size-6)`,lineHeight:`var(--leading-relaxed)`,padding:`var(--size-2-5) var(--size-5)`},sm:{fontSize:`var(--text-sm)`,gap:`var(--size-1-5)`,height:`var(--size-8)`,iconSize:`var(--size-4)`,lineHeight:`var(--leading-tight)`,padding:`var(--size-1-5) var(--size-3)`}}),Ce(`[part="button"]`),de(`[part="button"]`),fe(`[part="button"]`),ge,An]});var Nn=`@layer refine.base{:host{--_bg:var(--color-canvas);--_radius:var(--rounded-xl);background:var(--_bg);border-radius:var(--_radius);width:100%;min-height:240px;display:block;position:relative;overflow:hidden}.track{gap:var(--marquee-gap,var(--size-4));width:max-content;animation:marquee-scroll var(--_marquee-duration,20s) linear infinite;will-change:transform;flex-direction:row;align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.track:not(: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))){left:0}.track: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)){right:0}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(: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))){right:var(--size-3)}:host>.controls: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)){left:var(--size-3)}.nav-btn{pointer-events:auto}:host([direction=right]) .track{animation-direction:reverse}:host([pause-on-hover]:hover) .track{animation-play-state:paused}::slotted(*){flex:none;height:100%;position:relative}::slotted([data-marquee-clone]){pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translateX(var(--_marquee-translate,-50%))}}}@media (prefers-reduced-motion:reduce){.track{animation:none}}`,Pn=`ore-marquee`;(0,l.define)(Pn,{props:{color:l.prop.string(),direction:l.prop.string(`left`),duration:l.prop.number(20),"pause-on-hover":l.prop.bool(!1),"show-controls":l.prop.bool(!0)},setup(e){let t=(0,l.getHost)(),n=0,r=[],i=[],a=null,o=0,s=null,c=null,d=t=>{if(!c||i.length===0)return;n=(t+i.length)%i.length;let r=i[n];if(!r||o===0)return;let a=e.duration.value??20,s=-(r.offsetLeft/o*a);c.style.setProperty(`animation-delay`,`${s}s`)};return(0,u.watch)(e.duration,e=>{t.style.setProperty(`--_marquee-duration`,`${e??20}s`)},{immediate:!0}),(0,l.onMounted)(()=>{c=t.shadowRoot?.querySelector(`.track`)??null;let e=t.shadowRoot?.querySelector(`slot`)??null,l=()=>{r.forEach(e=>{e.remove()}),r=[]},u=()=>{r.push(...i.map(e=>{let n=e.cloneNode(!0);return n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`data-marquee-clone`,``),n.setAttribute(`inert`,``),t.appendChild(n),n}))},d=()=>{if(!c||i.length===0)return;let e=c;a!==null&&cancelAnimationFrame(a),l(),o=0,e.style.removeProperty(`--_marquee-translate`),u(),a=requestAnimationFrame(()=>{a=null;let n=r[0],s=i[0];if(!n||!s||(o=n.offsetLeft-s.offsetLeft,o<=0))return;let c=Math.max(2,Math.ceil((t.clientWidth+o)/o));for(let e=2;e<c;e+=1)u();e.style.setProperty(`--_marquee-translate`,`-${o}px`)})},f=()=>{let t=(e?.assignedElements()??[]).filter(e=>e instanceof HTMLElement&&!e.hasAttribute(`data-marquee-clone`));(t.length!==i.length||t.some((e,t)=>e!==i[t]))&&(i=t,n=Math.min(n,Math.max(i.length-1,0)),d())};return s=typeof ResizeObserver>`u`?null:new ResizeObserver(d),s?.observe(t),e?.addEventListener(`slotchange`,f),f(),()=>{a!==null&&cancelAnimationFrame(a),s?.disconnect(),e?.removeEventListener(`slotchange`,f),l(),c=null,i=[],o=0}}),l.html`
       <div class="track" part="track" aria-live="off">
         <slot></slot>
       </div>
@@ -1360,7 +1360,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
       ${()=>e[`show-label`].value?l.html`
               <span class="level-label" aria-live="polite" aria-atomic="true">${()=>o.value}</span>
             `:``}
-    `},styles:[H,Cr]});var Tr=`@layer refine.base{:host{--_bg:var(--skeleton-bg,var(--color-contrast-200));--_highlight:var(--skeleton-highlight,var(--color-contrast-100));--_radius:var(--skeleton-radius,var(--rounded-lg));--_circle-size:var(--skeleton-size,var(--size-10));--_width:var(--skeleton-width,100%);--_height:var(--skeleton-height,var(--size-4));--_line-gap:var(--skeleton-line-gap,var(--size-2));--_last-line-width:var(--skeleton-last-line-width,60%);--_duration:var(--skeleton-duration,1.6s);--_stripe-size:var(--skeleton-stripe-size,8px);width:var(--_width);height:var(--_height);display:inline-block}.stack{gap:var(--_line-gap);width:100%;height:100%;display:grid}.bone{background:var(--_bg);border-radius:var(--_radius);width:100%;height:100%;position:relative;overflow:hidden}.bone:after{content:"";background:linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);animation:var(--_motion-animation,ore-skeleton-shimmer var(--_duration) linear infinite);position:absolute;inset:0;transform:translate(-100%)}:host([data-animated=false]) .bone:after{display:none}:host([data-paused]) .bone:after{animation-play-state:paused}@keyframes ore-skeleton-shimmer{to{transform:translate(100%)}}:host(:dir(rtl)) .bone:after{animation-direction:reverse}}@layer refine.variants{:host([variant=circle]){--_radius:var(--rounded-full);width:var(--skeleton-width,var(--_circle-size));height:var(--skeleton-height,var(--_circle-size));aspect-ratio:1}:host([variant=text]){--_height:var(--size-3);--_radius:var(--rounded-sm);height:auto}:host([variant=text]) .stack{height:auto}:host([variant=text]) .bone{height:var(--_height)}:host([variant=text]) .bone[data-last=true]{width:var(--_last-line-width)}}@layer refine.striped{:host([striped]) .stack{width:99%}:host([striped]) .bone{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-400));border:var(--border) dashed var(--_stripe-color);background-color:#0000}:host([striped]) .bone:before{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-300));content:"";background-color:var(--_stripe-color);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);mask-size:var(--_stripe-size) var(--_stripe-size);position:absolute;inset:0}:host([striped]) .bone:after{display:none}}@layer refine.utilities{:host([size=sm]){--_height:var(--size-3);--_circle-size:var(--size-8)}:host([size=md]){--_height:var(--size-4);--_circle-size:var(--size-10)}:host([size=lg]){--_height:var(--size-6);--_circle-size:var(--size-14)}}@media (forced-colors:active){.bone{background:buttonface;border:1px solid buttontext}.bone:after{display:none}}`,Er=`ore-skeleton`;(0,l.define)(Er,{props:{...M,animated:l.prop.bool(!0),height:l.prop.string(),lines:l.prop.number(1),radius:l.prop.string(),striped:l.prop.bool(!1),variant:l.prop.oneOf([`rect`,`circle`,`text`],`rect`),width:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,u.signal)(!1),r=()=>{let t=Math.floor(Number(e.lines.value));return Number.isFinite(t)&&t>0?t:1},i=()=>e.variant.value===`text`?r():1;return(0,u.watch)((0,u.computed)(()=>`${e.width.value??``}|${e.height.value??``}|${e.radius.value??``}|${e.animated.value===!1?`0`:`1`}`),()=>{let n=vn(e.width.value),r=vn(e.height.value),i=vn(e.radius.value);n?t.style.setProperty(`--skeleton-width`,n):t.style.removeProperty(`--skeleton-width`),r?t.style.setProperty(`--skeleton-height`,r):t.style.removeProperty(`--skeleton-height`),i?t.style.setProperty(`--skeleton-radius`,i):t.style.removeProperty(`--skeleton-radius`);let a=t.getAttribute(`animated`)!==`false`&&e.animated.value!==!1;t.setAttribute(`data-animated`,a?`true`:`false`)},{immediate:!0}),(0,l.bind)({attr:{"data-paused":()=>n.value?!0:void 0}}),(0,l.onMounted)(()=>{let e=(0,l.intersectionObserver)(t,{threshold:0});(0,u.watch)(e,e=>{let t=typeof e==`object`&&e&&`isIntersecting`in e?!e.isIntersecting:!1;n.value=t})}),l.html`
+    `},styles:[H,Cr]});var Tr=`@layer refine.base{:host{--_bg:var(--skeleton-bg,var(--color-contrast-200));--_highlight:var(--skeleton-highlight,var(--color-contrast-100));--_radius:var(--skeleton-radius,var(--rounded-lg));--_circle-size:var(--skeleton-size,var(--size-10));--_width:var(--skeleton-width,100%);--_height:var(--skeleton-height,var(--size-4));--_line-gap:var(--skeleton-line-gap,var(--size-2));--_last-line-width:var(--skeleton-last-line-width,60%);--_duration:var(--skeleton-duration,1.6s);--_stripe-size:var(--skeleton-stripe-size,8px);width:var(--_width);height:var(--_height);display:inline-block}.stack{gap:var(--_line-gap);width:100%;height:100%;display:grid}.bone{background:var(--_bg);border-radius:var(--_radius);width:100%;height:100%;position:relative;overflow:hidden}.bone:after{content:"";background:linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);animation:var(--_motion-animation,ore-skeleton-shimmer var(--_duration) linear infinite);position:absolute;inset:0;transform:translate(-100%)}:host([data-animated=false]) .bone:after{display:none}:host([data-paused]) .bone:after{animation-play-state:paused}@keyframes ore-skeleton-shimmer{to{transform:translate(100%)}}:host(:dir(rtl)) .bone:after{animation-direction:reverse}}@layer refine.variants{:host([variant=circle]){--_radius:var(--rounded-full);width:var(--skeleton-width,var(--_circle-size));height:var(--skeleton-height,var(--_circle-size));aspect-ratio:1}:host([variant=text]){--_height:var(--size-3);--_radius:var(--rounded-sm);height:auto}:host([variant=text]) .stack{height:auto}:host([variant=text]) .bone{height:var(--_height)}:host([variant=text]) .bone[data-last=true]{width:var(--_last-line-width)}}@layer refine.striped{:host([striped]) .stack{width:calc(100% - 2px)}:host([striped]) .bone{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-400));border:var(--border) dashed var(--_stripe-color);background-color:#0000}:host([striped]) .bone:before{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-300));content:"";background-color:var(--_stripe-color);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);mask-size:var(--_stripe-size) var(--_stripe-size);position:absolute;inset:0}:host([striped]) .bone:after{display:none}}@layer refine.utilities{:host([size=sm]){--_height:var(--size-3);--_circle-size:var(--size-8)}:host([size=md]){--_height:var(--size-4);--_circle-size:var(--size-10)}:host([size=lg]){--_height:var(--size-6);--_circle-size:var(--size-14)}}@media (forced-colors:active){.bone{background:buttonface;border:1px solid buttontext}.bone:after{display:none}}`,Er=`ore-skeleton`;(0,l.define)(Er,{props:{...M,animated:l.prop.bool(!0),height:l.prop.string(),lines:l.prop.number(1),radius:l.prop.string(),striped:l.prop.bool(!1),variant:l.prop.oneOf([`rect`,`circle`,`text`],`rect`),width:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,u.signal)(!1),r=()=>{let t=Math.floor(Number(e.lines.value));return Number.isFinite(t)&&t>0?t:1},i=()=>e.variant.value===`text`?r():1;return(0,u.watch)((0,u.computed)(()=>`${e.width.value??``}|${e.height.value??``}|${e.radius.value??``}|${e.animated.value===!1?`0`:`1`}`),()=>{let n=vn(e.width.value),r=vn(e.height.value),i=vn(e.radius.value);n?t.style.setProperty(`--skeleton-width`,n):t.style.removeProperty(`--skeleton-width`),r?t.style.setProperty(`--skeleton-height`,r):t.style.removeProperty(`--skeleton-height`),i?t.style.setProperty(`--skeleton-radius`,i):t.style.removeProperty(`--skeleton-radius`);let a=t.getAttribute(`animated`)!==`false`&&e.animated.value!==!1;t.setAttribute(`data-animated`,a?`true`:`false`)},{immediate:!0}),(0,l.bind)({attr:{"data-paused":()=>n.value?!0:void 0}}),(0,l.onMounted)(()=>{let e=(0,l.intersectionObserver)(t,{threshold:0});(0,u.watch)(e,e=>{let t=typeof e==`object`&&e&&`isIntersecting`in e?!e.isIntersecting:!1;n.value=t})}),l.html`
       <div class="stack" part="stack">
         ${()=>Array.from({length:i()},(t,n)=>{let r=e.variant.value===`text`&&i()>1&&n===i()-1;return l.html`
               <div class="bone" part="bone" aria-hidden="true" data-last="${()=>r?`true`:null}"></div>
@@ -1615,7 +1615,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
       </div>
       <span class="label" part="label" id="${m}"><slot></slot></span>
       ${En(i,s,f)}
-    `},styles:[q,Se,he,V,K(R),Xr]});function Qr(e){return e.filter(e=>e.localName===`ore-combobox-option`).map(e=>({disabled:e.hasAttribute(`disabled`),iconEl:e.querySelector(`[slot="icon"]`),label:e.getAttribute(`label`)||[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent?.trim()).filter(Boolean).join(` `)||``,value:e.getAttribute(`value`)??``}))}function $r(e,t,n){if(n)return e;let r=t.toLowerCase().trim();return r?e.filter(e=>e.label.toLowerCase().includes(r)||e.value.toLowerCase().includes(r)):e}function ei(e,t,n){if(!t)return``;let r=e.trim();return r?n.some(e=>e.label.toLowerCase()===r.toLowerCase())?``:`Create "${r}"`:``}function ti(e){return`__new__:${e.trim()}`}var ni=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(: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))){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label: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)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter:not(: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))){text-align:right}.char-counter: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)){text-align:left}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=""])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner:not(: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-color:#0000}.field-spinner: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}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`,ri=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],ii=`ore-input`;(0,l.define)(ii,{formAssociated:!0,props:{...j,...M,...N,...F,autocomplete:l.prop.string(),clearable:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),inputmode:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),maxlength:l.prop.json(void 0),minlength:l.prop.json(void 0),name:l.prop.string(),pattern:l.prop.string(),placeholder:l.prop.string(),readonly:l.prop.bool(!1),ref:l.prop.data(),required:l.prop.bool(!1),success:l.prop.bool(!1),type:l.prop.oneOf(ri,`text`),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useSlots)(),r=(0,u.signal)(!1),i=(0,l.ref)(),a=(0,u.computed)(()=>!!e.label.value||n.has(`label`).value),o=(0,u.computed)(()=>e.disabled.value||e.loading.value),s=Y(l.onCleanup),c=Dt({disabled:o,error:e.error,hasLabel:a,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],maxLength:e.maxlength,onChange:(e,n)=>{$(t,n),Q(t,`change`)},onInput:(e,n)=>{$(t,n),Q(t,`input`)},prefix:`input`,readonly:e.readonly,required:e.required,signal:s,value:e.value});Z(t,()=>c.value.value,e=>{c.value.value=e}),c.attachFormField((0,l.useField)({disabled:c.disabled,onReset:c.reset,toFormValue:e=>e,validationMessage:c.validationMessage,validity:c.validity,value:c.value}));let{ariaDescribedBy:d,ariaErrorMessage:f,ariaInvalid:p,ariaLabelledBy:m,assistiveId:h,clear:g,counter:_,errorId:v,errorText:y,fieldId:b,helperText:x,labelId:S,labelVisible:C,value:w,wire:T}=c;return(0,l.onElement)(i,t=>{T(t,s);let n=gt(e.ref,t);return()=>{n()}}),(0,l.bind)({attr:{error:wn(y),"has-value":()=>w.value?!0:void 0,size:e.size,success:()=>e.success.value&&!y.value?!0:void 0,variant:e.variant}}),l.html`
+    `},styles:[q,Se,he,V,K(R),Xr]});function Qr(e){return e.filter(e=>e.localName===`ore-combobox-option`).map(e=>({disabled:e.hasAttribute(`disabled`),iconEl:e.querySelector(`[slot="icon"]`),label:e.getAttribute(`label`)||[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent?.trim()).filter(Boolean).join(` `)||``,value:e.getAttribute(`value`)??``}))}function $r(e,t,n){if(n)return e;let r=t.toLowerCase().trim();return r?e.filter(e=>e.label.toLowerCase().includes(r)||e.value.toLowerCase().includes(r)):e}function ei(e,t,n){if(!t)return``;let r=e.trim();return r?n.some(e=>e.label.toLowerCase()===r.toLowerCase())?``:`Create "${r}"`:``}function ti(e){return`__new__:${e.trim()}`}var ni=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_label-block-inset:var(--input-label-block-inset,var(--size-2));--_label-inset:var(--input-label-inset,var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--_label-block-inset);position:absolute}:host(:not([label-placement=outside])) .label:not(: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))){left:var(--_label-inset)}:host(:not([label-placement=outside])) .label: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)){right:var(--_label-inset)}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--_label-block-inset) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter:not(: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))){text-align:right}.char-counter: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)){text-align:left}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=""])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner:not(: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-color:#0000}.field-spinner: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}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{box-shadow:none;background:0 0;border:none;border-radius:0}:host([variant=text]) .field:focus-within{box-shadow:none}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`,ri=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],ii=`ore-input`;(0,l.define)(ii,{formAssociated:!0,props:{...j,...M,...N,...F,autocomplete:l.prop.string(),clearable:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),inputmode:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),maxlength:l.prop.json(void 0),minlength:l.prop.json(void 0),name:l.prop.string(),pattern:l.prop.string(),placeholder:l.prop.string(),readonly:l.prop.bool(!1),ref:l.prop.data(),required:l.prop.bool(!1),success:l.prop.bool(!1),type:l.prop.oneOf(ri,`text`),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useSlots)(),r=(0,u.signal)(!1),i=(0,l.ref)(),a=(0,u.computed)(()=>!!e.label.value||n.has(`label`).value),o=(0,u.computed)(()=>e.disabled.value||e.loading.value),s=Y(l.onCleanup),c=Dt({disabled:o,error:e.error,hasLabel:a,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],maxLength:e.maxlength,onChange:(e,n)=>{$(t,n),Q(t,`change`)},onInput:(e,n)=>{$(t,n),Q(t,`input`)},prefix:`input`,readonly:e.readonly,required:e.required,signal:s,value:e.value});Z(t,()=>c.value.value,e=>{c.value.value=e}),c.attachFormField((0,l.useField)({disabled:c.disabled,onReset:c.reset,toFormValue:e=>e,validationMessage:c.validationMessage,validity:c.validity,value:c.value}));let{ariaDescribedBy:d,ariaErrorMessage:f,ariaInvalid:p,ariaLabelledBy:m,assistiveId:h,clear:g,counter:_,errorId:v,errorText:y,fieldId:b,helperText:x,labelId:S,labelVisible:C,value:w,wire:T}=c;return(0,l.onElement)(i,t=>{T(t,s);let n=gt(e.ref,t);return()=>{n()}}),(0,l.bind)({attr:{error:wn(y),"has-value":()=>w.value?!0:void 0,size:e.size,success:()=>e.success.value&&!y.value?!0:void 0,variant:e.variant}}),l.html`
       <div class="input-wrapper" part="wrapper">
         <label class="label" for="${b}" id="${S}" part="label" ?hidden="${()=>!C.value}">
           <slot name="label">${e.label}</slot>