@vielzeug/refine 2.0.3 → 2.1.2

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAO,EAAK,QAAQ,CAA+B,GACjG,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,CAAC,EAAM,YAAY,SAAS,EAAM,SAAS,SAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAkB,OAAO;EACzB;EACA;CACF;AACF,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAK,EAAK,QAAQ,CAA+B,GAC/F,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,CAAC,EAAM,YAAY,SAAS,EAAM,SAAS,SAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAkB,OAAO;EACzB;EACA;CACF;AACF,CAAC"}

package/dist/carousel.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/swipe.cjs"),t=require("./core/announcer.cjs"),n=require("./content/carousel/carousel.css.cjs"),r=require("./content/carousel/carousel-slide.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("@vielzeug/ripple/watch");var s=`ore-carousel`,c=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.toggleAttribute(`data-before`,r<t),e.toggleAttribute(`data-after`,r>t)})},l=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`)})},u=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t,a=t>0&&r===t-1,o=t<n-1&&r===t+1;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`),e.toggleAttribute(`data-gallery-visible`,i||a||o)})};(0,i.define)(s,{props:{autoplay:i.prop.bool(!1),"autoplay-interval":i.prop.number(5e3),color:i.prop.string(),label:i.prop.string(`Carousel`),loop:i.prop.bool(!0),orientation:i.prop.string(`horizontal`),"show-controls":i.prop.bool(!0),"show-indicators":i.prop.bool(!0),"slide-index":i.prop.number(0),variant:i.prop.string(`default`)},setup(n){let r=(0,i.getHost)(),s=(0,i.useEmit)(),d=(0,a.signal)(n[`slide-index`].value??0),f=null,p=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),m=(0,a.signal)(p.length),h=()=>{p=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),m.value=p.length},g=(0,a.computed)(()=>n.orientation.value!==`vertical`),_=(0,a.computed)(()=>n.loop.value!==!1),v=(0,a.computed)(()=>n[`show-controls`].value!==!1),y=(0,a.computed)(()=>n[`show-indicators`].value!==!1),b=(0,a.computed)(()=>_.value||d.value>0),x=(0,a.computed)(()=>_.value||d.value<m.value-1),S=(e,n=!0)=>{let i=m.value;if(i===0)return;let a=_.value?(e%i+i)%i:Math.max(0,Math.min(e,i-1));a!==d.value&&(d.value=a,r.setAttribute(`slide-index`,String(a)),s(`change`,{index:a}),n&&t.announce(p[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${i}`))},C=()=>S(d.value-1),w=()=>S(d.value+1);(0,o.watch)(n[`slide-index`],e=>{typeof e==`number`&&e!==d.value&&S(e,!1)});let T=()=>{let e=n.variant.value??`default`,t=n.orientation.value??`horizontal`;p.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,a.computed)(()=>({orientation:n.orientation.value,variant:n.variant.value})),T,{immediate:!0});let E={default:c,fade:c,filmstrip:l,gallery:u},D=()=>{let e=n.variant.value??`default`;E[e](p,d.value)};(0,o.watch)(d,D,{immediate:!0});let O=()=>{f===null&&(f=setInterval(w,n[`autoplay-interval`].value??5e3))},k=()=>{f!==null&&(clearInterval(f),f=null)};(0,o.watch)((0,a.computed)(()=>({enabled:n.autoplay.value,interval:n[`autoplay-interval`].value})),({enabled:e})=>{k(),e&&O()});let A=e=>{let t=g.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),C()):e.key===r?(e.preventDefault(),w()):e.key===`Home`?(e.preventDefault(),S(0)):e.key===`End`&&(e.preventDefault(),S(m.value-1))},j=e.createSwipeControl({axis:()=>g.value?`x`:`y`,onCommit:e=>{e.distance<0?w():C()},threshold:()=>48});(0,i.bind)({attr:{"aria-label":()=>n.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>n.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${g.value?`pan-y`:`pan-x`}`,variant:()=>n.variant.value??`default`},on:{focusin:()=>{k()},focusout:()=>{n.autoplay.value&&O()},keydown:A,pointercancel:e=>j.handlePointerCancel(e),pointerdown:e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))||j.handlePointerDown(e)},pointerenter:()=>{k()},pointerleave:()=>{n.autoplay.value&&O()},pointermove:e=>j.handlePointerMove(e),pointerup:e=>j.handlePointerUp(e)}}),(0,i.onMounted)(()=>{let e=r.shadowRoot.querySelector(`slot`),t=()=>{h(),T(),D()};return e.addEventListener(`slotchange`,t),n.autoplay.value&&O(),()=>{k(),j.dispose(),e.removeEventListener(`slotchange`,t)}});let M=e=>{(r.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},N=(e,t)=>{let n=m.value,r;switch(e.key){case`ArrowDown`:case`ArrowRight`:r=(t+1)%n;break;case`ArrowLeft`:case`ArrowUp`:r=(t-1+n)%n;break;case`End`:r=n-1;break;case`Home`:r=0;break;default:return}e.preventDefault(),S(r),M(r)},P=()=>v.value?i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/announcer.cjs"),t=require("./core/swipe.cjs"),n=require("./content/carousel/carousel.css.cjs"),r=require("./content/carousel/carousel-slide.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple");var o=`ore-carousel`,s=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.toggleAttribute(`data-before`,r<t),e.toggleAttribute(`data-after`,r>t)})},c=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`)})},l=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t,a=t>0&&r===t-1,o=t<n-1&&r===t+1;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`),e.toggleAttribute(`data-gallery-visible`,i||a||o)})};(0,i.define)(o,{props:{autoplay:i.prop.bool(!1),"autoplay-interval":i.prop.number(5e3),color:i.prop.string(),label:i.prop.string(`Carousel`),loop:i.prop.bool(!0),orientation:i.prop.string(`horizontal`),"show-controls":i.prop.bool(!0),"show-indicators":i.prop.bool(!0),"slide-index":i.prop.number(0),variant:i.prop.string(`default`)},setup(n){let r=(0,i.getHost)(),o=(0,i.useEmit)(),u=(0,a.signal)(n[`slide-index`].value??0),d=null,f=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),p=(0,a.signal)(f.length),m=()=>{f=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),p.value=f.length},h=(0,a.computed)(()=>n.orientation.value!==`vertical`),g=(0,a.computed)(()=>n.loop.value!==!1),_=(0,a.computed)(()=>n[`show-controls`].value!==!1),v=(0,a.computed)(()=>n[`show-indicators`].value!==!1),y=(0,a.computed)(()=>g.value||u.value>0),b=(0,a.computed)(()=>g.value||u.value<p.value-1),x=(t,n=!0)=>{let i=p.value;if(i===0)return;let a=g.value?(t%i+i)%i:Math.max(0,Math.min(t,i-1));a!==u.value&&(u.value=a,r.setAttribute(`slide-index`,String(a)),o(`change`,{index:a}),n&&e.announce(f[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${i}`))},S=()=>x(u.value-1),C=()=>x(u.value+1);(0,a.watch)(n[`slide-index`],e=>{typeof e==`number`&&e!==u.value&&x(e,!1)});let w=()=>{let e=n.variant.value??`default`,t=n.orientation.value??`horizontal`;f.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,a.watch)((0,a.computed)(()=>({orientation:n.orientation.value,variant:n.variant.value})),w,{immediate:!0});let T={default:s,fade:s,filmstrip:c,gallery:l},E=()=>{let e=n.variant.value??`default`;T[e](f,u.value)};(0,a.watch)(u,E,{immediate:!0});let D=()=>{d===null&&(d=setInterval(C,n[`autoplay-interval`].value??5e3))},O=()=>{d!==null&&(clearInterval(d),d=null)};(0,a.watch)((0,a.computed)(()=>({enabled:n.autoplay.value,interval:n[`autoplay-interval`].value})),({enabled:e})=>{O(),e&&D()});let k=e=>{let t=h.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),S()):e.key===r?(e.preventDefault(),C()):e.key===`Home`?(e.preventDefault(),x(0)):e.key===`End`&&(e.preventDefault(),x(p.value-1))},A=t.createSwipeControl({axis:()=>h.value?`x`:`y`,onCommit:e=>{e.distance<0?C():S()},threshold:()=>48});(0,i.bind)({attr:{"aria-label":()=>n.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>n.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${h.value?`pan-y`:`pan-x`}`,variant:()=>n.variant.value??`default`},on:{focusin:()=>{O()},focusout:()=>{n.autoplay.value&&D()},keydown:k,pointercancel:e=>A.handlePointerCancel(e),pointerdown:e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))||A.handlePointerDown(e)},pointerenter:()=>{O()},pointerleave:()=>{n.autoplay.value&&D()},pointermove:e=>A.handlePointerMove(e),pointerup:e=>A.handlePointerUp(e)}}),(0,i.onMounted)(()=>{let e=r.shadowRoot.querySelector(`slot`),t=()=>{m(),w(),E()};return e.addEventListener(`slotchange`,t),n.autoplay.value&&D(),()=>{O(),A.dispose(),e.removeEventListener(`slotchange`,t)}});let j=e=>{(r.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},M=(e,t)=>{let n=p.value,r;switch(e.key){case`ArrowDown`:case`ArrowRight`:r=(t+1)%n;break;case`ArrowLeft`:case`ArrowUp`:r=(t-1+n)%n;break;case`End`:r=n-1;break;case`Home`:r=0;break;default:return}e.preventDefault(),x(r),j(r)},N=()=>_.value?i.html`
             <div class="controls" part="controls">
               <ore-button
                 class="nav-btn prev-btn"
@@ -8,10 +8,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 rounded
                 icon-only
                 aria-label="Previous slide"
-                disabled=${()=>!b.value||void 0}
-                @click=${e=>{e.stopPropagation(),C()}}>
+                disabled=${()=>!y.value||void 0}
+                @click=${e=>{e.stopPropagation(),S()}}>
                 <ore-icon
-                  name=${()=>g.value?`chevron-left`:`chevron-up`}
+                  name=${()=>h.value?`chevron-left`:`chevron-up`}
                   size="16"
                   stroke-width="2"
                   aria-hidden="true"></ore-icon>
@@ -24,10 +24,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 rounded
                 icon-only
                 aria-label="Next slide"
-                disabled=${()=>!x.value||void 0}
-                @click=${e=>{e.stopPropagation(),w()}}>
+                disabled=${()=>!b.value||void 0}
+                @click=${e=>{e.stopPropagation(),C()}}>
                 <ore-icon
-                  name=${()=>g.value?`chevron-right`:`chevron-down`}
+                  name=${()=>h.value?`chevron-right`:`chevron-down`}
                   size="16"
                   stroke-width="2"
                   aria-hidden="true"></ore-icon>
@@ -38,32 +38,32 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <slot></slot>
       </div>
 
-      ${()=>y.value&&m.value>1?i.html`
+      ${()=>v.value&&p.value>1?i.html`
               <div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
-                ${()=>Array.from({length:m.value},(e,t)=>i.html`
+                ${()=>Array.from({length:p.value},(e,t)=>i.html`
                       <button
                         type="button"
                         role="tab"
                         data-index="${t}"
-                        class=${()=>`indicator${t===d.value?` indicator-active`:``}`}
-                        aria-selected=${()=>String(t===d.value)}
-                        tabindex=${()=>t===d.value?`0`:`-1`}
+                        class=${()=>`indicator${t===u.value?` indicator-active`:``}`}
+                        aria-selected=${()=>String(t===u.value)}
+                        tabindex=${()=>t===u.value?`0`:`-1`}
                         aria-label="${`Go to slide ${t+1}`}"
-                        @click=${()=>S(t)}
-                        @keydown=${e=>N(e,t)}>
+                        @click=${()=>x(t)}
+                        @keydown=${e=>M(e,t)}>
                         <ore-progress
                           aria-hidden="true"
                           tabindex="-1"
                           color=${()=>n.color.value}
-                          type=${()=>g.value?`linear`:`vertical`}
-                          value=${()=>t===d.value?100:0}
-                          style=${()=>{let e=g.value?`carousel-fill`:`carousel-fill-v`;return`--carousel-timeout:${n[`autoplay-interval`].value??5e3};--carousel-animation-name:${t===d.value&&n.autoplay.value?e:`none`}`}}></ore-progress>
+                          type=${()=>h.value?`linear`:`vertical`}
+                          value=${()=>t===u.value?100:0}
+                          style=${()=>{let e=h.value?`carousel-fill`:`carousel-fill-v`;return`--carousel-timeout:${n[`autoplay-interval`].value??5e3};--carousel-animation-name:${t===u.value&&n.autoplay.value?e:`none`}`}}></ore-progress>
                       </button>
                     `)}
-                ${P}
+                ${N}
               </div>
             `:i.html`
-              ${P}
+              ${N}
             `}
-    `},styles:[n.default]}),exports.CAROUSEL_SLIDE_TAG=r.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=s;
+    `},styles:[n.default]}),exports.CAROUSEL_SLIDE_TAG=r.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=o;
 //# sourceMappingURL=carousel.cjs.map

