@vielzeug/refine 26.10.11 → 26.10.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/carousel.cjs +1 -1
- package/dist/carousel.cjs.map +1 -1
- package/dist/carousel.js +1 -1
- package/dist/carousel.js.map +1 -1
- package/dist/content/carousel/carousel.css.cjs +1 -1
- package/dist/content/carousel/carousel.css.cjs.map +1 -1
- package/dist/content/carousel/carousel.css.js +1 -1
- package/dist/content/carousel/carousel.css.js.map +1 -1
- package/dist/custom-elements.json +9909 -9909
- package/dist/refine.cjs +2 -2
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +2 -2
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +2 -2
- package/dist/refine.js.map +1 -1
- package/package.json +13 -13
package/dist/refine.cjs
CHANGED
|
@@ -667,7 +667,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
|
|
|
667
667
|
</div>
|
|
668
668
|
</div>
|
|
669
669
|
</div>
|
|
670
|
-
`},styles:[G,ce,ie,H,frostVariantMixin(`.card`),V,ke]});var Pe=`@layer refine.base{:host{--_bg:var(--carousel-bg,var(--color-canvas));--_radius:var(--carousel-radius,var(--rounded-xl));--_dot-bg:var(--carousel-dot-bg,var(--color-contrast-300));--_dot-active-bg:var(--carousel-dot-active-bg,var(--color-contrast-700));width:100%;min-height:var(--carousel-min-height,240px);touch-action:
|
|
670
|
+
`},styles:[G,ce,ie,H,frostVariantMixin(`.card`),V,ke]});var Pe=`@layer refine.base{:host{--_bg:var(--carousel-bg,var(--color-canvas));--_radius:var(--carousel-radius,var(--rounded-xl));--_dot-bg:var(--carousel-dot-bg,var(--color-contrast-300));--_dot-active-bg:var(--carousel-dot-active-bg,var(--color-contrast-700));width:100%;min-height:var(--carousel-min-height,240px);touch-action:pan-y pinch-zoom;background:var(--_bg);border-radius:var(--_radius);outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.track{flex:auto;width:100%;min-height:0;position:relative}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3);margin-left:0}:host>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3);margin-right:0}.nav-btn{pointer-events:auto}:host([variant=gallery]) .track{gap:var(--carousel-gallery-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=gallery][orientation=vertical]) .track{flex-direction:column;align-items:stretch}:host([variant=filmstrip]) .track{gap:var(--carousel-filmstrip-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=filmstrip][orientation=vertical]) .track{flex-direction:column;width:100%}:host([orientation=vertical]){--_slide-translate-before:translateY(-100%);--_slide-translate-after:translateY(100%);touch-action:pan-x pinch-zoom}:host([orientation=vertical]) .indicators{top:50%;bottom:auto;inset-inline:var(--size-3) auto;width:auto;height:max-content;padding-block:var(--size-6) var(--size-2);padding-inline:var(--size-1-5);border-radius:var(--rounded-full);flex-direction:column;transform:translate(0)translateY(-50%)}:host([orientation=vertical]) .controls{flex-direction:column;margin-top:auto}:host([orientation=vertical]) .controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([orientation=vertical]) .controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}:host([orientation=vertical])>.controls{bottom:var(--size-3);margin-top:0}:host([orientation=vertical])>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3)}:host([orientation=vertical])>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3)}:host([orientation=vertical]) .indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2)}:host([orientation=vertical]) .indicator-active{width:var(--size-1-5);height:var(--size-8)}.indicators{gap:var(--size-1-5);width:max-content;padding:var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);pointer-events:none;background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);flex-direction:row;align-items:center;display:flex;position:absolute;left:50%;right:50%;transform:translate(-50%)}.indicator{pointer-events:auto;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0;padding:0;display:block}.indicator>ore-progress{pointer-events:none;width:100%;height:100%;display:block}.indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2);border-radius:var(--rounded-full);overflow:hidden}.indicator-active{--progress-track-bg:color-mix(in oklch, var(--_dot-bg) 60%, transparent);width:var(--size-8)}.indicator:focus-visible{outline:var(--border) solid currentcolor;outline-offset:2px}.indicator:hover{opacity:.8}.indicator ore-progress::part(fill){transition:width var(--transition-normal)}.indicator-active ore-progress::part(fill){animation-name:var(--carousel-animation-name,none);animation-duration:calc(var(--carousel-timeout,4000) * 1ms);animation-timing-function:var(--ease-linear);animation-fill-mode:forwards}}@media (prefers-reduced-motion:reduce){:host{--carousel-transition-duration:0s}}@keyframes carousel-fill{0%{width:0%}to{width:100%}}@keyframes carousel-fill-v{0%{height:0%}to{height:100%}}`,Fe=`:host{pointer-events:none;opacity:0;width:100%;height:100%;transform:var(--_slide-translate-after,translateX(100%));transition:transform var(--carousel-transition-duration,.35s) var(--ease-move), opacity var(--carousel-transition-duration,.35s) var(--ease-move);display:block;position:absolute;inset:0;overflow:hidden}:host([data-before]){transform:var(--_slide-translate-before,translateX(-100%))}:host([data-active]){pointer-events:auto;opacity:1;transform:translate(0)}:host([data-variant=fade]){transition:opacity var(--carousel-transition-duration,.35s) var(--ease-move);transform:none}:host([data-variant=filmstrip]){pointer-events:auto;border-radius:var(--carousel-radius,var(--rounded-xl));opacity:1;transition:flex var(--carousel-transition-duration,.35s) var(--ease-move), opacity var(--carousel-transition-duration,.35s) var(--ease-move);flex-shrink:0;align-self:stretch;position:relative;inset:auto;transform:none}:host([data-variant=filmstrip][data-orientation=horizontal]){flex:0 0 var(--carousel-filmstrip-inactive,var(--size-16));width:auto;min-width:var(--carousel-filmstrip-inactive,var(--size-16));height:100%}:host([data-variant=filmstrip][data-orientation=horizontal][data-active]){flex:1 1 0}:host([data-variant=filmstrip][data-orientation=vertical]){flex:0 0 var(--carousel-filmstrip-inactive,var(--size-10));width:100%;height:auto;min-height:var(--carousel-filmstrip-inactive,var(--size-10))}:host([data-variant=filmstrip][data-orientation=vertical][data-active]){flex:1 1 0}:host([data-variant=gallery]){display:none}:host([data-variant=gallery][data-gallery-visible]){pointer-events:auto;border-radius:var(--carousel-radius,var(--rounded-xl));opacity:.5;transition:flex var(--carousel-transition-duration,.35s) var(--ease-move), opacity var(--carousel-transition-duration,.35s) var(--ease-move);align-self:stretch;display:block;position:relative;inset:auto;overflow:hidden;transform:none}:host([data-variant=gallery][data-gallery-visible][data-active]){opacity:1}:host([data-variant=gallery][data-orientation=horizontal][data-gallery-visible]){flex:0 0 var(--carousel-gallery-thumbnail,var(--size-24));width:auto;min-width:var(--carousel-gallery-thumbnail,var(--size-24));flex-shrink:0;height:100%}:host([data-variant=gallery][data-orientation=horizontal][data-gallery-visible][data-active]){flex:1 1 0}:host([data-variant=gallery][data-orientation=vertical][data-gallery-visible]){flex:1 1 0;width:100%;height:auto}:host([data-variant=gallery][data-orientation=vertical][data-gallery-visible][data-active]){flex:4 1 0}::slotted(*){max-width:100%}`,Ie=`ore-carousel-slide`;(0,t.define)(Ie,{props:{},setup(e){return(0,t.bind)({attr:{"aria-roledescription":()=>`slide`,role:()=>`group`}}),t.html`
|
|
671
671
|
<slot></slot>
|
|
672
672
|
`},styles:[Fe]});var Le=`@layer refine.base{:host{--_height:var(--progress-height,var(--size-2,.5rem));--_radius:var(--progress-radius,var(--rounded-lg));--_circle-size:var(--progress-circle-size,6rem);--_circular-label-size:var(--progress-circular-label-size,var(--text-xl,1.25rem));--_circular-title-size:var(--progress-circular-title-size,var(--text-xs,.75rem));width:100%;display:block}.track{width:100%;height:var(--_height);background:var(--progress-track-bg,var(--color-contrast-300,#ddd));border-radius:var(--_radius);overflow:hidden}.fill{width:var(--_percent,0%);background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:inherit;transform-origin:0;height:100%;transition:var(--_motion-transition,width var(--transition-normal))}:host(:dir(rtl)) .fill{transform-origin:100%}@keyframes ore-progress-slide{0%{transform:translate(-150%)scaleX(.6)}50%{transform:translate(50%)scaleX(1)}to{transform:translate(300%)scaleX(.6)}}:host([indeterminate]) .fill{width:40%;animation:var(--_motion-animation,ore-progress-slide var(--duration-1500) var(--ease-linear) infinite)}:host(:dir(rtl)[indeterminate]) .fill{animation-direction:reverse}.track-segmented{grid-template-columns:repeat(var(--_segments,1), minmax(0, 1fr));gap:var(--progress-segment-gap,var(--size-1,.25rem));background:0 0;border-radius:0;display:grid;overflow:visible}.segment{background:var(--progress-track-bg,var(--color-contrast-300,#ddd));border-radius:var(--_radius);min-width:0;height:100%;transition:var(--_motion-transition,background var(--transition-normal))}.segment[data-filled]{background:var(--progress-fill,var(--_theme-base,#3b82f6))}:host([type=vertical]){--_width:var(--progress-width,var(--size-2,.5rem));width:auto;display:inline-flex}:host([type=vertical]) .wrapper{gap:var(--progress-label-gap,var(--space-1,.25rem));flex-direction:row;width:auto;height:100%}:host([type=vertical]) .track{width:var(--_width);height:100%;overflow:hidden}:host([type=vertical]) .fill{width:100%;height:var(--_percent,0%);transform-origin:bottom;transition:var(--_motion-transition,height var(--transition-normal))}:host([type=vertical][indeterminate]) .fill{height:40%;animation:var(--_motion-animation,ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite)}@keyframes ore-progress-slide-v{0%{transform:translateY(150%)scaleY(.6)}50%{transform:translateY(-50%)scaleY(1)}to{transform:translateY(-300%)scaleY(.6)}}.bar-row-vertical{flex-direction:column;align-items:center;height:100%;display:flex}:host([type=vertical]) .track-outer{flex:1;justify-content:center;align-items:stretch;width:auto;height:100%;display:flex}.wrapper{gap:var(--progress-label-gap,var(--space-1,.25rem));flex-direction:column;width:100%;display:flex}.header{gap:var(--space-2,.5rem);justify-content:space-between;align-items:baseline;display:none}:host([title]) .header{display:flex}.progress-title{font-size:var(--text-sm,.875rem);font-weight:var(--font-weight-medium,500);color:var(--progress-title-color,currentColor);line-height:1.25}.header-label{display:none}:host([title][label]) .header-label{display:inline}.bar-row{display:contents}:host([label]:not([title])) .bar-row{gap:var(--progress-label-gap,var(--space-2,.5rem));align-items:center;width:100%;display:flex}.track-outer{width:100%;position:relative}:host([label]:not([title])) .track-outer{flex:1;width:auto;min-width:0}.end-label{font-size:var(--text-sm,.875rem);color:var(--progress-label-color,currentColor);white-space:nowrap;flex-shrink:0;line-height:1.25}.row-label{display:none}:host([label]:not([title])) .row-label{display:inline}.floating-label{bottom:calc(100% + var(--space-1,.25rem));left:var(--_percent,0%);padding:var(--space-0-5,.125rem) var(--space-2,.5rem);font-size:var(--text-xs,.75rem);font-weight:var(--font-weight-medium,500);color:var(--color-white,#fff);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:var(--rounded-md,.375rem);line-height:1;display:none;position:absolute;transform:translate(-50%)}:host([floating-label]:not([indeterminate])) .floating-label{display:block}:host([floating-label]:not([indeterminate])) .wrapper{padding-top:calc(var(--text-xs,.75rem) + var(--space-1,.25rem) * 3)}.circular-track{width:var(--_circle-size);height:var(--_circle-size);justify-content:center;align-items:center;display:inline-flex;position:relative}.circular-track svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.circular-inner{gap:var(--space-0-5,.125rem);padding:calc(8% + var(--_height));text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.circular-label{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-label-size);font-weight:var(--font-weight-semibold,600);color:var(--progress-label-color,currentColor);white-space:nowrap;line-height:1;overflow:hidden}.circular-title{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-title-size);color:var(--progress-title-color,var(--color-contrast-500,#6b7280));white-space:nowrap;line-height:1.25;overflow:hidden}.circular-label:empty,.circular-title:empty{display:none}.circle-bg{fill:none;stroke:var(--progress-track-bg,var(--color-contrast-300,#ddd));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2))}.circle-fill{fill:none;stroke:var(--progress-fill,var(--_theme-base,#3b82f6));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2));stroke-linecap:round;transition:var(--_motion-transition,stroke-dashoffset var(--transition-normal))}@keyframes ore-progress-spin{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes ore-progress-dash{0%{stroke-dasharray:1px var(--_circ);stroke-dashoffset:var(--_circ)}40%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}60%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}to{stroke-dasharray:1px var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.9)}}:host([indeterminate]) .circular-track svg{animation:var(--_motion-animation,ore-progress-spin var(--duration-1400) var(--ease-linear) infinite)}:host([indeterminate]) .circle-fill{animation:var(--_motion-animation,ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite)}}@layer refine.utilities{:host([size=sm]){--_height:var(--size-1,.25rem);--_circle-size:4rem;--_circular-label-size:var(--text-sm,.875rem);--_circular-title-size:var(--text-2xs,.625rem)}:host([size=md]){--_height:var(--size-2,.5rem);--_circle-size:6rem}:host([size=lg]){--_height:var(--size-3-5,.875rem);--_circle-size:9rem;--_circular-label-size:var(--text-3xl);--_circular-title-size:var(--text-sm,.875rem)}}@media (prefers-reduced-motion:reduce){:host([indeterminate]) .fill{opacity:.6;width:100%}:host([indeterminate]) .circle-fill{stroke-dasharray:none}:host([type=vertical][indeterminate]) .fill{opacity:.6;height:100%}}`,Re=`ore-progress`;(0,t.define)(Re,{props:{...T,...E,"floating-label":t.prop.string(),indeterminate:t.prop.bool(!1),label:t.prop.string(),max:t.prop.number(100),segments:t.prop.number(0),title:t.prop.string(),type:t.prop.oneOf([`linear`,`circular`,`vertical`],`linear`),value:t.prop.number(0),"value-text":t.prop.string()},setup(e){let r=(0,t.getHost)(),i=t.watchEffect,a=2*Math.PI*45,o=(0,n.computed)(()=>`${Math.max(0,Math.min(Number(e.value.value),Number(e.max.value)))/Math.max(1,Number(e.max.value))*100}%`),s=(0,n.computed)(()=>{let t=Math.max(0,Math.min(Number(e.value.value),Number(e.max.value))),n=Math.max(1,Number(e.max.value));return a-t/n*a}),ariaValueNow=()=>e.indeterminate.value?null:String(e.value.value),ariaLabel=()=>e.label.value??e.title.value??`Progress`,c=(0,t.styleMap)({"--_circ":`${a}px`}),strokeDasharray=()=>e.indeterminate.value?void 0:`${a}px`,strokeDashoffset=()=>e.indeterminate.value?void 0:`${s.value}px`,l=(0,n.computed)(()=>e.type.value===`vertical`),u=(0,n.computed)(()=>Math.max(0,Math.floor(Number(e.segments.value)||0))),d=(0,n.computed)(()=>u.value>0&&!e.indeterminate.value&&!l.value),f=(0,n.computed)(()=>{let t=Math.max(0,Math.min(Number(e.value.value),Number(e.max.value))),n=Math.max(1,Number(e.max.value));return Math.round(t/n*u.value)}),p=(0,t.styleMap)({"--_segments":()=>String(u.value)}),m=(0,t.styleMap)({height:()=>!e.indeterminate.value&&l.value?o.value:null,width:()=>!e.indeterminate.value&&!l.value?o.value:null});i(()=>{r.style.setProperty(`--_percent`,e.indeterminate.value?`0%`:o.value)});let circularTemplate=()=>t.html`
|
|
673
673
|
<div
|
|
@@ -729,7 +729,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
|
|
|
729
729
|
</div>
|
|
730
730
|
`;return t.html`
|
|
731
731
|
${()=>e.type.value===`circular`?circularTemplate():barTemplate()}
|
|
732
|
-
`},styles:[G,K,V,Le]});var ze=[`horizontal`,`vertical`],Be=[`default`,`fade`,`filmstrip`,`gallery`],Ve=`ore-carousel`,syncDefaultSlides=(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)})},syncFilmstripSlides=(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`)})},syncGallerySlides=(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,t.define)(Ve,{props:{autoplay:t.prop.bool(!1),"autoplay-interval":t.prop.number(5e3),color:t.prop.oneOf(g),label:t.prop.string(`Carousel`),loop:t.prop.bool(!0),orientation:t.prop.oneOf(ze,`horizontal`),"show-controls":t.prop.bool(!0),"show-indicators":t.prop.bool(!0),"slide-index":t.prop.number(0),variant:t.prop.oneOf(Be,`default`)},setup(e){let r=(0,t.getHost)(),i=(0,t.useEmit)(),a=(0,n.signal)(e[`slide-index`].value??0),o=null,c=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),l=(0,n.signal)(c.length),refreshSlides=()=>{c=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),l.value=c.length},u=(0,n.computed)(()=>e.orientation.value!==`vertical`),d=(0,n.computed)(()=>e.loop.value!==!1),f=(0,n.computed)(()=>e[`show-controls`].value!==!1),p=(0,n.computed)(()=>e[`show-indicators`].value!==!1),m=(0,n.computed)(()=>d.value||a.value>0),h=(0,n.computed)(()=>d.value||a.value<l.value-1),goTo=(e,t=!0)=>{let n=l.value;if(n===0)return;let o=d.value?(e%n+n)%n:Math.max(0,Math.min(e,n-1));o!==a.value&&(a.value=o,r.setAttribute(`slide-index`,String(o)),i(`change`,{index:o}),t&&announce(c[o]?.getAttribute(`aria-label`)??`Slide ${o+1} of ${n}`,{document:r.ownerDocument}))},prev=()=>goTo(a.value-1),next=()=>goTo(a.value+1);(0,n.watch)(e[`slide-index`],e=>{typeof e==`number`&&e!==a.value&&goTo(e,!1)});let syncSlideVariants=()=>{let t=e.variant.value??`default`,n=e.orientation.value??`horizontal`;c.forEach(e=>{e.setAttribute(`data-variant`,t),e.setAttribute(`data-orientation`,n)})};(0,n.watch)((0,n.computed)(()=>({orientation:e.orientation.value,variant:e.variant.value})),syncSlideVariants,{immediate:!0});let g={default:syncDefaultSlides,fade:syncDefaultSlides,filmstrip:syncFilmstripSlides,gallery:syncGallerySlides},syncActiveState=()=>{let t=e.variant.value??`default`;g[t](c,a.value)};(0,n.watch)(a,syncActiveState,{immediate:!0});let startAutoplay=()=>{o===null&&(o=setInterval(next,e[`autoplay-interval`].value??5e3))},stopAutoplay=()=>{o!==null&&(clearInterval(o),o=null)};(0,n.watch)((0,n.computed)(()=>({enabled:e.autoplay.value,interval:e[`autoplay-interval`].value})),({enabled:e})=>{stopAutoplay(),e&&startAutoplay()});let handleKeydown=e=>{let t=u.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),prev()):e.key===r?(e.preventDefault(),next()):e.key===`Home`?(e.preventDefault(),goTo(0)):e.key===`End`&&(e.preventDefault(),goTo(l.value-1))},_=createListControl({getItems:()=>Array.from({length:l.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{goTo(e),(r.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>u.value?`horizontal`:`vertical`,signal:lifecycleSignal(t.onCleanup)});(0,t.bind)({attr:{"aria-label":()=>e.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>e.orientation.value??`horizontal`,role:()=>`region`,
|
|
732
|
+
`},styles:[G,K,V,Le]});var ze=[`horizontal`,`vertical`],Be=[`default`,`fade`,`filmstrip`,`gallery`],Ve=`ore-carousel`,syncDefaultSlides=(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)})},syncFilmstripSlides=(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`)})},syncGallerySlides=(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,t.define)(Ve,{props:{autoplay:t.prop.bool(!1),"autoplay-interval":t.prop.number(5e3),color:t.prop.oneOf(g),label:t.prop.string(`Carousel`),loop:t.prop.bool(!0),orientation:t.prop.oneOf(ze,`horizontal`),"show-controls":t.prop.bool(!0),"show-indicators":t.prop.bool(!0),"slide-index":t.prop.number(0),variant:t.prop.oneOf(Be,`default`)},setup(e){let r=(0,t.getHost)(),i=(0,t.useEmit)(),a=(0,n.signal)(e[`slide-index`].value??0),o=null,c=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),l=(0,n.signal)(c.length),refreshSlides=()=>{c=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),l.value=c.length},u=(0,n.computed)(()=>e.orientation.value!==`vertical`),d=(0,n.computed)(()=>e.loop.value!==!1),f=(0,n.computed)(()=>e[`show-controls`].value!==!1),p=(0,n.computed)(()=>e[`show-indicators`].value!==!1),m=(0,n.computed)(()=>d.value||a.value>0),h=(0,n.computed)(()=>d.value||a.value<l.value-1),goTo=(e,t=!0)=>{let n=l.value;if(n===0)return;let o=d.value?(e%n+n)%n:Math.max(0,Math.min(e,n-1));o!==a.value&&(a.value=o,r.setAttribute(`slide-index`,String(o)),i(`change`,{index:o}),t&&announce(c[o]?.getAttribute(`aria-label`)??`Slide ${o+1} of ${n}`,{document:r.ownerDocument}))},prev=()=>goTo(a.value-1),next=()=>goTo(a.value+1);(0,n.watch)(e[`slide-index`],e=>{typeof e==`number`&&e!==a.value&&goTo(e,!1)});let syncSlideVariants=()=>{let t=e.variant.value??`default`,n=e.orientation.value??`horizontal`;c.forEach(e=>{e.setAttribute(`data-variant`,t),e.setAttribute(`data-orientation`,n)})};(0,n.watch)((0,n.computed)(()=>({orientation:e.orientation.value,variant:e.variant.value})),syncSlideVariants,{immediate:!0});let g={default:syncDefaultSlides,fade:syncDefaultSlides,filmstrip:syncFilmstripSlides,gallery:syncGallerySlides},syncActiveState=()=>{let t=e.variant.value??`default`;g[t](c,a.value)};(0,n.watch)(a,syncActiveState,{immediate:!0});let startAutoplay=()=>{o===null&&(o=setInterval(next,e[`autoplay-interval`].value??5e3))},stopAutoplay=()=>{o!==null&&(clearInterval(o),o=null)};(0,n.watch)((0,n.computed)(()=>({enabled:e.autoplay.value,interval:e[`autoplay-interval`].value})),({enabled:e})=>{stopAutoplay(),e&&startAutoplay()});let handleKeydown=e=>{let t=u.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),prev()):e.key===r?(e.preventDefault(),next()):e.key===`Home`?(e.preventDefault(),goTo(0)):e.key===`End`&&(e.preventDefault(),goTo(l.value-1))},_=createListControl({getItems:()=>Array.from({length:l.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{goTo(e),(r.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>u.value?`horizontal`:`vertical`,signal:lifecycleSignal(t.onCleanup)});(0,t.bind)({attr:{"aria-label":()=>e.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>e.orientation.value??`horizontal`,role:()=>`region`,variant:()=>e.variant.value??`default`},on:{focusin:()=>{stopAutoplay()},focusout:()=>{e.autoplay.value&&startAutoplay()},keydown:handleKeydown,pointerenter:()=>{stopAutoplay()},pointerleave:()=>{e.autoplay.value&&startAutoplay()}}}),(0,t.onMounted)(()=>{let t=!1,resetClick=()=>{t=!1},handleClick=e=>{t&&e.detail!==0&&(t=!1,e.preventDefault(),e.stopImmediatePropagation())},handleDragStart=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&c.includes(e))&&e.preventDefault()},n=(0,s.createPanGesture)(r,{axis:()=>u.value?`x`:`y`,onEnd:({distance:e,reason:n})=>{if(n!==`release`){t=!1;return}Math.abs(e)<48||(e<0?next():prev())},onStart:()=>{t=!0},shouldStart:e=>!e.composedPath().some(e=>e instanceof Element&&e.getRootNode()===r.shadowRoot&&e.matches(`.controls, .indicators`))}),i=r.shadowRoot.querySelector(`slot`),onSlotChange=()=>{refreshSlides(),syncSlideVariants(),syncActiveState()};return i.addEventListener(`slotchange`,onSlotChange),r.addEventListener(`pointerdown`,resetClick,!0),r.addEventListener(`click`,handleClick,!0),r.addEventListener(`dragstart`,handleDragStart),e.autoplay.value&&startAutoplay(),()=>{n.dispose(),stopAutoplay(),i.removeEventListener(`slotchange`,onSlotChange),r.removeEventListener(`pointerdown`,resetClick,!0),r.removeEventListener(`click`,handleClick,!0),r.removeEventListener(`dragstart`,handleDragStart)}});let renderControls=()=>f.value?t.html`
|
|
733
733
|
<div class="controls" part="controls">
|
|
734
734
|
<ore-button
|
|
735
735
|
class="nav-btn prev-btn"
|