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,st as C,t as w}from"../../client.js";import{n as T,t as E}from"../../components.js";import D from"../button/Button.js";import O from"../iconbutton/IconButton.js";var k=o(`<li class="mc-navigation-indicator__item svelte-1u324yb"><button></button></li>`),A=o(`<div class="mc-navigation-indicator svelte-1u324yb" role="navigation" aria-label="Navigations steps"><ul class="mc-navigation-indicator__list svelte-1u324yb"></ul> <!></div>`),j={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 M(o,w){C(w,!0),p(o,j);let M=y(w,`steps`,7),N=y(w,`selected`,15),P=y(w,`action`,7,`resume`),F=y(w,`label`,7),I=y(w,`player`,7,!0),L=y(w,`onAction`,7),R,z=b(()=>P()===`pause`?E:T);function B(e){N(e)}function V(e,t){e.key===`Enter`&&B(t)}function H(){L()?.(),R.dispatchEvent(new CustomEvent(`action`,{bubbles:!0,composed:!0}))}var U={get steps(){return M()},set steps(e){M(e),g()},get selected(){return N()},set selected(e){N(e),g()},get action(){return P()},set action(e=`resume`){P(e),g()},get label(){return F()},set label(e){F(e),g()},get player(){return I()},set player(e=!0){I(e),g()},get onAction(){return L()},set onAction(e){L(e),g()}},W=A(),G=S(W);c(G,21,()=>Array.from({length:M()}),t,(e,t,n)=>{var r=k(),a=S(r),o=()=>B(n),s=e=>V(e,n);v(a,()=>({class:{"mc-navigation-indicator__button":!0,"mc-navigation-indicator__button--active":N()==n},"aria-label":`Navigation step button`,...N()==n?{"aria-current":`step`}:{},onclick:o,onkeydown:s}),void 0,void 0,void 0,`svelte-1u324yb`),h(r),i(e,r)}),h(G);var K=d(G,2),q=t=>{var o=a(),c=r(o),d=e=>{D(e,{size:`s`,iconposition:`left`,ghost:!0,onclick:H,children:(e,t)=>{m();var r=n();u(()=>_(r,F())),i(e,r)},$$slots:{default:!0,icon:(e,t)=>{var n=a();s(r(n),()=>l(z),(e,t)=>{t(e,{slot:`icon`})}),i(e,n)}}})},f=e=>{O(e,{size:`s`,ghost:!0,onclick:H,$$slots:{icon:(e,t)=>{var n=a();s(r(n),()=>l(z),(e,t)=>{t(e,{slot:`icon`})}),i(e,n)}}})};e(c,e=>{F()?e(d):e(f,-1)}),i(t,o)};return e(K,e=>{I()&&e(q)}),h(W),f(W,e=>R=e,()=>R),i(o,W),x(U)}customElements.define(`m-navigation-indicator`,w(M,{player:{attribute:`player`,reflect:!0,type:`Boolean`},steps:{},selected:{},action:{},label:{},onAction:{}},[],[],{mode:`open`}));
//# sourceMappingURL=NavigationIndicator.js.map