package/dist/carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\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                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  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                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { bind, define, getHost, html, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\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                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  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                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/carousel.js

@@ -1,10 +1,9 @@
-import { createSwipeControl as e } from "./core/swipe.js";
-import { announce as t } from "./core/announcer.js";
+import { announce as e } from "./core/announcer.js";
+import { createSwipeControl as t } from "./core/swipe.js";
 import n from "./content/carousel/carousel.css.js";
 import { CAROUSEL_SLIDE_TAG as r } from "./content/carousel/carousel-slide.js";
 import { bind as i, define as a, getHost as o, html as s, onMounted as c, prop as l, useEmit as u } from "@vielzeug/ore";
-import { computed as d, signal as f } from "@vielzeug/ripple";
-import { watch as p } from "@vielzeug/ripple/watch";
+import { computed as d, signal as f, watch as p } from "@vielzeug/ripple";
 //#region src/content/carousel/carousel.ts
 var m = "ore-carousel", h = (e, t) => {
 	let n = e.length;
@@ -41,11 +40,11 @@ a(m, {
 	setup(n) {
 		let r = o(), a = u(), l = f(n["slide-index"].value ?? 0), m = null, v = Array.from(r.querySelectorAll(":scope > ore-carousel-slide")), y = f(v.length), b = () => {
 			v = Array.from(r.querySelectorAll(":scope > ore-carousel-slide")), y.value = v.length;
-		}, x = d(() => n.orientation.value !== "vertical"), S = d(() => n.loop.value !== !1), C = d(() => n["show-controls"].value !== !1), w = d(() => n["show-indicators"].value !== !1), T = d(() => S.value || l.value > 0), E = d(() => S.value || l.value < y.value - 1), D = (e, n = !0) => {
+		}, x = d(() => n.orientation.value !== "vertical"), S = d(() => n.loop.value !== !1), C = d(() => n["show-controls"].value !== !1), w = d(() => n["show-indicators"].value !== !1), T = d(() => S.value || l.value > 0), E = d(() => S.value || l.value < y.value - 1), D = (t, n = !0) => {
 			let i = y.value;
 			if (i === 0) return;
-			let o = S.value ? (e % i + i) % i : Math.max(0, Math.min(e, i - 1));
-			o !== l.value && (l.value = o, r.setAttribute("slide-index", String(o)), a("change", { index: o }), n && t(v[o]?.getAttribute("aria-label") ?? `Slide ${o + 1} of ${i}`));
+			let o = S.value ? (t % i + i) % i : Math.max(0, Math.min(t, i - 1));
+			o !== l.value && (l.value = o, r.setAttribute("slide-index", String(o)), a("change", { index: o }), n && e(v[o]?.getAttribute("aria-label") ?? `Slide ${o + 1} of ${i}`));
 		}, O = () => D(l.value - 1), k = () => D(l.value + 1);
 		p(n["slide-index"], (e) => {
 			typeof e == "number" && e !== l.value && D(e, !1);
@@ -84,7 +83,7 @@ a(m, {
 		let F = (e) => {
 			let t = x.value, n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
 			e.key === n ? (e.preventDefault(), O()) : e.key === r ? (e.preventDefault(), k()) : e.key === "Home" ? (e.preventDefault(), D(0)) : e.key === "End" && (e.preventDefault(), D(y.value - 1));
-		}, I = e({
+		}, I = t({
 			axis: () => x.value ? "x" : "y",
 			onCommit: (e) => {
 				e.distance < 0 ? k() : O();

package/dist/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\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                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  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                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { bind, define, getHost, html, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\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                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  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                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/chat-message.cjs

@@ -1,23 +1,23 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/announcer.cjs"),n=require("./content/chat-message/chat-message.css.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ripple"),a=require("@vielzeug/ripple/watch");var o={assistant:`Assistant`,system:`System`,user:`You`},s=`ore-chat-message`;(0,r.define)(s,{props:{error:r.prop.string(),name:r.prop.string(),sender:r.prop.oneOf([`user`,`assistant`,`system`],`assistant`),status:r.prop.string(),streaming:r.prop.bool(!1),timestamp:r.prop.string()},setup(e){let n=(0,r.useEmit)(),s=(0,r.useSlots)(),c=()=>o[e.sender.value??`assistant`],l=(0,i.computed)(()=>`Message from ${e.name.value||c()}`),u=(0,i.computed)(()=>{let t=e.timestamp.value;if(!t)return``;let n=new Date(t);return Number.isNaN(n.getTime())?``:new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`}).format(n)}),d=(0,i.computed)(()=>!!u.value||!!e.status.value||!!e.error.value);(0,a.watch)(()=>e.status.value===`error`?e.error.value??``:null,e=>{e!==null&&t.announce(`Message failed to send${e?`: ${e}`:``}`,{politeness:`assertive`})});function f(e){n(`retry`,{originalEvent:e})}let p=(0,r.ref)();function m(){let e=p.value?.assignedNodes({flatten:!0});if(!(!e||e.length===0)){for(let t of e){if(t.nodeType!==Node.TEXT_NODE)break;let e=(t.textContent??``).replace(/^\s+/,``);if(t.textContent=e,e!==``)break}for(let t=e.length-1;t>=0;t--){let n=e[t];if(n.nodeType!==Node.TEXT_NODE)break;let r=(n.textContent??``).replace(/\s+$/,``);if(n.textContent=r,r!==``)break}}}return(0,r.onMounted)(()=>{m();let e=p.value;e&&(0,r.onEvent)(e,`slotchange`,m)}),r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/announcer.cjs"),n=require("./content/chat-message/chat-message.css.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ripple");var a={assistant:`Assistant`,system:`System`,user:`You`},o=`ore-chat-message`;(0,r.define)(o,{props:{error:r.prop.string(),name:r.prop.string(),sender:r.prop.oneOf([`user`,`assistant`,`system`],`assistant`),status:r.prop.string(),streaming:r.prop.bool(!1),timestamp:r.prop.string()},setup(e){let n=(0,r.useEmit)(),o=(0,r.useSlots)(),s=()=>a[e.sender.value??`assistant`],c=(0,i.computed)(()=>`Message from ${e.name.value||s()}`),l=(0,i.computed)(()=>{let t=e.timestamp.value;if(!t)return``;let n=new Date(t);return Number.isNaN(n.getTime())?``:new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`}).format(n)}),u=(0,i.computed)(()=>!!l.value||!!e.status.value||!!e.error.value);(0,i.watch)(()=>e.status.value===`error`?e.error.value??``:null,e=>{e!==null&&t.announce(`Message failed to send${e?`: ${e}`:``}`,{politeness:`assertive`})});function d(e){n(`retry`,{originalEvent:e})}let f=(0,r.ref)();function p(){let e=f.value?.assignedNodes({flatten:!0});if(!(!e||e.length===0)){for(let t of e){if(t.nodeType!==Node.TEXT_NODE)break;let e=(t.textContent??``).replace(/^\s+/,``);if(t.textContent=e,e!==``)break}for(let t=e.length-1;t>=0;t--){let n=e[t];if(n.nodeType!==Node.TEXT_NODE)break;let r=(n.textContent??``).replace(/\s+$/,``);if(n.textContent=r,r!==``)break}}}return(0,r.onMounted)(()=>{p();let e=f.value;e&&(0,r.onEvent)(e,`slotchange`,p)}),r.html`
       <div class="row" part="row">
-        <span class="avatar" part="avatar" ?hidden="${()=>!s.has(`avatar`).value}">
+        <span class="avatar" part="avatar" ?hidden="${()=>!o.has(`avatar`).value}">
           <slot name="avatar"></slot>
         </span>
         <div class="column" part="column">
           <span class="name" part="name" ?hidden="${()=>!e.name.value}">${e.name}</span>
-          <div class="bubble" part="bubble" role="article" aria-label="${l}">
+          <div class="bubble" part="bubble" role="article" aria-label="${c}">
             <div class="content" part="content">
-              <slot class="content-slot" ref="${p}"></slot>
+              <slot class="content-slot" ref="${f}"></slot>
               <span class="cursor" part="cursor" aria-hidden="true" ?hidden="${()=>!e.streaming.value}"></span>
             </div>
           </div>
-          <div class="meta" part="meta" ?hidden="${()=>!d.value}">
+          <div class="meta" part="meta" ?hidden="${()=>!u.value}">
             <time
               class="timestamp"
               part="timestamp"
               datetime="${e.timestamp}"
-              ?hidden="${()=>!u.value}">
-              ${u}
+              ?hidden="${()=>!l.value}">
+              ${l}
             </time>
             <span class="status" part="status" data-status="${e.status}" ?hidden="${()=>!e.status.value}">
               ${()=>{switch(e.status.value){case`error`:return r.html`
@@ -36,14 +36,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               part="retry"
               type="button"
               ?hidden="${()=>e.status.value!==`error`}"
-              @click="${f}">
+              @click="${d}">
               Retry
             </button>
           </div>
-          <div class="actions" part="actions" ?hidden="${()=>!s.has(`actions`).value}">
+          <div class="actions" part="actions" ?hidden="${()=>!o.has(`actions`).value}">
             <slot name="actions"></slot>
           </div>
         </div>
       </div>
-    `},styles:[e.reducedMotionMixin,n.default]}),exports.CHAT_MESSAGE_TAG=s;
+    `},styles:[e.reducedMotionMixin,n.default]}),exports.CHAT_MESSAGE_TAG=o;
 //# sourceMappingURL=chat-message.cjs.map