import{D as e,E as t,I as n,J as r,M as i,N as a,P as o,S as s,T as c,V as l,W as u,Y as d,a as f,b as p,dt as m,ft as h,it as g,j as _,l as v,n as y,nt as b,ot as x,q as S,r as C,st as w,t as T}from"../../client.js";import{n as E,t as D}from"../../components.js";import O from"../button/Button.js";import k from"../iconbutton/IconButton.js";var A=o(`<li class="mc-navigation-indicator__item svelte-1u324yb"><button></button></li>`),j=o(`<div><ul class="mc-navigation-indicator__list svelte-1u324yb"></ul> <!></div>`),M={hash:`svelte-1u324yb`,code:`/**
 * Do not edit directly, this file was auto-generated.
 */.mc-navigation-indicator.svelte-1u324yb {display:flex;align-items:center;gap:0.5rem;max-width:42rem;overflow:scroll;}.mc-navigation-indicator__list.svelte-1u324yb {display:flex;align-items:center;gap:0.25rem;list-style:none;margin:0;padding:0;}.mc-navigation-indicator__item.svelte-1u324yb {display:flex;align-items:center;justify-content:center;}.mc-navigation-indicator__button.svelte-1u324yb {transition:box-shadow 200ms ease;width:1.5rem;height:0.5rem;border:none;border-radius:var(--border-radius-l, 1rem);background-color:var(--navigation-indicator-color-background-default, #c9d0de);cursor:pointer;transition:height 0.2s ease, height 0.2s ease, background-color 0.2s ease;}.mc-navigation-indicator__button.svelte-1u324yb:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-navigation-indicator__button--active.svelte-1u324yb {width:3rem;height:0.75rem;background-color:var(--navigation-indicator-color-background-active, #464e63);}`};function N(o,T){w(T,!0),p(o,M);let N=y(T,`steps`,7),P=y(T,`selected`,15),F=y(T,`action`,7,`resume`),I=y(T,`label`,7),L=y(T,`player`,7,!0),R=y(T,`onAction`,7),z=y(T,`class`,7),B=C(T,[`$$slots`,`$$events`,`$$legacy`,`$$host`,`steps`,`selected`,`action`,`label`,`player`,`onAction`,`class`]),V,H=b(()=>F()===`pause`?D:E);function U(e){P(e)}function W(e,t){e.key===`Enter`&&U(t)}function G(){R()?.(),V.dispatchEvent(new CustomEvent(`action`,{bubbles:!0,composed:!0}))}var K={get steps(){return N()},set steps(e){N(e),g()},get selected(){return P()},set selected(e){P(e),g()},get action(){return F()},set action(e=`resume`){F(e),g()},get label(){return I()},set label(e){I(e),g()},get player(){return L()},set player(e=!0){L(e),g()},get onAction(){return R()},set onAction(e){R(e),g()},get class(){return z()},set class(e){z(e),g()}},q=j();v(q,()=>({class:[`mc-navigation-indicator`,z()],role:`navigation`,"aria-label":`Navigations steps`,...B}),void 0,void 0,void 0,`svelte-1u324yb`);var J=S(q);c(J,21,()=>Array.from({length:N()}),t,(e,t,n)=>{var r=A(),a=S(r),o=()=>U(n),s=e=>W(e,n);v(a,()=>({class:{"mc-navigation-indicator__button":!0,"mc-navigation-indicator__button--active":P()==n},"aria-label":`Navigation step button`,...P()==n?{"aria-current":`step`}:{},onclick:o,onkeydown:s}),void 0,void 0,void 0,`svelte-1u324yb`),h(r),i(e,r)}),h(J);var Y=d(J,2),X=t=>{var o=a(),c=r(o),d=e=>{O(e,{size:`s`,iconposition:`left`,ghost:!0,onclick:G,children:(e,t)=>{m();var r=n();u(()=>_(r,I())),i(e,r)},$$slots:{default:!0,icon:(e,t)=>{var n=a();s(r(n),()=>l(H),(e,t)=>{t(e,{slot:`icon`})}),i(e,n)}}})},f=e=>{k(e,{size:`s`,ghost:!0,onclick:G,$$slots:{icon:(e,t)=>{var n=a();s(r(n),()=>l(H),(e,t)=>{t(e,{slot:`icon`})}),i(e,n)}}})};e(c,e=>{I()?e(d):e(f,-1)}),i(t,o)};return e(Y,e=>{L()&&e(X)}),h(q),f(q,e=>V=e,()=>V),i(o,q),x(K)}customElements.define(`m-navigation-indicator`,T(N,{player:{attribute:`player`,reflect:!0,type:`Boolean`},steps:{},selected:{},action:{},label:{},onAction:{},class:{}},[],[],{mode:`open`}));
//# sourceMappingURL=NavigationIndicator.js.map