ds-one 0.2.5-alpha.9 → 0.3.0-alpha.2

package/dist/ds-one.bundle.min.js

@@ -1,6 +1,1604 @@
-function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigator,e=window,s=t&&(t.userAgent||t.vendor)||e&&e.opera||"",r=/Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(s),i=(t&&t.maxTouchPoints||0)>1,o=e?Math.min(e.innerWidth||0,e.innerHeight||0)<=820:!1;return r||i&&o}function os(){let t=is(),e=navigator,s=window,n=(e&&e.maxTouchPoints||0)>1,i=typeof document<"u"?document.documentElement.clientWidth:s?.innerWidth||0,o=typeof document<"u"?document.documentElement.clientHeight:s?.innerHeight||0,p=t&&Math.min(i,o)>=600;return{isMobile:t,isTablet:p,isDesktop:!t,isTouchCapable:n,deviceType:t?p?"tablet":"mobile":"desktop",userAgent:e&&(e.userAgent||e.vendor)||"",screenWidth:i,screenHeight:o}}function Ve(){let t=os();if(t.isMobile&&typeof document<"u"){let r=t.screenWidth/280;document.documentElement.style.setProperty("--sf",r.toFixed(3)),document.documentElement.style.setProperty("--sf",r.toFixed(3)),console.log(`[DS one] Mobile device detected - ${t.deviceType} (${t.screenWidth}x${t.screenHeight}), scaling factor: ${r.toFixed(2)}`)}else typeof document<"u"&&(document.documentElement.style.setProperty("--sf","1"),document.documentElement.style.setProperty("--sf","1")),console.log(`[DS one] Desktop device detected (${t.screenWidth}x${t.screenHeight})`);return typeof window<"u"&&window.DS_ONE_DEBUG&&console.log("[DS one] Device Info:",{type:t.deviceType,isMobile:t.isMobile,isTablet:t.isTablet,isDesktop:t.isDesktop,isTouchCapable:t.isTouchCapable,viewport:`${t.screenWidth}x${t.screenHeight}`,userAgent:t.userAgent}),t}if(typeof window<"u"){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{Ve()}):Ve();let t;window.addEventListener("resize",()=>{clearTimeout(t),t=setTimeout(()=>{Ve()},100)})}var as={},gt=["da","de","en","es","fr","it","ja","pt","sv","zh"],ls=new Map(gt.map((t,e)=>[t,e])),ot={da:"Danish","da-dk":"Danish",de:"German","de-de":"German",en:"English","en-us":"English",es:"Spanish","es-es":"Spanish",fr:"French","fr-fr":"French",it:"Italian","it-it":"Italian",ja:"Japanese","ja-jp":"Japanese",pt:"Portuguese","pt-pt":"Portuguese",sv:"Swedish","sv-se":"Swedish",zh:"Chinese","zh-cn":"Chinese","zh-tw":"Chinese","zh-hans":"Chinese","zh-hant":"Chinese"},at=new Map,lt=!1,mt="./translations.json",ct=!1;function dt(t){if(!t)return null;let e=t.trim();return e?e.startsWith("./")||e.startsWith("../")||e.startsWith("/")||/^https?:\/\//i.test(e)?e:`./${e}`:null}function cs(){if(typeof document>"u")return null;let e=document.querySelector("script[data-ds-one-translations]")?.getAttribute("data-ds-one-translations");if(e)return e;let s=document.querySelector('meta[name="ds-one:translations"]')?.getAttribute("content");if(s)return s;let r=document.querySelector('link[rel="ds-one-translations"]')?.getAttribute("href");return r||null}function ds(){let t=[],e=typeof window<"u"?window.DS_ONE_TRANSLATIONS_FILE:null,s=cs(),r=dt(e??"");r&&t.push(r);let n=dt(s??"");return n&&!t.includes(n)&&t.push(n),t.length===0&&t.push(mt),t}function us(t){return!t||typeof t!="object"?!1:Object.values(t).every(e=>e&&typeof e=="object")}async function hs(t){try{let e=await fetch(t);if(!e.ok)return null;let s=await e.json();return us(s)?Object.keys(s).length===0?(console.warn(`[DS one] No languages found in ${t}`),null):s:(console.warn(`[DS one] Invalid translation format in ${t}. Expected object with language codes as keys.`),null)}catch{return null}}async function ut(){if(ct||(ct=!0,typeof window>"u"))return!1;if(window.DS_ONE_TRANSLATIONS&&Object.keys(window.DS_ONE_TRANSLATIONS).length>0)return console.log(`[DS one] Translations already loaded (${Object.keys(window.DS_ONE_TRANSLATIONS).length} languages), skipping auto-load`),!0;let t=ds();for(let e of t){let s=await hs(e);if(!s)continue;window.DS_ONE_TRANSLATIONS=s;let r=Object.keys(s);return console.log(`[DS one] External translations loaded from ${e}: ${r.length} language(s) \u2013 ${r.join(", ")}`),window.dispatchEvent(new CustomEvent("translations-ready")),!0}return console.info(`[DS one] No external translations found at ${t[0]??mt}. Using bundled translations.`),!1}function pe(){return typeof window<"u"&&window.DS_ONE_TRANSLATIONS?window.DS_ONE_TRANSLATIONS:as}var I=pe(),E="en";function F(t){return t?t.toLowerCase().split(/[-_]/)[0]??"":""}function ht(t){let e=F(t),s=ls.get(e);return typeof s=="number"?s:gt.length}function vt(t){return[...t].sort((e,s)=>{let r=ht(e),n=ht(s);return r!==n?r-n:e.localeCompare(s)})}function ps(t,e){let s=t?.replace("_","-");if(s)try{let r=at.get(s);r||(r=new Intl.DisplayNames([s],{type:"language"}),at.set(s,r));let n=e.replace("_","-"),i=r.of(n);if(i&&i!==n)return i;let o=r.of(F(n));if(o)return o}catch{lt||(console.info("[DS one] Intl.DisplayNames is not available, using fallback language names."),lt=!0)}}function fs(t){let e=t.toLowerCase().replace("_","-"),s=ot[e];if(s)return s;let r=F(e);return ot[r]}function yt(t,e={}){if(!t)return"";let s=[];e.locale&&s.push(e.locale),typeof navigator<"u"&&(Array.isArray(navigator.languages)&&s.push(...navigator.languages),navigator.language&&s.push(navigator.language)),s.push(E),s.push("en");let r=new Set;for(let o of s){if(!o||r.has(o))continue;r.add(o);let p=ps(o,t);if(p)return p}let n=fs(t);if(n)return n;let i=F(t);return i?i.toUpperCase():t}var pt={da:"da","da-dk":"da",de:"de","de-de":"de",en:"en","en-us":"en","en-gb":"en",es:"es","es-es":"es","es-mx":"es",fr:"fr","fr-fr":"fr",it:"it","it-it":"it",ja:"ja","ja-jp":"ja",pt:"pt","pt-pt":"pt","pt-br":"pt",sv:"sv","sv-se":"sv",zh:"zh","zh-cn":"zh","zh-hans":"zh","zh-tw":"zh","zh-hant":"zh"};function ft(t){if(!t)return null;let e=t.toLowerCase().replace("_","-"),s=pt[e];if(s)return s;let r=F(e),n=pt[r];return n||t}function gs(){if(typeof navigator>"u")return E;let t=navigator.language;if(t){let e=ft(t);if(e)return e}if(Array.isArray(navigator.languages))for(let e of navigator.languages){let s=ft(e);if(s)return s}return E}var nr=typeof window<"u"?window.localStorage?.getItem("ds-one:language")??void 0:void 0,T={value:localStorage.getItem("language")||gs(),set:function(t){this.value=t,localStorage.setItem("language",t),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))}};typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{ut()}):ut());typeof window<"u"&&window.addEventListener("translations-ready",()=>{I=pe(),window.dispatchEvent(new CustomEvent("translations-loaded"));let t=T.value;window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))});setTimeout(()=>{window.dispatchEvent(new CustomEvent("translations-loaded"));let t=T.value;window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))},100);function C(t){let e=T.value;return I?.[e]?.[t]?I[e][t]:e!==E&&I?.[E]?.[t]?I[E][t]:(console.warn(`[DS one (Internationalization)] No translation found for key "${t}"`),t)}function ir(t,e=T.value){if(!t)return!1;let s=I?.[e];return!!(s&&Object.prototype.hasOwnProperty.call(s,t)||e!==E&&I?.[E]&&Object.prototype.hasOwnProperty.call(I[E],t))}function fe(t){return C(t)}function or(){let t=pe();if(t&&Object.keys(t).length>0){let e=Object.keys(t);return Promise.resolve(vt(e))}return Promise.resolve([E])}function Me(){let t=pe();return t&&Object.keys(t).length>0?vt(Object.keys(t)):[E]}function ar(t,e){console.log(`Loading additional translations for ${t}:`,Object.keys(e).length,"keys")}function Re(t){localStorage.setItem("language",t),T.set(t),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))}function P(t){if(!(typeof window>"u"))try{let e=window.localStorage?.getItem("ds-one:preferences"),r={...e?JSON.parse(e):{},...t};window.localStorage?.setItem("ds-one:preferences",JSON.stringify(r))}catch(e){console.warn("ds-one: unable to persist preferences",e)}}var ms={da:"kr.",nb:"kr.",sv:"kr.",de:"\u20AC",en:"$",pt:"\u20AC",es:"\u20AC",zh:"\xA5",ja:"\xA5",ko:"\u20A9"};function dr(t){let{language:e,country:s}=t;if(s){let n=s.toUpperCase();if(n==="US"||n==="USA")return"$";if(n==="GB"||n==="UK")return"\xA3";if(n==="JP"||n==="JPN"||n==="CN"||n==="CHN")return"\xA5";if(n==="KR"||n==="KOR")return"\u20A9"}let r=e.toLowerCase().split(/[-_]/)[0];return ms[r]||"$"}var vs=Object.defineProperty,ys=(t,e,s)=>e in t?vs(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,De=(t,e,s)=>(ys(t,typeof e!="symbol"?e+"":e,s),s),bs=(t,e,s)=>{if(!e.has(t))throw TypeError("Cannot "+s)},Ue=(t,e)=>{if(Object(e)!==e)throw TypeError('Cannot use the "in" operator on this value');return t.has(e)},ge=(t,e,s)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,s)},bt=(t,e,s)=>(bs(t,e,"access private method"),s);function wt(t,e){return Object.is(t,e)}var w=null,G=!1,me=1,ve=Symbol("SIGNAL");function U(t){let e=w;return w=t,e}function ws(){return w}function xs(){return G}var qe={version:0,lastCleanEpoch:0,dirty:!1,producerNode:void 0,producerLastReadVersion:void 0,producerIndexOfThis:void 0,nextProducerIndex:0,liveConsumerNode:void 0,liveConsumerIndexOfThis:void 0,consumerAllowSignalWrites:!1,consumerIsAlwaysLive:!1,producerMustRecompute:()=>!1,producerRecomputeValue:()=>{},consumerMarkedDirty:()=>{},consumerOnSignalRead:()=>{}};function ye(t){if(G)throw new Error(typeof ngDevMode<"u"&&ngDevMode?"Assertion error: signal read during notification phase":"");if(w===null)return;w.consumerOnSignalRead(t);let e=w.nextProducerIndex++;if(W(w),e<w.producerNode.length&&w.producerNode[e]!==t&&ze(w)){let s=w.producerNode[e];be(s,w.producerIndexOfThis[e])}w.producerNode[e]!==t&&(w.producerNode[e]=t,w.producerIndexOfThis[e]=ze(w)?$t(t,w,e):0),w.producerLastReadVersion[e]=t.version}function _s(){me++}function xt(t){if(!(!t.dirty&&t.lastCleanEpoch===me)){if(!t.producerMustRecompute(t)&&!Es(t)){t.dirty=!1,t.lastCleanEpoch=me;return}t.producerRecomputeValue(t),t.dirty=!1,t.lastCleanEpoch=me}}function _t(t){if(t.liveConsumerNode===void 0)return;let e=G;G=!0;try{for(let s of t.liveConsumerNode)s.dirty||Ss(s)}finally{G=e}}function $s(){return w?.consumerAllowSignalWrites!==!1}function Ss(t){var e;t.dirty=!0,_t(t),(e=t.consumerMarkedDirty)==null||e.call(t.wrapper??t)}function As(t){return t&&(t.nextProducerIndex=0),U(t)}function Cs(t,e){if(U(e),!(!t||t.producerNode===void 0||t.producerIndexOfThis===void 0||t.producerLastReadVersion===void 0)){if(ze(t))for(let s=t.nextProducerIndex;s<t.producerNode.length;s++)be(t.producerNode[s],t.producerIndexOfThis[s]);for(;t.producerNode.length>t.nextProducerIndex;)t.producerNode.pop(),t.producerLastReadVersion.pop(),t.producerIndexOfThis.pop()}}function Es(t){W(t);for(let e=0;e<t.producerNode.length;e++){let s=t.producerNode[e],r=t.producerLastReadVersion[e];if(r!==s.version||(xt(s),r!==s.version))return!0}return!1}function $t(t,e,s){var r;if(Fe(t),W(t),t.liveConsumerNode.length===0){(r=t.watched)==null||r.call(t.wrapper);for(let n=0;n<t.producerNode.length;n++)t.producerIndexOfThis[n]=$t(t.producerNode[n],t,n)}return t.liveConsumerIndexOfThis.push(s),t.liveConsumerNode.push(e)-1}function be(t,e){var s;if(Fe(t),W(t),typeof ngDevMode<"u"&&ngDevMode&&e>=t.liveConsumerNode.length)throw new Error(`Assertion error: active consumer index ${e} is out of bounds of ${t.liveConsumerNode.length} consumers)`);if(t.liveConsumerNode.length===1){(s=t.unwatched)==null||s.call(t.wrapper);for(let n=0;n<t.producerNode.length;n++)be(t.producerNode[n],t.producerIndexOfThis[n])}let r=t.liveConsumerNode.length-1;if(t.liveConsumerNode[e]=t.liveConsumerNode[r],t.liveConsumerIndexOfThis[e]=t.liveConsumerIndexOfThis[r],t.liveConsumerNode.length--,t.liveConsumerIndexOfThis.length--,e<t.liveConsumerNode.length){let n=t.liveConsumerIndexOfThis[e],i=t.liveConsumerNode[e];W(i),i.producerIndexOfThis[n]=e}}function ze(t){var e;return t.consumerIsAlwaysLive||(((e=t?.liveConsumerNode)==null?void 0:e.length)??0)>0}function W(t){t.producerNode??(t.producerNode=[]),t.producerIndexOfThis??(t.producerIndexOfThis=[]),t.producerLastReadVersion??(t.producerLastReadVersion=[])}function Fe(t){t.liveConsumerNode??(t.liveConsumerNode=[]),t.liveConsumerIndexOfThis??(t.liveConsumerIndexOfThis=[])}function St(t){if(xt(t),ye(t),t.value===Be)throw t.error;return t.value}function Ts(t){let e=Object.create(ks);e.computation=t;let s=()=>St(e);return s[ve]=e,s}var We=Symbol("UNSET"),je=Symbol("COMPUTING"),Be=Symbol("ERRORED"),ks={...qe,value:We,dirty:!0,error:null,equal:wt,producerMustRecompute(t){return t.value===We||t.value===je},producerRecomputeValue(t){if(t.value===je)throw new Error("Detected cycle in computations.");let e=t.value;t.value=je;let s=As(t),r,n=!1;try{r=t.computation.call(t.wrapper),n=e!==We&&e!==Be&&t.equal.call(t.wrapper,e,r)}catch(i){r=Be,t.error=i}finally{Cs(t,s)}if(n){t.value=e;return}t.value=r,t.version++}};function Ls(){throw new Error}var Ns=Ls;function Is(){Ns()}function Os(t){let e=Object.create(Vs);e.value=t;let s=()=>(ye(e),e.value);return s[ve]=e,s}function Ps(){return ye(this),this.value}function Hs(t,e){$s()||Is(),t.equal.call(t.wrapper,t.value,e)||(t.value=e,Ms(t))}var Vs={...qe,equal:wt,value:void 0};function Ms(t){t.version++,_s(),_t(t)}var x=Symbol("node"),_;(t=>{var e,s,r,n,i,o;class p{constructor(m,l={}){ge(this,s),De(this,e);let f=Os(m)[ve];if(this[x]=f,f.wrapper=this,l){let $=l.equals;$&&(f.equal=$),f.watched=l[t.subtle.watched],f.unwatched=l[t.subtle.unwatched]}}get(){if(!(0,t.isState)(this))throw new TypeError("Wrong receiver type for Signal.State.prototype.get");return Ps.call(this[x])}set(m){if(!(0,t.isState)(this))throw new TypeError("Wrong receiver type for Signal.State.prototype.set");if(xs())throw new Error("Writes to signals not permitted during Watcher callback");let l=this[x];Hs(l,m)}}e=x,s=new WeakSet,r=function(){},t.isState=u=>typeof u=="object"&&Ue(s,u),t.State=p;class d{constructor(m,l){ge(this,i),De(this,n);let f=Ts(m)[ve];if(f.consumerAllowSignalWrites=!0,this[x]=f,f.wrapper=this,l){let $=l.equals;$&&(f.equal=$),f.watched=l[t.subtle.watched],f.unwatched=l[t.subtle.unwatched]}}get(){if(!(0,t.isComputed)(this))throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");return St(this[x])}}n=x,i=new WeakSet,o=function(){},t.isComputed=u=>typeof u=="object"&&Ue(i,u),t.Computed=d,(u=>{var m,l,S,f,$;function Yt(v){let g,c=null;try{c=U(null),g=v()}finally{U(c)}return g}u.untrack=Yt;function Xt(v){var g;if(!(0,t.isComputed)(v)&&!(0,t.isWatcher)(v))throw new TypeError("Called introspectSources without a Computed or Watcher argument");return((g=v[x].producerNode)==null?void 0:g.map(c=>c.wrapper))??[]}u.introspectSources=Xt;function Qt(v){var g;if(!(0,t.isComputed)(v)&&!(0,t.isState)(v))throw new TypeError("Called introspectSinks without a Signal argument");return((g=v[x].liveConsumerNode)==null?void 0:g.map(c=>c.wrapper))??[]}u.introspectSinks=Qt;function es(v){if(!(0,t.isComputed)(v)&&!(0,t.isState)(v))throw new TypeError("Called hasSinks without a Signal argument");let g=v[x].liveConsumerNode;return g?g.length>0:!1}u.hasSinks=es;function ts(v){if(!(0,t.isComputed)(v)&&!(0,t.isWatcher)(v))throw new TypeError("Called hasSources without a Computed or Watcher argument");let g=v[x].producerNode;return g?g.length>0:!1}u.hasSources=ts;class ss{constructor(g){ge(this,l),ge(this,f),De(this,m);let c=Object.create(qe);c.wrapper=this,c.consumerMarkedDirty=g,c.consumerIsAlwaysLive=!0,c.consumerAllowSignalWrites=!1,c.producerNode=[],this[x]=c}watch(...g){if(!(0,t.isWatcher)(this))throw new TypeError("Called unwatch without Watcher receiver");bt(this,f,$).call(this,g);let c=this[x];c.dirty=!1;let A=U(c);for(let he of g)ye(he[x]);U(A)}unwatch(...g){if(!(0,t.isWatcher)(this))throw new TypeError("Called unwatch without Watcher receiver");bt(this,f,$).call(this,g);let c=this[x];W(c);for(let A=c.producerNode.length-1;A>=0;A--)if(g.includes(c.producerNode[A].wrapper)){be(c.producerNode[A],c.producerIndexOfThis[A]);let he=c.producerNode.length-1;if(c.producerNode[A]=c.producerNode[he],c.producerIndexOfThis[A]=c.producerIndexOfThis[he],c.producerNode.length--,c.producerIndexOfThis.length--,c.nextProducerIndex--,A<c.producerNode.length){let ns=c.producerIndexOfThis[A],it=c.producerNode[A];Fe(it),it.liveConsumerIndexOfThis[ns]=A}}}getPending(){if(!(0,t.isWatcher)(this))throw new TypeError("Called getPending without Watcher receiver");return this[x].producerNode.filter(c=>c.dirty).map(c=>c.wrapper)}}m=x,l=new WeakSet,S=function(){},f=new WeakSet,$=function(v){for(let g of v)if(!(0,t.isComputed)(g)&&!(0,t.isState)(g))throw new TypeError("Called watch/unwatch without a Computed or State argument")},t.isWatcher=v=>Ue(l,v),u.Watcher=ss;function rs(){var v;return(v=ws())==null?void 0:v.wrapper}u.currentComputed=rs,u.watched=Symbol("watched"),u.unwatched=Symbol("unwatched")})(t.subtle||(t.subtle={}))})(_||(_={}));var fr=Symbol("SignalWatcherBrand"),gr=new FinalizationRegistry((({watcher:t,signal:e})=>{t.unwatch(e)}));var we={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Z=t=>(...e)=>({_$litDirective$:t,values:e}),j=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,s,r){this._$Ct=e,this._$AM=s,this._$Ci=r}_$AS(e,s){return this.update(e,s)}update(e,s){return this.render(...s)}};var J=globalThis,xe=J.trustedTypes,At=xe?xe.createPolicy("lit-html",{createHTML:t=>t}):void 0,Ze="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,Ke="?"+k,Rs=`<${Ke}>`,M=document,Y=()=>M.createComment(""),X=t=>t===null||typeof t!="object"&&typeof t!="function",Je=Array.isArray,Nt=t=>Je(t)||typeof t?.[Symbol.iterator]=="function",Ge=`[ 	
-\f\r]`,K=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ct=/-->/g,Et=/>/g,H=RegExp(`>|${Ge}(?:([^\\s"'>=/]+)(${Ge}*=${Ge}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),Tt=/'/g,kt=/"/g,It=/^(?:script|style|textarea|title)$/i,Ye=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),a=Ye(1),Ot=Ye(2),wr=Ye(3),L=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),Lt=new WeakMap,V=M.createTreeWalker(M,129);function Pt(t,e){if(!Je(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return At!==void 0?At.createHTML(e):e}var Ht=(t,e)=>{let s=t.length-1,r=[],n,i=e===2?"<svg>":e===3?"<math>":"",o=K;for(let p=0;p<s;p++){let d=t[p],u,m,l=-1,S=0;for(;S<d.length&&(o.lastIndex=S,m=o.exec(d),m!==null);)S=o.lastIndex,o===K?m[1]==="!--"?o=Ct:m[1]!==void 0?o=Et:m[2]!==void 0?(It.test(m[2])&&(n=RegExp("</"+m[2],"g")),o=H):m[3]!==void 0&&(o=H):o===H?m[0]===">"?(o=n??K,l=-1):m[1]===void 0?l=-2:(l=o.lastIndex-m[2].length,u=m[1],o=m[3]===void 0?H:m[3]==='"'?kt:Tt):o===kt||o===Tt?o=H:o===Ct||o===Et?o=K:(o=H,n=void 0);let f=o===H&&t[p+1].startsWith("/>")?" ":"";i+=o===K?d+Rs:l>=0?(r.push(u),d.slice(0,l)+Ze+d.slice(l)+k+f):d+k+(l===-2?p:f)}return[Pt(t,i+(t[s]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),r]},Q=class t{constructor({strings:e,_$litType$:s},r){let n;this.parts=[];let i=0,o=0,p=e.length-1,d=this.parts,[u,m]=Ht(e,s);if(this.el=t.createElement(u,r),V.currentNode=this.el.content,s===2||s===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(n=V.nextNode())!==null&&d.length<p;){if(n.nodeType===1){if(n.hasAttributes())for(let l of n.getAttributeNames())if(l.endsWith(Ze)){let S=m[o++],f=n.getAttribute(l).split(k),$=/([.?@])?(.*)/.exec(S);d.push({type:1,index:i,name:$[2],strings:f,ctor:$[1]==="."?$e:$[1]==="?"?Se:$[1]==="@"?Ae:D}),n.removeAttribute(l)}else l.startsWith(k)&&(d.push({type:6,index:i}),n.removeAttribute(l));if(It.test(n.tagName)){let l=n.textContent.split(k),S=l.length-1;if(S>0){n.textContent=xe?xe.emptyScript:"";for(let f=0;f<S;f++)n.append(l[f],Y()),V.nextNode(),d.push({type:2,index:++i});n.append(l[S],Y())}}}else if(n.nodeType===8)if(n.data===Ke)d.push({type:2,index:i});else{let l=-1;for(;(l=n.data.indexOf(k,l+1))!==-1;)d.push({type:7,index:i}),l+=k.length-1}i++}}static createElement(e,s){let r=M.createElement("template");return r.innerHTML=e,r}};function R(t,e,s=t,r){if(e===L)return e;let n=r!==void 0?s._$Co?.[r]:s._$Cl,i=X(e)?void 0:e._$litDirective$;return n?.constructor!==i&&(n?._$AO?.(!1),i===void 0?n=void 0:(n=new i(t),n._$AT(t,s,r)),r!==void 0?(s._$Co??(s._$Co=[]))[r]=n:s._$Cl=n),n!==void 0&&(e=R(t,n._$AS(t,e.values),n,r)),e}var _e=class{constructor(e,s){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=s}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:s},parts:r}=this._$AD,n=(e?.creationScope??M).importNode(s,!0);V.currentNode=n;let i=V.nextNode(),o=0,p=0,d=r[0];for(;d!==void 0;){if(o===d.index){let u;d.type===2?u=new z(i,i.nextSibling,this,e):d.type===1?u=new d.ctor(i,d.name,d.strings,this,e):d.type===6&&(u=new Ce(i,this,e)),this._$AV.push(u),d=r[++p]}o!==d?.index&&(i=V.nextNode(),o++)}return V.currentNode=M,n}p(e){let s=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(e,r,s),s+=r.strings.length-2):r._$AI(e[s])),s++}},z=class t{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,s,r,n){this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=e,this._$AB=s,this._$AM=r,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,s=this._$AM;return s!==void 0&&e?.nodeType===11&&(e=s.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,s=this){e=R(this,e,s),X(e)?e===b||e==null||e===""?(this._$AH!==b&&this._$AR(),this._$AH=b):e!==this._$AH&&e!==L&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Nt(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==b&&X(this._$AH)?this._$AA.nextSibling.data=e:this.T(M.createTextNode(e)),this._$AH=e}$(e){let{values:s,_$litType$:r}=e,n=typeof r=="number"?this._$AC(e):(r.el===void 0&&(r.el=Q.createElement(Pt(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===n)this._$AH.p(s);else{let i=new _e(n,this),o=i.u(this.options);i.p(s),this.T(o),this._$AH=i}}_$AC(e){let s=Lt.get(e.strings);return s===void 0&&Lt.set(e.strings,s=new Q(e)),s}k(e){Je(this._$AH)||(this._$AH=[],this._$AR());let s=this._$AH,r,n=0;for(let i of e)n===s.length?s.push(r=new t(this.O(Y()),this.O(Y()),this,this.options)):r=s[n],r._$AI(i),n++;n<s.length&&(this._$AR(r&&r._$AB.nextSibling,n),s.length=n)}_$AR(e=this._$AA.nextSibling,s){for(this._$AP?.(!1,!0,s);e!==this._$AB;){let r=e.nextSibling;e.remove(),e=r}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},D=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,s,r,n,i){this.type=1,this._$AH=b,this._$AN=void 0,this.element=e,this.name=s,this._$AM=n,this.options=i,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=b}_$AI(e,s=this,r,n){let i=this.strings,o=!1;if(i===void 0)e=R(this,e,s,0),o=!X(e)||e!==this._$AH&&e!==L,o&&(this._$AH=e);else{let p=e,d,u;for(e=i[0],d=0;d<i.length-1;d++)u=R(this,p[r+d],s,d),u===L&&(u=this._$AH[d]),o||(o=!X(u)||u!==this._$AH[d]),u===b?e=b:e!==b&&(e+=(u??"")+i[d+1]),this._$AH[d]=u}o&&!n&&this.j(e)}j(e){e===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},$e=class extends D{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===b?void 0:e}},Se=class extends D{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==b)}},Ae=class extends D{constructor(e,s,r,n,i){super(e,s,r,n,i),this.type=5}_$AI(e,s=this){if((e=R(this,e,s,0)??b)===L)return;let r=this._$AH,n=e===b&&r!==b||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,i=e!==b&&(r===b||n);n&&this.element.removeEventListener(this.name,this,r),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},Ce=class{constructor(e,s,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=s,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){R(this,e)}},Vt={M:Ze,P:k,A:Ke,C:1,L:Ht,R:_e,D:Nt,V:R,I:z,H:D,N:Se,U:Ae,B:$e,F:Ce},Ds=J.litHtmlPolyfillSupport;Ds?.(Q,z),(J.litHtmlVersions??(J.litHtmlVersions=[])).push("3.3.1");var Mt=(t,e,s)=>{let r=s?.renderBefore??e,n=r._$litPart$;if(n===void 0){let i=s?.renderBefore??null;r._$litPart$=n=new z(e.insertBefore(Y(),i),i,void 0,s??{})}return n._$AI(t),n};var{I:$r}=Vt;var Rt=t=>t.strings===void 0;var ee=(t,e)=>{let s=t._$AN;if(s===void 0)return!1;for(let r of s)r._$AO?.(e,!1),ee(r,e);return!0},Ee=t=>{let e,s;do{if((e=t._$AM)===void 0)break;s=e._$AN,s.delete(t),t=e}while(s?.size===0)},Dt=t=>{for(let e;e=t._$AM;t=e){let s=e._$AN;if(s===void 0)e._$AN=s=new Set;else if(s.has(t))break;s.add(t),js(e)}};function Us(t){this._$AN!==void 0?(Ee(this),this._$AM=t,Dt(this)):this._$AM=t}function Ws(t,e=!1,s=0){let r=this._$AH,n=this._$AN;if(n!==void 0&&n.size!==0)if(e)if(Array.isArray(r))for(let i=s;i<r.length;i++)ee(r[i],!1),Ee(r[i]);else r!=null&&(ee(r,!1),Ee(r));else ee(this,t)}var js=t=>{t.type==we.CHILD&&(t._$AP??(t._$AP=Ws),t._$AQ??(t._$AQ=Us))},Te=class extends j{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,s,r){super._$AT(e,s,r),Dt(this),this.isConnected=e._$AU}_$AO(e,s=!0){e!==this.isConnected&&(this.isConnected=e,e?this.reconnected?.():this.disconnected?.()),s&&(ee(this,e),Ee(this))}setValue(e){if(Rt(this._$Ct))this._$Ct._$AI(e,this);else{let s=[...this._$Ct._$AH];s[this._$Ci]=e,this._$Ct._$AI(s,this,0)}}disconnected(){}reconnected(){}};var ke=class extends Te{_$Sl(){if(this._$Su!==void 0)return;this._$SW=new _.Computed((()=>{var s;return(s=this._$Sj)===null||s===void 0?void 0:s.get()}));let e=this._$Su=new _.subtle.Watcher((()=>{var s;(s=this._$SO)===null||s===void 0||s._(this),e.watch()}));e.watch(this._$SW)}_$Sp(){var e;this._$Su!==void 0&&(this._$Su.unwatch(this._$SW),this._$SW=void 0,this._$Su=void 0,(e=this._$SO)===null||e===void 0||e.m(this))}commit(){this.setValue(_.subtle.untrack((()=>{var e;return(e=this._$SW)===null||e===void 0?void 0:e.get()})))}render(e){return _.subtle.untrack((()=>e.get()))}update(e,[s]){var r,n;return(r=this._$SO)!==null&&r!==void 0||(this._$SO=(n=e.options)===null||n===void 0?void 0:n.host),s!==this._$Sj&&this._$Sj!==void 0&&this._$Sp(),this._$Sj=s,this._$Sl(),_.subtle.untrack((()=>this._$SW.get()))}disconnected(){this._$Sp()}reconnected(){this._$Sl()}},Xe=Z(ke);var Qe=t=>(e,...s)=>t(e,...s.map((r=>r instanceof _.State||r instanceof _.Computed?Xe(r):r))),zs=Qe(a),Bs=Qe(Ot);var zr=_.State,Br=_.Computed,Ut=(t,e)=>new _.State(t,e);function qs(){if(typeof window>"u")return"light";let t=window.localStorage?.getItem("ds-one:theme");return t==="light"||t==="dark"?t:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var B=Ut(qs());function Wt(t){if(t!==B.get()&&(B.set(t),typeof window<"u")){try{window.localStorage?.setItem("ds-one:theme",t)}catch(s){console.warn("ds-one: unable to persist theme preference",s)}let e=window.document?.documentElement;e&&(e.classList.remove("light-theme","dark-theme"),e.classList.add(`${t}-theme`)),window.dispatchEvent(new CustomEvent("theme-changed",{detail:{theme:t}}))}}if(typeof window<"u"){let t=B.get(),e=window.document?.documentElement;e&&(e.classList.remove("light-theme","dark-theme"),e.classList.add(`${t}-theme`))}var Le=globalThis,Ne=Le.ShadowRoot&&(Le.ShadyCSS===void 0||Le.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,et=Symbol(),jt=new WeakMap,te=class{constructor(e,s,r){if(this._$cssResult$=!0,r!==et)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=s}get styleSheet(){let e=this.o,s=this.t;if(Ne&&e===void 0){let r=s!==void 0&&s.length===1;r&&(e=jt.get(s)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),r&&jt.set(s,e))}return e}toString(){return this.cssText}},zt=t=>new te(typeof t=="string"?t:t+"",void 0,et),y=(t,...e)=>{let s=t.length===1?t[0]:e.reduce(((r,n,i)=>r+(o=>{if(o._$cssResult$===!0)return o.cssText;if(typeof o=="number")return o;throw Error("Value passed to 'css' function must be a 'css' function result: "+o+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[i+1]),t[0]);return new te(s,t,et)},Bt=(t,e)=>{if(Ne)t.adoptedStyleSheets=e.map((s=>s instanceof CSSStyleSheet?s:s.styleSheet));else for(let s of e){let r=document.createElement("style"),n=Le.litNonce;n!==void 0&&r.setAttribute("nonce",n),r.textContent=s.cssText,t.appendChild(r)}},tt=Ne?t=>t:t=>t instanceof CSSStyleSheet?(e=>{let s="";for(let r of e.cssRules)s+=r.cssText;return zt(s)})(t):t;var{is:Fs,defineProperty:Gs,getOwnPropertyDescriptor:Zs,getOwnPropertyNames:Ks,getOwnPropertySymbols:Js,getPrototypeOf:Ys}=Object,O=globalThis,qt=O.trustedTypes,Xs=qt?qt.emptyScript:"",Qs=O.reactiveElementPolyfillSupport,se=(t,e)=>t,st={toAttribute(t,e){switch(e){case Boolean:t=t?Xs:null;break;case Object:case Array:t=t==null?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=t!==null;break;case Number:s=t===null?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch{s=null}}return s}},Gt=(t,e)=>!Fs(t,e),Ft={attribute:!0,type:String,converter:st,reflect:!1,useDefault:!1,hasChanged:Gt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),O.litPropertyMetadata??(O.litPropertyMetadata=new WeakMap);var N=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??(this.l=[])).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,s=Ft){if(s.state&&(s.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((s=Object.create(s)).wrapped=!0),this.elementProperties.set(e,s),!s.noAccessor){let r=Symbol(),n=this.getPropertyDescriptor(e,r,s);n!==void 0&&Gs(this.prototype,e,n)}}static getPropertyDescriptor(e,s,r){let{get:n,set:i}=Zs(this.prototype,e)??{get(){return this[s]},set(o){this[s]=o}};return{get:n,set(o){let p=n?.call(this);i?.call(this,o),this.requestUpdate(e,p,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ft}static _$Ei(){if(this.hasOwnProperty(se("elementProperties")))return;let e=Ys(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(se("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(se("properties"))){let s=this.properties,r=[...Ks(s),...Js(s)];for(let n of r)this.createProperty(n,s[n])}let e=this[Symbol.metadata];if(e!==null){let s=litPropertyMetadata.get(e);if(s!==void 0)for(let[r,n]of s)this.elementProperties.set(r,n)}this._$Eh=new Map;for(let[s,r]of this.elementProperties){let n=this._$Eu(s,r);n!==void 0&&this._$Eh.set(n,s)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let s=[];if(Array.isArray(e)){let r=new Set(e.flat(1/0).reverse());for(let n of r)s.unshift(tt(n))}else e!==void 0&&s.push(tt(e));return s}static _$Eu(e,s){let r=s.attribute;return r===!1?void 0:typeof r=="string"?r:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??(this._$EO=new Set)).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,s=this.constructor.elementProperties;for(let r of s.keys())this.hasOwnProperty(r)&&(e.set(r,this[r]),delete this[r]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Bt(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,s,r){this._$AK(e,r)}_$ET(e,s){let r=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,r);if(n!==void 0&&r.reflect===!0){let i=(r.converter?.toAttribute!==void 0?r.converter:st).toAttribute(s,r.type);this._$Em=e,i==null?this.removeAttribute(n):this.setAttribute(n,i),this._$Em=null}}_$AK(e,s){let r=this.constructor,n=r._$Eh.get(e);if(n!==void 0&&this._$Em!==n){let i=r.getPropertyOptions(n),o=typeof i.converter=="function"?{fromAttribute:i.converter}:i.converter?.fromAttribute!==void 0?i.converter:st;this._$Em=n;let p=o.fromAttribute(s,i.type);this[n]=p??this._$Ej?.get(n)??p,this._$Em=null}}requestUpdate(e,s,r){if(e!==void 0){let n=this.constructor,i=this[e];if(r??(r=n.getPropertyOptions(e)),!((r.hasChanged??Gt)(i,s)||r.useDefault&&r.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(n._$Eu(e,r))))return;this.C(e,s,r)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,s,{useDefault:r,reflect:n,wrapped:i},o){r&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,o??s??this[e]),i!==!0||o!==void 0)||(this._$AL.has(e)||(this.hasUpdated||r||(s=void 0),this._$AL.set(e,s)),n===!0&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(s){Promise.reject(s)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[n,i]of this._$Ep)this[n]=i;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[n,i]of r){let{wrapped:o}=i,p=this[n];o!==!0||this._$AL.has(n)||p===void 0||this.C(n,void 0,i,p)}}let e=!1,s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),this._$EO?.forEach((r=>r.hostUpdate?.())),this.update(s)):this._$EM()}catch(r){throw e=!1,this._$EM(),r}e&&this._$AE(s)}willUpdate(e){}_$AE(e){this._$EO?.forEach((s=>s.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&(this._$Eq=this._$Eq.forEach((s=>this._$ET(s,this[s])))),this._$EM()}updated(e){}firstUpdated(e){}};N.elementStyles=[],N.shadowRootOptions={mode:"open"},N[se("elementProperties")]=new Map,N[se("finalized")]=new Map,Qs?.({ReactiveElement:N}),(O.reactiveElementVersions??(O.reactiveElementVersions=[])).push("2.1.1");var re=globalThis,h=class extends N{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var s;let e=super.createRenderRoot();return(s=this.renderOptions).renderBefore??(s.renderBefore=e.firstChild),e}update(e){let s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=Mt(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return L}};h._$litElement$=!0,h.finalized=!0,re.litElementHydrateSupport?.({LitElement:h});var er=re.litElementPolyfillSupport;er?.({LitElement:h});(re.litElementVersions??(re.litElementVersions=[])).push("4.2.1");var ne=class extends h{constructor(){super(),this._handleLanguageChange=()=>{this._updateText()},this.variant="title",this.disabled=!1,this.bold=!1,this["no-background"]=!1,this.blank=!1,this.key="",this.fallback="",this.language="en-US",this.defaultText="",this.href="",this._loading=!1,this._text=null}connectedCallback(){super.connectedCallback(),this._updateText(),window.addEventListener("language-changed",this._handleLanguageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("language-changed",this._handleLanguageChange)}updated(e){super.updated(e),(e.has("key")||e.has("defaultText"))&&this._updateText()}_updateText(){this.key?this._text=fe(this.key):this._text=this.defaultText||this.fallback||null,this.requestUpdate()}render(){return a`
+var ir = Object.defineProperty, sr = (t, e, r) => e in t ? ir(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Le = (t, e, r) => (sr(t, typeof e != "symbol" ? e + "" : e, r), r), ar = (t, e, r) => {
+  if (!e.has(t))
+    throw TypeError("Cannot " + r);
+}, Ee = (t, e) => {
+  if (Object(e) !== e)
+    throw TypeError('Cannot use the "in" operator on this value');
+  return t.has(e);
+}, oe = (t, e, r) => {
+  if (e.has(t))
+    throw TypeError("Cannot add the same private member more than once");
+  e instanceof WeakSet ? e.add(t) : e.set(t, r);
+}, vt = (t, e, r) => (ar(t, e, "access private method"), r);
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function Bt(t, e) {
+  return Object.is(t, e);
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+let w = null, U = !1, ie = 1;
+const le = /* @__PURE__ */ Symbol("SIGNAL");
+function z(t) {
+  const e = w;
+  return w = t, e;
+}
+function lr() {
+  return w;
+}
+function cr() {
+  return U;
+}
+const rt = {
+  version: 0,
+  lastCleanEpoch: 0,
+  dirty: !1,
+  producerNode: void 0,
+  producerLastReadVersion: void 0,
+  producerIndexOfThis: void 0,
+  nextProducerIndex: 0,
+  liveConsumerNode: void 0,
+  liveConsumerIndexOfThis: void 0,
+  consumerAllowSignalWrites: !1,
+  consumerIsAlwaysLive: !1,
+  producerMustRecompute: () => !1,
+  producerRecomputeValue: () => {
+  },
+  consumerMarkedDirty: () => {
+  },
+  consumerOnSignalRead: () => {
+  }
+};
+function _e(t) {
+  if (U)
+    throw new Error(
+      typeof ngDevMode < "u" && ngDevMode ? "Assertion error: signal read during notification phase" : ""
+    );
+  if (w === null)
+    return;
+  w.consumerOnSignalRead(t);
+  const e = w.nextProducerIndex++;
+  if (P(w), e < w.producerNode.length && w.producerNode[e] !== t && Te(w)) {
+    const r = w.producerNode[e];
+    ke(r, w.producerIndexOfThis[e]);
+  }
+  w.producerNode[e] !== t && (w.producerNode[e] = t, w.producerIndexOfThis[e] = Te(w) ? Rt(t, w, e) : 0), w.producerLastReadVersion[e] = t.version;
+}
+function dr() {
+  ie++;
+}
+function Dt(t) {
+  if (!(!t.dirty && t.lastCleanEpoch === ie)) {
+    if (!t.producerMustRecompute(t) && !vr(t)) {
+      t.dirty = !1, t.lastCleanEpoch = ie;
+      return;
+    }
+    t.producerRecomputeValue(t), t.dirty = !1, t.lastCleanEpoch = ie;
+  }
+}
+function jt(t) {
+  if (t.liveConsumerNode === void 0)
+    return;
+  const e = U;
+  U = !0;
+  try {
+    for (const r of t.liveConsumerNode)
+      r.dirty || ur(r);
+  } finally {
+    U = e;
+  }
+}
+function hr() {
+  return w?.consumerAllowSignalWrites !== !1;
+}
+function ur(t) {
+  var e;
+  t.dirty = !0, jt(t), (e = t.consumerMarkedDirty) == null || e.call(t.wrapper ?? t);
+}
+function pr(t) {
+  return t && (t.nextProducerIndex = 0), z(t);
+}
+function gr(t, e) {
+  if (z(e), !(!t || t.producerNode === void 0 || t.producerIndexOfThis === void 0 || t.producerLastReadVersion === void 0)) {
+    if (Te(t))
+      for (let r = t.nextProducerIndex; r < t.producerNode.length; r++)
+        ke(t.producerNode[r], t.producerIndexOfThis[r]);
+    for (; t.producerNode.length > t.nextProducerIndex; )
+      t.producerNode.pop(), t.producerLastReadVersion.pop(), t.producerIndexOfThis.pop();
+  }
+}
+function vr(t) {
+  P(t);
+  for (let e = 0; e < t.producerNode.length; e++) {
+    const r = t.producerNode[e], o = t.producerLastReadVersion[e];
+    if (o !== r.version || (Dt(r), o !== r.version))
+      return !0;
+  }
+  return !1;
+}
+function Rt(t, e, r) {
+  var o;
+  if (ot(t), P(t), t.liveConsumerNode.length === 0) {
+    (o = t.watched) == null || o.call(t.wrapper);
+    for (let n = 0; n < t.producerNode.length; n++)
+      t.producerIndexOfThis[n] = Rt(t.producerNode[n], t, n);
+  }
+  return t.liveConsumerIndexOfThis.push(r), t.liveConsumerNode.push(e) - 1;
+}
+function ke(t, e) {
+  var r;
+  if (ot(t), P(t), typeof ngDevMode < "u" && ngDevMode && e >= t.liveConsumerNode.length)
+    throw new Error(
+      `Assertion error: active consumer index ${e} is out of bounds of ${t.liveConsumerNode.length} consumers)`
+    );
+  if (t.liveConsumerNode.length === 1) {
+    (r = t.unwatched) == null || r.call(t.wrapper);
+    for (let n = 0; n < t.producerNode.length; n++)
+      ke(t.producerNode[n], t.producerIndexOfThis[n]);
+  }
+  const o = t.liveConsumerNode.length - 1;
+  if (t.liveConsumerNode[e] = t.liveConsumerNode[o], t.liveConsumerIndexOfThis[e] = t.liveConsumerIndexOfThis[o], t.liveConsumerNode.length--, t.liveConsumerIndexOfThis.length--, e < t.liveConsumerNode.length) {
+    const n = t.liveConsumerIndexOfThis[e], i = t.liveConsumerNode[e];
+    P(i), i.producerIndexOfThis[n] = e;
+  }
+}
+function Te(t) {
+  var e;
+  return t.consumerIsAlwaysLive || (((e = t?.liveConsumerNode) == null ? void 0 : e.length) ?? 0) > 0;
+}
+function P(t) {
+  t.producerNode ?? (t.producerNode = []), t.producerIndexOfThis ?? (t.producerIndexOfThis = []), t.producerLastReadVersion ?? (t.producerLastReadVersion = []);
+}
+function ot(t) {
+  t.liveConsumerNode ?? (t.liveConsumerNode = []), t.liveConsumerIndexOfThis ?? (t.liveConsumerIndexOfThis = []);
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function Ut(t) {
+  if (Dt(t), _e(t), t.value === Ne)
+    throw t.error;
+  return t.value;
+}
+function fr(t) {
+  const e = Object.create(wr);
+  e.computation = t;
+  const r = () => Ut(e);
+  return r[le] = e, r;
+}
+const Se = /* @__PURE__ */ Symbol("UNSET"), Ve = /* @__PURE__ */ Symbol("COMPUTING"), Ne = /* @__PURE__ */ Symbol("ERRORED"), wr = {
+  ...rt,
+  value: Se,
+  dirty: !0,
+  error: null,
+  equal: Bt,
+  producerMustRecompute(t) {
+    return t.value === Se || t.value === Ve;
+  },
+  producerRecomputeValue(t) {
+    if (t.value === Ve)
+      throw new Error("Detected cycle in computations.");
+    const e = t.value;
+    t.value = Ve;
+    const r = pr(t);
+    let o, n = !1;
+    try {
+      o = t.computation.call(t.wrapper), n = e !== Se && e !== Ne && t.equal.call(t.wrapper, e, o);
+    } catch (i) {
+      o = Ne, t.error = i;
+    } finally {
+      gr(t, r);
+    }
+    if (n) {
+      t.value = e;
+      return;
+    }
+    t.value = o, t.version++;
+  }
+};
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function mr() {
+  throw new Error();
+}
+let br = mr;
+function yr() {
+  br();
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function xr(t) {
+  const e = Object.create(Cr);
+  e.value = t;
+  const r = () => (_e(e), e.value);
+  return r[le] = e, r;
+}
+function _r() {
+  return _e(this), this.value;
+}
+function kr(t, e) {
+  hr() || yr(), t.equal.call(t.wrapper, t.value, e) || (t.value = e, $r(t));
+}
+const Cr = {
+  ...rt,
+  equal: Bt,
+  value: void 0
+};
+function $r(t) {
+  t.version++, dr(), jt(t);
+}
+/**
+ * @license
+ * Copyright 2024 Bloomberg Finance L.P.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const y = Symbol("node");
+var K;
+((t) => {
+  var e, r, o, n;
+  class i {
+    constructor(c, u = {}) {
+      oe(this, r), Le(this, e);
+      const d = xr(c)[le];
+      if (this[y] = d, d.wrapper = this, u) {
+        const b = u.equals;
+        b && (d.equal = b), d.watched = u[t.subtle.watched], d.unwatched = u[t.subtle.unwatched];
+      }
+    }
+    get() {
+      if (!(0, t.isState)(this))
+        throw new TypeError("Wrong receiver type for Signal.State.prototype.get");
+      return _r.call(this[y]);
+    }
+    set(c) {
+      if (!(0, t.isState)(this))
+        throw new TypeError("Wrong receiver type for Signal.State.prototype.set");
+      if (cr())
+        throw new Error("Writes to signals not permitted during Watcher callback");
+      const u = this[y];
+      kr(u, c);
+    }
+  }
+  e = y, r = /* @__PURE__ */ new WeakSet(), t.isState = (a) => typeof a == "object" && Ee(r, a), t.State = i;
+  class s {
+    // Create a Signal which evaluates to the value returned by the callback.
+    // Callback is called with this signal as the parameter.
+    constructor(c, u) {
+      oe(this, n), Le(this, o);
+      const d = fr(c)[le];
+      if (d.consumerAllowSignalWrites = !0, this[y] = d, d.wrapper = this, u) {
+        const b = u.equals;
+        b && (d.equal = b), d.watched = u[t.subtle.watched], d.unwatched = u[t.subtle.unwatched];
+      }
+    }
+    get() {
+      if (!(0, t.isComputed)(this))
+        throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");
+      return Ut(this[y]);
+    }
+  }
+  o = y, n = /* @__PURE__ */ new WeakSet(), t.isComputed = (a) => typeof a == "object" && Ee(n, a), t.Computed = s, ((a) => {
+    var c, u, v, d;
+    function b(g) {
+      let p, h = null;
+      try {
+        h = z(null), p = g();
+      } finally {
+        z(h);
+      }
+      return p;
+    }
+    a.untrack = b;
+    function $(g) {
+      var p;
+      if (!(0, t.isComputed)(g) && !(0, t.isWatcher)(g))
+        throw new TypeError("Called introspectSources without a Computed or Watcher argument");
+      return ((p = g[y].producerNode) == null ? void 0 : p.map((h) => h.wrapper)) ?? [];
+    }
+    a.introspectSources = $;
+    function T(g) {
+      var p;
+      if (!(0, t.isComputed)(g) && !(0, t.isState)(g))
+        throw new TypeError("Called introspectSinks without a Signal argument");
+      return ((p = g[y].liveConsumerNode) == null ? void 0 : p.map((h) => h.wrapper)) ?? [];
+    }
+    a.introspectSinks = T;
+    function er(g) {
+      if (!(0, t.isComputed)(g) && !(0, t.isState)(g))
+        throw new TypeError("Called hasSinks without a Signal argument");
+      const p = g[y].liveConsumerNode;
+      return p ? p.length > 0 : !1;
+    }
+    a.hasSinks = er;
+    function tr(g) {
+      if (!(0, t.isComputed)(g) && !(0, t.isWatcher)(g))
+        throw new TypeError("Called hasSources without a Computed or Watcher argument");
+      const p = g[y].producerNode;
+      return p ? p.length > 0 : !1;
+    }
+    a.hasSources = tr;
+    class rr {
+      // When a (recursive) source of Watcher is written to, call this callback,
+      // if it hasn't already been called since the last `watch` call.
+      // No signals may be read or written during the notify.
+      constructor(p) {
+        oe(this, u), oe(this, v), Le(this, c);
+        let h = Object.create(rt);
+        h.wrapper = this, h.consumerMarkedDirty = p, h.consumerIsAlwaysLive = !0, h.consumerAllowSignalWrites = !1, h.producerNode = [], this[y] = h;
+      }
+      // Add these signals to the Watcher's set, and set the watcher to run its
+      // notify callback next time any signal in the set (or one of its dependencies) changes.
+      // Can be called with no arguments just to reset the "notified" state, so that
+      // the notify callback will be invoked again.
+      watch(...p) {
+        if (!(0, t.isWatcher)(this))
+          throw new TypeError("Called unwatch without Watcher receiver");
+        vt(this, v, d).call(this, p);
+        const h = this[y];
+        h.dirty = !1;
+        const _ = z(h);
+        for (const re of p)
+          _e(re[y]);
+        z(_);
+      }
+      // Remove these signals from the watched set (e.g., for an effect which is disposed)
+      unwatch(...p) {
+        if (!(0, t.isWatcher)(this))
+          throw new TypeError("Called unwatch without Watcher receiver");
+        vt(this, v, d).call(this, p);
+        const h = this[y];
+        P(h);
+        for (let _ = h.producerNode.length - 1; _ >= 0; _--)
+          if (p.includes(h.producerNode[_].wrapper)) {
+            ke(h.producerNode[_], h.producerIndexOfThis[_]);
+            const re = h.producerNode.length - 1;
+            if (h.producerNode[_] = h.producerNode[re], h.producerIndexOfThis[_] = h.producerIndexOfThis[re], h.producerNode.length--, h.producerIndexOfThis.length--, h.nextProducerIndex--, _ < h.producerNode.length) {
+              const nr = h.producerIndexOfThis[_], gt = h.producerNode[_];
+              ot(gt), gt.liveConsumerIndexOfThis[nr] = _;
+            }
+          }
+      }
+      // Returns the set of computeds in the Watcher's set which are still yet
+      // to be re-evaluated
+      getPending() {
+        if (!(0, t.isWatcher)(this))
+          throw new TypeError("Called getPending without Watcher receiver");
+        return this[y].producerNode.filter((h) => h.dirty).map((h) => h.wrapper);
+      }
+    }
+    c = y, u = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), d = function(g) {
+      for (const p of g)
+        if (!(0, t.isComputed)(p) && !(0, t.isState)(p))
+          throw new TypeError("Called watch/unwatch without a Computed or State argument");
+    }, t.isWatcher = (g) => Ee(u, g), a.Watcher = rr;
+    function or() {
+      var g;
+      return (g = lr()) == null ? void 0 : g.wrapper;
+    }
+    a.currentComputed = or, a.watched = Symbol("watched"), a.unwatched = Symbol("unwatched");
+  })(t.subtle || (t.subtle = {}));
+})(K || (K = {}));
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+new FinalizationRegistry((({ watcher: t, signal: e }) => {
+  t.unwatch(e);
+}));
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Ar = { CHILD: 2 }, Lr = (t) => (...e) => ({ _$litDirective$: t, values: e });
+let Er = class {
+  constructor(e) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(e, r, o) {
+    this._$Ct = e, this._$AM = r, this._$Ci = o;
+  }
+  _$AS(e, r) {
+    return this.update(e, r);
+  }
+  update(e, r) {
+    return this.render(...r);
+  }
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const q = globalThis, ce = q.trustedTypes, ft = ce ? ce.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, qt = "$lit$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, Zt = "?" + A, Sr = `<${Zt}>`, H = document, G = () => H.createComment(""), J = (t) => t === null || typeof t != "object" && typeof t != "function", nt = Array.isArray, Vr = (t) => nt(t) || typeof t?.[Symbol.iterator] == "function", He = `[ 	
+\f\r]`, j = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, wt = /-->/g, mt = />/g, S = RegExp(`>|${He}(?:([^\\s"'>=/]+)(${He}*=${He}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), bt = /'/g, yt = /"/g, Wt = /^(?:script|style|textarea|title)$/i, Hr = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), l = Hr(1), M = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), xt = /* @__PURE__ */ new WeakMap(), V = H.createTreeWalker(H, 129);
+function Ft(t, e) {
+  if (!nt(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ft !== void 0 ? ft.createHTML(e) : e;
+}
+const Mr = (t, e) => {
+  const r = t.length - 1, o = [];
+  let n, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", s = j;
+  for (let a = 0; a < r; a++) {
+    const c = t[a];
+    let u, v, d = -1, b = 0;
+    for (; b < c.length && (s.lastIndex = b, v = s.exec(c), v !== null); ) b = s.lastIndex, s === j ? v[1] === "!--" ? s = wt : v[1] !== void 0 ? s = mt : v[2] !== void 0 ? (Wt.test(v[2]) && (n = RegExp("</" + v[2], "g")), s = S) : v[3] !== void 0 && (s = S) : s === S ? v[0] === ">" ? (s = n ?? j, d = -1) : v[1] === void 0 ? d = -2 : (d = s.lastIndex - v[2].length, u = v[1], s = v[3] === void 0 ? S : v[3] === '"' ? yt : bt) : s === yt || s === bt ? s = S : s === wt || s === mt ? s = j : (s = S, n = void 0);
+    const $ = s === S && t[a + 1].startsWith("/>") ? " " : "";
+    i += s === j ? c + Sr : d >= 0 ? (o.push(u), c.slice(0, d) + qt + c.slice(d) + A + $) : c + A + (d === -2 ? a : $);
+  }
+  return [Ft(t, i + (t[r] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), o];
+};
+class Y {
+  constructor({ strings: e, _$litType$: r }, o) {
+    let n;
+    this.parts = [];
+    let i = 0, s = 0;
+    const a = e.length - 1, c = this.parts, [u, v] = Mr(e, r);
+    if (this.el = Y.createElement(u, o), V.currentNode = this.el.content, r === 2 || r === 3) {
+      const d = this.el.content.firstChild;
+      d.replaceWith(...d.childNodes);
+    }
+    for (; (n = V.nextNode()) !== null && c.length < a; ) {
+      if (n.nodeType === 1) {
+        if (n.hasAttributes()) for (const d of n.getAttributeNames()) if (d.endsWith(qt)) {
+          const b = v[s++], $ = n.getAttribute(d).split(A), T = /([.?@])?(.*)/.exec(b);
+          c.push({ type: 1, index: i, name: T[2], strings: $, ctor: T[1] === "." ? Nr : T[1] === "?" ? Ir : T[1] === "@" ? zr : Ce }), n.removeAttribute(d);
+        } else d.startsWith(A) && (c.push({ type: 6, index: i }), n.removeAttribute(d));
+        if (Wt.test(n.tagName)) {
+          const d = n.textContent.split(A), b = d.length - 1;
+          if (b > 0) {
+            n.textContent = ce ? ce.emptyScript : "";
+            for (let $ = 0; $ < b; $++) n.append(d[$], G()), V.nextNode(), c.push({ type: 2, index: ++i });
+            n.append(d[b], G());
+          }
+        }
+      } else if (n.nodeType === 8) if (n.data === Zt) c.push({ type: 2, index: i });
+      else {
+        let d = -1;
+        for (; (d = n.data.indexOf(A, d + 1)) !== -1; ) c.push({ type: 7, index: i }), d += A.length - 1;
+      }
+      i++;
+    }
+  }
+  static createElement(e, r) {
+    const o = H.createElement("template");
+    return o.innerHTML = e, o;
+  }
+}
+function B(t, e, r = t, o) {
+  if (e === M) return e;
+  let n = o !== void 0 ? r._$Co?.[o] : r._$Cl;
+  const i = J(e) ? void 0 : e._$litDirective$;
+  return n?.constructor !== i && (n?._$AO?.(!1), i === void 0 ? n = void 0 : (n = new i(t), n._$AT(t, r, o)), o !== void 0 ? (r._$Co ?? (r._$Co = []))[o] = n : r._$Cl = n), n !== void 0 && (e = B(t, n._$AS(t, e.values), n, o)), e;
+}
+class Tr {
+  constructor(e, r) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = r;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    const { el: { content: r }, parts: o } = this._$AD, n = (e?.creationScope ?? H).importNode(r, !0);
+    V.currentNode = n;
+    let i = V.nextNode(), s = 0, a = 0, c = o[0];
+    for (; c !== void 0; ) {
+      if (s === c.index) {
+        let u;
+        c.type === 2 ? u = new ee(i, i.nextSibling, this, e) : c.type === 1 ? u = new c.ctor(i, c.name, c.strings, this, e) : c.type === 6 && (u = new Or(i, this, e)), this._$AV.push(u), c = o[++a];
+      }
+      s !== c?.index && (i = V.nextNode(), s++);
+    }
+    return V.currentNode = H, n;
+  }
+  p(e) {
+    let r = 0;
+    for (const o of this._$AV) o !== void 0 && (o.strings !== void 0 ? (o._$AI(e, o, r), r += o.strings.length - 2) : o._$AI(e[r])), r++;
+  }
+}
+class ee {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(e, r, o, n) {
+    this.type = 2, this._$AH = m, this._$AN = void 0, this._$AA = e, this._$AB = r, this._$AM = o, this.options = n, this._$Cv = n?.isConnected ?? !0;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const r = this._$AM;
+    return r !== void 0 && e?.nodeType === 11 && (e = r.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, r = this) {
+    e = B(this, e, r), J(e) ? e === m || e == null || e === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : e !== this._$AH && e !== M && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Vr(e) ? this.k(e) : this._(e);
+  }
+  O(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  T(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+  }
+  _(e) {
+    this._$AH !== m && J(this._$AH) ? this._$AA.nextSibling.data = e : this.T(H.createTextNode(e)), this._$AH = e;
+  }
+  $(e) {
+    const { values: r, _$litType$: o } = e, n = typeof o == "number" ? this._$AC(e) : (o.el === void 0 && (o.el = Y.createElement(Ft(o.h, o.h[0]), this.options)), o);
+    if (this._$AH?._$AD === n) this._$AH.p(r);
+    else {
+      const i = new Tr(n, this), s = i.u(this.options);
+      i.p(r), this.T(s), this._$AH = i;
+    }
+  }
+  _$AC(e) {
+    let r = xt.get(e.strings);
+    return r === void 0 && xt.set(e.strings, r = new Y(e)), r;
+  }
+  k(e) {
+    nt(this._$AH) || (this._$AH = [], this._$AR());
+    const r = this._$AH;
+    let o, n = 0;
+    for (const i of e) n === r.length ? r.push(o = new ee(this.O(G()), this.O(G()), this, this.options)) : o = r[n], o._$AI(i), n++;
+    n < r.length && (this._$AR(o && o._$AB.nextSibling, n), r.length = n);
+  }
+  _$AR(e = this._$AA.nextSibling, r) {
+    for (this._$AP?.(!1, !0, r); e !== this._$AB; ) {
+      const o = e.nextSibling;
+      e.remove(), e = o;
+    }
+  }
+  setConnected(e) {
+    this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
+  }
+}
+class Ce {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(e, r, o, n, i) {
+    this.type = 1, this._$AH = m, this._$AN = void 0, this.element = e, this.name = r, this._$AM = n, this.options = i, o.length > 2 || o[0] !== "" || o[1] !== "" ? (this._$AH = Array(o.length - 1).fill(new String()), this.strings = o) : this._$AH = m;
+  }
+  _$AI(e, r = this, o, n) {
+    const i = this.strings;
+    let s = !1;
+    if (i === void 0) e = B(this, e, r, 0), s = !J(e) || e !== this._$AH && e !== M, s && (this._$AH = e);
+    else {
+      const a = e;
+      let c, u;
+      for (e = i[0], c = 0; c < i.length - 1; c++) u = B(this, a[o + c], r, c), u === M && (u = this._$AH[c]), s || (s = !J(u) || u !== this._$AH[c]), u === m ? e = m : e !== m && (e += (u ?? "") + i[c + 1]), this._$AH[c] = u;
+    }
+    s && !n && this.j(e);
+  }
+  j(e) {
+    e === m ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}
+class Nr extends Ce {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === m ? void 0 : e;
+  }
+}
+class Ir extends Ce {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    this.element.toggleAttribute(this.name, !!e && e !== m);
+  }
+}
+class zr extends Ce {
+  constructor(e, r, o, n, i) {
+    super(e, r, o, n, i), this.type = 5;
+  }
+  _$AI(e, r = this) {
+    if ((e = B(this, e, r, 0) ?? m) === M) return;
+    const o = this._$AH, n = e === m && o !== m || e.capture !== o.capture || e.once !== o.once || e.passive !== o.passive, i = e !== m && (o === m || n);
+    n && this.element.removeEventListener(this.name, this, o), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
+  }
+}
+class Or {
+  constructor(e, r, o) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = r, this.options = o;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    B(this, e);
+  }
+}
+const Pr = q.litHtmlPolyfillSupport;
+Pr?.(Y, ee), (q.litHtmlVersions ?? (q.litHtmlVersions = [])).push("3.3.1");
+const Br = (t, e, r) => {
+  const o = r?.renderBefore ?? e;
+  let n = o._$litPart$;
+  if (n === void 0) {
+    const i = r?.renderBefore ?? null;
+    o._$litPart$ = n = new ee(e.insertBefore(G(), i), i, void 0, r ?? {});
+  }
+  return n._$AI(t), n;
+};
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+K.State;
+K.Computed;
+const it = (t, e) => new K.State(t, e), Dr = {
+  mode: "auto",
+  baseWidth: 280,
+  minScale: 0.75,
+  maxScale: 2
+}, D = it(1), X = it(Dr);
+function st() {
+  if (typeof navigator > "u" || typeof window > "u")
+    return !1;
+  const t = navigator, e = window, r = t && (t.userAgent || t.vendor) || e && e.opera || "", o = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(
+    r
+  ), i = (t && t.maxTouchPoints || 0) > 1, s = e ? Math.min(e.innerWidth || 0, e.innerHeight || 0) <= 820 : !1;
+  return o || i && s;
+}
+function jr() {
+  const t = st(), e = navigator, r = window, n = (e && e.maxTouchPoints || 0) > 1, i = typeof document < "u" ? document.documentElement.clientWidth : r?.innerWidth || 0, s = typeof document < "u" ? document.documentElement.clientHeight : r?.innerHeight || 0, a = t && Math.min(i, s) >= 600;
+  return {
+    isMobile: t,
+    isTablet: a,
+    isDesktop: !t,
+    isTouchCapable: n,
+    deviceType: t ? a ? "tablet" : "mobile" : "desktop",
+    userAgent: e && (e.userAgent || e.vendor) || "",
+    screenWidth: i,
+    screenHeight: s
+  };
+}
+function Rr(t, e = X.get()) {
+  if (e.mode === "fixed")
+    return 1;
+  const r = t / e.baseWidth, o = Math.max(
+    e.minScale,
+    Math.min(e.maxScale, r)
+  );
+  return Number(o.toFixed(3));
+}
+function qn(t) {
+  const r = { ...X.get(), ...t };
+  X.set(r), typeof window < "u" && Kt();
+}
+function Kt() {
+  if (typeof window > "u" || typeof document > "u")
+    return;
+  if (!st()) {
+    D.set(1), document.documentElement.style.setProperty("--sf", "1"), window.dispatchEvent(
+      new CustomEvent("scaling-changed", {
+        detail: { scalingFactor: 1, config: X.get() }
+      })
+    );
+    return;
+  }
+  const e = document.documentElement.clientWidth, r = X.get(), o = Rr(e, r);
+  D.set(o), document.documentElement.style.setProperty("--sf", o.toString()), window.dispatchEvent(
+    new CustomEvent("scaling-changed", {
+      detail: { scalingFactor: o, config: r }
+    })
+  );
+}
+function Zn() {
+  return D.get();
+}
+function Wn(t) {
+  return t * D.get();
+}
+function Fn(t) {
+  const e = D.get();
+  return e === 0 ? t : t / e;
+}
+function ne() {
+  const t = jr();
+  if (typeof document > "u")
+    return t;
+  t.isMobile ? (document.documentElement.classList.add("mobile"), document.documentElement.classList.remove("desktop")) : (document.documentElement.classList.add("desktop"), document.documentElement.classList.remove("mobile")), Kt();
+  const e = D.get();
+  return t.isMobile ? console.log(
+    `[DS one] Mobile device detected - ${t.deviceType} (${t.screenWidth}x${t.screenHeight}), scaling factor: ${e.toFixed(2)}`
+  ) : console.log(
+    `[DS one] Desktop device detected (${t.screenWidth}x${t.screenHeight})`
+  ), typeof window < "u" && window.DS_ONE_DEBUG && console.log("[DS one] Device Info:", {
+    type: t.deviceType,
+    isMobile: t.isMobile,
+    isTablet: t.isTablet,
+    isDesktop: t.isDesktop,
+    isTouchCapable: t.isTouchCapable,
+    viewport: `${t.screenWidth}x${t.screenHeight}`,
+    scalingFactor: e,
+    userAgent: t.userAgent
+  }), t;
+}
+if (typeof window < "u") {
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
+    ne();
+  }) : ne();
+  let t;
+  window.addEventListener("resize", () => {
+    clearTimeout(t), t = setTimeout(() => {
+      ne();
+    }, 100);
+  }), window.addEventListener("orientationchange", () => {
+    setTimeout(ne, 100);
+  });
+}
+function Kn() {
+  if (typeof document > "u" || typeof window > "u")
+    return;
+  let t = document.querySelector('meta[name="viewport"]');
+  t || (t = document.createElement("meta"), t.setAttribute("name", "viewport"), document.head.appendChild(t)), t.setAttribute(
+    "content",
+    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+  );
+  const e = document.createElement("style");
+  e.id = "ds-one-applike-style", e.textContent = `
+    * {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+    html, body {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+  `;
+  const r = document.getElementById("ds-one-applike-style");
+  r && r.remove(), document.head.appendChild(e);
+  let o = 0, n = 0;
+  const i = (a) => {
+    if (a instanceof TouchEvent) {
+      if (a.touches.length > 1) {
+        a.preventDefault(), a.stopPropagation();
+        return;
+      }
+      const c = Date.now();
+      if (a.type === "touchstart") {
+        if (c - o < 300) {
+          a.preventDefault(), a.stopPropagation();
+          return;
+        }
+        n = c;
+      } else if (a.type === "touchend") {
+        if (c - n < 300 && c - o < 300) {
+          a.preventDefault(), a.stopPropagation();
+          return;
+        }
+        o = c;
+      } else if (a.type === "touchmove" && a.touches.length > 1) {
+        a.preventDefault(), a.stopPropagation();
+        return;
+      }
+    }
+    if (a instanceof WheelEvent && (a.ctrlKey || a.metaKey)) {
+      a.preventDefault(), a.stopPropagation();
+      return;
+    }
+  }, s = { passive: !1, capture: !0 };
+  document.addEventListener("touchstart", i, s), document.addEventListener("touchmove", i, s), document.addEventListener("touchend", i, s), document.addEventListener("touchcancel", i, s), document.addEventListener("wheel", i, s), document.addEventListener(
+    "gesturestart",
+    (a) => {
+      a.preventDefault(), a.stopPropagation();
+    },
+    s
+  ), document.addEventListener(
+    "gesturechange",
+    (a) => {
+      a.preventDefault(), a.stopPropagation();
+    },
+    s
+  ), document.addEventListener(
+    "gestureend",
+    (a) => {
+      a.preventDefault(), a.stopPropagation();
+    },
+    s
+  );
+}
+let Ur = {};
+const Gt = [
+  "da",
+  "de",
+  "en",
+  "es",
+  "fr",
+  "it",
+  "ja",
+  "pt",
+  "sv",
+  "zh"
+], qr = new Map(
+  Gt.map((t, e) => [t, e])
+), _t = {
+  da: "Danish",
+  "da-dk": "Danish",
+  de: "German",
+  "de-de": "German",
+  en: "English",
+  "en-us": "English",
+  es: "Spanish",
+  "es-es": "Spanish",
+  fr: "French",
+  "fr-fr": "French",
+  it: "Italian",
+  "it-it": "Italian",
+  ja: "Japanese",
+  "ja-jp": "Japanese",
+  pt: "Portuguese",
+  "pt-pt": "Portuguese",
+  sv: "Swedish",
+  "sv-se": "Swedish",
+  zh: "Chinese",
+  "zh-cn": "Chinese",
+  "zh-tw": "Chinese",
+  "zh-hans": "Chinese",
+  "zh-hant": "Chinese"
+}, kt = /* @__PURE__ */ new Map();
+let Ct = !1;
+const Jt = "./translations.json";
+let $t = !1;
+function At(t) {
+  if (!t)
+    return null;
+  const e = t.trim();
+  return e ? e.startsWith("./") || e.startsWith("../") || e.startsWith("/") || /^https?:\/\//i.test(e) ? e : `./${e}` : null;
+}
+function Zr() {
+  if (typeof document > "u")
+    return null;
+  const e = document.querySelector(
+    "script[data-ds-one-translations]"
+  )?.getAttribute(
+    "data-ds-one-translations"
+  );
+  if (e)
+    return e;
+  const r = document.querySelector('meta[name="ds-one:translations"]')?.getAttribute("content");
+  if (r)
+    return r;
+  const o = document.querySelector('link[rel="ds-one-translations"]')?.getAttribute("href");
+  return o || null;
+}
+function Wr() {
+  const t = [], e = typeof window < "u" ? window.DS_ONE_TRANSLATIONS_FILE : null, r = Zr(), o = At(e ?? "");
+  o && t.push(o);
+  const n = At(r ?? "");
+  return n && !t.includes(n) && t.push(n), t.length === 0 && t.push(Jt), t;
+}
+function Fr(t) {
+  return !t || typeof t != "object" ? !1 : Object.values(t).every(
+    (e) => e && typeof e == "object"
+  );
+}
+async function Kr(t) {
+  try {
+    const e = await fetch(t);
+    if (!e.ok)
+      return null;
+    const r = await e.json();
+    return Fr(r) ? Object.keys(r).length === 0 ? (console.warn(`[DS one] No languages found in ${t}`), null) : r : (console.warn(
+      `[DS one] Invalid translation format in ${t}. Expected object with language codes as keys.`
+    ), null);
+  } catch {
+    return null;
+  }
+}
+async function Lt() {
+  if ($t || ($t = !0, typeof window > "u"))
+    return !1;
+  if (window.DS_ONE_TRANSLATIONS && Object.keys(window.DS_ONE_TRANSLATIONS).length > 0)
+    return console.log(
+      `[DS one] Translations already loaded (${Object.keys(window.DS_ONE_TRANSLATIONS).length} languages), skipping auto-load`
+    ), !0;
+  const t = Wr();
+  for (const e of t) {
+    const r = await Kr(e);
+    if (!r)
+      continue;
+    window.DS_ONE_TRANSLATIONS = r;
+    const o = Object.keys(r);
+    return console.log(
+      `[DS one] External translations loaded from ${e}: ${o.length} language(s) – ${o.join(", ")}`
+    ), window.dispatchEvent(new CustomEvent("translations-ready")), !0;
+  }
+  return console.info(
+    `[DS one] No external translations found at ${t[0] ?? Jt}. Using bundled translations.`
+  ), !1;
+}
+function $e() {
+  return typeof window < "u" && window.DS_ONE_TRANSLATIONS ? window.DS_ONE_TRANSLATIONS : Ur;
+}
+let L = $e();
+const C = "en";
+function te(t) {
+  return t ? t.toLowerCase().split(/[-_]/)[0] ?? "" : "";
+}
+function Et(t) {
+  const e = te(t), r = qr.get(e);
+  return typeof r == "number" ? r : Gt.length;
+}
+function Yt(t) {
+  return [...t].sort((e, r) => {
+    const o = Et(e), n = Et(r);
+    return o !== n ? o - n : e.localeCompare(r);
+  });
+}
+function Gr(t, e) {
+  const r = t?.replace("_", "-");
+  if (r)
+    try {
+      let o = kt.get(r);
+      o || (o = new Intl.DisplayNames([r], {
+        type: "language"
+      }), kt.set(r, o));
+      const n = e.replace("_", "-"), i = o.of(n);
+      if (i && i !== n)
+        return i;
+      const s = o.of(te(n));
+      if (s)
+        return s;
+    } catch {
+      Ct || (console.info(
+        "[DS one] Intl.DisplayNames is not available, using fallback language names."
+      ), Ct = !0);
+    }
+}
+function Jr(t) {
+  const e = t.toLowerCase().replace("_", "-"), r = _t[e];
+  if (r)
+    return r;
+  const o = te(e);
+  return _t[o];
+}
+function Yr(t, e = {}) {
+  if (!t)
+    return "";
+  const r = [];
+  e.locale && r.push(e.locale), typeof navigator < "u" && (Array.isArray(navigator.languages) && r.push(...navigator.languages), navigator.language && r.push(navigator.language)), r.push(C), r.push("en");
+  const o = /* @__PURE__ */ new Set();
+  for (const s of r) {
+    if (!s || o.has(s))
+      continue;
+    o.add(s);
+    const a = Gr(s, t);
+    if (a)
+      return a;
+  }
+  const n = Jr(t);
+  if (n)
+    return n;
+  const i = te(t);
+  return i ? i.toUpperCase() : t;
+}
+const St = {
+  da: "da",
+  "da-dk": "da",
+  de: "de",
+  "de-de": "de",
+  en: "en",
+  "en-us": "en",
+  "en-gb": "en",
+  es: "es",
+  "es-es": "es",
+  "es-mx": "es",
+  fr: "fr",
+  "fr-fr": "fr",
+  it: "it",
+  "it-it": "it",
+  ja: "ja",
+  "ja-jp": "ja",
+  pt: "pt",
+  "pt-pt": "pt",
+  "pt-br": "pt",
+  sv: "sv",
+  "sv-se": "sv",
+  zh: "zh",
+  "zh-cn": "zh",
+  "zh-hans": "zh",
+  "zh-tw": "zh",
+  "zh-hant": "zh"
+};
+function Vt(t) {
+  if (!t)
+    return null;
+  const e = t.toLowerCase().replace("_", "-"), r = St[e];
+  if (r)
+    return r;
+  const o = te(e), n = St[o];
+  return n || t;
+}
+function Xr() {
+  if (typeof navigator > "u")
+    return C;
+  const t = navigator.language;
+  if (t) {
+    const e = Vt(t);
+    if (e)
+      return e;
+  }
+  if (Array.isArray(navigator.languages))
+    for (const e of navigator.languages) {
+      const r = Vt(e);
+      if (r)
+        return r;
+    }
+  return C;
+}
+typeof window < "u" && window.localStorage?.getItem(
+  "ds-one:language"
+);
+const k = {
+  value: localStorage.getItem("language") || Xr(),
+  set: function(t) {
+    this.value = t, localStorage.setItem("language", t), window.dispatchEvent(
+      new CustomEvent("language-changed", {
+        detail: { language: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+typeof window < "u" && (document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
+  Lt();
+}) : Lt());
+typeof window < "u" && window.addEventListener("translations-ready", () => {
+  L = $e(), window.dispatchEvent(new CustomEvent("translations-loaded"));
+  const t = k.value;
+  window.dispatchEvent(
+    new CustomEvent("language-changed", {
+      detail: { language: t },
+      bubbles: !0,
+      composed: !0
+    })
+  );
+});
+setTimeout(() => {
+  window.dispatchEvent(new CustomEvent("translations-loaded"));
+  const t = k.value;
+  window.dispatchEvent(
+    new CustomEvent("language-changed", {
+      detail: { language: t },
+      bubbles: !0,
+      composed: !0
+    })
+  );
+}, 100);
+function Z(t) {
+  const e = k.value;
+  return L?.[e]?.[t] ? L[e][t] : e !== C && L?.[C]?.[t] ? L[C][t] : (console.warn(
+    `[DS one (Internationalization)] No translation found for key "${t}"`
+  ), t);
+}
+function Gn(t, e = k.value) {
+  if (!t)
+    return !1;
+  const r = L?.[e];
+  return !!(r && Object.prototype.hasOwnProperty.call(r, t) || e !== C && L?.[C] && Object.prototype.hasOwnProperty.call(L[C], t));
+}
+function se(t) {
+  return Z(t);
+}
+function Jn() {
+  const t = $e();
+  if (t && Object.keys(t).length > 0) {
+    const e = Object.keys(t);
+    return Promise.resolve(Yt(e));
+  }
+  return Promise.resolve([C]);
+}
+function Ht() {
+  const t = $e();
+  return t && Object.keys(t).length > 0 ? Yt(Object.keys(t)) : [C];
+}
+function Yn(t, e) {
+  console.log(
+    `Loading additional translations for ${t}:`,
+    Object.keys(e).length,
+    "keys"
+  );
+}
+function Mt(t) {
+  localStorage.setItem("language", t), k.set(t), window.dispatchEvent(
+    new CustomEvent("language-changed", {
+      detail: { language: t },
+      bubbles: !0,
+      composed: !0
+    })
+  );
+}
+function N(t) {
+  if (!(typeof window > "u"))
+    try {
+      const e = window.localStorage?.getItem("ds-one:preferences"), o = { ...e ? JSON.parse(e) : {}, ...t };
+      window.localStorage?.setItem("ds-one:preferences", JSON.stringify(o));
+    } catch (e) {
+      console.warn("ds-one: unable to persist preferences", e);
+    }
+}
+const Qr = {
+  da: "kr.",
+  nb: "kr.",
+  sv: "kr.",
+  de: "€",
+  en: "$",
+  pt: "€",
+  es: "€",
+  zh: "¥",
+  ja: "¥",
+  ko: "₩"
+};
+function Xn(t) {
+  const { language: e, country: r } = t;
+  if (r) {
+    const n = r.toUpperCase();
+    if (n === "US" || n === "USA")
+      return "$";
+    if (n === "GB" || n === "UK")
+      return "£";
+    if (n === "JP" || n === "JPN" || n === "CN" || n === "CHN")
+      return "¥";
+    if (n === "KR" || n === "KOR")
+      return "₩";
+  }
+  const o = e.toLowerCase().split(/[-_]/)[0];
+  return Qr[o] || "$";
+}
+function eo() {
+  if (typeof window > "u")
+    return "light";
+  const t = window.localStorage?.getItem("ds-one:theme");
+  return t === "light" || t === "dark" ? t : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+const Q = it(eo());
+function to(t) {
+  if (t !== Q.get() && (Q.set(t), typeof window < "u")) {
+    try {
+      window.localStorage?.setItem("ds-one:theme", t);
+    } catch (r) {
+      console.warn("ds-one: unable to persist theme preference", r);
+    }
+    const e = window.document?.documentElement;
+    e && (e.classList.remove("light-theme", "dark-theme"), e.classList.add(`${t}-theme`)), window.dispatchEvent(
+      new CustomEvent("theme-changed", { detail: { theme: t } })
+    );
+  }
+}
+if (typeof window < "u") {
+  const t = Q.get(), e = window.document?.documentElement;
+  e && (e.classList.remove("light-theme", "dark-theme"), e.classList.add(`${t}-theme`));
+}
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ae = globalThis, at = ae.ShadowRoot && (ae.ShadyCSS === void 0 || ae.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, lt = Symbol(), Tt = /* @__PURE__ */ new WeakMap();
+let Xt = class {
+  constructor(e, r, o) {
+    if (this._$cssResult$ = !0, o !== lt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = e, this.t = r;
+  }
+  get styleSheet() {
+    let e = this.o;
+    const r = this.t;
+    if (at && e === void 0) {
+      const o = r !== void 0 && r.length === 1;
+      o && (e = Tt.get(r)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), o && Tt.set(r, e));
+    }
+    return e;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const x = (t) => new Xt(typeof t == "string" ? t : t + "", void 0, lt), Ae = (t, ...e) => {
+  const r = t.length === 1 ? t[0] : e.reduce(((o, n, i) => o + ((s) => {
+    if (s._$cssResult$ === !0) return s.cssText;
+    if (typeof s == "number") return s;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + s + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(n) + t[i + 1]), t[0]);
+  return new Xt(r, t, lt);
+}, ro = (t, e) => {
+  if (at) t.adoptedStyleSheets = e.map(((r) => r instanceof CSSStyleSheet ? r : r.styleSheet));
+  else for (const r of e) {
+    const o = document.createElement("style"), n = ae.litNonce;
+    n !== void 0 && o.setAttribute("nonce", n), o.textContent = r.cssText, t.appendChild(o);
+  }
+}, Nt = at ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
+  let r = "";
+  for (const o of e.cssRules) r += o.cssText;
+  return x(r);
+})(t) : t;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: oo, defineProperty: no, getOwnPropertyDescriptor: io, getOwnPropertyNames: so, getOwnPropertySymbols: ao, getPrototypeOf: lo } = Object, E = globalThis, It = E.trustedTypes, co = It ? It.emptyScript : "", ho = E.reactiveElementPolyfillSupport, W = (t, e) => t, Ie = { toAttribute(t, e) {
+  switch (e) {
+    case Boolean:
+      t = t ? co : null;
+      break;
+    case Object:
+    case Array:
+      t = t == null ? t : JSON.stringify(t);
+  }
+  return t;
+}, fromAttribute(t, e) {
+  let r = t;
+  switch (e) {
+    case Boolean:
+      r = t !== null;
+      break;
+    case Number:
+      r = t === null ? null : Number(t);
+      break;
+    case Object:
+    case Array:
+      try {
+        r = JSON.parse(t);
+      } catch {
+        r = null;
+      }
+  }
+  return r;
+} }, Qt = (t, e) => !oo(t, e), zt = { attribute: !0, type: String, converter: Ie, reflect: !1, useDefault: !1, hasChanged: Qt };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), E.litPropertyMetadata ?? (E.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class I extends HTMLElement {
+  static addInitializer(e) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(e);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(e, r = zt) {
+    if (r.state && (r.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((r = Object.create(r)).wrapped = !0), this.elementProperties.set(e, r), !r.noAccessor) {
+      const o = Symbol(), n = this.getPropertyDescriptor(e, o, r);
+      n !== void 0 && no(this.prototype, e, n);
+    }
+  }
+  static getPropertyDescriptor(e, r, o) {
+    const { get: n, set: i } = io(this.prototype, e) ?? { get() {
+      return this[r];
+    }, set(s) {
+      this[r] = s;
+    } };
+    return { get: n, set(s) {
+      const a = n?.call(this);
+      i?.call(this, s), this.requestUpdate(e, a, o);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(e) {
+    return this.elementProperties.get(e) ?? zt;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(W("elementProperties"))) return;
+    const e = lo(this);
+    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(W("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(W("properties"))) {
+      const r = this.properties, o = [...so(r), ...ao(r)];
+      for (const n of o) this.createProperty(n, r[n]);
+    }
+    const e = this[Symbol.metadata];
+    if (e !== null) {
+      const r = litPropertyMetadata.get(e);
+      if (r !== void 0) for (const [o, n] of r) this.elementProperties.set(o, n);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [r, o] of this.elementProperties) {
+      const n = this._$Eu(r, o);
+      n !== void 0 && this._$Eh.set(n, r);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(e) {
+    const r = [];
+    if (Array.isArray(e)) {
+      const o = new Set(e.flat(1 / 0).reverse());
+      for (const n of o) r.unshift(Nt(n));
+    } else e !== void 0 && r.push(Nt(e));
+    return r;
+  }
+  static _$Eu(e, r) {
+    const o = r.attribute;
+    return o === !1 ? void 0 : typeof o == "string" ? o : typeof e == "string" ? e.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise(((e) => this.enableUpdating = e)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((e) => e(this)));
+  }
+  addController(e) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
+  }
+  removeController(e) {
+    this._$EO?.delete(e);
+  }
+  _$E_() {
+    const e = /* @__PURE__ */ new Map(), r = this.constructor.elementProperties;
+    for (const o of r.keys()) this.hasOwnProperty(o) && (e.set(o, this[o]), delete this[o]);
+    e.size > 0 && (this._$Ep = e);
+  }
+  createRenderRoot() {
+    const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return ro(e, this.constructor.elementStyles), e;
+  }
+  connectedCallback() {
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), this._$EO?.forEach(((e) => e.hostConnected?.()));
+  }
+  enableUpdating(e) {
+  }
+  disconnectedCallback() {
+    this._$EO?.forEach(((e) => e.hostDisconnected?.()));
+  }
+  attributeChangedCallback(e, r, o) {
+    this._$AK(e, o);
+  }
+  _$ET(e, r) {
+    const o = this.constructor.elementProperties.get(e), n = this.constructor._$Eu(e, o);
+    if (n !== void 0 && o.reflect === !0) {
+      const i = (o.converter?.toAttribute !== void 0 ? o.converter : Ie).toAttribute(r, o.type);
+      this._$Em = e, i == null ? this.removeAttribute(n) : this.setAttribute(n, i), this._$Em = null;
+    }
+  }
+  _$AK(e, r) {
+    const o = this.constructor, n = o._$Eh.get(e);
+    if (n !== void 0 && this._$Em !== n) {
+      const i = o.getPropertyOptions(n), s = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : Ie;
+      this._$Em = n;
+      const a = s.fromAttribute(r, i.type);
+      this[n] = a ?? this._$Ej?.get(n) ?? a, this._$Em = null;
+    }
+  }
+  requestUpdate(e, r, o) {
+    if (e !== void 0) {
+      const n = this.constructor, i = this[e];
+      if (o ?? (o = n.getPropertyOptions(e)), !((o.hasChanged ?? Qt)(i, r) || o.useDefault && o.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, o)))) return;
+      this.C(e, r, o);
+    }
+    this.isUpdatePending === !1 && (this._$ES = this._$EP());
+  }
+  C(e, r, { useDefault: o, reflect: n, wrapped: i }, s) {
+    o && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, s ?? r ?? this[e]), i !== !0 || s !== void 0) || (this._$AL.has(e) || (this.hasUpdated || o || (r = void 0), this._$AL.set(e, r)), n === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
+  }
+  async _$EP() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$ES;
+    } catch (r) {
+      Promise.reject(r);
+    }
+    const e = this.scheduleUpdate();
+    return e != null && await e, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [n, i] of this._$Ep) this[n] = i;
+        this._$Ep = void 0;
+      }
+      const o = this.constructor.elementProperties;
+      if (o.size > 0) for (const [n, i] of o) {
+        const { wrapped: s } = i, a = this[n];
+        s !== !0 || this._$AL.has(n) || a === void 0 || this.C(n, void 0, i, a);
+      }
+    }
+    let e = !1;
+    const r = this._$AL;
+    try {
+      e = this.shouldUpdate(r), e ? (this.willUpdate(r), this._$EO?.forEach(((o) => o.hostUpdate?.())), this.update(r)) : this._$EM();
+    } catch (o) {
+      throw e = !1, this._$EM(), o;
+    }
+    e && this._$AE(r);
+  }
+  willUpdate(e) {
+  }
+  _$AE(e) {
+    this._$EO?.forEach(((r) => r.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(e) {
+    return !0;
+  }
+  update(e) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach(((r) => this._$ET(r, this[r])))), this._$EM();
+  }
+  updated(e) {
+  }
+  firstUpdated(e) {
+  }
+}
+I.elementStyles = [], I.shadowRootOptions = { mode: "open" }, I[W("elementProperties")] = /* @__PURE__ */ new Map(), I[W("finalized")] = /* @__PURE__ */ new Map(), ho?.({ ReactiveElement: I }), (E.reactiveElementVersions ?? (E.reactiveElementVersions = [])).push("2.1.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const F = globalThis;
+class f extends I {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var r;
+    const e = super.createRenderRoot();
+    return (r = this.renderOptions).renderBefore ?? (r.renderBefore = e.firstChild), e;
+  }
+  update(e) {
+    const r = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Br(r, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(!0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(!1);
+  }
+  render() {
+    return M;
+  }
+}
+f._$litElement$ = !0, f.finalized = !0, F.litElementHydrateSupport?.({ LitElement: f });
+const uo = F.litElementPolyfillSupport;
+uo?.({ LitElement: f });
+(F.litElementVersions ?? (F.litElementVersions = [])).push("4.2.1");
+const po = ':host{display:inline;font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:calc(var(--type-lineheight-default) * var(--sf));letter-spacing:calc(var(--type-letterspacing-default) * var(--sf));text-align:var(--text-align-default);text-transform:var(--text-transform-default);text-decoration:var(--text-decoration-default)}:host([data-language="ja"]){font-family:var(--typeface-regular-jp)}:host([data-language="zh"]),:host([data-language="zh-hant"]){font-family:var(--typeface-regular-zh-hant);font-weight:800}:host([data-language="zh-hans"]){font-family:var(--typeface-regular-zh-hans);font-weight:800}', ct = class ct extends f {
+  static get properties() {
+    return {
+      text: { type: String, reflect: !0 },
+      defaultValue: { type: String, reflect: !0, attribute: "default-value" },
+      fallback: { type: String, reflect: !0 },
+      // Kept for backward compatibility
+      _text: { type: String, state: !0 }
+    };
+  }
+  constructor() {
+    super(), this.text = "", this.defaultValue = "", this.fallback = "", this._text = "", this._currentLanguage = k.value, this.boundHandlers = {
+      languageChanged: (() => {
+        console.log("Language changed event received in ds-text"), this._currentLanguage = k.value, this._updateLanguageAttribute(), this._loadText(), this.requestUpdate();
+      })
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._currentLanguage = k.value, this._updateLanguageAttribute(), this._loadText(), window.addEventListener(
+      "language-changed",
+      this.boundHandlers.languageChanged
+    ), window.addEventListener(
+      "translations-loaded",
+      this.boundHandlers.languageChanged
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener(
+      "language-changed",
+      this.boundHandlers.languageChanged
+    ), window.removeEventListener(
+      "translations-loaded",
+      this.boundHandlers.languageChanged
+    );
+  }
+  updated(e) {
+    super.updated(e), (e.has("text") || e.has("defaultValue")) && this._loadText();
+  }
+  _updateLanguageAttribute() {
+    const r = (this._currentLanguage || k.value || "").toLowerCase().split(/[-_]/).filter(Boolean), o = r[0] || "";
+    if (o === "ja") {
+      this.setAttribute("data-language", "ja");
+      return;
+    }
+    if (o === "zh") {
+      const n = r.includes("hans") || r.includes("cn") || r.includes("sg"), i = r.includes("hant") || r.includes("tw") || r.includes("hk") || r.includes("mo");
+      n ? this.setAttribute("data-language", "zh-hans") : i ? this.setAttribute("data-language", "zh-hant") : this.setAttribute("data-language", "zh");
+      return;
+    }
+    this.removeAttribute("data-language");
+  }
+  _loadText() {
+    if (!this.text) {
+      this._text = this.defaultValue || this.fallback || "", this._updateLanguageAttribute(), this.requestUpdate();
+      return;
+    }
+    try {
+      const e = se(this.text);
+      this._text = e || this.defaultValue || this.fallback || this.text;
+    } catch (e) {
+      console.error("Error loading text for text:", this.text, e), this._text = this.defaultValue || this.fallback || this.text;
+    }
+    this._updateLanguageAttribute(), this.requestUpdate();
+  }
+  render() {
+    return l`<span>${this._text || this.defaultValue || this.text}</span>`;
+  }
+};
+ct.styles = x(po);
+let ze = ct;
+customElements.define("ds-text", ze);
+const go = "button{max-height:calc(var(--08) * var(--sf));display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0 calc(.5px * var(--sf));color:var(--button-text-color);font-family:var(--typeface-regular)}button.title{background-color:var(--button-background-color-secondary);color:var(--button-text-color)}button.primary{background-color:var(--accent-color);color:var(--button-text-color);text-decoration-line:none;font-family:var(--typeface-regular)}button.secondary{background-color:var(--button-background-color-secondary);color:var(--button-text-color);font-family:var(--typeface-regular)}button.text{background-color:transparent;color:var(--button-color, var(--button-text-color));font-family:var(--typeface-regular);padding:0;text-decoration:none}button.text:hover{opacity:.8;text-decoration:none}button[bold]{font-weight:var(--type-weight-bold);font-family:var(--typeface-medium)}button[no-background]{background-color:transparent;max-height:var(--1);padding:0;color:var(--button-color, var(--button-text-color-secondary))}button[no-background][bold]{font-weight:var(--type-weight-bold);font-family:var(--typeface-medium);color:var(--button-color, var(--button-text-color-secondary))}.loading{opacity:.7}", de = class de extends f {
+  constructor() {
+    super(), this.variant = "title", this.disabled = !1, this.bold = !1, this["no-background"] = !1, this.blank = !1, this.text = "", this.fallback = "", this.language = "en-US", this.defaultText = "", this.href = "", this._loading = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    const e = this.text || this.defaultText || this.fallback;
+    return l`
       <button
         class=${this.variant}
         ?disabled=${this.disabled}
@@ -8,59 +1606,561 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._text?this._text:a`<slot></slot>`}
+        ${e ? l`<ds-text
+              .text=${this.text}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>` : l`<slot></slot>`}
       </button>
-    `}_handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}if(this.href){e.preventDefault(),e.stopPropagation(),this.blank?window.open(this.href,"_blank","noopener,noreferrer"):window.location.href=this.href;return}}};ne.properties={variant:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},bold:{type:Boolean,reflect:!0},"no-background":{type:Boolean,reflect:!0,attribute:"no-background"},blank:{type:Boolean,reflect:!0},key:{type:String},fallback:{type:String},language:{type:String},defaultText:{type:String,attribute:"default-text"},href:{type:String},_loading:{type:Boolean,state:!0},_text:{type:String,state:!0}};ne.styles=y`
-    button {
-      max-height: calc(var(--08) * var(--scaling-factor));
+    `;
+  }
+  _handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault(), e.stopPropagation();
+      return;
+    }
+    if (this.href) {
+      e.preventDefault(), e.stopPropagation(), this.blank ? window.open(this.href, "_blank", "noopener,noreferrer") : window.location.href = this.href;
+      return;
+    }
+  }
+};
+de.properties = {
+  variant: { type: String, reflect: !0 },
+  disabled: { type: Boolean, reflect: !0 },
+  bold: { type: Boolean, reflect: !0 },
+  "no-background": {
+    type: Boolean,
+    reflect: !0,
+    attribute: "no-background"
+  },
+  blank: { type: Boolean, reflect: !0 },
+  text: { type: String },
+  fallback: { type: String },
+  language: { type: String },
+  defaultText: { type: String, attribute: "default-text" },
+  href: { type: String },
+  _loading: { type: Boolean, state: !0 }
+}, de.styles = x(go);
+let Oe = de;
+customElements.define("ds-button", Oe);
+const vo = ':host{display:flex;position:absolute;top:0;left:0;right:0;width:100%;height:calc(var(--unit) * var(--sf, 1));align-items:center;justify-content:space-between;padding:0 calc(var(--unit) * var(--sf, 1));box-sizing:border-box;z-index:9999}:host([variant="warning"]){background-color:color-mix(in srgb,var(--yellow) 50%,transparent);--banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);--banner-action-color: var(--slate)}:host([variant="info"]){background-color:rgba(var(--sharp-blue-rgb, 0, 122, 255),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--white, #fff)}:host([variant="success"]){background-color:rgba(var(--apple-green-rgb, 52, 199, 89),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--white, #fff)}:host([variant="error"]){background-color:rgba(var(--tuned-red-rgb, 255, 59, 48),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--slate, #1e1e1e)}.text-wrapper{flex:1;cursor:pointer;user-select:none}.text-wrapper ds-text,.text-wrapper .version{color:var(--banner-text-color)}.action-wrapper{font-size:calc(12px * var(--sf, 1))}.action-wrapper a{color:var(--banner-action-color);text-decoration:none;font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));cursor:pointer;pointer-events:auto;display:inline-block}.action-wrapper a:hover{opacity:.8}.action-wrapper ds-text{color:var(--banner-action-color);font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));pointer-events:none}', he = class he extends f {
+  constructor() {
+    super(...arguments), this.text = "", this.action = "", this.href = "", this.mailto = "", this.subject = "", this.describe = "", this.appVersion = "", this.variant = "warning", this.version = "", this._showVersion = !1, this._boundUpdate = () => this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("translations-loaded", this._boundUpdate), window.addEventListener("language-changed", this._boundUpdate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("translations-loaded", this._boundUpdate), window.removeEventListener("language-changed", this._boundUpdate);
+  }
+  _toggleVersion() {
+    this.version && (this._showVersion = !this._showVersion);
+  }
+  _getMailtoHref() {
+    if (this.href && this.href !== "#") return this.href;
+    if (this.mailto)
+      try {
+        const e = this.subject ? se(this.subject) || this.subject : "Issue report", r = this.describe ? se(this.describe) || this.describe : "Describe the issue:", o = this.appVersion ? se(this.appVersion) || this.appVersion : "App version:", n = `${r}
+
+
+${o} ${this.version || ""}`;
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(e)}&body=${encodeURIComponent(n)}`;
+      } catch {
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    return "#";
+  }
+  render() {
+    const e = this._getMailtoHref();
+    return l`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version ? l`<ds-text default-value=${this.version}></ds-text>` : l`<ds-text text=${this.text}><slot></slot></ds-text>`}
+      </div>
+      ${this.action ? l`
+            <div class="action-wrapper">
+              <a href=${e}>
+                <ds-text text=${this.action}></ds-text>
+              </a>
+            </div>
+          ` : ""}
+    `;
+  }
+};
+he.properties = {
+  text: { type: String },
+  action: { type: String },
+  href: { type: String },
+  mailto: { type: String },
+  subject: { type: String },
+  describe: { type: String },
+  appVersion: { type: String, attribute: "app-version" },
+  variant: { type: String },
+  version: { type: String },
+  _showVersion: { type: Boolean, state: !0 }
+}, he.styles = x(vo);
+let Pe = he;
+customElements.define("ds-banner", Pe);
+const ue = class ue extends f {
+  constructor() {
+    super(), this.variant = "default", this.elevation = 1, this.interactive = !1, this.disabled = !1, this.padding = "medium";
+  }
+  render() {
+    return l`
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+ue.properties = {
+  variant: { type: String, reflect: !0 },
+  elevation: { type: Number, reflect: !0 },
+  interactive: { type: Boolean, reflect: !0 },
+  disabled: { type: Boolean, reflect: !0 },
+  padding: { type: String, reflect: !0 }
+}, ue.styles = Ae`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border-radius: calc(var(--025) * var(--sf, 1));
+      background-color: var(--card-background, var(--surface-color, #fff));
+      color: var(--text-color-primary);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+    }
+
+    :host([variant="outlined"]) {
+      background-color: transparent;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
+    }
+
+    :host([variant="elevated"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
       border: none;
-      cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
-      color: var(--button-text-color);
-      font-family: var(--typeface);
     }
 
-    button.title {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
+    :host([elevation="0"]) {
+      box-shadow: none;
     }
 
-    button.primary {
-      background-color: var(--accent-color);
-      color: var(--button-text-color);
-      text-decoration-line: none;
-      font-family: var(--typeface);
+    :host([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     }
 
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      font-family: var(--typeface);
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
     }
 
-    button[bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
+    :host([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
     }
 
-    button[no-background] {
-      background-color: transparent;
-      max-height: var(--1);
+    :host([interactive]) {
+      cursor: pointer;
+    }
+
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host([padding="none"]) {
       padding: 0;
-      color: var(--button-color, var(--button-text-color-secondary));
     }
 
-    button[no-background][bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-      color: var(--button-color, var(--button-text-color-secondary));
+    :host([padding="small"]) {
+      padding: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
+    }
+
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
     }
 
-    .loading {
-      opacity: 0.7;
+    .card-content {
+      width: 100%;
+      height: 100%;
     }
-  `;customElements.define("ds-button",ne);var ie=class extends j{constructor(e){if(super(e),this.it=b,e.type!==we.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===b||e==null)return this._t=void 0,this.it=e;if(e===L)return e;if(typeof e!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;let s=[e];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}};ie.directiveName="unsafeHTML",ie.resultType=1;var Zt=Z(ie);var q=class t extends h{get type(){return this._type}set type(e){let s=this._type;this._type=e,this.requestUpdate("type",s)}constructor(){super(),this._type="",this.size="1em",this.color="currentColor",this.background="transparent",console.log("Icon constructor",this._type)}connectedCallback(){super.connectedCallback(),console.log("Icon connected",this._type)}renderIcon(){if(console.log("renderIcon called with type:",this._type),!this._type||this._type==="")return console.log("No type specified, rendering default slot"),a`<div class="icon-container"><slot></slot></div>`;let e=t.iconNameToSvgMap[this._type.toLowerCase()];if(e)return a`<div class="icon-container">${Zt(e)}</div>`;switch(this._type.toLowerCase()){case"close":return console.log("Rendering close icon"),a`
+  `;
+let Be = ue;
+customElements.define("ds-card", Be);
+const fo = `<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.20008 2.1176C1.96088 2.3776 1.48248 2.5024 1.09768 2.5024H0.848083V1.4H1.01448C1.68008 1.4 2.21048 1.0464 2.41848 0.307999H3.39608V7.692H2.20008V2.1176Z" fill="#2A2A2A"/>
+<path d="M4.27992 7.692L5.81912 4.9776L4.39432 2.492H5.68392L6.30792 3.7816C6.41192 3.9896 6.48472 4.1456 6.52632 4.312H6.54712C6.57832 4.156 6.65112 3.9792 6.75512 3.7712L7.33752 2.492H8.60632L7.21272 5.0088L8.75192 7.692H7.44152L6.72392 6.2672C6.61992 6.0592 6.53672 5.872 6.50552 5.7368H6.48472C6.45352 5.8512 6.37032 6.0488 6.25592 6.2672L5.53832 7.692H4.27992Z" fill="#2A2A2A"/>
+</svg>
+`, wo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.28996 0.148769V1.16877H0.269958V0.148769H1.28996Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30998 0.148769V1.16877H5.28998V0.148769H6.30998Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.33 0.148769V1.16877H10.31V0.148769H11.33Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.28996 5.16877V6.18877H0.269958V5.16877H1.28996Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30998 5.16877V6.18877H5.28998V5.16877H6.30998Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.33 5.16877V6.18877H10.31V5.16877H11.33Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.28996 10.1888V11.2088H0.269958V10.1888H1.28996Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30998 10.1888V11.2088H5.28998V10.1888H6.30998Z" fill="#2A2A2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.33 10.1888V11.2088H10.31V10.1888H11.33Z" fill="#2A2A2A"/>
+</svg>
+`, mo = `<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.799988 3.34877L16.8 3.34877V4.36877L0.799988 4.36877V3.34877Z" fill="#2A2A2A"/>
+<path d="M0.799988 8.16877L16.8 8.16877V9.18877L0.799988 9.18877V8.16877Z" fill="#2A2A2A"/>
+<path d="M0.799988 12.9888H16.8V14.0088L0.799988 14.0088V12.9888Z" fill="#2A2A2A"/>
+<path d="M4.48999 16.6788L3.46999 16.6788L3.46999 0.678791L4.48999 0.678772L4.48999 16.6788Z" fill="#2A2A2A"/>
+<path d="M9.30999 16.6788L8.28999 16.6788L8.28999 0.678791L9.30999 0.678772L9.30999 16.6788Z" fill="#2A2A2A"/>
+<path d="M14.13 16.6788L13.11 16.6788L13.11 0.678791L14.13 0.678772L14.13 16.6788Z" fill="#2A2A2A"/>
+</svg>
+`, bo = `<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.799988 0.148769L16.8 0.14877V1.16877L0.799988 1.16877V0.148769Z" fill="#2A2A2A"/>
+<path d="M0.799988 5.16877L16.8 5.16877V6.18877L0.799988 6.18877V5.16877Z" fill="#2A2A2A"/>
+<path d="M0.799988 10.1888H16.8V11.2088L0.799988 11.2088V10.1888Z" fill="#2A2A2A"/>
+</svg>
+`, yo = `<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.2 2.12C2.96 2.38 2.48 2.5 2.1 2.5H1.85V1.4H2.01C2.68 1.4 3.21 1.05 3.42 0.31H4.4V7.69H3.2V2.12Z" fill="currentColor"/>
+<path d="M5.28 7.69L6.82 4.98L5.39 2.49H6.68L7.31 3.78C7.41 3.99 7.48 4.15 7.53 4.31H7.55C7.58 4.16 7.65 3.98 7.76 3.77L8.34 2.49H9.61L8.21 5.01L9.75 7.69H8.44L7.72 6.27C7.62 6.06 7.54 5.87 7.51 5.74H7.48C7.45 5.85 7.37 6.05 7.26 6.27L6.54 7.69H5.28Z" fill="currentColor"/>
+</svg>
+`, xo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1" cy="1" r="0.75" fill="currentColor"/>
+<circle cx="4" cy="1" r="0.75" fill="currentColor"/>
+<circle cx="7" cy="1" r="0.75" fill="currentColor"/>
+<circle cx="10" cy="1" r="0.75" fill="currentColor"/>
+<circle cx="1" cy="4" r="0.75" fill="currentColor"/>
+<circle cx="4" cy="4" r="0.75" fill="currentColor"/>
+<circle cx="7" cy="4" r="0.75" fill="currentColor"/>
+<circle cx="10" cy="4" r="0.75" fill="currentColor"/>
+<circle cx="1" cy="7" r="0.75" fill="currentColor"/>
+<circle cx="4" cy="7" r="0.75" fill="currentColor"/>
+<circle cx="7" cy="7" r="0.75" fill="currentColor"/>
+<circle cx="10" cy="7" r="0.75" fill="currentColor"/>
+<circle cx="1" cy="10" r="0.75" fill="currentColor"/>
+<circle cx="4" cy="10" r="0.75" fill="currentColor"/>
+<circle cx="7" cy="10" r="0.75" fill="currentColor"/>
+<circle cx="10" cy="10" r="0.75" fill="currentColor"/>
+</svg>
+`, _o = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="5.5" height="5.5" fill="currentColor"/>
+<rect x="6.5" y="0" width="5.5" height="5.5" fill="currentColor"/>
+<rect x="0" y="6.5" width="5.5" height="5.5" fill="currentColor"/>
+<rect x="6.5" y="6.5" width="5.5" height="5.5" fill="currentColor"/>
+</svg>
+`, ko = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0" y1="1" x2="12" y2="1" stroke="currentColor" stroke-width="1"/>
+<line x1="0" y1="4" x2="12" y2="4" stroke="currentColor" stroke-width="1"/>
+<line x1="0" y1="7" x2="12" y2="7" stroke="currentColor" stroke-width="1"/>
+<line x1="0" y1="10" x2="12" y2="10" stroke="currentColor" stroke-width="1"/>
+</svg>
+`, Co = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="3.5" y="0" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="7" y="0" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="10.5" y="0" width="1.5" height="2.5" fill="currentColor"/>
+<rect x="0" y="3.5" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="3.5" y="3.5" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="7" y="3.5" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="10.5" y="3.5" width="1.5" height="2.5" fill="currentColor"/>
+<rect x="0" y="7" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="3.5" y="7" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="7" y="7" width="2.5" height="2.5" fill="currentColor"/>
+<rect x="10.5" y="7" width="1.5" height="2.5" fill="currentColor"/>
+<rect x="0" y="10.5" width="2.5" height="1.5" fill="currentColor"/>
+<rect x="3.5" y="10.5" width="2.5" height="1.5" fill="currentColor"/>
+<rect x="7" y="10.5" width="2.5" height="1.5" fill="currentColor"/>
+<rect x="10.5" y="10.5" width="1.5" height="1.5" fill="currentColor"/>
+</svg>
+`, $o = `<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.87 7.12C9.85 5.38 11.27 4.56 11.34 4.51C10.5 3.31 9.21 3.14 8.77 3.13C7.65 3.01 6.57 3.8 6 3.8C5.42 3.8 4.52 3.14 3.58 3.16C2.36 3.18 1.22 3.88 0.6 4.97C-0.68 7.18 0.28 10.44 1.51 12.23C2.13 13.1 2.85 14.09 3.79 14.06C4.7 14.02 5.05 13.47 6.15 13.47C7.24 13.47 7.56 14.06 8.52 14.03C9.5 14.01 10.12 13.15 10.71 12.27C11.42 11.26 11.7 10.28 11.71 10.23C11.69 10.22 9.89 9.52 9.87 7.12Z" fill="currentColor"/>
+<path d="M8.15 2.06C8.65 1.45 9 0.62 8.91 0C8.18 0.03 7.29 0.49 6.77 1.08C6.31 1.61 5.88 2.47 5.99 3.08C6.79 3.14 7.63 2.66 8.15 2.06Z" fill="currentColor"/>
+</svg>
+`, Ao = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="3.5" r="2.5" fill="currentColor"/>
+<path d="M1 11C1 8.23858 3.23858 6 6 6C8.76142 6 11 8.23858 11 11V12H1V11Z" fill="currentColor"/>
+</svg>
+`, Lo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M4 6L6 4L8 6M6 4V8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Eo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="0.5" width="10" height="11" rx="1" stroke="currentColor" stroke-width="1" fill="none"/>
+</svg>
+`, So = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5L4.5 8.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Vo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`, Ho = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Mo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="6" cy="6" r="3" fill="currentColor"/>
+</svg>
+`, To = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="3" height="11" stroke="currentColor" stroke-width="1" fill="none"/>
+<rect x="4.5" y="0.5" width="3" height="11" stroke="currentColor" stroke-width="1" fill="none"/>
+<rect x="8.5" y="0.5" width="3" height="11" stroke="currentColor" stroke-width="1" fill="none"/>
+</svg>
+`, No = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
+</svg>
+`, Io = `<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3H11M4.5 3V1.5H7.5V3M2.5 3V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H8.5C9.05228 13.5 9.5 13.0523 9.5 12.5V3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<line x1="4.5" y1="5.5" x2="4.5" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<line x1="7.5" y1="5.5" x2="7.5" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`, zo = `<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.5" y="0" width="5" height="8" rx="2.5" fill="currentColor"/>
+<path d="M1 6C1 8.76142 3.23858 11 6 11C8.76142 11 11 8.76142 11 6" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="6" y1="11" x2="6" y2="14" stroke="currentColor" stroke-width="1.2"/>
+<line x1="3.5" y1="14" x2="8.5" y2="14" stroke="currentColor" stroke-width="1.2"/>
+</svg>
+`, Oo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3L4.5 9L2 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Po = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2V10M6 10L2 6M6 10L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Bo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M9 3V2C9 1.44772 8.55228 1 8 1H2C1.44772 1 1 1.44772 1 2V8C1 8.55228 1.44772 9 2 9H3" stroke="currentColor" stroke-width="1.2" fill="none"/>
+</svg>
+`, Do = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 16 11" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0871 0.989435L0.930906 0.988037L0.930542 11L13.0753 11H14.0871V0.989435ZM7.50709 8.0566L1.94249 2.49201L1.94248 9.98814H13.0753V2.48839L7.50709 8.0566ZM2.85116 2L7.50709 6.65593L12.1515 1.99952L2.85116 2Z" fill="currentColor"/>
+</svg>
+
+`, jo = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <path d="M0 5.81415V0H5.80924L5.81842 0.990424H1.70698L11.0089 10.2943L10.9997 6.18585H12V12H6.19076L6.18158 11.0096H10.293L0.99115 1.70573L1.00033 5.81415H0Z" fill="currentColor"/>
+</svg>
+
+`, Ro = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="11" height="9" rx="0.5" stroke="currentColor" stroke-width="1" fill="none"/>
+<circle cx="3.5" cy="3.5" r="1.5" fill="currentColor"/>
+<path d="M0 8L4 5L7 7L12 3" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
+</svg>
+`, Uo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.82 6.13C11.82 5.72 11.79 5.32 11.71 4.93H6.12V7.2H9.31C9.18 7.91 8.78 8.52 8.18 8.92V10.4H10.08C11.19 9.38 11.82 7.9 11.82 6.13Z" fill="currentColor"/>
+<path d="M6.12 11.82C7.76 11.82 9.15 11.28 10.08 10.4L8.18 8.92C7.67 9.27 7.01 9.47 6.12 9.47C4.54 9.47 3.2 8.44 2.76 7.05H0.81V8.58C1.76 10.46 3.8 11.82 6.12 11.82Z" fill="currentColor"/>
+<path d="M2.76 7.05C2.63 6.65 2.55 6.23 2.55 5.79C2.55 5.35 2.63 4.93 2.76 4.53V3H0.81C0.29 4.02 0 5.17 0 6.41C0 7.65 0.29 8.8 0.81 9.82L2.76 7.05Z" fill="currentColor"/>
+<path d="M6.12 2.12C7.08 2.12 7.95 2.45 8.63 3.1L10.13 1.6C9.15 0.69 7.76 0.18 6.12 0.18C3.8 0.18 1.76 1.54 0.81 3.42L2.76 4.95C3.2 3.56 4.54 2.53 6.12 2.53V2.12Z" fill="currentColor"/>
+</svg>
+`, qo = `<svg width="9" height="11" viewBox="0 0 9 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.87149 10.5148C4.04816 10.5148 3.32882 10.3068 2.71349 9.89077C2.10682 9.47477 1.63882 8.90277 1.30949 8.17477C0.988825 7.4381 0.828491 6.6061 0.828491 5.67877C0.828491 4.7341 0.993158 3.89777 1.32249 3.16977C1.66049 2.4331 2.14582 1.8611 2.77849 1.45377C3.41982 1.04643 4.18682 0.842768 5.07949 0.842768C5.85949 0.842768 6.50082 0.994435 7.00349 1.29777C7.51483 1.6011 7.89183 1.9651 8.13449 2.38977C8.38583 2.80577 8.54183 3.22177 8.60249 3.63777L7.38049 3.80677C7.29383 3.3041 7.06416 2.85777 6.69149 2.46777C6.32749 2.07777 5.77716 1.88277 5.04049 1.88277C4.42516 1.88277 3.89216 2.0431 3.44149 2.36377C2.99949 2.68444 2.66149 3.13077 2.42749 3.70277C2.20216 4.27477 2.08949 4.93777 2.08949 5.69177C2.08949 6.80977 2.34082 7.71977 2.84349 8.42177C3.35483 9.12377 4.09149 9.47477 5.05349 9.47477C5.74683 9.47477 6.28849 9.31877 6.67849 9.00677C7.06849 8.6861 7.32849 8.31344 7.45849 7.88877C7.59716 7.4641 7.66649 7.05677 7.66649 6.66677V6.51077H4.96249V5.47077H8.77149V10.2938H7.87449L7.70549 8.81177C7.49749 9.3231 7.14216 9.73477 6.63949 10.0468C6.13683 10.3588 5.54749 10.5148 4.87149 10.5148Z" fill="#2A2A2A"/>
+</svg>
+`, Zo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4H11M1 4V2C1 1.44772 1.44772 1 2 1H10C10.5523 1 11 1.44772 11 2V4M1 4V10C1 10.5523 1.44772 11 2 11H10C10.5523 11 11 10.5523 11 10V4" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="4" y1="6.5" x2="8" y2="6.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+<line x1="4" y1="8.5" x2="8" y2="8.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+</svg>
+`, Wo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5L6 1L11 5V11H7.5V7.5H4.5V11H1V5Z" fill="currentColor"/>
+</svg>
+`, Fo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="6" cy="6" r="2.5" fill="currentColor"/>
+</svg>
+`, Ko = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L6 8M6 8L3 5M6 8L9 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 10H10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`, Go = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">
+  <path d="M1.90697 3.60594H15.0636V4.61651L1.90734 4.61791L4.81456 7.52513L4.10774 8.21898L-1.23978e-05 4.11123L4.11122 0L4.81855 0.707338L1.90697 3.60594Z" fill="currentColor"/>
+</svg>
+
+`, Jo = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="5" width="8" height="6" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M3 5V3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3V5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" fill="none"/>
+<circle cx="5" cy="8" r="1" fill="currentColor"/>
+</svg>
+`, Yo = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3H2C1.44772 3 1 3.44772 1 4V8C1 8.55228 1.44772 9 2 9H10C10.5523 9 11 8.55228 11 8V4C11 3.44772 10.5523 3 10 3Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M8.5 1L10.5 3L8.5 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<path d="M3.5 7L1.5 9L3.5 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
+`, Xo = `<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="1" width="5" height="7" rx="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`, Qo = `<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="1" y1="1" x2="11" y2="1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`, en = `<svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="2" cy="2" r="1.5" fill="currentColor"/>
+<circle cx="6" cy="2" r="1.5" fill="currentColor"/>
+<circle cx="10" cy="2" r="1.5" fill="currentColor"/>
+</svg>
+`, tn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="4" cy="5" r="1" fill="currentColor"/>
+<circle cx="8" cy="5" r="1" fill="currentColor"/>
+<line x1="4" y1="8" x2="8" y2="8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`, rn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2C1 1.44772 1.44772 1 2 1H7L11 5V10C11 10.5523 10.5523 11 10 11H2C1.44772 11 1 10.5523 1 10V2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M7 1V5H11" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="3" y1="7" x2="9" y2="7" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+<line x1="3" y1="9" x2="7" y2="9" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+</svg>
+`, on = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.688477V6.54217H10.9936L11.0028 2.40581L1.64458 11.7729L0.924406 11.0528L10.2827 1.68564H6.14631L6.15554 0.688477H12Z" fill="currentColor"/>
+</svg>
+
+`, nn = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2C1 1.44772 1.44772 1 2 1H6L9 4V10C9 10.5523 8.55228 11 8 11H2C1.44772 11 1 10.5523 1 10V2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M6 1V4H9" stroke="currentColor" stroke-width="1.2" fill="none"/>
+</svg>
+`, sn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2V10M2 6H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`, an = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L1 5L6 9V1Z" fill="currentColor"/>
+<path d="M12 1L7 5L12 9V1Z" fill="currentColor"/>
+</svg>
+`, ln = `<svg xmlns="http://www.w3.org/2000/svg" width="15.064" height="8.219" viewBox="0 0 15.064 8.219" fill="none">
+  <path d="M14.5815 4.48047L11.0815 8.21047L10.4315 7.59047L13.1315 4.71047H0.581543V3.71047H13.1315L10.4315 0.830469L11.0815 0.210469L14.5815 3.94047C14.7815 4.15047 14.7815 4.27047 14.5815 4.48047Z" fill="currentColor"/>
+</svg>
+
+`, cn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
+<rect x="0.5" y="4.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
+<rect x="0.5" y="8.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
+</svg>
+`, dn = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L4 4L7 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, hn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="4" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="8" y1="8" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`, un = `<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 1C3.5 1 1 5 1 5C1 5 3.5 9 7 9C10.5 9 13 5 13 5C13 5 10.5 1 7 1Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="7" cy="5" r="2" fill="currentColor"/>
+</svg>
+`, pn = `<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 8L1 11H13L12 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<path d="M3 8V4H6V1H8V4H11V8H3Z" fill="currentColor"/>
+<rect x="5" y="5" width="4" height="2" fill="var(--surface-color, #fff)"/>
+</svg>
+`, gn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" fill="none"/>
+</svg>
+`, vn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="6" cy="6" r="2" fill="currentColor"/>
+</svg>
+`, fn = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4L4 1L7 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, wn = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H11M6 1V9M3 9H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`, mn = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
+`, bn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
+<rect x="6.5" y="6.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
+</svg>
+`, yn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H11M1 1V10C1 10.5523 1.44772 11 2 11H10C10.5523 11 11 10.5523 11 10V1" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 1" fill="none"/>
+</svg>
+`, xn = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 1" fill="none"/>
+</svg>
+`, _n = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="5" width="8" height="6" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M3 5V3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" fill="none"/>
+<circle cx="5" cy="8" r="1" fill="currentColor"/>
+</svg>
+`, kn = `<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="1" width="5" height="7" rx="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<line x1="1" y1="1" x2="9" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`, Cn = `<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 2C3.5 2 1 6 1 6C1 6 3.5 10 7 10C10.5 10 13 6 13 6C13 6 10.5 2 7 2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="7" cy="6" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="2" y1="1" x2="12" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`, $n = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" stroke-dasharray="2 1" fill="none"/>
+</svg>
+`, An = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H11M6 1V9M3 9H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 1"/>
+</svg>
+`, Ln = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 10V2M6 2L2 6M6 2L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class De extends Er {
+  constructor(e) {
+    if (super(e), this.it = m, e.type !== Ar.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(e) {
+    if (e === m || e == null) return this._t = void 0, this.it = e;
+    if (e === M) return e;
+    if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (e === this.it) return this._t;
+    this.it = e;
+    const r = [e];
+    return r.raw = r, this._t = { _$litType$: this.constructor.resultType, strings: r, values: [] };
+  }
+}
+De.directiveName = "unsafeHTML", De.resultType = 1;
+const En = Lr(De), Sn = ":host{display:inline-flex;justify-content:center;align-items:center;width:calc(16px * var(--sf));height:calc(16px * var(--sf));--notes-style-color: #ffb6b9}svg{width:100%;height:100%;fill:var(--icon-color, currentColor)}path{fill:var(--icon-color, currentColor)}.icon-container{display:flex;justify-content:center;align-items:center;width:calc(16px * var(--sf));height:calc(16px * var(--sf))}", O = class O extends f {
+  constructor() {
+    super(), this._type = "", this.size = "1em", this.color = "currentColor", this.background = "transparent", console.log("Icon constructor", this._type);
+  }
+  get type() {
+    return this._type;
+  }
+  set type(e) {
+    const r = this._type;
+    this._type = e, this.requestUpdate("type", r);
+  }
+  connectedCallback() {
+    super.connectedCallback(), console.log("Icon connected", this._type);
+  }
+  renderIcon() {
+    if (console.log("renderIcon called with type:", this._type), !this._type || this._type === "")
+      return console.log("No type specified, rendering default slot"), l`<div class="icon-container"><slot></slot></div>`;
+    const e = O.iconNameToSvgMap[this._type.toLowerCase()];
+    if (e)
+      return l`<div class="icon-container">${En(e)}</div>`;
+    switch (this._type.toLowerCase()) {
+      case "close":
+        return console.log("Rendering close icon"), l`
           <div class="icon-container">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -68,7 +2168,9 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               />
             </svg>
           </div>
-        `;case"page":return console.log("Rendering page icon"),a`
+        `;
+      case "page":
+        return console.log("Rendering page icon"), l`
           <div class="icon-container">
             <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
               <rect
@@ -83,7 +2185,9 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               />
             </svg>
           </div>
-        `;case"note":return console.log("Rendering note icon"),a`
+        `;
+      case "note":
+        return console.log("Rendering note icon"), l`
           <div class="icon-container">
             <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
               <rect
@@ -102,7 +2206,9 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               />
             </svg>
           </div>
-        `;case"default":return console.log("Rendering default icon"),a`
+        `;
+      case "default":
+        return console.log("Rendering default icon"), l`
           <div class="icon-container">
             <svg
               width="17"
@@ -129,7 +2235,9 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               />
             </svg>
           </div>
-        `;case"big":return console.log("Rendering big icon"),a`
+        `;
+      case "big":
+        return console.log("Rendering big icon"), l`
           <div class="icon-container">
             <svg
               width="17"
@@ -168,7 +2276,9 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               </defs>
             </svg>
           </div>
-        `;case"gallery":return console.log("Rendering gallery icon"),a`
+        `;
+      case "gallery":
+        return console.log("Rendering gallery icon"), l`
           <div class="icon-container">
             <svg
               width="17"
@@ -203,7 +2313,9 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               </defs>
             </svg>
           </div>
-        `;case"check":return console.log("Rendering check icon"),a`
+        `;
+      case "check":
+        return console.log("Rendering check icon"), l`
           <div class="icon-container">
             <svg
               viewBox="0 0 17 17"
@@ -222,470 +2334,1387 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
               />
             </svg>
           </div>
-        `;default:return console.log(`Unknown icon type: ${this._type}, rendering default slot`),a`<div class="icon-container"><slot></slot></div>`}}updated(e){console.log("Icon updated",e),this.style.setProperty("--icon-size",this.size),this.style.setProperty("--icon-color",this.color),this.style.setProperty("--icon-background",this.background)}render(){return console.log("Icon render",this._type),this.renderIcon()}};q.properties={type:{type:String,reflect:!0}};q.styles=y`
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
+        `;
+      default:
+        return console.log(`Unknown icon type: ${this._type}, rendering default slot`), l`<div class="icon-container"><slot></slot></div>`;
     }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--icon-color, currentColor);
+  }
+  updated(e) {
+    console.log("Icon updated", e), this.style.setProperty("--icon-size", this.size), this.style.setProperty("--icon-color", this.color), this.style.setProperty("--icon-background", this.background);
+  }
+  render() {
+    return console.log("Icon render", this._type), this.renderIcon();
+  }
+};
+O.properties = {
+  type: { type: String, reflect: !0 }
+}, O.styles = x(Sn), O.iconNameToSvgMap = (() => {
+  try {
+    const e = /* @__PURE__ */ Object.assign({
+      "../x-icon/1x.svg": fo,
+      "../x-icon/1xdots.svg": wo,
+      "../x-icon/1xgrid.svg": mo,
+      "../x-icon/1xlines.svg": bo,
+      "../x-icon/2x.svg": yo,
+      "../x-icon/2xdots.svg": xo,
+      "../x-icon/2xgrid.svg": _o,
+      "../x-icon/2xlines.svg": ko,
+      "../x-icon/4x4.svg": Co,
+      "../x-icon/apple.svg": $o,
+      "../x-icon/avatar.svg": Ao,
+      "../x-icon/big.svg": Lo,
+      "../x-icon/blank.svg": Eo,
+      "../x-icon/check.svg": So,
+      "../x-icon/close.svg": Vo,
+      "../x-icon/collapse.svg": Ho,
+      "../x-icon/color.svg": Mo,
+      "../x-icon/column.svg": To,
+      "../x-icon/default.svg": No,
+      "../x-icon/delete.svg": Io,
+      "../x-icon/dictate.svg": zo,
+      "../x-icon/do.svg": Oo,
+      "../x-icon/down.svg": Po,
+      "../x-icon/duplicate.svg": Bo,
+      "../x-icon/email.svg": Do,
+      "../x-icon/expand.svg": jo,
+      "../x-icon/gallery.svg": Ro,
+      "../x-icon/google.svg": Uo,
+      "../x-icon/group.svg": qo,
+      "../x-icon/head.svg": Zo,
+      "../x-icon/home.svg": Wo,
+      "../x-icon/icon.svg": Fo,
+      "../x-icon/in.svg": Ko,
+      "../x-icon/left.svg": Go,
+      "../x-icon/lock.svg": Jo,
+      "../x-icon/loop.svg": Yo,
+      "../x-icon/mic.svg": Xo,
+      "../x-icon/minimize.svg": Qo,
+      "../x-icon/more.svg": en,
+      "../x-icon/neutral.svg": tn,
+      "../x-icon/note.svg": rn,
+      "../x-icon/open.svg": on,
+      "../x-icon/page.svg": nn,
+      "../x-icon/plus.svg": sn,
+      "../x-icon/rewind.svg": an,
+      "../x-icon/right.svg": ln,
+      "../x-icon/row.svg": cn,
+      "../x-icon/sdown.svg": dn,
+      "../x-icon/search.svg": hn,
+      "../x-icon/see.svg": un,
+      "../x-icon/ship.svg": pn,
+      "../x-icon/star.svg": gn,
+      "../x-icon/status.svg": vn,
+      "../x-icon/sup.svg": fn,
+      "../x-icon/title.svg": wn,
+      "../x-icon/undo.svg": mn,
+      "../x-icon/ungroup.svg": bn,
+      "../x-icon/unhead.svg": yn,
+      "../x-icon/unicon.svg": xn,
+      "../x-icon/unlock.svg": _n,
+      "../x-icon/unmic.svg": kn,
+      "../x-icon/unsee.svg": Cn,
+      "../x-icon/unstar.svg": $n,
+      "../x-icon/untitle.svg": An,
+      "../x-icon/up.svg": Ln
+    }), r = {};
+    for (const [o, n] of Object.entries(e)) {
+      const s = (o.split("/").pop() ?? "").replace(/\.svg$/i, "").toLowerCase();
+      s && (r[s] = n);
     }
-
-    path {
-      fill: var(--icon-color, currentColor);
+    return r;
+  } catch (e) {
+    return console.warn(
+      "Icon: failed to glob SVGs from x Icon/; falling back only to inline switch icons.",
+      e
+    ), {};
+  }
+})();
+let je = O;
+customElements.define("ds-icon", je);
+console.log("Icon component registered with custom elements registry");
+const Vn = ":host{display:inline-flex;align-items:center}.cycle{display:inline-flex;align-items:center;gap:var(--025)}.color-preview{width:var(--05);height:var(--05);border-radius:999px;border:1px solid color-mix(in srgb,var(--text-color-primary) 20%,transparent);flex:0 0 auto}", Hn = (t) => {
+  localStorage.setItem("accentColor", t);
+}, Re = () => localStorage.getItem("accentColor") || "--sharp-blue", Me = () => {
+  const t = Re();
+  document.documentElement.style.setProperty("--accent-color", `var(${t})`);
+}, Mn = (t) => {
+  localStorage.setItem("notesStyleMedium", t);
+}, Ot = () => localStorage.getItem("notesStyleMedium") || "note", Pt = (t) => {
+  localStorage.setItem("pageStyle", t);
+}, R = () => localStorage.getItem("pageStyle") || "note", dt = class dt extends f {
+  // Define reactive properties using Lit's property system
+  static get properties() {
+    return {
+      type: { type: String },
+      values: { type: Array },
+      currentValue: { type: String, state: !0 },
+      // Make this a private state property
+      translationsReady: { type: Boolean, state: !0 },
+      // Track if translations are loaded
+      disabled: { type: Boolean, state: !0 },
+      variant: { type: String }
+    };
+  }
+  constructor() {
+    super(), this.type = "", this.values = [], this.currentValue = "", this.translationsReady = !1, this.disabled = !1, this.variant = "", this.boundHandlers = {
+      translationsLoaded: this.handleTranslationsLoaded.bind(this),
+      languageChanged: this.handleLanguageChanged.bind(this),
+      handleLanguageChanged: this.handleLanguageChanged.bind(this),
+      handleThemeChanged: this.handleThemeChanged.bind(this),
+      handleAccentColorChanged: this.handleAccentColorChanged.bind(this),
+      handleNoteBehaviorChanged: this.handleNoteBehaviorChanged.bind(this)
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener(
+      "translations-loaded",
+      this.boundHandlers.translationsLoaded
+    ), window.addEventListener(
+      "language-changed",
+      this.boundHandlers.languageChanged
+    ), window.addEventListener(
+      "theme-changed",
+      this.boundHandlers.handleThemeChanged
+    ), window.addEventListener(
+      "accent-color-changed",
+      this.boundHandlers.handleAccentColorChanged
+    ), window.addEventListener(
+      "page-style-changed",
+      this.boundHandlers.handleNoteBehaviorChanged
+    ), this.initializeValues();
+  }
+  async initializeValues() {
+    if (this.type === "language") {
+      const e = Ht();
+      this.values = e, this.currentValue = k.value;
+    } else if (this.type === "theme") {
+      this.values = ["light", "dark"];
+      const e = Q.get();
+      this.currentValue = e;
+    } else if (this.type === "accent-color") {
+      this.values = [
+        "--apple-green",
+        "--every-green",
+        "--zenith-blue",
+        "--sharp-blue",
+        "--pink",
+        "--tuned-red",
+        "--orange",
+        "--yellow"
+      ];
+      const e = Re();
+      this.currentValue = e, Me();
+    } else if (this.type === "notes-style-medium") {
+      this.values = ["default", "big", "gallery"];
+      const e = Ot();
+      this.currentValue = e;
+      const r = R();
+      this.disabled = r === "note";
+    } else if (this.type === "page-style") {
+      this.values = ["note", "page"];
+      const e = R();
+      this.currentValue = e;
+    } else this.type === "icon-only" && (this.values = ["note", "page"], this.currentValue = this.values[0]);
+    this.requestUpdate();
+  }
+  ensureThemeInitialized() {
+    if (!localStorage.getItem("theme")) {
+      const o = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches ? "dark" : "light";
+      localStorage.setItem("theme", o), document.documentElement.classList.add(`${o}-theme`);
     }
-
-    .icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
+  }
+  attributeChangedCallback(e, r, o) {
+    super.attributeChangedCallback(e, r, o), e === "type" && r !== o && this.initializeValues();
+  }
+  async setupInitialValue() {
+    if (this.type === "language") {
+      const e = k.value;
+      this.currentValue = e;
+    } else if (this.type === "theme") {
+      const e = Q.get();
+      this.currentValue = e;
+    } else if (this.type === "accent-color") {
+      const e = Re();
+      this.currentValue = e, Me();
+    } else if (this.type === "notes-style-medium") {
+      const e = Ot();
+      this.currentValue = e;
+      const r = R();
+      this.disabled = r === "note";
+    } else if (this.type === "page-style") {
+      const e = R();
+      this.currentValue = e;
+    } else if (this.type === "icon-only") {
+      const e = R();
+      this.currentValue = e;
     }
-
-    /* Notes style color variable for future implementation */
-    :host {
-      --notes-style-color: #ffb6b9;
+    this.requestUpdate();
+  }
+  handleSettingsChanges() {
+    this.setupInitialValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener(
+      "translations-loaded",
+      this.boundHandlers.translationsLoaded
+    ), window.removeEventListener(
+      "language-changed",
+      this.boundHandlers.languageChanged
+    ), window.removeEventListener(
+      "theme-changed",
+      this.boundHandlers.handleThemeChanged
+    ), window.removeEventListener(
+      "accent-color-changed",
+      this.boundHandlers.handleAccentColorChanged
+    ), window.removeEventListener(
+      "page-style-changed",
+      this.boundHandlers.handleNoteBehaviorChanged
+    );
+  }
+  handleButtonClick(e) {
+    if (e.preventDefault(), e.stopPropagation(), !this.disabled) {
+      if (this.type === "language") {
+        const o = (this.values.indexOf(this.currentValue) + 1) % this.values.length, n = this.values[o];
+        this.currentValue = n, document.startViewTransition ? document.startViewTransition(() => {
+          Mt(n);
+        }) : Mt(n), N({ language: n }), window.dispatchEvent(
+          new CustomEvent("language-changed", {
+            detail: { language: n }
+          })
+        );
+      } else if (this.type === "theme") {
+        const o = (this.values.indexOf(this.currentValue) + 1) % this.values.length, n = this.values[o];
+        this.currentValue = n, to(n), N({ theme: n });
+      } else if (this.type === "accent-color") {
+        const o = (this.values.indexOf(this.currentValue) + 1) % this.values.length, n = this.values[o];
+        this.currentValue = n, Hn(n), Me(), N({ accentColor: n }), window.dispatchEvent(
+          new CustomEvent("accent-color-changed", {
+            detail: { color: n }
+          })
+        );
+      } else if (this.type === "notes-style-medium") {
+        const o = (this.values.indexOf(this.currentValue) + 1) % this.values.length, n = this.values[o];
+        this.currentValue = n, Mn(n), N({ notesStyleMedium: n }), window.dispatchEvent(
+          new CustomEvent("notes-style-medium-changed", {
+            detail: { style: n }
+          })
+        );
+      } else if (this.type === "page-style") {
+        const o = (this.values.indexOf(this.currentValue) + 1) % this.values.length, n = this.values[o];
+        this.currentValue = n, Pt(n), N({ pageStyle: n }), window.dispatchEvent(
+          new CustomEvent("page-style-changed", {
+            detail: { behavior: n }
+          })
+        );
+      } else if (this.type === "icon-only") {
+        const o = (this.values.indexOf(this.currentValue) + 1) % this.values.length, n = this.values[o];
+        this.currentValue = n, Pt(n), N({ pageStyle: n }), window.dispatchEvent(
+          new CustomEvent("page-style-changed", {
+            detail: { behavior: n }
+          })
+        );
+      }
+      this.requestUpdate();
     }
-  `;q.iconNameToSvgMap=(()=>{try{let t=import.meta.glob("../x Icon/*.svg",{as:"raw",eager:!0}),e={};for(let[s,r]of Object.entries(t)){let i=(s.split("/").pop()??"").replace(/\.svg$/i,"").toLowerCase();i&&(e[i]=r)}return e}catch(t){return console.warn("Icon: failed to glob SVGs from x Icon/; falling back only to inline switch icons.",t),{}}})();customElements.define("ds-icon",q);console.log("Icon component registered with custom elements registry");var Ie=class extends h{static get properties(){return{key:{type:String,reflect:!0},defaultValue:{type:String,reflect:!0,attribute:"default-value"},fallback:{type:String,reflect:!0},_text:{type:String,state:!0}}}constructor(){super(),this.key="",this.defaultValue="",this.fallback="",this._text="",this.boundHandlers={languageChanged:(()=>{console.log("Language changed event received in ds-text"),this._loadText()})}}connectedCallback(){super.connectedCallback(),this._loadText(),window.addEventListener("language-changed",this.boundHandlers.languageChanged),window.addEventListener("translations-loaded",this.boundHandlers.languageChanged)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("language-changed",this.boundHandlers.languageChanged),window.removeEventListener("translations-loaded",this.boundHandlers.languageChanged)}updated(e){super.updated(e),(e.has("key")||e.has("defaultValue"))&&this._loadText()}_loadText(){if(!this.key){this._text=this.defaultValue||this.fallback||"";return}try{let e=fe(this.key);this._text=e||this.defaultValue||this.fallback||this.key}catch(e){console.error("Error loading text for key:",this.key,e),this._text=this.defaultValue||this.fallback||this.key}this.requestUpdate()}render(){return a`<span>${this._text||this.defaultValue||this.key}</span>`}};Ie.styles=y`
-    :host {
-      display: inline;
-      font-family: var(--typeface);
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      font-weight: var(--type-weight-default);
-      line-height: calc(var(--type-lineheight-default) * var(--scaling-factor));
-      letter-spacing: calc(
-        var(--type-letterspacing-default) * var(--scaling-factor)
-      );
-      text-align: var(--text-align-default);
-      text-transform: var(--text-transform-default);
-      text-decoration: var(--text-decoration-default);
-    }
-  `;customElements.define("ds-text",Ie);var tr=t=>{localStorage.setItem("accentColor",t)},nt=()=>localStorage.getItem("accentColor")||"--blue",rt=()=>{let t=nt();document.documentElement.style.setProperty("--accent-color",`var(${t})`)},sr=t=>{localStorage.setItem("notesStyleMedium",t)},Kt=()=>localStorage.getItem("notesStyleMedium")||"note",Jt=t=>{localStorage.setItem("pageStyle",t)},oe=()=>localStorage.getItem("pageStyle")||"note",Oe=class extends h{static get properties(){return{type:{type:String},values:{type:Array},label:{type:String},currentValue:{type:String,state:!0},translationsReady:{type:Boolean,state:!0},disabled:{type:Boolean,state:!0},variant:{type:String}}}constructor(){super(),this.type="",this.values=[],this.label="",this.currentValue="",this.translationsReady=!1,this.disabled=!1,this.variant="",this.boundHandlers={translationsLoaded:this.handleTranslationsLoaded.bind(this),languageChanged:this.handleLanguageChanged.bind(this),handleLanguageChanged:this.handleLanguageChanged.bind(this),handleThemeChanged:this.handleThemeChanged.bind(this),handleAccentColorChanged:this.handleAccentColorChanged.bind(this),handleNoteBehaviorChanged:this.handleNoteBehaviorChanged.bind(this)}}connectedCallback(){super.connectedCallback(),window.addEventListener("translations-loaded",this.boundHandlers.translationsLoaded),window.addEventListener("language-changed",this.boundHandlers.languageChanged),window.addEventListener("theme-changed",this.boundHandlers.handleThemeChanged),window.addEventListener("accent-color-changed",this.boundHandlers.handleAccentColorChanged),window.addEventListener("page-style-changed",this.boundHandlers.handleNoteBehaviorChanged),this.initializeValues()}async initializeValues(){if(this.type==="language"){let e=Me();this.values=e,this.currentValue=T.value,this.label=this.getLabel()}else if(this.type==="theme"){this.values=["light","dark"];let e=B.get();this.currentValue=e,this.label=this.getLabel()}else if(this.type==="accent-color"){this.values=["--light-green","--green","--light-blue","--blue","--pink","--red","--orange","--yellow"];let e=nt();this.currentValue=e,rt()}else if(this.type==="notes-style-medium"){this.values=["default","big","gallery"];let e=Kt();this.currentValue=e;let s=oe();this.disabled=s==="note",this.label=this.getLabel()}else if(this.type==="page-style"){this.values=["note","page"];let e=oe();this.currentValue=e,this.label=this.getLabel()}else this.type==="icon-only"&&(this.values=["note","page"],this.currentValue=this.values[0],this.label="");this.requestUpdate()}ensureThemeInitialized(){if(!localStorage.getItem("theme")){let r=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";localStorage.setItem("theme",r),document.documentElement.classList.add(`${r}-theme`)}}attributeChangedCallback(e,s,r){super.attributeChangedCallback(e,s,r),e==="type"&&s!==r&&this.initializeValues()}async setupInitialValue(){if(this.type==="language"){let e=T.value;this.currentValue=e,this.label=this.getLabel()}else if(this.type==="theme"){let e=B.get();this.currentValue=e,this.label=this.getLabel()}else if(this.type==="accent-color"){let e=nt();this.currentValue=e,rt()}else if(this.type==="notes-style-medium"){let e=Kt();this.currentValue=e;let s=oe();this.disabled=s==="note",this.label=this.getLabel()}else if(this.type==="page-style"){let e=oe();this.currentValue=e,this.label=this.getLabel()}else if(this.type==="icon-only"){let e=oe();this.currentValue=e,this.label=""}this.requestUpdate()}handleSettingsChanges(){this.setupInitialValue()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("translations-loaded",this.boundHandlers.translationsLoaded),window.removeEventListener("language-changed",this.boundHandlers.languageChanged),window.removeEventListener("theme-changed",this.boundHandlers.handleThemeChanged),window.removeEventListener("accent-color-changed",this.boundHandlers.handleAccentColorChanged),window.removeEventListener("page-style-changed",this.boundHandlers.handleNoteBehaviorChanged)}handleButtonClick(e){if(e.preventDefault(),e.stopPropagation(),!this.disabled){if(this.type==="language"){let r=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[r];this.currentValue=n,document.startViewTransition?document.startViewTransition(()=>{Re(n)}):Re(n),P({language:n}),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:n}}))}else if(this.type==="theme"){let r=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[r];this.currentValue=n,Wt(n),P({theme:n})}else if(this.type==="accent-color"){let r=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[r];this.currentValue=n,tr(n),rt(),P({accentColor:n}),window.dispatchEvent(new CustomEvent("accent-color-changed",{detail:{color:n}}))}else if(this.type==="notes-style-medium"){let r=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[r];this.currentValue=n,sr(n),P({notesStyleMedium:n}),window.dispatchEvent(new CustomEvent("notes-style-medium-changed",{detail:{style:n}}))}else if(this.type==="page-style"){let r=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[r];this.currentValue=n,Jt(n),P({pageStyle:n}),window.dispatchEvent(new CustomEvent("page-style-changed",{detail:{behavior:n}}))}else if(this.type==="icon-only"){let r=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[r];this.currentValue=n,Jt(n),P({pageStyle:n}),this.label="",window.dispatchEvent(new CustomEvent("page-style-changed",{detail:{behavior:n}}))}this.label=this.getLabel(),this.requestUpdate()}}getValueDisplay(e){if(this.type==="language")return yt(e,{locale:T.value});if(this.type==="theme"){if(this.translationsReady){let s=C(e);if(s&&s!==e)return s}return e}else{if(this.type==="accent-color")return this.getColorName(e);if(this.type==="notes-style-medium")return this.getNotesStyleIcon(e);if(this.type==="page-style"){if(this.translationsReady){let s=C(e==="note"?"note":"page");if(s&&s!==(e==="note"?"note":"page"))return s}return e}else if(this.type==="icon-only")return e==="note"?a`<ds-icon type="note"></ds-icon>`:e==="page"?a`<ds-icon type="page"></ds-icon>`:a`<span>${e}</span>`}return e}getColorName(e){let r={"--red":"red","--orange":"orange","--yellow":"yellow","--light-green":"lightGreen","--green":"green","--light-blue":"lightBlue","--blue":"blue","--pink":"pink"}[e];if(r&&this.translationsReady){let n=C(r);if(n&&n!==r)return n}return e.replace("--","").replace("-"," ")}getNotesStyleIcon(e){return e==="page"?a`<ds-icon type="page"></ds-icon>`:e==="note"?a`<ds-icon type="note"></ds-icon>`:e==="default"?a`<ds-icon type="default"></ds-icon>`:e==="big"?a`<ds-icon type="big"></ds-icon>`:e==="gallery"?a`<ds-icon type="gallery"></ds-icon>`:a`<span>${e}</span>`}getLabel(){if(this.type==="language"){if(this.translationsReady){let e=C("language");if(e&&e!=="language")return e}return"Language"}else if(this.type==="theme"){if(this.translationsReady){let e=C("theme");if(e&&e!=="theme")return e}return"Theme"}else if(this.type==="accent-color"){if(this.translationsReady){let e=C("accentColor");if(e&&e!=="accentColor")return e}return"Accent Color"}else if(this.type==="notes-style-medium"){if(this.translationsReady){let e=C("notesStyle");if(e&&e!=="notesStyle")return e}return"Notes Style"}else if(this.type==="page-style"){if(this.translationsReady){let e=C("clickingItem");if(e&&e!=="clickingItem")return e}return"Clic"}else if(this.type==="icon-only")return"";return this.label}render(){return a`
-      <div class="cycle-container">
-        ${this.type!=="icon-only"?a`${this.type==="language"?a`<ds-text
-                  key="language"
-                  default-value="Language"
-                  class="cycle-label"
-                ></ds-text>`:this.type==="theme"?a`<ds-text
-                    key="theme"
-                    default-value="Theme"
-                    class="cycle-label"
-                  ></ds-text>`:this.type==="accent-color"?a`<ds-text
-                      key="accentColor"
-                      default-value="Accent color"
-                      class="cycle-label"
-                    ></ds-text>`:a`<span class="cycle-label">${this.label}</span>`}`:""}
-        <div
-          style="display: flex; align-items: center; ${this.type==="icon-only"?"justify-content: center;":""}"
+  }
+  getValueDisplay(e) {
+    if (this.type === "language")
+      return Yr(e, {
+        locale: k.value
+      });
+    if (this.type === "theme") {
+      if (this.translationsReady) {
+        const r = Z(e);
+        if (r && r !== e)
+          return r;
+      }
+      return e;
+    } else {
+      if (this.type === "accent-color")
+        return this.getColorName(e);
+      if (this.type === "notes-style-medium")
+        return this.getNotesStyleIcon(e);
+      if (this.type === "page-style") {
+        if (this.translationsReady) {
+          const r = Z(e === "note" ? "Note" : "Page");
+          if (r && r !== (e === "note" ? "Note" : "Page"))
+            return r;
+        }
+        return e;
+      } else if (this.type === "icon-only")
+        return e === "note" ? l`<ds-icon type="note"></ds-icon>` : e === "page" ? l`<ds-icon type="page"></ds-icon>` : l`<span>${e}</span>`;
+    }
+    return e;
+  }
+  getColorKey(e) {
+    return {
+      "--tuned-red": "Red",
+      "--orange": "Orange",
+      "--yellow": "Yellow",
+      "--apple-green": "Apple green",
+      "--every-green": "Green",
+      "--zenith-blue": "Light blue",
+      "--sharp-blue": "Blue",
+      "--pink": "Pink"
+    }[e] || e.replace("--", "").replace("-", " ");
+  }
+  getColorName(e) {
+    const o = {
+      "--tuned-red": "Red",
+      "--orange": "Orange",
+      "--yellow": "Yellow",
+      "--apple-green": "Apple green",
+      "--every-green": "Green",
+      "--zenith-blue": "Light blue",
+      "--sharp-blue": "Blue",
+      "--pink": "Pink"
+    }[e];
+    if (o && this.translationsReady) {
+      const n = Z(o);
+      if (n && n !== o)
+        return n;
+    }
+    return e.replace("--", "").replace("-", " ");
+  }
+  getNotesStyleIcon(e) {
+    return e === "page" ? l`<ds-icon type="page"></ds-icon>` : e === "note" ? l`<ds-icon type="note"></ds-icon>` : e === "default" ? l`<ds-icon type="default"></ds-icon>` : e === "big" ? l`<ds-icon type="big"></ds-icon>` : e === "gallery" ? l`<ds-icon type="gallery"></ds-icon>` : l`<span>${e}</span>`;
+  }
+  render() {
+    return l`
+      <div class="cycle">
+        <ds-button
+          variant=${this.variant || (this.type === "language" || this.type === "theme" ? "secondary" : "primary")}
+          ?disabled=${this.disabled}
+          @click=${this.handleButtonClick}
         >
-          <ds-button
-            variant=${this.variant||(this.type==="language"||this.type==="theme"?"secondary":"primary")}
+          ${this.type === "notes-style-medium" || this.type === "icon-only" ? l`<span
+                style="display: inline-flex; align-items: center; gap: var(--025)"
+                >${this.getValueDisplay(this.currentValue)}</span
+              >` : this.type === "language" ? l`<ds-text
+                  default-value=${this.getValueDisplay(this.currentValue)}
+                ></ds-text>` : this.type === "theme" ? l`<ds-text
+                    text=${this.currentValue}
+                    default-value=${this.currentValue}
+                  ></ds-text>` : this.type === "accent-color" ? l`<ds-text
+                      text=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>` : this.type === "page-style" ? l`<ds-text
+                        text=${this.currentValue === "note" ? "Note" : "Page"}
+                        default-value=${this.currentValue}
+                      ></ds-text>` : l`<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
+        </ds-button>
+
+        ${this.type === "accent-color" ? l`
+              <div
+                class="color-preview"
+                style="background-color: var(${this.currentValue})"
+              ></div>
+            ` : ""}
+      </div>
+    `;
+  }
+  async waitForTranslations() {
+    return new Promise((e) => {
+      if (this.translationsReady) {
+        e();
+        return;
+      }
+      const r = () => {
+        this.translationsReady = !0, e();
+      };
+      window.addEventListener("translations-loaded", r, {
+        once: !0
+      }), setTimeout(() => {
+        this.translationsReady = !0, e();
+      }, 5e3);
+    });
+  }
+  handleTranslationsLoaded() {
+    if (this.translationsReady = !0, this.type === "language") {
+      const e = Ht();
+      this.values = e;
+    }
+    this.setupInitialValue();
+  }
+  handleLanguageChanged() {
+    this.setupInitialValue();
+  }
+  handleThemeChanged() {
+    this.setupInitialValue();
+  }
+  handleAccentColorChanged() {
+    this.setupInitialValue();
+  }
+  handleNoteBehaviorChanged() {
+    this.setupInitialValue();
+  }
+};
+dt.styles = x(Vn);
+let Ue = dt;
+customElements.define("ds-cycle", Ue);
+const Tn = ":host{display:inline;font-family:var(--typeface-regular, var(--typeface-regular-regular));font-size:inherit;color:inherit}", ht = class ht extends f {
+  render() {
+    const e = (/* @__PURE__ */ new Date()).getFullYear();
+    return l`<span>${e}</span>`;
+  }
+};
+ht.styles = x(Tn);
+let qe = ht;
+customElements.define("ds-date", qe);
+const Nn = ':host{display:block;width:100%;--gap-size: var(--unit);height:var(--gap-size);flex:0 0 auto}:host([tenth]){--gap-size: var(--tenth)}:host([quarter]){--gap-size: var(--quarter)}:host([half]){--gap-size: var(--half)}:host([eight-tenth]){--gap-size: var(--eight-tenth)}:host([unit]){--gap-size: var(--unit)}:host([double]){--gap-size: var(--double)}:host([triple]){--gap-size: var(--triple)}:host([quad]){--gap-size: var(--quad)}:host([oct]){--gap-size: var(--oct)}:host([dozen]){--gap-size: var(--dozen)}:host([size="01"]){--gap-size: var(--01)}:host([size="025"]){--gap-size: var(--025)}:host([size="05"]){--gap-size: var(--05)}:host([size="08"]){--gap-size: var(--08)}:host([size="1"]){--gap-size: var(--1)}:host([size="2"]){--gap-size: var(--2)}:host([size="3"]){--gap-size: var(--3)}:host([size="4"]){--gap-size: var(--4)}:host([size="8"]){--gap-size: var(--8)}:host([size="12"]){--gap-size: var(--12)}', pe = class pe extends f {
+  constructor() {
+    super(), this.size = "";
+  }
+  render() {
+    return l``;
+  }
+};
+pe.properties = {
+  /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
+  size: { type: String, reflect: !0 }
+}, pe.styles = x(Nn);
+let Ze = pe;
+customElements.define("ds-gap", Ze);
+const ge = class ge extends f {
+  constructor() {
+    super(), this.type = "text", this.name = "", this.value = "", this.placeholder = "", this.placeholderKey = "", this.label = "", this.labelText = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.autofocus = !1, this.autocomplete = "off", this.pattern = "", this.minlength = 0, this.maxlength = 0, this.min = "", this.max = "", this.step = "", this.variant = "default", this.error = "", this.errorText = "", this._focused = !1;
+  }
+  _handleInput(e) {
+    const r = e.target;
+    this.value = r.value, this.dispatchEvent(
+      new CustomEvent("input-change", {
+        detail: { value: this.value, name: this.name },
+        bubbles: !0
+      })
+    );
+  }
+  _handleFocus() {
+    this._focused = !0, this.dispatchEvent(new CustomEvent("input-focus", { bubbles: !0 }));
+  }
+  _handleBlur() {
+    this._focused = !1, this.dispatchEvent(new CustomEvent("input-blur", { bubbles: !0 }));
+  }
+  /**
+   * Focus the input element
+   */
+  focus() {
+    this.shadowRoot?.querySelector("input")?.focus();
+  }
+  /**
+   * Blur the input element
+   */
+  blur() {
+    this.shadowRoot?.querySelector("input")?.blur();
+  }
+  /**
+   * Select all text in the input
+   */
+  select() {
+    this.shadowRoot?.querySelector("input")?.select();
+  }
+  render() {
+    const e = !!(this.error || this.errorText);
+    return l`
+      <div class="input-wrapper">
+        ${this.label || this.labelText ? l`
+              <label for="input">
+                ${this.labelText ? l`<ds-text .text=${this.labelText}></ds-text>` : this.label}
+              </label>
+            ` : null}
+
+        <div class="input-container">
+          <input
+            id="input"
+            .type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
             ?disabled=${this.disabled}
-            @click=${this.handleButtonClick}
-          >
-            ${this.type==="notes-style-medium"||this.type==="icon-only"?a`<span
-                  style="display: inline-flex; align-items: center; gap: var(--025)"
-                  >${this.getValueDisplay(this.currentValue)}</span
-                >`:a`<span>${this.getValueDisplay(this.currentValue)}</span>`}
-          </ds-button>
-          ${this.type==="accent-color"?a`
-                <div
-                  class="color-preview"
-                  style="background-color: var(${this.currentValue})"
-                ></div>
-              `:""}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            ?autofocus=${this.autofocus}
+            autocomplete=${this.autocomplete}
+            pattern=${this.pattern || ""}
+            minlength=${this.minlength || ""}
+            maxlength=${this.maxlength || ""}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            class=${e ? "has-error" : ""}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          />
         </div>
+
+        ${e ? l`
+              <div class="error-message">
+                ${this.errorText ? l`<ds-text .text=${this.errorText}></ds-text>` : this.error}
+              </div>
+            ` : null}
       </div>
-    `}async waitForTranslations(){return new Promise(e=>{if(this.translationsReady){e();return}let s=()=>{this.translationsReady=!0,e()};window.addEventListener("translations-loaded",s,{once:!0}),setTimeout(()=>{this.translationsReady=!0,e()},5e3)})}handleTranslationsLoaded(){if(this.translationsReady=!0,this.type==="language"){let e=Me();this.values=e}this.setupInitialValue()}handleLanguageChanged(){this.setupInitialValue()}handleThemeChanged(){this.setupInitialValue()}handleAccentColorChanged(){this.setupInitialValue()}handleNoteBehaviorChanged(){this.setupInitialValue()}};Oe.styles=y`
-    .cycle-container {
-      display: flex;
-      justify-content: space-between;
-      gap: var(--025);
+    `;
+  }
+};
+ge.properties = {
+  type: { type: String, reflect: !0 },
+  name: { type: String, reflect: !0 },
+  value: { type: String },
+  placeholder: { type: String },
+  placeholderKey: { type: String, attribute: "placeholder-key" },
+  label: { type: String },
+  labelText: { type: String, attribute: "label-text" },
+  disabled: { type: Boolean, reflect: !0 },
+  readonly: { type: Boolean, reflect: !0 },
+  required: { type: Boolean, reflect: !0 },
+  autofocus: { type: Boolean },
+  autocomplete: { type: String },
+  pattern: { type: String },
+  minlength: { type: Number },
+  maxlength: { type: Number },
+  min: { type: String },
+  max: { type: String },
+  step: { type: String },
+  variant: { type: String, reflect: !0 },
+  error: { type: String },
+  errorText: { type: String, attribute: "error-text" },
+  _focused: { type: Boolean, state: !0 }
+}, ge.styles = Ae`
+    :host {
+      display: block;
       width: 100%;
     }
 
-    .cycle-label {
-      color: var(--text-color-primary);
-    }
-  `;customElements.define("ds-cycle",Oe);var ae=class extends h{constructor(){super(),this.key="",this.defaultValue="",this._text="",this._visible=!1,this.boundWindowHandlers={languageChanged:(()=>{this._loadText()}),translationsLoaded:(()=>{this._loadText()})},this.boundHostHandlers={mouseenter:(()=>{this._visible=!0,this.requestUpdate()}),mouseleave:(()=>{this._visible=!1,this.requestUpdate()}),focusin:(()=>{this._visible=!0,this.requestUpdate()}),focusout:(()=>{this._visible=!1,this.requestUpdate()})}}connectedCallback(){super.connectedCallback(),this._loadText(),window.addEventListener("language-changed",this.boundWindowHandlers.languageChanged),window.addEventListener("translations-loaded",this.boundWindowHandlers.translationsLoaded),this.addEventListener("mouseenter",this.boundHostHandlers.mouseenter),this.addEventListener("mouseleave",this.boundHostHandlers.mouseleave),this.addEventListener("focusin",this.boundHostHandlers.focusin),this.addEventListener("focusout",this.boundHostHandlers.focusout)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("language-changed",this.boundWindowHandlers.languageChanged),window.removeEventListener("translations-loaded",this.boundWindowHandlers.translationsLoaded),this.removeEventListener("mouseenter",this.boundHostHandlers.mouseenter),this.removeEventListener("mouseleave",this.boundHostHandlers.mouseleave),this.removeEventListener("focusin",this.boundHostHandlers.focusin),this.removeEventListener("focusout",this.boundHostHandlers.focusout)}updated(e){(e.has("key")||e.has("defaultValue"))&&this._loadText()}_loadText(){if(!this.key){this._text=this.defaultValue||"",this.requestUpdate();return}try{let e=C(this.key);this._text=e&&e!==this.key?e:this.defaultValue||this.key}catch(e){console.error("ds-tooltip: error loading text for key",this.key,e),this._text=this.defaultValue||this.key}this.requestUpdate()}render(){let e=["bubble",this._visible?"visible":""].join(" ");return a`
-      <span class="slot-wrapper"><slot></slot></span>
-      ${this._text?a`<div class="${e}">${this._text}</div>`:null}
-    `}};ae.properties={key:{type:String,reflect:!0},defaultValue:{type:String,reflect:!0,attribute:"default-value"},_text:{state:!0},_visible:{state:!0}};ae.styles=y`
-    :host {
-      position: relative;
-      display: inline-block;
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--025) * var(--sf, 1));
+      width: 100%;
     }
 
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
+    label {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--text-color-secondary);
     }
 
-    .bubble {
+    .input-container {
+      position: relative;
       display: flex;
       align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      transition:
-        opacity 120ms ease,
-        transform 120ms ease;
-      background-color: light-dark(var(--black), var(--white));
-      color: light-dark(var(--white), var(--black));
-      border-radius: 0;
-      font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--sf));
-      font-family: var(
-        --typeface,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
+      width: 100%;
     }
 
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;customElements.define("ds-tooltip",ae);var Pe=class extends h{render(){let e=new Date().getFullYear();return a`<span>${e}</span>`}};Pe.styles=y`
-    :host {
-      display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
-      font-size: inherit;
-      color: inherit;
-    }
-  `;customElements.define("ds-date",Pe);var He=class extends h{render(){return a`<slot></slot>`}};He.styles=y`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
+    input {
       width: 100%;
-    }
-  `;customElements.define("ds-list",He);var le=class extends h{constructor(){super(),this.type="fill"}render(){return a`<slot></slot>`}};le.properties={type:{type:String,reflect:!0}};le.styles=y`
-    :host {
-      display: flex;
-      align-items: end;
-      width: calc(240px * var(--sf));
+      height: calc(var(--1) * var(--sf, 1));
+      padding: 0 calc(var(--025) * var(--sf, 1));
+      font-family: var(--typeface-regular);
+      font-size: calc(14px * var(--sf, 1));
+      color: var(--text-color-primary);
+      background-color: var(--input-background, transparent);
+      border: 1px solid var(--input-border-color, var(--border-color, #ccc));
+      border-radius: calc(var(--025) * var(--sf, 1));
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+      box-sizing: border-box;
     }
 
-    :host([type="fill"]) {
-      justify-content: space-between;
-      height: calc(var(--1) * var(--sf));
+    input::placeholder {
+      color: var(--text-color-tertiary, #999);
     }
 
-    :host([type="centered"]) {
-      justify-content: center;
-      height: calc(var(--1) * var(--sf));
-      gap: calc(var(--025) * var(--sf));
-    }
-  `;customElements.define("ds-row",le);var ce=class extends h{constructor(){super(),this.data=[],this.columns=["Product","Users","Retention"],this.showStatus=!0}render(){return a`
-      <div class="table-container">
-        <div class="table-header">
-        
-          <div class="header-cell product-cell">Product</div>
-          <div class="header-cell users-cell">Users</div>
-          <div class="header-cell retention-cell">Retention</div>
-          ${this.showStatus?a`<div class="header-cell">Status</div>`:""}
-        </div>
-        <div class="table-body">
-          ${this.data.map((e,s)=>a`
-              <div class="data-cell product-cell">${e.product}</div>
-              <div class="data-cell users-cell">${e.users}</div>
-              <div class="data-cell retention-cell">${e.retention}</div>
-              ${this.showStatus?a`<div class="data-cell status-cell">
-                    ${e.status||"Pending"}
-                  </div>`:""}
-            `)}
-        </div>
-      </div>
-    `}};ce.properties={data:{type:Array},columns:{type:Array},showStatus:{type:Boolean,attribute:"show-status"}};ce.styles=y`
-    :host {
-      display: block;
-      width: 100%;
+    input:focus {
+      border-color: var(--accent-color, #007aff);
+      box-shadow: 0 0 0 2px var(--input-focus-ring, rgba(0, 122, 255, 0.2));
     }
 
-    .table-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--input-disabled-background, #f5f5f5);
     }
 
-    .table-header {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      height: 20px;
-      width: 400px;
+    input:read-only {
+      background-color: var(--input-readonly-background, #fafafa);
     }
 
-    .table-body {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      border: 1px solid var(--black);
-      width: 400px;
+    :host([variant="filled"]) input {
+      background-color: var(
+        --input-filled-background,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+      border-bottom: 2px solid var(--border-color, #ccc);
+      border-radius: calc(var(--025) * var(--sf, 1))
+        calc(var(--025) * var(--sf, 1)) 0 0;
     }
 
-    .header-cell {
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      padding:  0 2px;
-      font-family: var(--typeface);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .data-cell {
-      height: 20px;
-      margin-top: -1px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-    
-      outline: 1px solid var(--black);
+    :host([variant="filled"]) input:focus {
+      border-bottom-color: var(--accent-color, #007aff);
+      box-shadow: none;
+    }
 
-      font-family: var(--typeface);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
+    :host([variant="outlined"]) input {
+      background-color: transparent;
+      border: 2px solid var(--border-color, #ccc);
     }
 
-    .status-cell {
-      background-color: var(--light-green);
+    :host([variant="outlined"]) input:focus {
+      border-color: var(--accent-color, #007aff);
     }
 
-    .product-cell {
-      text-align: left;
-      justify-content: flex-start;
+    .error-message {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--error-color, #ff3b30);
+      margin-top: calc(var(--025) * var(--sf, 1));
     }
 
-    .users-cell,
-    .retention-cell {
-      text-align: center;
+    :host([required]) label::after {
+      content: " *";
+      color: var(--error-color, #ff3b30);
     }
 
-    .status-cell {
-      text-align: center;
+    /* Error state */
+    input.has-error {
+      border-color: var(--error-color, #ff3b30);
     }
 
-    /* Responsive adjustments */
-    @media (max-width: 480px) {
-      .table-header,
-      .table-body {
-        width: 100%;
-        grid-template-columns: 1fr 60px 60px 60px;
-      }
+    input.has-error:focus {
+      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
     }
-  `;customElements.define("ds-table",ce);var de=class extends h{render(){return a``}};de.properties={align:{type:String}};de.styles=y`
-    :host {
-      margin-top: 0.5px !important;
-      margin-left: 0.5px !important;
-      display: grid;
-      width: 1440px;
-      height: 360px;
-      grid-template-columns: repeat(auto-fill, 19px);
-      grid-template-rows: repeat(auto-fill, 19px);
-      gap: 1px;
-      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: 1px solid black;
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
+  `;
+let We = ge;
+customElements.define("ds-input", We);
+const In = ':host{position:relative;display:inline-block}.slot-wrapper{display:inline-flex;align-items:center}.bubble{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;bottom:100%;transform:translate(-50%,calc(-2px * var(--sf)));z-index:1000;pointer-events:none;height:calc(var(--08) * var(--sf));opacity:0;transition:opacity .12s ease,transform .12s ease;background-color:light-dark(var(--black),var(--white));color:light-dark(var(--white),var(--black));border-radius:0;font-size:var(--type-size-default);padding:0px calc(1px * var(--sf));font-family:var( --typeface-regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );font-weight:500;white-space:nowrap;min-width:max-content}.bubble.visible{opacity:1}', ve = class ve extends f {
+  constructor() {
+    super(), this.text = "", this.defaultValue = "", this._text = "", this._visible = !1, this.boundWindowHandlers = {
+      languageChanged: (() => {
+        this._loadText();
+      }),
+      translationsLoaded: (() => {
+        this._loadText();
+      })
+    }, this.boundHostHandlers = {
+      mouseenter: (() => {
+        this._visible = !0, this.requestUpdate();
+      }),
+      mouseleave: (() => {
+        this._visible = !1, this.requestUpdate();
+      }),
+      focusin: (() => {
+        this._visible = !0, this.requestUpdate();
+      }),
+      focusout: (() => {
+        this._visible = !1, this.requestUpdate();
+      })
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._loadText(), window.addEventListener(
+      "language-changed",
+      this.boundWindowHandlers.languageChanged
+    ), window.addEventListener(
+      "translations-loaded",
+      this.boundWindowHandlers.translationsLoaded
+    ), this.addEventListener("mouseenter", this.boundHostHandlers.mouseenter), this.addEventListener("mouseleave", this.boundHostHandlers.mouseleave), this.addEventListener("focusin", this.boundHostHandlers.focusin), this.addEventListener("focusout", this.boundHostHandlers.focusout);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener(
+      "language-changed",
+      this.boundWindowHandlers.languageChanged
+    ), window.removeEventListener(
+      "translations-loaded",
+      this.boundWindowHandlers.translationsLoaded
+    ), this.removeEventListener("mouseenter", this.boundHostHandlers.mouseenter), this.removeEventListener("mouseleave", this.boundHostHandlers.mouseleave), this.removeEventListener("focusin", this.boundHostHandlers.focusin), this.removeEventListener("focusout", this.boundHostHandlers.focusout);
+  }
+  updated(e) {
+    (e.has("text") || e.has("defaultValue")) && this._loadText();
+  }
+  _loadText() {
+    if (!this.text) {
+      this._text = this.defaultValue || "", this.requestUpdate();
+      return;
+    }
+    try {
+      const e = Z(this.text);
+      this._text = e && e !== this.text ? e : this.defaultValue || this.text;
+    } catch (e) {
+      console.error("ds-tooltip: error loading text for text", this.text, e), this._text = this.defaultValue || this.text;
     }
+    this.requestUpdate();
+  }
+  render() {
+    const e = ["bubble", this._visible ? "visible" : ""].join(" ");
+    return l`
+      <span class="slot-wrapper"><slot></slot></span>
+      ${this._text ? l`<div class="${e}">${this._text}</div>` : null}
+    `;
+  }
+};
+ve.properties = {
+  text: { type: String, reflect: !0 },
+  defaultValue: { type: String, reflect: !0, attribute: "default-value" },
+  _text: { state: !0 },
+  _visible: { state: !0 }
+}, ve.styles = x(In);
+let Fe = ve;
+customElements.define("ds-tooltip", Fe);
+const zn = ':host{display:flex;align-items:end;width:calc(240px * var(--sf))}:host([type="fill"]){justify-content:space-between;height:calc(var(--1) * var(--sf))}:host([type="centered"]){justify-content:center;height:calc(var(--1) * var(--sf));gap:calc(var(--025) * var(--sf))}', fe = class fe extends f {
+  constructor() {
+    super(), this.type = "fill";
+  }
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+fe.properties = {
+  type: { type: String, reflect: !0 }
+}, fe.styles = x(zn);
+let Ke = fe;
+customElements.define("ds-row", Ke);
+const On = ":host{display:block;width:calc(240px * var(--sf));color:var(--text-color-primary)}details{width:100%}summary{cursor:pointer;user-select:none;list-style:none;outline:none}summary::-webkit-details-marker{display:none}.summaryRow{width:100%}ds-icon.chevron{transform:rotate(0);transition:transform .14s ease}details[open] ds-icon.chevron{transform:rotate(180deg)}.detailsBody{padding-top:calc(var(--half) * var(--sf))}.detailsText{display:block;white-space:normal;text-align:left}", we = class we extends f {
+  constructor() {
+    super(), this.summary = "", this.details = "", this.open = !1, this._hasSlottedContent = !1;
+  }
+  _handleSlotChange(e) {
+    const n = e.target.assignedNodes({ flatten: !0 }).some(
+      (i) => i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && i.textContent?.trim()
+    );
+    this._hasSlottedContent = n;
+  }
+  render() {
+    return l`
+      <details ?open=${this.open}>
+        <summary>
+          <ds-row class="summaryRow" type="centered">
+            <ds-text .text=${this.summary}></ds-text>
+            <ds-icon class="chevron" aria-hidden="true">
+              <svg
+                viewBox="0 0 10.157 8.219"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </ds-icon>
+          </ds-row>
+        </summary>
 
-    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-    :host(.mobile) {
-      width: calc(100% - calc(1px * var(--sf)));
-      max-width: 100vw;
-      margin-left: 0 !important;
-      margin-top: 0 !important;
-      box-sizing: border-box;
-      position: fixed;
-      top: calc(0.5px * var(--sf));
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-      gap: calc(1px * var(--sf));
-      grid-template-columns: repeat(14, calc(19px * var(--sf)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
+        <div class="detailsBody">
+          <slot name="details" @slotchange=${this._handleSlotChange}></slot>
+          ${this._hasSlottedContent ? "" : l`<ds-text
+                class="detailsText"
+                .text=${this.details}
+              ></ds-text>`}
+        </div>
+      </details>
+    `;
+  }
+};
+we.properties = {
+  summary: { type: String },
+  details: { type: String },
+  open: { type: Boolean, reflect: !0 },
+  _hasSlottedContent: { type: Boolean, state: !0 }
+}, we.styles = x(On);
+let Ge = we;
+customElements.define("ds-accordion", Ge);
+const me = class me extends f {
+  constructor() {
+    super(), this.action = "", this.method = "post", this.name = "", this.novalidate = !1, this.autocomplete = "on", this._isSubmitting = !1;
+  }
+  /**
+   * Get all form data as an object
+   */
+  getFormData() {
+    const e = {}, o = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
+    for (const n of o)
+      this._collectFormData(n, e);
+    return e;
+  }
+  _collectFormData(e, r) {
+    const o = e.getAttribute("name") || e.name;
+    if (o) {
+      const i = e.value;
+      i !== void 0 && (e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") ? e.type === "checkbox" ? r[o] = e.checked : e.type === "radio" && e.checked && (r[o] = i) : r[o] = i);
+    }
+    (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((i) => {
+      this._collectFormData(i, r);
+    });
+  }
+  /**
+   * Validate the form
+   */
+  validate() {
+    const e = {
+      valid: !0,
+      errors: {}
+    };
+    if (this.novalidate)
+      return e;
+    const o = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
+    for (const n of o)
+      this._validateElement(n, e);
+    return e;
+  }
+  _validateElement(e, r) {
+    const o = e.getAttribute("name") || e.name;
+    if (e.tagName.toLowerCase() === "ds-input") {
+      const i = e;
+      i.required && !i.value && (r.valid = !1, r.errors[o || "unknown"] = "This field is required");
+    }
+    (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e.checkValidity() || (r.valid = !1, r.errors[o || "unknown"] = e.validationMessage)), (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((i) => {
+      this._validateElement(i, r);
+    });
+  }
+  /**
+   * Reset the form
+   */
+  reset() {
+    const r = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
+    for (const o of r)
+      this._resetElement(o);
+    this.dispatchEvent(new CustomEvent("form-reset", { bubbles: !0 }));
+  }
+  _resetElement(e) {
+    (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e instanceof HTMLInputElement && e.type === "checkbox" ? e.checked = !1 : e.value = ""), e.tagName.toLowerCase() === "ds-input" && (e.value = ""), (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((o) => {
+      this._resetElement(o);
+    });
+  }
+  /**
+   * Submit the form
+   */
+  async submit() {
+    if (this._isSubmitting) return;
+    const e = this.validate();
+    if (!e.valid) {
+      this.dispatchEvent(
+        new CustomEvent("form-invalid", {
+          detail: e.errors,
+          bubbles: !0
+        })
+      );
+      return;
+    }
+    this._isSubmitting = !0;
+    const r = this.getFormData();
+    if (this.dispatchEvent(
+      new CustomEvent("form-submit", {
+        detail: { data: r },
+        bubbles: !0
+      })
+    ), this.action)
+      try {
+        const o = await fetch(this.action, {
+          method: this.method.toUpperCase(),
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(r)
+        });
+        this.dispatchEvent(
+          new CustomEvent("form-response", {
+            detail: { response: o, data: r },
+            bubbles: !0
+          })
+        );
+      } catch (o) {
+        this.dispatchEvent(
+          new CustomEvent("form-error", {
+            detail: { error: o, data: r },
+            bubbles: !0
+          })
+        );
+      }
+    this._isSubmitting = !1;
+  }
+  _handleSubmit(e) {
+    e.preventDefault(), this.submit();
+  }
+  _handleKeydown(e) {
+    e.key === "Enter" && !e.shiftKey && e.target.tagName.toLowerCase() !== "textarea" && (e.preventDefault(), this.submit());
+  }
+  render() {
+    return l`
+      <form
+        .action=${this.action}
+        .method=${this.method}
+        .name=${this.name}
+        ?novalidate=${this.novalidate}
+        autocomplete=${this.autocomplete}
+        @submit=${this._handleSubmit}
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </form>
+    `;
+  }
+};
+me.properties = {
+  action: { type: String },
+  method: { type: String },
+  name: { type: String },
+  novalidate: { type: Boolean, reflect: !0 },
+  autocomplete: { type: String },
+  _isSubmitting: { type: Boolean, state: !0 }
+}, me.styles = Ae`
+    :host {
+      display: block;
+      width: 100%;
     }
 
-    :host([align="left"]) {
-      left: 0;
-      transform: none;
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--05) * var(--sf, 1));
+      width: 100%;
     }
 
-    :host([align="center"]) {
-      left: 50%;
-      transform: translateX(-50%);
+    ::slotted(*) {
+      width: 100%;
     }
 
-    :host([align="right"]) {
-      left: auto;
-      right: 0;
-      transform: none;
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
     }
-  `;customElements.define("ds-grid",de);var ue=class extends h{constructor(){super(...arguments),this.mode="portfolio"}render(){let e=this.debug||this.mode==="debug",s=this.mode==="portfolio",r=this.mode==="company",n=this.mode==="app";return a`
+  `;
+let Je = me;
+customElements.define("ds-form", Je);
+const Pn = ":host{display:flex;flex-direction:column;gap:0;width:100%}", ut = class ut extends f {
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+ut.styles = x(Pn);
+let Ye = ut;
+customElements.define("ds-list", Ye);
+const Bn = ":host{display:block;width:100%}.table-container{display:flex;flex-direction:column;width:100%}.table-header{display:grid;grid-template-columns:160px 80px 80px 80px;height:20px;width:400px}.table-body{display:grid;grid-template-columns:160px 80px 80px 80px;border:1px solid var(--black);width:400px}.header-cell{height:20px;display:flex;align-items:center;justify-content:left;padding:0 2px;font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:var(--type-lineheight-default);color:var(--black);letter-spacing:-.26px}.data-cell{height:20px;margin-top:-1px;display:flex;align-items:center;justify-content:left;outline:1px solid var(--black);font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:var(--type-lineheight-default);color:var(--black);letter-spacing:-.26px}.status-cell{background-color:var(--apple-green);text-align:center}.product-cell{text-align:left;justify-content:flex-start}.users-cell,.retention-cell{text-align:center}@media (max-width: 480px){.table-header,.table-body{width:100%;grid-template-columns:1fr 60px 60px 60px}}", be = class be extends f {
+  constructor() {
+    super(), this.data = [], this.columns = ["Product", "Users", "Retention"], this.showStatus = !0;
+  }
+  render() {
+    return l`
+      <div class="table-container">
+        <div class="table-header">
+          <div class="header-cell product-cell">Product</div>
+          <div class="header-cell users-cell">Users</div>
+          <div class="header-cell retention-cell">Retention</div>
+          ${this.showStatus ? l`<div class="header-cell">Status</div>` : ""}
+        </div>
+        <div class="table-body">
+          ${this.data.map(
+      (e, r) => l`
+              <div class="data-cell product-cell">${e.product}</div>
+              <div class="data-cell users-cell">${e.users}</div>
+              <div class="data-cell retention-cell">${e.retention}</div>
+              ${this.showStatus ? l`<div class="data-cell status-cell">
+                    ${e.status || "Pending"}
+                  </div>` : ""}
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+};
+be.properties = {
+  data: { type: Array },
+  columns: { type: Array },
+  showStatus: { type: Boolean, attribute: "show-status" }
+}, be.styles = x(Bn);
+let Xe = be;
+customElements.define("ds-table", Xe);
+const Dn = ":host{display:flex;width:100%;max-width:100%;flex-direction:column;background-color:var(--background-color);box-sizing:border-box}:host ::slotted(*){max-width:100%;box-sizing:border-box}@media (max-width: 820px){:host{width:100%;max-width:100%}}@media (min-width: 821px){:host{max-width:1000px;margin-left:auto;margin-right:auto;width:100%}}", pt = class pt extends f {
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+pt.styles = x(Dn);
+let Qe = pt;
+customElements.define("ds-container", Qe);
+const jn = ':host{margin-top:.5px!important;margin-left:.5px!important;display:grid;width:1440px;height:1280px;grid-template-columns:repeat(auto-fill,19px);grid-template-rows:repeat(auto-fill,19px);gap:1px;row-rule:calc(1px * var(--sf)) solid var(--grid-color);column-rule:calc(1px * var(--sf)) solid var(--grid-color);outline:calc(1px * var(--sf)) solid light-dark(var(--sharp-blue),var(--yellow));position:fixed;top:0;left:50%;transform:translate(-50%);pointer-events:none;z-index:300}:host(.mobile){width:calc(100% - calc(1px * var(--sf)));max-width:100vw;margin-left:.5px!important;margin-top:0!important;box-sizing:border-box;position:fixed;top:calc(.5px * var(--sf));left:50%;transform:translate(-50%);pointer-events:none;z-index:300;gap:calc(1px * var(--sf));grid-template-columns:repeat(14,calc(19px * var(--sf)));grid-template-rows:repeat(auto-fill,calc(19px * var(--sf)))}:host([align="left"]){left:0;transform:none}:host([align="center"]){left:50%;transform:translate(-50%)}:host([align="right"]){left:auto;right:0;transform:none}', ye = class ye extends f {
+  connectedCallback() {
+    super.connectedCallback(), this.updateMobileClass(), this.resizeObserver = () => {
+      this.resizeTimeout && clearTimeout(this.resizeTimeout), this.resizeTimeout = setTimeout(() => {
+        this.updateMobileClass();
+      }, 100);
+    }, window.addEventListener("resize", this.resizeObserver);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver && window.removeEventListener("resize", this.resizeObserver), this.resizeTimeout && clearTimeout(this.resizeTimeout);
+  }
+  updateMobileClass() {
+    st() ? (this.classList.add("mobile"), this.classList.remove("desktop")) : (this.classList.add("desktop"), this.classList.remove("mobile"));
+  }
+  render() {
+    return l``;
+  }
+};
+ye.properties = {
+  align: { type: String }
+}, ye.styles = x(jn);
+let et = ye;
+customElements.define("ds-grid", et);
+const Rn = ':host{display:grid;position:relative;width:100%}slot{display:contents}:host([mode="portfolio"]){--portfolio-cols: 120px 480px 40px;--portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;--portfolio-areas: "square . ." ". title ." ". header ." ". projects ." ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";--portfolio-overlay-cols: 120px 480px;--portfolio-overlay-areas: "square ." ". title" ". header" ". projects" ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";grid-template-columns:var(--portfolio-cols);grid-template-rows:var(--portfolio-rows);grid-template-areas:var(--portfolio-areas);min-height:600px;background-color:#a5a5a508;max-width:640px;margin:0}:host([mode="portfolio"]) .view-overlay{grid-template-columns:var(--portfolio-overlay-cols);grid-template-rows:var(--portfolio-rows);grid-template-areas:var(--portfolio-overlay-areas)}:host([mode="company"]){--company-cols: auto 400px auto;--company-rows: 80px 20px 20px 120px 20px 120px;--company-areas: ". . ." ". header ." ". . ." ". content ." ". . ." ". footer .";grid-template-columns:var(--company-cols);grid-template-rows:var(--company-rows);grid-template-areas:var(--company-areas);gap:0;max-width:100%}:host([mode="company"]) .view-overlay{grid-template-columns:var(--company-cols);grid-template-rows:var(--company-rows);grid-template-areas:var(--company-areas);gap:0}:host([align="left"]),:host([mode="portfolio"][align="left"]),:host([mode="company"][align="left"]),:host([mode="app"][align="left"]){margin:0;justify-self:start}:host([align="center"]),:host([mode="portfolio"][align="center"]),:host([mode="company"][align="center"]),:host([mode="app"][align="center"]){margin:0 auto;justify-self:center}:host([align="right"]),:host([mode="portfolio"][align="right"]),:host([mode="company"][align="right"]),:host([mode="app"][align="right"]){margin:0 0 0 auto;justify-self:end}:host([mode="app"]){--app-cols: 100%;--app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));--app-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";--app-overlay-cols: 100%;--app-overlay-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));--app-overlay-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";grid-template-columns:var(--app-cols);grid-template-rows:var(--app-rows);grid-template-areas:var(--app-areas);min-height:100vh;background-color:transparent;width:calc(240px * var(--sf, 1));max-width:calc(240px * var(--sf, 1));margin:0 auto}:host([mode="app"]) .view-overlay{grid-template-columns:var(--app-overlay-cols);grid-template-rows:var(--app-overlay-rows);grid-template-areas:var(--app-overlay-areas)}.view-overlay{position:absolute;margin-left:-1px;inset:0;pointer-events:none;z-index:1000;display:grid}.view-area{display:flex;width:calc(240px * var(--sf, 1));height:100%;align-items:center;justify-content:center;font-family:var(--typeface-regular);font-size:calc(var(--type-size-default) * var(--05));color:color-mix(in srgb,var(--tuned-red) 25%,transparent);background-color:color-mix(in srgb,var(--accent-color) 25%,transparent);opacity:1}:host([mode="portfolio"]) .view-area:nth-of-type(1){background-color:color-mix(in srgb,var(--tuned-red) 25%,transparent)}:host([mode="portfolio"]) .view-area:nth-of-type(2){border-color:var(--sharp-blue)}:host([mode="portfolio"]) .view-area:nth-of-type(3){border-color:var(--yellow)}:host([mode="portfolio"]) .view-area:nth-of-type(4){border-color:var(--apple-green)}:host([mode="portfolio"]) .view-area:nth-of-type(5){border-color:var(--pink)}:host([mode="portfolio"]) .view-area:nth-of-type(6){border-color:var(--orange)}:host([mode="portfolio"]) .view-area:nth-of-type(7){border-color:var(--zenith-blue)}:host([mode="company"]) .view-area:nth-of-type(1){border-color:var(--tuned-red)}:host([mode="company"]) .view-area:nth-of-type(2){border-color:var(--sharp-blue)}:host([mode="company"]) .view-area:nth-of-type(3){border-color:var(--yellow)}:host([mode="app"]) .view-area:nth-of-type(1){background-color:color-mix(in srgb,var(--tuned-red) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(2){background-color:color-mix(in srgb,var(--sharp-blue) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(3){background-color:color-mix(in srgb,var(--yellow) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(4){background-color:color-mix(in srgb,var(--apple-green) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(5){background-color:color-mix(in srgb,var(--pink) 25%,transparent)}.view-square{grid-area:square}.view-title{grid-area:title}.view-header{grid-area:header}.view-projects{grid-area:projects}.view-bio{grid-area:bio}.view-nav{grid-area:nav}.view-footer{grid-area:footer}.view-content{grid-area:content}.view-banner{grid-area:banner}.view-main{grid-area:main}.view-page-dots{grid-area:page-dots}', xe = class xe extends f {
+  constructor() {
+    super(...arguments), this.mode = "portfolio";
+  }
+  render() {
+    const e = this.view || this.mode === "view", r = this.mode === "portfolio", o = this.mode === "company", n = this.mode === "app", i = this.mode === "list", s = this.mode === "home";
+    return l`
       <slot></slot>
-      ${e?a`
-            <div class="debug-overlay">
-              ${n?a`
-                    <div class="debug-area debug-banner">
-                      <ds-text key="banner">banner</ds-text>
-                    </div>
-                    <div class="debug-area debug-header">
-                      <ds-text key="header">header</ds-text>
+      ${e ? l`
+            <div class="view-overlay">
+              ${s ? l`
+                    <div class="view-area view-banner">
+                      <div class="grid-area-label">
+                        <ds-text key="banner" default-value="banner"></ds-text>
+                      </div>
                     </div>
-
-                    <div class="debug-area debug-main">
-                      <ds-text key="main">main</ds-text>
+                    <div class="view-area view-header">
+                      <div class="grid-area-label">
+                        <ds-text key="header" default-value="header"></ds-text>
+                      </div>
                     </div>
-                    <div class="debug-area debug-footer-app">
-                      <ds-text key="footer">footer</ds-text>
+                    <div class="view-area view-message">
+                      <div class="grid-area-label">
+                        <ds-text
+                          key="message"
+                          default-value="message"
+                        ></ds-text>
+                      </div>
                     </div>
-                  `:r?a`
-                      <div class="debug-area debug-header">
-                        <ds-text key="header">header</ds-text>
+                    <div class="view-area view-lists">
+                      <div class="grid-area-label">
+                        <ds-text key="lists" default-value="lists"></ds-text>
                       </div>
-                      <div class="debug-area debug-content">
-                        <ds-text key="content">content</ds-text>
+                    </div>
+                    <div class="view-area view-footer">
+                      <div class="grid-area-label">
+                        <ds-text key="footer" default-value="footer"></ds-text>
                       </div>
-                      <div class="debug-area debug-footer">
-                        <ds-text key="footer">footer</ds-text>
+                    </div>
+                  ` : i ? l`
+                      <div class="view-area view-banner">
+                        <div class="grid-area-label">
+                          <ds-text
+                            key="banner"
+                            default-value="banner"
+                          ></ds-text>
+                        </div>
                       </div>
-                    `:s?a`
-                        <div class="debug-area debug-square">
-                          <ds-text key="square">square</ds-text>
+                      <div class="view-area view-header">
+                        <div class="grid-area-label">
+                          <ds-text
+                            key="header"
+                            default-value="header"
+                          ></ds-text>
                         </div>
-                        <div class="debug-area debug-title">
-                          <ds-text key="title">title</ds-text>
+                      </div>
+                      <div class="view-area view-board">
+                        <div class="grid-area-label">
+                          <ds-text key="board" default-value="board"></ds-text>
                         </div>
-                        <div class="debug-area debug-header">
-                          <ds-text key="header">header</ds-text>
+                      </div>
+                    ` : n ? l`
+                        <div class="view-area view-banner">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="banner"
+                              default-value="banner"
+                            ></ds-text>
+                          </div>
                         </div>
-                        <div class="debug-area debug-projects">
-                          <ds-text key="projects">projects</ds-text>
+                        <div class="view-area view-header">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="header"
+                              default-value="header"
+                            ></ds-text>
+                          </div>
                         </div>
-                        <div class="debug-area debug-bio">
-                          <ds-text key="bio">bio</ds-text>
+                        <div class="view-area view-main">
+                          <div class="grid-area-label">
+                            <ds-text key="main" default-value="main"></ds-text>
+                          </div>
                         </div>
-                        <div class="debug-area debug-nav">
-                          <ds-text key="nav">nav</ds-text>
+                        <div class="view-area view-page-dots">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="pageDots"
+                              default-value="page-dots"
+                            ></ds-text>
+                          </div>
                         </div>
-                        <div class="debug-area debug-footer">
-                          <ds-text key="footer">footer</ds-text>
+                        <div class="view-area view-footer">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="footer"
+                              default-value="footer"
+                            ></ds-text>
+                          </div>
                         </div>
-                      `:""}
+                      ` : o ? l`
+                          <div class="view-area view-header">
+                            <div class="grid-area-label">
+                              <ds-text
+                                key="header"
+                                default-value="header"
+                              ></ds-text>
+                            </div>
+                          </div>
+                          <div class="view-area view-content">
+                            <div class="grid-area-label">
+                              <ds-text
+                                key="content"
+                                default-value="content"
+                              ></ds-text>
+                            </div>
+                          </div>
+                          <div class="view-area view-footer">
+                            <div class="grid-area-label">
+                              <ds-text
+                                key="footer"
+                                default-value="footer"
+                              ></ds-text>
+                            </div>
+                          </div>
+                        ` : r ? l`
+                            <div class="view-area view-square">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="square"
+                                  default-value="square"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-title">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="title"
+                                  default-value="title"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-header">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="header"
+                                  default-value="header"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-projects">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="projects"
+                                  default-value="projects"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-bio">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="bio"
+                                  default-value="bio"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-nav">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="nav"
+                                  default-value="nav"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-footer">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="footer"
+                                  default-value="footer"
+                                ></ds-text>
+                              </div>
+                            </div>
+                          ` : ""}
             </div>
-          `:""}
-    `}};ue.properties={mode:{type:String},align:{type:String},debug:{type:Boolean}};ue.styles=y`
+          ` : ""}
+    `;
+  }
+};
+xe.properties = {
+  mode: { type: String },
+  align: { type: String },
+  view: { type: Boolean }
+}, xe.styles = [
+  x(Rn),
+  Ae`
     :host {
       display: grid;
       position: relative;
       width: 100%;
     }
 
+    slot {
+      display: contents;
+    }
+
     :host([mode="portfolio"]) {
-      grid-template-columns: 120px 480px 40px;
-      grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
-      grid-template-areas:
-        "square . ."
-        ". title ."
-        ". header ."
-        ". projects ."
-        ". . ."
-        ". bio ."
-        ". . ."
-        ". nav ."
-        ". . ."
-        ". footer ."
-        ". . .";
+      --portfolio-cols: 120px 480px 40px;
+      --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
+      --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
+        ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
+      --portfolio-overlay-cols: 120px 480px;
+      --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
+        ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
+      grid-template-columns: var(--portfolio-cols);
+      grid-template-rows: var(--portfolio-rows);
+      grid-template-areas: var(--portfolio-areas);
       min-height: 600px;
       background-color: rgba(165, 165, 165, 0.03);
       max-width: 640px;
-      margin: 0 auto;
+      margin: 0;
+    }
+
+    :host([mode="portfolio"]) .view-overlay {
+      grid-template-columns: var(--portfolio-overlay-cols);
+      grid-template-rows: var(--portfolio-rows);
+      grid-template-areas: var(--portfolio-overlay-areas);
     }
 
     :host([mode="company"]) {
-      grid-template-columns: auto 400px auto;
-      grid-template-rows: 80px 20px 20px 120px 20px 120px;
-      grid-template-areas:
-        ". . ."
-        ". header ."
-        ". . ."
-        ". content ."
-        ". . ."
+      --company-cols: auto 400px auto;
+      --company-rows: 80px 20px 20px 120px 20px 120px;
+      --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
         ". footer .";
+      grid-template-columns: var(--company-cols);
+      grid-template-rows: var(--company-rows);
+      grid-template-areas: var(--company-areas);
       gap: 0;
       max-width: 100%;
     }
 
-    :host([align="left"]) {
+    :host([mode="company"]) .view-overlay {
+      grid-template-columns: var(--company-cols);
+      grid-template-rows: var(--company-rows);
+      grid-template-areas: var(--company-areas);
+      gap: 0;
+    }
+
+    :host([align="left"]),
+    :host([mode="portfolio"][align="left"]),
+    :host([mode="company"][align="left"]),
+    :host([mode="app"][align="left"]),
+    :host([mode="list"][align="left"]),
+    :host([mode="home"][align="left"]) {
       margin: 0;
       justify-self: start;
     }
 
-    :host([align="center"]) {
+    :host([align="center"]),
+    :host([mode="portfolio"][align="center"]),
+    :host([mode="company"][align="center"]),
+    :host([mode="app"][align="center"]),
+    :host([mode="list"][align="center"]),
+    :host([mode="home"][align="center"]) {
       margin: 0 auto;
       justify-self: center;
     }
 
-    :host([align="right"]) {
+    :host([align="right"]),
+    :host([mode="portfolio"][align="right"]),
+    :host([mode="company"][align="right"]),
+    :host([mode="app"][align="right"]),
+    :host([mode="list"][align="right"]),
+    :host([mode="home"][align="right"]) {
       margin: 0 0 0 auto;
       justify-self: end;
     }
 
     /* App mode - Base */
     :host([mode="app"]) {
-      grid-template-columns: 1fr;
-      grid-template-rows: calc(var(--1) * var(--sf)) 20px 1fr auto;
-      grid-template-areas:
-        "banner"
-        "main"
+      --app-cols: 100%;
+      --app-overlay-cols: 100%;
+      grid-template-columns: var(--app-cols);
+      grid-template-rows: var(--app-layout);
+      grid-template-areas: var(--app-layout-areas);
+      min-height: 100vh;
+      background-color: transparent;
+      width: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
+      margin: 0 auto;
+    }
+
+    :host([mode="app"]) .view-overlay {
+      grid-template-columns: var(--app-overlay-cols);
+      grid-template-rows: var(--app-layout);
+      grid-template-areas: var(--app-layout-areas);
+    }
+
+    /* List mode - Base */
+    :host([mode="list"]) {
+      --list-cols: 100%;
+      --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
+      --list-areas: "banner" "." "header" "board";
+      --list-overlay-cols: 100%;
+      --list-overlay-rows: calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--twenty) * var(--sf));
+      --list-overlay-areas: "banner" "." "header" "board";
+      grid-template-columns: var(--list-cols);
+      grid-template-rows: var(--list-rows);
+      grid-template-areas: var(--list-areas);
+      min-height: 100vh;
+      background-color: transparent;
+      width: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
+      margin: 0 auto;
+    }
+
+    :host([mode="list"]) .view-overlay {
+      grid-template-columns: var(--list-overlay-cols);
+      grid-template-rows: var(--list-overlay-rows);
+      grid-template-areas: var(--list-overlay-areas);
+    }
+
+    /* Home mode - Base */
+    :host([mode="home"]) {
+      --home-cols: 100%;
+      --home-areas: "banner" "." "header" "." "message" "lists" "." "footer";
+      --home-overlay-cols: 100%;
+      --home-overlay-areas: "banner" "." "header" "." "message" "lists" "."
         "footer";
+      grid-template-columns: var(--home-cols);
+      grid-template-rows: var(--home-layout);
+      grid-template-areas: var(--home-areas);
       min-height: 100vh;
       background-color: transparent;
-      width: 100%;
+      width: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
       margin: 0 auto;
-      gap: 0;
     }
 
-    /* App mode - with scaling factor */
-    :host([mode="app"]) {
-      max-width: calc(400px * var(--sf, 1));
-      padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
-        calc(9.751px * var(--sf, 1));
-      gap: calc(28px * var(--sf, 1));
+    :host([mode="home"]) .view-overlay {
+      grid-template-columns: var(--home-overlay-cols);
+      grid-template-rows: var(--home-layout);
+      grid-template-areas: var(--home-overlay-areas);
     }
 
-    .debug-overlay {
+    .view-overlay {
       position: absolute;
       margin-left: -1px;
       top: 0;
@@ -695,194 +3724,454 @@ function is(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
       pointer-events: none;
       z-index: 1000;
       display: grid;
-      font-size: 18px;
-      font-weight: bold;
-    }
-
-    :host([mode="portfolio"]) .debug-overlay {
-      grid-template-columns: 120px 480px;
-      grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
-      grid-template-areas:
-        "square ."
-        ". title"
-        ". header"
-        ". projects"
-        ". ."
-        ". bio"
-        ". ."
-        ". nav"
-        ". ."
-        ". footer"
-        ". .";
-    }
-
-    :host([mode="company"]) .debug-overlay {
-      grid-template-columns: auto 400px auto;
-      grid-template-rows: 80px 20px 20px 120px 20px 120px;
-      grid-template-areas:
-        ". . ."
-        ". header ."
-        ". . ."
-        ". content ."
-        ". . ."
-        ". footer .";
-      gap: 0;
     }
 
-    .debug-area {
+    .view-area {
       display: flex;
+      width: calc(240px * var(--sf, 1));
+      height: 100%;
       align-items: center;
       justify-content: center;
-      font-size: 10px;
-      font-weight: var(--type-weight-default);
-      font-family: var(--typeface);
-      color: var(--black);
-      border: 1px solid red;
+      font-family: var(--typeface-regular);
+      font-size: calc(var(--type-size-default) * var(--05));
+      color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      background-color: color-mix(
+        in srgb,
+        var(--accent-color) 25%,
+        transparent
+      );
       opacity: 1;
+      position: relative;
+    }
+
+    .grid-area-label {
+      position: absolute;
+      top: calc(-20px * var(--sf, 1));
+      left: 0;
+      height: calc(20px * var(--sf, 1));
+      width: fit-content;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 calc(4px * var(--sf, 1));
+      border-radius: calc(2px * var(--sf, 1));
+      z-index: 10000;
+      pointer-events: none;
+      white-space: nowrap;
+    }
+
+    /* Banner label stays inside the area (first item) */
+    :host([mode="app"]) .view-area.view-banner .grid-area-label,
+    :host([mode="list"]) .view-area.view-banner .grid-area-label,
+    :host([mode="home"]) .view-area.view-banner .grid-area-label,
+    :host([mode="company"]) .view-area.view-header .grid-area-label,
+    :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
+      top: 0;
+    }
+
+    .grid-area-label ds-text {
+      font-size: calc(11px * var(--sf, 1));
+      line-height: 1;
+      color: white;
+      text-transform: lowercase;
+    }
+
+    :host([mode="portfolio"]) .view-area:nth-of-type(1) {
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(4) {
+      border-color: var(--apple-green);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(5) {
+      border-color: var(--pink);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--pink) 70%, black) 0%,
+          color-mix(in srgb, var(--pink) 70%, black) 100%
+        );
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(6) {
+      border-color: var(--orange);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--orange) 70%, black) 0%,
+          color-mix(in srgb, var(--orange) 70%, black) 100%
+        );
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(7) {
+      border-color: var(--zenith-blue);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
+        );
+    }
+
+    :host([mode="company"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="company"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="company"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+
+    :host([mode="app"]) .view-area:nth-of-type(1) {
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="app"]) .view-area:nth-of-type(2) {
+      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="app"]) .view-area:nth-of-type(3) {
+      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+    :host([mode="app"]) .view-area:nth-of-type(4) {
+      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+    :host([mode="app"]) .view-area:nth-of-type(5) {
+      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--pink) 70%, black) 0%,
+          color-mix(in srgb, var(--pink) 70%, black) 100%
+        );
+    }
+
+    :host([mode="list"]) .view-area:nth-of-type(1) {
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="list"]) .view-area:nth-of-type(2) {
+      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="list"]) .view-area:nth-of-type(3) {
+      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+    :host([mode="list"]) .view-area:nth-of-type(4) {
+      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+
+    :host([mode="home"]) .view-area:nth-of-type(1) {
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(2) {
+      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(3) {
+      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(4) {
+      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(5) {
+      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--pink) 70%, black) 0%,
+          color-mix(in srgb, var(--pink) 70%, black) 100%
+        );
     }
 
-    .debug-square {
+    .view-square {
       grid-area: square;
     }
 
-    .debug-title {
+    .view-title {
       grid-area: title;
     }
 
-    .debug-header {
+    .view-header {
       grid-area: header;
-      border-color: #0000ff;
     }
 
-    .debug-projects {
+    .view-projects {
       grid-area: projects;
-      border-color: #ffff00;
     }
 
-    .debug-bio {
+    .view-bio {
       grid-area: bio;
-      border-color: #ff00ff;
     }
 
-    .debug-nav {
+    .view-nav {
       grid-area: nav;
-      border-color: #00ffff;
     }
 
-    .debug-footer {
+    .view-footer {
       grid-area: footer;
-      border-color: rgb(24, 147, 73);
-      background-color: rgba(127, 123, 11, 0.1);
     }
 
-    .debug-content {
+    .view-content {
       grid-area: content;
-      border-color: rgba(71, 231, 71, 0.63);
-    }
-
-    :host([mode="app"]) .debug-overlay {
-      grid-template-columns: 1fr;
-      grid-template-rows:
-        calc(var(--1) * var(--sf))
-        calc(var(--2) * var(--sf))
-        calc(var(--4) * var(--sf))
-        calc(var(--1) * var(--sf));
-      grid-template-areas:
-        "banner"
-        "header"
-        "main"
-        "footer";
     }
 
-    .debug-banner {
+    .view-banner {
       grid-area: banner;
-      border-color: #daed09;
     }
 
-    .debug-header {
-      grid-area: header;
-      border-color: #0000ff;
-      background-color: rgba(127, 123, 11, 0.5);
+    .view-main {
+      grid-area: main;
     }
 
-    .debug-main {
-      grid-area: main;
-      border-color: #0000ff;
+    .view-page-dots {
+      grid-area: page-dots;
     }
 
-    .debug-footer-app {
-      grid-area: footer;
-      border-color: #ffa500;
-    }
-  `;customElements.define("ds-layout",ue);export{ne as Button,Oe as Cycle,Pe as DateComponent,ce as DsTable,de as Grid,q as Icon,ue as Layout,He as List,le as Row,Ie as Text,ae as Tooltip,T as currentLanguage,B as currentTheme,is as detectMobileDevice,or as getAvailableLanguages,Me as getAvailableLanguagesSync,gs as getBrowserLanguage,os as getDeviceInfo,yt as getLanguageDisplayName,dr as getPriceLabel,fe as getText,ir as hasTranslation,Ve as initDeviceDetection,ar as loadTranslations,P as savePreferences,Re as setLanguage,Wt as setTheme,C as translate};
-/*! Bundled license information:
-
-signal-polyfill/dist/index.js:
-  (**
-   * @license
-   * Copyright Google LLC All Rights Reserved.
-   *
-   * Use of this source code is governed by an MIT-style license that can be
-   * found in the LICENSE file at https://angular.io/license
-   *)
-  (**
-   * @license
-   * Copyright 2024 Bloomberg Finance L.P.
-   *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *)
-
-@lit-labs/signals/lib/signal-watcher.js:
-@lit-labs/signals/lib/watch.js:
-@lit-labs/signals/lib/html-tag.js:
-@lit-labs/signals/index.js:
-  (**
-   * @license
-   * Copyright 2023 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-lit-html/directive.js:
-lit-html/lit-html.js:
-lit-html/async-directive.js:
-@lit/reactive-element/reactive-element.js:
-lit-element/lit-element.js:
-lit-html/directives/unsafe-html.js:
-  (**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-lit-html/directive-helpers.js:
-  (**
-   * @license
-   * Copyright 2020 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/reactive-element/css-tag.js:
-  (**
-   * @license
-   * Copyright 2019 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-lit-html/is-server.js:
-  (**
-   * @license
-   * Copyright 2022 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/
+    .view-board {
+      grid-area: board;
+    }
+
+    .view-message {
+      grid-area: message;
+    }
+
+    .view-lists {
+      grid-area: lists;
+    }
+    `
+];
+let tt = xe;
+customElements.define("ds-layout", tt);
+export {
+  Ge as Accordion,
+  Pe as Banner,
+  Oe as Button,
+  Be as Card,
+  Qe as Container,
+  Ue as Cycle,
+  qe as DateComponent,
+  Xe as DsTable,
+  Je as Form,
+  Ze as Gap,
+  et as Grid,
+  je as Icon,
+  We as Input,
+  tt as Layout,
+  Ye as List,
+  Ke as Row,
+  ze as Text,
+  Fe as Tooltip,
+  Kn as applike,
+  Rr as calculateScalingFactor,
+  k as currentLanguage,
+  Q as currentTheme,
+  st as detectMobileDevice,
+  Jn as getAvailableLanguages,
+  Ht as getAvailableLanguagesSync,
+  Xr as getBrowserLanguage,
+  jr as getDeviceInfo,
+  Yr as getLanguageDisplayName,
+  Xn as getPriceLabel,
+  Zn as getScalingFactor,
+  se as getText,
+  Gn as hasTranslation,
+  ne as initDeviceDetection,
+  Yn as loadTranslations,
+  N as savePreferences,
+  Wn as scale,
+  X as scalingConfig,
+  D as scalingFactor,
+  Mt as setLanguage,
+  qn as setScalingConfig,
+  to as setTheme,
+  Z as translate,
+  Fn as unscale,
+  Kt as updateScalingFactor
+};
 //# sourceMappingURL=ds-one.bundle.min.js.map