ds-one 0.2.5-alpha.18 → 0.2.5-alpha.19

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

@@ -1,33 +1,15 @@
-function Ue(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigator,e=window,r=t&&(t.userAgent||t.vendor)||e&&e.opera||"",s=/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,a=e?Math.min(e.innerWidth||0,e.innerHeight||0)<=820:!1;return s||i&&a}function dr(){let t=Ue(),e=navigator,r=window,n=(e&&e.maxTouchPoints||0)>1,i=typeof document<"u"?document.documentElement.clientWidth:r?.innerWidth||0,a=typeof document<"u"?document.documentElement.clientHeight:r?.innerHeight||0,f=t&&Math.min(i,a)>=600;return{isMobile:t,isTablet:f,isDesktop:!t,isTouchCapable:n,deviceType:t?f?"tablet":"mobile":"desktop",userAgent:e&&(e.userAgent||e.vendor)||"",screenWidth:i,screenHeight:a}}function Re(){let t=dr();if(t.isMobile&&typeof document<"u"){let s=t.screenWidth/280;document.documentElement.style.setProperty("--sf",s.toFixed(3)),document.documentElement.style.setProperty("--sf",s.toFixed(3)),document.documentElement.classList.add("mobile"),document.documentElement.classList.remove("desktop"),console.log(`[DS one] Mobile device detected - ${t.deviceType} (${t.screenWidth}x${t.screenHeight}), scaling factor: ${s.toFixed(2)}`)}else typeof document<"u"&&(document.documentElement.style.setProperty("--sf","1"),document.documentElement.style.setProperty("--sf","1"),document.documentElement.classList.add("desktop"),document.documentElement.classList.remove("mobile")),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",()=>{Re()}):Re();let t;window.addEventListener("resize",()=>{clearTimeout(t),t=setTimeout(()=>{Re()},100)})}var ur={},bt=["da","de","en","es","fr","it","ja","pt","sv","zh"],hr=new Map(bt.map((t,e)=>[t,e])),ut={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"},ht=new Map,pt=!1,xt="./translations.json",ft=!1;function gt(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 pr(){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 r=document.querySelector('meta[name="ds-one:translations"]')?.getAttribute("content");if(r)return r;let s=document.querySelector('link[rel="ds-one-translations"]')?.getAttribute("href");return s||null}function fr(){let t=[],e=typeof window<"u"?window.DS_ONE_TRANSLATIONS_FILE:null,r=pr(),s=gt(e??"");s&&t.push(s);let n=gt(r??"");return n&&!t.includes(n)&&t.push(n),t.length===0&&t.push(xt),t}function gr(t){return!t||typeof t!="object"?!1:Object.values(t).every(e=>e&&typeof e=="object")}async function mr(t){try{let e=await fetch(t);if(!e.ok)return null;let r=await e.json();return gr(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 mt(){if(ft||(ft=!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=fr();for(let e of t){let r=await mr(e);if(!r)continue;window.DS_ONE_TRANSLATIONS=r;let s=Object.keys(r);return console.log(`[DS one] External translations loaded from ${e}: ${s.length} language(s) \u2013 ${s.join(", ")}`),window.dispatchEvent(new CustomEvent("translations-ready")),!0}return console.info(`[DS one] No external translations found at ${t[0]??xt}. Using bundled translations.`),!1}function ve(){return typeof window<"u"&&window.DS_ONE_TRANSLATIONS?window.DS_ONE_TRANSLATIONS:ur}var N=ve(),E="en";function F(t){return t?t.toLowerCase().split(/[-_]/)[0]??"":""}function vt(t){let e=F(t),r=hr.get(e);return typeof r=="number"?r:bt.length}function _t(t){return[...t].sort((e,r)=>{let s=vt(e),n=vt(r);return s!==n?s-n:e.localeCompare(r)})}function vr(t,e){let r=t?.replace("_","-");if(r)try{let s=ht.get(r);s||(s=new Intl.DisplayNames([r],{type:"language"}),ht.set(r,s));let n=e.replace("_","-"),i=s.of(n);if(i&&i!==n)return i;let a=s.of(F(n));if(a)return a}catch{pt||(console.info("[DS one] Intl.DisplayNames is not available, using fallback language names."),pt=!0)}}function yr(t){let e=t.toLowerCase().replace("_","-"),r=ut[e];if(r)return r;let s=F(e);return ut[s]}function $t(t,e={}){if(!t)return"";let 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(E),r.push("en");let s=new Set;for(let a of r){if(!a||s.has(a))continue;s.add(a);let f=vr(a,t);if(f)return f}let n=yr(t);if(n)return n;let i=F(t);return i?i.toUpperCase():t}var yt={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 wt(t){if(!t)return null;let e=t.toLowerCase().replace("_","-"),r=yt[e];if(r)return r;let s=F(e),n=yt[s];return n||t}function wr(){if(typeof navigator>"u")return E;let t=navigator.language;if(t){let e=wt(t);if(e)return e}if(Array.isArray(navigator.languages))for(let e of navigator.languages){let r=wt(e);if(r)return r}return E}var ls=typeof window<"u"?window.localStorage?.getItem("ds-one:language")??void 0:void 0,S={value:localStorage.getItem("language")||wr(),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",()=>{mt()}):mt());typeof window<"u"&&window.addEventListener("translations-ready",()=>{N=ve(),window.dispatchEvent(new CustomEvent("translations-loaded"));let t=S.value;window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))});setTimeout(()=>{window.dispatchEvent(new CustomEvent("translations-loaded"));let t=S.value;window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))},100);function O(t){let e=S.value;return N?.[e]?.[t]?N[e][t]:e!==E&&N?.[E]?.[t]?N[E][t]:(console.warn(`[DS one (Internationalization)] No translation found for key "${t}"`),t)}function cs(t,e=S.value){if(!t)return!1;let r=N?.[e];return!!(r&&Object.prototype.hasOwnProperty.call(r,t)||e!==E&&N?.[E]&&Object.prototype.hasOwnProperty.call(N[E],t))}function R(t){return O(t)}function ds(){let t=ve();if(t&&Object.keys(t).length>0){let e=Object.keys(t);return Promise.resolve(_t(e))}return Promise.resolve([E])}function je(){let t=ve();return t&&Object.keys(t).length>0?_t(Object.keys(t)):[E]}function us(t,e){console.log(`Loading additional translations for ${t}:`,Object.keys(e).length,"keys")}function We(t){localStorage.setItem("language",t),S.set(t),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))}function V(t){if(!(typeof window>"u"))try{let e=window.localStorage?.getItem("ds-one:preferences"),s={...e?JSON.parse(e):{},...t};window.localStorage?.setItem("ds-one:preferences",JSON.stringify(s))}catch(e){console.warn("ds-one: unable to persist preferences",e)}}var br={da:"kr.",nb:"kr.",sv:"kr.",de:"\u20AC",en:"$",pt:"\u20AC",es:"\u20AC",zh:"\xA5",ja:"\xA5",ko:"\u20A9"};function fs(t){let{language:e,country:r}=t;if(r){let n=r.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 s=e.toLowerCase().split(/[-_]/)[0];return br[s]||"$"}var xr=Object.defineProperty,_r=(t,e,r)=>e in t?xr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Be=(t,e,r)=>(_r(t,typeof e!="symbol"?e+"":e,r),r),$r=(t,e,r)=>{if(!e.has(t))throw TypeError("Cannot "+r)},qe=(t,e)=>{if(Object(e)!==e)throw TypeError('Cannot use the "in" operator on this value');return t.has(e)},ye=(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)},St=(t,e,r)=>($r(t,e,"access private method"),r);function At(t,e){return Object.is(t,e)}var b=null,G=!1,we=1,be=Symbol("SIGNAL");function U(t){let e=b;return b=t,e}function Sr(){return b}function Ar(){return G}var Je={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 xe(t){if(G)throw new Error(typeof ngDevMode<"u"&&ngDevMode?"Assertion error: signal read during notification phase":"");if(b===null)return;b.consumerOnSignalRead(t);let e=b.nextProducerIndex++;if(j(b),e<b.producerNode.length&&b.producerNode[e]!==t&&Ge(b)){let r=b.producerNode[e];_e(r,b.producerIndexOfThis[e])}b.producerNode[e]!==t&&(b.producerNode[e]=t,b.producerIndexOfThis[e]=Ge(b)?kt(t,b,e):0),b.producerLastReadVersion[e]=t.version}function Cr(){we++}function Ct(t){if(!(!t.dirty&&t.lastCleanEpoch===we)){if(!t.producerMustRecompute(t)&&!Nr(t)){t.dirty=!1,t.lastCleanEpoch=we;return}t.producerRecomputeValue(t),t.dirty=!1,t.lastCleanEpoch=we}}function Et(t){if(t.liveConsumerNode===void 0)return;let e=G;G=!0;try{for(let r of t.liveConsumerNode)r.dirty||kr(r)}finally{G=e}}function Er(){return b?.consumerAllowSignalWrites!==!1}function kr(t){var e;t.dirty=!0,Et(t),(e=t.consumerMarkedDirty)==null||e.call(t.wrapper??t)}function Lr(t){return t&&(t.nextProducerIndex=0),U(t)}function Tr(t,e){if(U(e),!(!t||t.producerNode===void 0||t.producerIndexOfThis===void 0||t.producerLastReadVersion===void 0)){if(Ge(t))for(let r=t.nextProducerIndex;r<t.producerNode.length;r++)_e(t.producerNode[r],t.producerIndexOfThis[r]);for(;t.producerNode.length>t.nextProducerIndex;)t.producerNode.pop(),t.producerLastReadVersion.pop(),t.producerIndexOfThis.pop()}}function Nr(t){j(t);for(let e=0;e<t.producerNode.length;e++){let r=t.producerNode[e],s=t.producerLastReadVersion[e];if(s!==r.version||(Ct(r),s!==r.version))return!0}return!1}function kt(t,e,r){var s;if(Ye(t),j(t),t.liveConsumerNode.length===0){(s=t.watched)==null||s.call(t.wrapper);for(let n=0;n<t.producerNode.length;n++)t.producerIndexOfThis[n]=kt(t.producerNode[n],t,n)}return t.liveConsumerIndexOfThis.push(r),t.liveConsumerNode.push(e)-1}function _e(t,e){var r;if(Ye(t),j(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++)_e(t.producerNode[n],t.producerIndexOfThis[n])}let s=t.liveConsumerNode.length-1;if(t.liveConsumerNode[e]=t.liveConsumerNode[s],t.liveConsumerIndexOfThis[e]=t.liveConsumerIndexOfThis[s],t.liveConsumerNode.length--,t.liveConsumerIndexOfThis.length--,e<t.liveConsumerNode.length){let n=t.liveConsumerIndexOfThis[e],i=t.liveConsumerNode[e];j(i),i.producerIndexOfThis[n]=e}}function Ge(t){var e;return t.consumerIsAlwaysLive||(((e=t?.liveConsumerNode)==null?void 0:e.length)??0)>0}function j(t){t.producerNode??(t.producerNode=[]),t.producerIndexOfThis??(t.producerIndexOfThis=[]),t.producerLastReadVersion??(t.producerLastReadVersion=[])}function Ye(t){t.liveConsumerNode??(t.liveConsumerNode=[]),t.liveConsumerIndexOfThis??(t.liveConsumerIndexOfThis=[])}function Lt(t){if(Ct(t),xe(t),t.value===Ze)throw t.error;return t.value}function Ir(t){let e=Object.create(Or);e.computation=t;let r=()=>Lt(e);return r[be]=e,r}var Ke=Symbol("UNSET"),Fe=Symbol("COMPUTING"),Ze=Symbol("ERRORED"),Or={...Je,value:Ke,dirty:!0,error:null,equal:At,producerMustRecompute(t){return t.value===Ke||t.value===Fe},producerRecomputeValue(t){if(t.value===Fe)throw new Error("Detected cycle in computations.");let e=t.value;t.value=Fe;let r=Lr(t),s,n=!1;try{s=t.computation.call(t.wrapper),n=e!==Ke&&e!==Ze&&t.equal.call(t.wrapper,e,s)}catch(i){s=Ze,t.error=i}finally{Tr(t,r)}if(n){t.value=e;return}t.value=s,t.version++}};function Vr(){throw new Error}var Pr=Vr;function Hr(){Pr()}function zr(t){let e=Object.create(Rr);e.value=t;let r=()=>(xe(e),e.value);return r[be]=e,r}function Mr(){return xe(this),this.value}function Dr(t,e){Er()||Hr(),t.equal.call(t.wrapper,t.value,e)||(t.value=e,Ur(t))}var Rr={...Je,equal:At,value:void 0};function Ur(t){t.version++,Cr(),Et(t)}var x=Symbol("node"),_;(t=>{var e,r,s,n,i,a;class f{constructor(v,l={}){ye(this,r),Be(this,e);let g=zr(v)[be];if(this[x]=g,g.wrapper=this,l){let $=l.equals;$&&(g.equal=$),g.watched=l[t.subtle.watched],g.unwatched=l[t.subtle.unwatched]}}get(){if(!(0,t.isState)(this))throw new TypeError("Wrong receiver type for Signal.State.prototype.get");return Mr.call(this[x])}set(v){if(!(0,t.isState)(this))throw new TypeError("Wrong receiver type for Signal.State.prototype.set");if(Ar())throw new Error("Writes to signals not permitted during Watcher callback");let l=this[x];Dr(l,v)}}e=x,r=new WeakSet,s=function(){},t.isState=u=>typeof u=="object"&&qe(r,u),t.State=f;class d{constructor(v,l){ye(this,i),Be(this,n);let g=Ir(v)[be];if(g.consumerAllowSignalWrites=!0,this[x]=g,g.wrapper=this,l){let $=l.equals;$&&(g.equal=$),g.watched=l[t.subtle.watched],g.unwatched=l[t.subtle.unwatched]}}get(){if(!(0,t.isComputed)(this))throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");return Lt(this[x])}}n=x,i=new WeakSet,a=function(){},t.isComputed=u=>typeof u=="object"&&qe(i,u),t.Computed=d,(u=>{var v,l,A,g,$;function rr(y){let m,c=null;try{c=U(null),m=y()}finally{U(c)}return m}u.untrack=rr;function sr(y){var m;if(!(0,t.isComputed)(y)&&!(0,t.isWatcher)(y))throw new TypeError("Called introspectSources without a Computed or Watcher argument");return((m=y[x].producerNode)==null?void 0:m.map(c=>c.wrapper))??[]}u.introspectSources=sr;function nr(y){var m;if(!(0,t.isComputed)(y)&&!(0,t.isState)(y))throw new TypeError("Called introspectSinks without a Signal argument");return((m=y[x].liveConsumerNode)==null?void 0:m.map(c=>c.wrapper))??[]}u.introspectSinks=nr;function ir(y){if(!(0,t.isComputed)(y)&&!(0,t.isState)(y))throw new TypeError("Called hasSinks without a Signal argument");let m=y[x].liveConsumerNode;return m?m.length>0:!1}u.hasSinks=ir;function or(y){if(!(0,t.isComputed)(y)&&!(0,t.isWatcher)(y))throw new TypeError("Called hasSources without a Computed or Watcher argument");let m=y[x].producerNode;return m?m.length>0:!1}u.hasSources=or;class ar{constructor(m){ye(this,l),ye(this,g),Be(this,v);let c=Object.create(Je);c.wrapper=this,c.consumerMarkedDirty=m,c.consumerIsAlwaysLive=!0,c.consumerAllowSignalWrites=!1,c.producerNode=[],this[x]=c}watch(...m){if(!(0,t.isWatcher)(this))throw new TypeError("Called unwatch without Watcher receiver");St(this,g,$).call(this,m);let c=this[x];c.dirty=!1;let C=U(c);for(let me of m)xe(me[x]);U(C)}unwatch(...m){if(!(0,t.isWatcher)(this))throw new TypeError("Called unwatch without Watcher receiver");St(this,g,$).call(this,m);let c=this[x];j(c);for(let C=c.producerNode.length-1;C>=0;C--)if(m.includes(c.producerNode[C].wrapper)){_e(c.producerNode[C],c.producerIndexOfThis[C]);let me=c.producerNode.length-1;if(c.producerNode[C]=c.producerNode[me],c.producerIndexOfThis[C]=c.producerIndexOfThis[me],c.producerNode.length--,c.producerIndexOfThis.length--,c.nextProducerIndex--,C<c.producerNode.length){let cr=c.producerIndexOfThis[C],dt=c.producerNode[C];Ye(dt),dt.liveConsumerIndexOfThis[cr]=C}}}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)}}v=x,l=new WeakSet,A=function(){},g=new WeakSet,$=function(y){for(let m of y)if(!(0,t.isComputed)(m)&&!(0,t.isState)(m))throw new TypeError("Called watch/unwatch without a Computed or State argument")},t.isWatcher=y=>qe(l,y),u.Watcher=ar;function lr(){var y;return(y=Sr())==null?void 0:y.wrapper}u.currentComputed=lr,u.watched=Symbol("watched"),u.unwatched=Symbol("unwatched")})(t.subtle||(t.subtle={}))})(_||(_={}));var ys=Symbol("SignalWatcherBrand"),ws=new FinalizationRegistry((({watcher:t,signal:e})=>{t.unwatch(e)}));var $e={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Z=t=>(...e)=>({_$litDirective$:t,values:e}),W=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,r,s){this._$Ct=e,this._$AM=r,this._$Ci=s}_$AS(e,r){return this.update(e,r)}update(e,r){return this.render(...r)}};var Y=globalThis,Se=Y.trustedTypes,Tt=Se?Se.createPolicy("lit-html",{createHTML:t=>t}):void 0,Qe="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,et="?"+k,jr=`<${et}>`,z=document,X=()=>z.createComment(""),Q=t=>t===null||typeof t!="object"&&typeof t!="function",tt=Array.isArray,Ht=t=>tt(t)||typeof t?.[Symbol.iterator]=="function",Xe=`[ 	
-\f\r]`,J=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Nt=/-->/g,It=/>/g,P=RegExp(`>|${Xe}(?:([^\\s"'>=/]+)(${Xe}*=${Xe}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),Ot=/'/g,Vt=/"/g,zt=/^(?:script|style|textarea|title)$/i,rt=t=>(e,...r)=>({_$litType$:t,strings:e,values:r}),o=rt(1),Mt=rt(2),Ss=rt(3),L=Symbol.for("lit-noChange"),w=Symbol.for("lit-nothing"),Pt=new WeakMap,H=z.createTreeWalker(z,129);function Dt(t,e){if(!tt(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return Tt!==void 0?Tt.createHTML(e):e}var Rt=(t,e)=>{let r=t.length-1,s=[],n,i=e===2?"<svg>":e===3?"<math>":"",a=J;for(let f=0;f<r;f++){let d=t[f],u,v,l=-1,A=0;for(;A<d.length&&(a.lastIndex=A,v=a.exec(d),v!==null);)A=a.lastIndex,a===J?v[1]==="!--"?a=Nt:v[1]!==void 0?a=It:v[2]!==void 0?(zt.test(v[2])&&(n=RegExp("</"+v[2],"g")),a=P):v[3]!==void 0&&(a=P):a===P?v[0]===">"?(a=n??J,l=-1):v[1]===void 0?l=-2:(l=a.lastIndex-v[2].length,u=v[1],a=v[3]===void 0?P:v[3]==='"'?Vt:Ot):a===Vt||a===Ot?a=P:a===Nt||a===It?a=J:(a=P,n=void 0);let g=a===P&&t[f+1].startsWith("/>")?" ":"";i+=a===J?d+jr:l>=0?(s.push(u),d.slice(0,l)+Qe+d.slice(l)+k+g):d+k+(l===-2?f:g)}return[Dt(t,i+(t[r]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),s]},ee=class t{constructor({strings:e,_$litType$:r},s){let n;this.parts=[];let i=0,a=0,f=e.length-1,d=this.parts,[u,v]=Rt(e,r);if(this.el=t.createElement(u,s),H.currentNode=this.el.content,r===2||r===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(n=H.nextNode())!==null&&d.length<f;){if(n.nodeType===1){if(n.hasAttributes())for(let l of n.getAttributeNames())if(l.endsWith(Qe)){let A=v[a++],g=n.getAttribute(l).split(k),$=/([.?@])?(.*)/.exec(A);d.push({type:1,index:i,name:$[2],strings:g,ctor:$[1]==="."?Ce:$[1]==="?"?Ee:$[1]==="@"?ke:D}),n.removeAttribute(l)}else l.startsWith(k)&&(d.push({type:6,index:i}),n.removeAttribute(l));if(zt.test(n.tagName)){let l=n.textContent.split(k),A=l.length-1;if(A>0){n.textContent=Se?Se.emptyScript:"";for(let g=0;g<A;g++)n.append(l[g],X()),H.nextNode(),d.push({type:2,index:++i});n.append(l[A],X())}}}else if(n.nodeType===8)if(n.data===et)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,r){let s=z.createElement("template");return s.innerHTML=e,s}};function M(t,e,r=t,s){if(e===L)return e;let n=s!==void 0?r._$Co?.[s]:r._$Cl,i=Q(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,s)),s!==void 0?(r._$Co??(r._$Co=[]))[s]=n:r._$Cl=n),n!==void 0&&(e=M(t,n._$AS(t,e.values),n,s)),e}var Ae=class{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){let{el:{content:r},parts:s}=this._$AD,n=(e?.creationScope??z).importNode(r,!0);H.currentNode=n;let i=H.nextNode(),a=0,f=0,d=s[0];for(;d!==void 0;){if(a===d.index){let u;d.type===2?u=new B(i,i.nextSibling,this,e):d.type===1?u=new d.ctor(i,d.name,d.strings,this,e):d.type===6&&(u=new Le(i,this,e)),this._$AV.push(u),d=s[++f]}a!==d?.index&&(i=H.nextNode(),a++)}return H.currentNode=z,n}p(e){let r=0;for(let s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(e,s,r),r+=s.strings.length-2):s._$AI(e[r])),r++}},B=class t{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,r,s,n){this.type=2,this._$AH=w,this._$AN=void 0,this._$AA=e,this._$AB=r,this._$AM=s,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,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=M(this,e,r),Q(e)?e===w||e==null||e===""?(this._$AH!==w&&this._$AR(),this._$AH=w):e!==this._$AH&&e!==L&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Ht(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!==w&&Q(this._$AH)?this._$AA.nextSibling.data=e:this.T(z.createTextNode(e)),this._$AH=e}$(e){let{values:r,_$litType$:s}=e,n=typeof s=="number"?this._$AC(e):(s.el===void 0&&(s.el=ee.createElement(Dt(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===n)this._$AH.p(r);else{let i=new Ae(n,this),a=i.u(this.options);i.p(r),this.T(a),this._$AH=i}}_$AC(e){let r=Pt.get(e.strings);return r===void 0&&Pt.set(e.strings,r=new ee(e)),r}k(e){tt(this._$AH)||(this._$AH=[],this._$AR());let r=this._$AH,s,n=0;for(let i of e)n===r.length?r.push(s=new t(this.O(X()),this.O(X()),this,this.options)):s=r[n],s._$AI(i),n++;n<r.length&&(this._$AR(s&&s._$AB.nextSibling,n),r.length=n)}_$AR(e=this._$AA.nextSibling,r){for(this._$AP?.(!1,!0,r);e!==this._$AB;){let s=e.nextSibling;e.remove(),e=s}}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,r,s,n,i){this.type=1,this._$AH=w,this._$AN=void 0,this.element=e,this.name=r,this._$AM=n,this.options=i,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=w}_$AI(e,r=this,s,n){let i=this.strings,a=!1;if(i===void 0)e=M(this,e,r,0),a=!Q(e)||e!==this._$AH&&e!==L,a&&(this._$AH=e);else{let f=e,d,u;for(e=i[0],d=0;d<i.length-1;d++)u=M(this,f[s+d],r,d),u===L&&(u=this._$AH[d]),a||(a=!Q(u)||u!==this._$AH[d]),u===w?e=w:e!==w&&(e+=(u??"")+i[d+1]),this._$AH[d]=u}a&&!n&&this.j(e)}j(e){e===w?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},Ce=class extends D{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===w?void 0:e}},Ee=class extends D{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==w)}},ke=class extends D{constructor(e,r,s,n,i){super(e,r,s,n,i),this.type=5}_$AI(e,r=this){if((e=M(this,e,r,0)??w)===L)return;let s=this._$AH,n=e===w&&s!==w||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,i=e!==w&&(s===w||n);n&&this.element.removeEventListener(this.name,this,s),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)}},Le=class{constructor(e,r,s){this.element=e,this.type=6,this._$AN=void 0,this._$AM=r,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(e){M(this,e)}},Ut={M:Qe,P:k,A:et,C:1,L:Rt,R:Ae,D:Ht,V:M,I:B,H:D,N:Ee,U:ke,B:Ce,F:Le},Wr=Y.litHtmlPolyfillSupport;Wr?.(ee,B),(Y.litHtmlVersions??(Y.litHtmlVersions=[])).push("3.3.1");var jt=(t,e,r)=>{let s=r?.renderBefore??e,n=s._$litPart$;if(n===void 0){let i=r?.renderBefore??null;s._$litPart$=n=new B(e.insertBefore(X(),i),i,void 0,r??{})}return n._$AI(t),n};var{I:Es}=Ut;var Wt=t=>t.strings===void 0;var te=(t,e)=>{let r=t._$AN;if(r===void 0)return!1;for(let s of r)s._$AO?.(e,!1),te(s,e);return!0},Te=t=>{let e,r;do{if((e=t._$AM)===void 0)break;r=e._$AN,r.delete(t),t=e}while(r?.size===0)},Bt=t=>{for(let e;e=t._$AM;t=e){let r=e._$AN;if(r===void 0)e._$AN=r=new Set;else if(r.has(t))break;r.add(t),Kr(e)}};function Br(t){this._$AN!==void 0?(Te(this),this._$AM=t,Bt(this)):this._$AM=t}function qr(t,e=!1,r=0){let s=this._$AH,n=this._$AN;if(n!==void 0&&n.size!==0)if(e)if(Array.isArray(s))for(let i=r;i<s.length;i++)te(s[i],!1),Te(s[i]);else s!=null&&(te(s,!1),Te(s));else te(this,t)}var Kr=t=>{t.type==$e.CHILD&&(t._$AP??(t._$AP=qr),t._$AQ??(t._$AQ=Br))},Ne=class extends W{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,r,s){super._$AT(e,r,s),Bt(this),this.isConnected=e._$AU}_$AO(e,r=!0){e!==this.isConnected&&(this.isConnected=e,e?this.reconnected?.():this.disconnected?.()),r&&(te(this,e),Te(this))}setValue(e){if(Wt(this._$Ct))this._$Ct._$AI(e,this);else{let r=[...this._$Ct._$AH];r[this._$Ci]=e,this._$Ct._$AI(r,this,0)}}disconnected(){}reconnected(){}};var Ie=class extends Ne{_$Sl(){if(this._$Su!==void 0)return;this._$SW=new _.Computed((()=>{var r;return(r=this._$Sj)===null||r===void 0?void 0:r.get()}));let e=this._$Su=new _.subtle.Watcher((()=>{var r;(r=this._$SO)===null||r===void 0||r._(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,[r]){var s,n;return(s=this._$SO)!==null&&s!==void 0||(this._$SO=(n=e.options)===null||n===void 0?void 0:n.host),r!==this._$Sj&&this._$Sj!==void 0&&this._$Sp(),this._$Sj=r,this._$Sl(),_.subtle.untrack((()=>this._$SW.get()))}disconnected(){this._$Sp()}reconnected(){this._$Sl()}},st=Z(Ie);var nt=t=>(e,...r)=>t(e,...r.map((s=>s instanceof _.State||s instanceof _.Computed?st(s):s))),Fr=nt(o),Gr=nt(Mt);var Fs=_.State,Gs=_.Computed,qt=(t,e)=>new _.State(t,e);function Zr(){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 q=qt(Zr());function Kt(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)}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=q.get(),e=window.document?.documentElement;e&&(e.classList.remove("light-theme","dark-theme"),e.classList.add(`${t}-theme`))}var Oe=globalThis,Ve=Oe.ShadowRoot&&(Oe.ShadyCSS===void 0||Oe.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,it=Symbol(),Ft=new WeakMap,re=class{constructor(e,r,s){if(this._$cssResult$=!0,s!==it)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=r}get styleSheet(){let e=this.o,r=this.t;if(Ve&&e===void 0){let s=r!==void 0&&r.length===1;s&&(e=Ft.get(r)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&Ft.set(r,e))}return e}toString(){return this.cssText}},Gt=t=>new re(typeof t=="string"?t:t+"",void 0,it),p=(t,...e)=>{let r=t.length===1?t[0]:e.reduce(((s,n,i)=>s+(a=>{if(a._$cssResult$===!0)return a.cssText;if(typeof a=="number")return a;throw Error("Value passed to 'css' function must be a 'css' function result: "+a+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[i+1]),t[0]);return new re(r,t,it)},Zt=(t,e)=>{if(Ve)t.adoptedStyleSheets=e.map((r=>r instanceof CSSStyleSheet?r:r.styleSheet));else for(let r of e){let s=document.createElement("style"),n=Oe.litNonce;n!==void 0&&s.setAttribute("nonce",n),s.textContent=r.cssText,t.appendChild(s)}},ot=Ve?t=>t:t=>t instanceof CSSStyleSheet?(e=>{let r="";for(let s of e.cssRules)r+=s.cssText;return Gt(r)})(t):t;var{is:Jr,defineProperty:Yr,getOwnPropertyDescriptor:Xr,getOwnPropertyNames:Qr,getOwnPropertySymbols:es,getPrototypeOf:ts}=Object,I=globalThis,Jt=I.trustedTypes,rs=Jt?Jt.emptyScript:"",ss=I.reactiveElementPolyfillSupport,se=(t,e)=>t,at={toAttribute(t,e){switch(e){case Boolean:t=t?rs: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}},Xt=(t,e)=>!Jr(t,e),Yt={attribute:!0,type:String,converter:at,reflect:!1,useDefault:!1,hasChanged:Xt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),I.litPropertyMetadata??(I.litPropertyMetadata=new WeakMap);var T=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,r=Yt){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){let s=Symbol(),n=this.getPropertyDescriptor(e,s,r);n!==void 0&&Yr(this.prototype,e,n)}}static getPropertyDescriptor(e,r,s){let{get:n,set:i}=Xr(this.prototype,e)??{get(){return this[r]},set(a){this[r]=a}};return{get:n,set(a){let f=n?.call(this);i?.call(this,a),this.requestUpdate(e,f,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Yt}static _$Ei(){if(this.hasOwnProperty(se("elementProperties")))return;let e=ts(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 r=this.properties,s=[...Qr(r),...es(r)];for(let n of s)this.createProperty(n,r[n])}let e=this[Symbol.metadata];if(e!==null){let r=litPropertyMetadata.get(e);if(r!==void 0)for(let[s,n]of r)this.elementProperties.set(s,n)}this._$Eh=new Map;for(let[r,s]of this.elementProperties){let n=this._$Eu(r,s);n!==void 0&&this._$Eh.set(n,r)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let r=[];if(Array.isArray(e)){let s=new Set(e.flat(1/0).reverse());for(let n of s)r.unshift(ot(n))}else e!==void 0&&r.push(ot(e));return r}static _$Eu(e,r){let s=r.attribute;return s===!1?void 0:typeof s=="string"?s: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,r=this.constructor.elementProperties;for(let s of r.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Zt(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,s){this._$AK(e,s)}_$ET(e,r){let s=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,s);if(n!==void 0&&s.reflect===!0){let i=(s.converter?.toAttribute!==void 0?s.converter:at).toAttribute(r,s.type);this._$Em=e,i==null?this.removeAttribute(n):this.setAttribute(n,i),this._$Em=null}}_$AK(e,r){let s=this.constructor,n=s._$Eh.get(e);if(n!==void 0&&this._$Em!==n){let i=s.getPropertyOptions(n),a=typeof i.converter=="function"?{fromAttribute:i.converter}:i.converter?.fromAttribute!==void 0?i.converter:at;this._$Em=n;let f=a.fromAttribute(r,i.type);this[n]=f??this._$Ej?.get(n)??f,this._$Em=null}}requestUpdate(e,r,s){if(e!==void 0){let n=this.constructor,i=this[e];if(s??(s=n.getPropertyOptions(e)),!((s.hasChanged??Xt)(i,r)||s.useDefault&&s.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(n._$Eu(e,s))))return;this.C(e,r,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,r,{useDefault:s,reflect:n,wrapped:i},a){s&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,a??r??this[e]),i!==!0||a!==void 0)||(this._$AL.has(e)||(this.hasUpdated||s||(r=void 0),this._$AL.set(e,r)),n===!0&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(r){Promise.reject(r)}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 s=this.constructor.elementProperties;if(s.size>0)for(let[n,i]of s){let{wrapped:a}=i,f=this[n];a!==!0||this._$AL.has(n)||f===void 0||this.C(n,void 0,i,f)}}let e=!1,r=this._$AL;try{e=this.shouldUpdate(r),e?(this.willUpdate(r),this._$EO?.forEach((s=>s.hostUpdate?.())),this.update(r)):this._$EM()}catch(s){throw e=!1,this._$EM(),s}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=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){}};T.elementStyles=[],T.shadowRootOptions={mode:"open"},T[se("elementProperties")]=new Map,T[se("finalized")]=new Map,ss?.({ReactiveElement:T}),(I.reactiveElementVersions??(I.reactiveElementVersions=[])).push("2.1.1");var ne=globalThis,h=class extends T{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var r;let e=super.createRenderRoot();return(r=this.renderOptions).renderBefore??(r.renderBefore=e.firstChild),e}update(e){let r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=jt(r,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,ne.litElementHydrateSupport?.({LitElement:h});var ns=ne.litElementPolyfillSupport;ns?.({LitElement:h});(ne.litElementVersions??(ne.litElementVersions=[])).push("4.2.1");var Pe=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._currentLanguage=S.value,this.boundHandlers={languageChanged:(()=>{console.log("Language changed event received in ds-text"),this._currentLanguage=S.value,this._updateLanguageAttribute(),this._loadText(),this.requestUpdate()})}}connectedCallback(){super.connectedCallback(),this._currentLanguage=S.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("key")||e.has("defaultValue"))&&this._loadText()}_updateLanguageAttribute(){let r=(this._currentLanguage||S.value||"").toLowerCase().split(/[-_]/).filter(Boolean),s=r[0]||"";if(s==="ja"){this.setAttribute("data-language","ja");return}if(s==="zh"){let 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.key){this._text=this.defaultValue||this.fallback||"",this._updateLanguageAttribute(),this.requestUpdate();return}try{let e=R(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._updateLanguageAttribute(),this.requestUpdate()}render(){return o`<span>${this._text||this.defaultValue||this.key}</span>`}};Pe.styles=p`
-    :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;
-    }
-  `;customElements.define("ds-text",Pe);var ie=class extends h{constructor(){super(),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}connectedCallback(){super.connectedCallback()}render(){let e=this.key||this.defaultText||this.fallback;return o`
+function Ze(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigator,e=window,r=t&&(t.userAgent||t.vendor)||e&&e.opera||"",a=/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,n=e?Math.min(e.innerWidth||0,e.innerHeight||0)<=820:!1;return a||i&&n}function Ir(){let t=Ze(),e=navigator,r=window,o=(e&&e.maxTouchPoints||0)>1,i=typeof document<"u"?document.documentElement.clientWidth:r?.innerWidth||0,n=typeof document<"u"?document.documentElement.clientHeight:r?.innerHeight||0,l=t&&Math.min(i,n)>=600;return{isMobile:t,isTablet:l,isDesktop:!t,isTouchCapable:o,deviceType:t?l?"tablet":"mobile":"desktop",userAgent:e&&(e.userAgent||e.vendor)||"",screenWidth:i,screenHeight:n}}function Ge(){let t=Ir();if(t.isMobile&&typeof document<"u"){let a=t.screenWidth/280;document.documentElement.style.setProperty("--sf",a.toFixed(3)),document.documentElement.style.setProperty("--sf",a.toFixed(3)),document.documentElement.classList.add("mobile"),document.documentElement.classList.remove("desktop"),console.log(`[DS one] Mobile device detected - ${t.deviceType} (${t.screenWidth}x${t.screenHeight}), scaling factor: ${a.toFixed(2)}`)}else typeof document<"u"&&(document.documentElement.style.setProperty("--sf","1"),document.documentElement.style.setProperty("--sf","1"),document.documentElement.classList.add("desktop"),document.documentElement.classList.remove("mobile")),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",()=>{Ge()}):Ge();let t;window.addEventListener("resize",()=>{clearTimeout(t),t=setTimeout(()=>{Ge()},100)})}function Ka(){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");let 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;
+    }
+  `;let r=document.getElementById("ds-one-applike-style");r&&r.remove(),document.head.appendChild(e);let a=0,o=0,i=l=>{if(l instanceof TouchEvent){if(l.touches.length>1){l.preventDefault(),l.stopPropagation();return}let c=Date.now();if(l.type==="touchstart"){if(c-a<300){l.preventDefault(),l.stopPropagation();return}o=c}else if(l.type==="touchend"){if(c-o<300&&c-a<300){l.preventDefault(),l.stopPropagation();return}a=c}else if(l.type==="touchmove"&&l.touches.length>1){l.preventDefault(),l.stopPropagation();return}}if(l instanceof WheelEvent&&(l.ctrlKey||l.metaKey)){l.preventDefault(),l.stopPropagation();return}},n={passive:!1,capture:!0};document.addEventListener("touchstart",i,n),document.addEventListener("touchmove",i,n),document.addEventListener("touchend",i,n),document.addEventListener("touchcancel",i,n),document.addEventListener("wheel",i,n),document.addEventListener("gesturestart",l=>{l.preventDefault(),l.stopPropagation()},n),document.addEventListener("gesturechange",l=>{l.preventDefault(),l.stopPropagation()},n),document.addEventListener("gestureend",l=>{l.preventDefault(),l.stopPropagation()},n)}var Or={},At=["da","de","en","es","fr","it","ja","pt","sv","zh"],Pr=new Map(At.map((t,e)=>[t,e])),bt={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"},wt=new Map,xt=!1,Lt="./translations.json",_t=!1;function $t(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 zr(){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 r=document.querySelector('meta[name="ds-one:translations"]')?.getAttribute("content");if(r)return r;let a=document.querySelector('link[rel="ds-one-translations"]')?.getAttribute("href");return a||null}function Vr(){let t=[],e=typeof window<"u"?window.DS_ONE_TRANSLATIONS_FILE:null,r=zr(),a=$t(e??"");a&&t.push(a);let o=$t(r??"");return o&&!t.includes(o)&&t.push(o),t.length===0&&t.push(Lt),t}function Hr(t){return!t||typeof t!="object"?!1:Object.values(t).every(e=>e&&typeof e=="object")}async function Mr(t){try{let e=await fetch(t);if(!e.ok)return null;let r=await e.json();return Hr(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 St(){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;let t=Vr();for(let e of t){let r=await Mr(e);if(!r)continue;window.DS_ONE_TRANSLATIONS=r;let a=Object.keys(r);return console.log(`[DS one] External translations loaded from ${e}: ${a.length} language(s) \u2013 ${a.join(", ")}`),window.dispatchEvent(new CustomEvent("translations-ready")),!0}return console.info(`[DS one] No external translations found at ${t[0]??Lt}. Using bundled translations.`),!1}function _e(){return typeof window<"u"&&window.DS_ONE_TRANSLATIONS?window.DS_ONE_TRANSLATIONS:Or}var I=_e(),E="en";function G(t){return t?t.toLowerCase().split(/[-_]/)[0]??"":""}function kt(t){let e=G(t),r=Pr.get(e);return typeof r=="number"?r:At.length}function Tt(t){return[...t].sort((e,r)=>{let a=kt(e),o=kt(r);return a!==o?a-o:e.localeCompare(r)})}function Dr(t,e){let r=t?.replace("_","-");if(r)try{let a=wt.get(r);a||(a=new Intl.DisplayNames([r],{type:"language"}),wt.set(r,a));let o=e.replace("_","-"),i=a.of(o);if(i&&i!==o)return i;let n=a.of(G(o));if(n)return n}catch{xt||(console.info("[DS one] Intl.DisplayNames is not available, using fallback language names."),xt=!0)}}function Rr(t){let e=t.toLowerCase().replace("_","-"),r=bt[e];if(r)return r;let a=G(e);return bt[a]}function Nt(t,e={}){if(!t)return"";let 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(E),r.push("en");let a=new Set;for(let n of r){if(!n||a.has(n))continue;a.add(n);let l=Dr(n,t);if(l)return l}let o=Rr(t);if(o)return o;let i=G(t);return i?i.toUpperCase():t}var Ct={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 Et(t){if(!t)return null;let e=t.toLowerCase().replace("_","-"),r=Ct[e];if(r)return r;let a=G(e),o=Ct[a];return o||t}function Ur(){if(typeof navigator>"u")return E;let t=navigator.language;if(t){let e=Et(t);if(e)return e}if(Array.isArray(navigator.languages))for(let e of navigator.languages){let r=Et(e);if(r)return r}return E}var Ga=typeof window<"u"?window.localStorage?.getItem("ds-one:language")??void 0:void 0,S={value:localStorage.getItem("language")||Ur(),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",()=>{St()}):St());typeof window<"u"&&window.addEventListener("translations-ready",()=>{I=_e(),window.dispatchEvent(new CustomEvent("translations-loaded"));let t=S.value;window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))});setTimeout(()=>{window.dispatchEvent(new CustomEvent("translations-loaded"));let t=S.value;window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))},100);function P(t){let e=S.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 Za(t,e=S.value){if(!t)return!1;let r=I?.[e];return!!(r&&Object.prototype.hasOwnProperty.call(r,t)||e!==E&&I?.[E]&&Object.prototype.hasOwnProperty.call(I[E],t))}function U(t){return P(t)}function Ja(){let t=_e();if(t&&Object.keys(t).length>0){let e=Object.keys(t);return Promise.resolve(Tt(e))}return Promise.resolve([E])}function Je(){let t=_e();return t&&Object.keys(t).length>0?Tt(Object.keys(t)):[E]}function Ya(t,e){console.log(`Loading additional translations for ${t}:`,Object.keys(e).length,"keys")}function Ye(t){localStorage.setItem("language",t),S.set(t),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:t},bubbles:!0,composed:!0}))}function z(t){if(!(typeof window>"u"))try{let e=window.localStorage?.getItem("ds-one:preferences"),a={...e?JSON.parse(e):{},...t};window.localStorage?.setItem("ds-one:preferences",JSON.stringify(a))}catch(e){console.warn("ds-one: unable to persist preferences",e)}}var jr={da:"kr.",nb:"kr.",sv:"kr.",de:"\u20AC",en:"$",pt:"\u20AC",es:"\u20AC",zh:"\xA5",ja:"\xA5",ko:"\u20A9"};function eo(t){let{language:e,country:r}=t;if(r){let o=r.toUpperCase();if(o==="US"||o==="USA")return"$";if(o==="GB"||o==="UK")return"\xA3";if(o==="JP"||o==="JPN"||o==="CN"||o==="CHN")return"\xA5";if(o==="KR"||o==="KOR")return"\u20A9"}let a=e.toLowerCase().split(/[-_]/)[0];return jr[a]||"$"}var Br=Object.defineProperty,Wr=(t,e,r)=>e in t?Br(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Xe=(t,e,r)=>(Wr(t,typeof e!="symbol"?e+"":e,r),r),qr=(t,e,r)=>{if(!e.has(t))throw TypeError("Cannot "+r)},Qe=(t,e)=>{if(Object(e)!==e)throw TypeError('Cannot use the "in" operator on this value');return t.has(e)},$e=(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)},It=(t,e,r)=>(qr(t,e,"access private method"),r);function Ot(t,e){return Object.is(t,e)}var w=null,Z=!1,Se=1,ke=Symbol("SIGNAL");function j(t){let e=w;return w=t,e}function Kr(){return w}function Fr(){return Z}var ot={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 Ce(t){if(Z)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(B(w),e<w.producerNode.length&&w.producerNode[e]!==t&&rt(w)){let r=w.producerNode[e];Ee(r,w.producerIndexOfThis[e])}w.producerNode[e]!==t&&(w.producerNode[e]=t,w.producerIndexOfThis[e]=rt(w)?Vt(t,w,e):0),w.producerLastReadVersion[e]=t.version}function Gr(){Se++}function Pt(t){if(!(!t.dirty&&t.lastCleanEpoch===Se)){if(!t.producerMustRecompute(t)&&!Qr(t)){t.dirty=!1,t.lastCleanEpoch=Se;return}t.producerRecomputeValue(t),t.dirty=!1,t.lastCleanEpoch=Se}}function zt(t){if(t.liveConsumerNode===void 0)return;let e=Z;Z=!0;try{for(let r of t.liveConsumerNode)r.dirty||Jr(r)}finally{Z=e}}function Zr(){return w?.consumerAllowSignalWrites!==!1}function Jr(t){var e;t.dirty=!0,zt(t),(e=t.consumerMarkedDirty)==null||e.call(t.wrapper??t)}function Yr(t){return t&&(t.nextProducerIndex=0),j(t)}function Xr(t,e){if(j(e),!(!t||t.producerNode===void 0||t.producerIndexOfThis===void 0||t.producerLastReadVersion===void 0)){if(rt(t))for(let r=t.nextProducerIndex;r<t.producerNode.length;r++)Ee(t.producerNode[r],t.producerIndexOfThis[r]);for(;t.producerNode.length>t.nextProducerIndex;)t.producerNode.pop(),t.producerLastReadVersion.pop(),t.producerIndexOfThis.pop()}}function Qr(t){B(t);for(let e=0;e<t.producerNode.length;e++){let r=t.producerNode[e],a=t.producerLastReadVersion[e];if(a!==r.version||(Pt(r),a!==r.version))return!0}return!1}function Vt(t,e,r){var a;if(it(t),B(t),t.liveConsumerNode.length===0){(a=t.watched)==null||a.call(t.wrapper);for(let o=0;o<t.producerNode.length;o++)t.producerIndexOfThis[o]=Vt(t.producerNode[o],t,o)}return t.liveConsumerIndexOfThis.push(r),t.liveConsumerNode.push(e)-1}function Ee(t,e){var r;if(it(t),B(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 o=0;o<t.producerNode.length;o++)Ee(t.producerNode[o],t.producerIndexOfThis[o])}let a=t.liveConsumerNode.length-1;if(t.liveConsumerNode[e]=t.liveConsumerNode[a],t.liveConsumerIndexOfThis[e]=t.liveConsumerIndexOfThis[a],t.liveConsumerNode.length--,t.liveConsumerIndexOfThis.length--,e<t.liveConsumerNode.length){let o=t.liveConsumerIndexOfThis[e],i=t.liveConsumerNode[e];B(i),i.producerIndexOfThis[o]=e}}function rt(t){var e;return t.consumerIsAlwaysLive||(((e=t?.liveConsumerNode)==null?void 0:e.length)??0)>0}function B(t){t.producerNode??(t.producerNode=[]),t.producerIndexOfThis??(t.producerIndexOfThis=[]),t.producerLastReadVersion??(t.producerLastReadVersion=[])}function it(t){t.liveConsumerNode??(t.liveConsumerNode=[]),t.liveConsumerIndexOfThis??(t.liveConsumerIndexOfThis=[])}function Ht(t){if(Pt(t),Ce(t),t.value===at)throw t.error;return t.value}function ea(t){let e=Object.create(ta);e.computation=t;let r=()=>Ht(e);return r[ke]=e,r}var et=Symbol("UNSET"),tt=Symbol("COMPUTING"),at=Symbol("ERRORED"),ta={...ot,value:et,dirty:!0,error:null,equal:Ot,producerMustRecompute(t){return t.value===et||t.value===tt},producerRecomputeValue(t){if(t.value===tt)throw new Error("Detected cycle in computations.");let e=t.value;t.value=tt;let r=Yr(t),a,o=!1;try{a=t.computation.call(t.wrapper),o=e!==et&&e!==at&&t.equal.call(t.wrapper,e,a)}catch(i){a=at,t.error=i}finally{Xr(t,r)}if(o){t.value=e;return}t.value=a,t.version++}};function ra(){throw new Error}var aa=ra;function oa(){aa()}function ia(t){let e=Object.create(la);e.value=t;let r=()=>(Ce(e),e.value);return r[ke]=e,r}function sa(){return Ce(this),this.value}function na(t,e){Zr()||oa(),t.equal.call(t.wrapper,t.value,e)||(t.value=e,ca(t))}var la={...ot,equal:Ot,value:void 0};function ca(t){t.version++,Gr(),zt(t)}var x=Symbol("node"),_;(t=>{var e,r,a,o,i,n;class l{constructor(v,u={}){$e(this,r),Xe(this,e);let f=ia(v)[ke];if(this[x]=f,f.wrapper=this,u){let $=u.equals;$&&(f.equal=$),f.watched=u[t.subtle.watched],f.unwatched=u[t.subtle.unwatched]}}get(){if(!(0,t.isState)(this))throw new TypeError("Wrong receiver type for Signal.State.prototype.get");return sa.call(this[x])}set(v){if(!(0,t.isState)(this))throw new TypeError("Wrong receiver type for Signal.State.prototype.set");if(Fr())throw new Error("Writes to signals not permitted during Watcher callback");let u=this[x];na(u,v)}}e=x,r=new WeakSet,a=function(){},t.isState=h=>typeof h=="object"&&Qe(r,h),t.State=l;class c{constructor(v,u){$e(this,i),Xe(this,o);let f=ea(v)[ke];if(f.consumerAllowSignalWrites=!0,this[x]=f,f.wrapper=this,u){let $=u.equals;$&&(f.equal=$),f.watched=u[t.subtle.watched],f.unwatched=u[t.subtle.unwatched]}}get(){if(!(0,t.isComputed)(this))throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");return Ht(this[x])}}o=x,i=new WeakSet,n=function(){},t.isComputed=h=>typeof h=="object"&&Qe(i,h),t.Computed=c,(h=>{var v,u,k,f,$;function Sr(y){let m,p=null;try{p=j(null),m=y()}finally{j(p)}return m}h.untrack=Sr;function kr(y){var m;if(!(0,t.isComputed)(y)&&!(0,t.isWatcher)(y))throw new TypeError("Called introspectSources without a Computed or Watcher argument");return((m=y[x].producerNode)==null?void 0:m.map(p=>p.wrapper))??[]}h.introspectSources=kr;function Cr(y){var m;if(!(0,t.isComputed)(y)&&!(0,t.isState)(y))throw new TypeError("Called introspectSinks without a Signal argument");return((m=y[x].liveConsumerNode)==null?void 0:m.map(p=>p.wrapper))??[]}h.introspectSinks=Cr;function Er(y){if(!(0,t.isComputed)(y)&&!(0,t.isState)(y))throw new TypeError("Called hasSinks without a Signal argument");let m=y[x].liveConsumerNode;return m?m.length>0:!1}h.hasSinks=Er;function Ar(y){if(!(0,t.isComputed)(y)&&!(0,t.isWatcher)(y))throw new TypeError("Called hasSources without a Computed or Watcher argument");let m=y[x].producerNode;return m?m.length>0:!1}h.hasSources=Ar;class Lr{constructor(m){$e(this,u),$e(this,f),Xe(this,v);let p=Object.create(ot);p.wrapper=this,p.consumerMarkedDirty=m,p.consumerIsAlwaysLive=!0,p.consumerAllowSignalWrites=!1,p.producerNode=[],this[x]=p}watch(...m){if(!(0,t.isWatcher)(this))throw new TypeError("Called unwatch without Watcher receiver");It(this,f,$).call(this,m);let p=this[x];p.dirty=!1;let C=j(p);for(let xe of m)Ce(xe[x]);j(C)}unwatch(...m){if(!(0,t.isWatcher)(this))throw new TypeError("Called unwatch without Watcher receiver");It(this,f,$).call(this,m);let p=this[x];B(p);for(let C=p.producerNode.length-1;C>=0;C--)if(m.includes(p.producerNode[C].wrapper)){Ee(p.producerNode[C],p.producerIndexOfThis[C]);let xe=p.producerNode.length-1;if(p.producerNode[C]=p.producerNode[xe],p.producerIndexOfThis[C]=p.producerIndexOfThis[xe],p.producerNode.length--,p.producerIndexOfThis.length--,p.nextProducerIndex--,C<p.producerNode.length){let Nr=p.producerIndexOfThis[C],yt=p.producerNode[C];it(yt),yt.liveConsumerIndexOfThis[Nr]=C}}}getPending(){if(!(0,t.isWatcher)(this))throw new TypeError("Called getPending without Watcher receiver");return this[x].producerNode.filter(p=>p.dirty).map(p=>p.wrapper)}}v=x,u=new WeakSet,k=function(){},f=new WeakSet,$=function(y){for(let m of y)if(!(0,t.isComputed)(m)&&!(0,t.isState)(m))throw new TypeError("Called watch/unwatch without a Computed or State argument")},t.isWatcher=y=>Qe(u,y),h.Watcher=Lr;function Tr(){var y;return(y=Kr())==null?void 0:y.wrapper}h.currentComputed=Tr,h.watched=Symbol("watched"),h.unwatched=Symbol("unwatched")})(t.subtle||(t.subtle={}))})(_||(_={}));var oo=Symbol("SignalWatcherBrand"),io=new FinalizationRegistry((({watcher:t,signal:e})=>{t.unwatch(e)}));var Ae={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},J=t=>(...e)=>({_$litDirective$:t,values:e}),W=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,r,a){this._$Ct=e,this._$AM=r,this._$Ci=a}_$AS(e,r){return this.update(e,r)}update(e,r){return this.render(...r)}};var X=globalThis,Le=X.trustedTypes,Mt=Le?Le.createPolicy("lit-html",{createHTML:t=>t}):void 0,nt="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,lt="?"+A,da=`<${lt}>`,M=document,Q=()=>M.createComment(""),ee=t=>t===null||typeof t!="object"&&typeof t!="function",ct=Array.isArray,Wt=t=>ct(t)||typeof t?.[Symbol.iterator]=="function",st=`[ 	
+\f\r]`,Y=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Dt=/-->/g,Rt=/>/g,V=RegExp(`>|${st}(?:([^\\s"'>=/]+)(${st}*=${st}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),Ut=/'/g,jt=/"/g,qt=/^(?:script|style|textarea|title)$/i,dt=t=>(e,...r)=>({_$litType$:t,strings:e,values:r}),s=dt(1),Kt=dt(2),uo=dt(3),L=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),Bt=new WeakMap,H=M.createTreeWalker(M,129);function Ft(t,e){if(!ct(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return Mt!==void 0?Mt.createHTML(e):e}var Gt=(t,e)=>{let r=t.length-1,a=[],o,i=e===2?"<svg>":e===3?"<math>":"",n=Y;for(let l=0;l<r;l++){let c=t[l],h,v,u=-1,k=0;for(;k<c.length&&(n.lastIndex=k,v=n.exec(c),v!==null);)k=n.lastIndex,n===Y?v[1]==="!--"?n=Dt:v[1]!==void 0?n=Rt:v[2]!==void 0?(qt.test(v[2])&&(o=RegExp("</"+v[2],"g")),n=V):v[3]!==void 0&&(n=V):n===V?v[0]===">"?(n=o??Y,u=-1):v[1]===void 0?u=-2:(u=n.lastIndex-v[2].length,h=v[1],n=v[3]===void 0?V:v[3]==='"'?jt:Ut):n===jt||n===Ut?n=V:n===Dt||n===Rt?n=Y:(n=V,o=void 0);let f=n===V&&t[l+1].startsWith("/>")?" ":"";i+=n===Y?c+da:u>=0?(a.push(h),c.slice(0,u)+nt+c.slice(u)+A+f):c+A+(u===-2?l:f)}return[Ft(t,i+(t[r]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),a]},te=class t{constructor({strings:e,_$litType$:r},a){let o;this.parts=[];let i=0,n=0,l=e.length-1,c=this.parts,[h,v]=Gt(e,r);if(this.el=t.createElement(h,a),H.currentNode=this.el.content,r===2||r===3){let u=this.el.content.firstChild;u.replaceWith(...u.childNodes)}for(;(o=H.nextNode())!==null&&c.length<l;){if(o.nodeType===1){if(o.hasAttributes())for(let u of o.getAttributeNames())if(u.endsWith(nt)){let k=v[n++],f=o.getAttribute(u).split(A),$=/([.?@])?(.*)/.exec(k);c.push({type:1,index:i,name:$[2],strings:f,ctor:$[1]==="."?Ne:$[1]==="?"?Ie:$[1]==="@"?Oe:R}),o.removeAttribute(u)}else u.startsWith(A)&&(c.push({type:6,index:i}),o.removeAttribute(u));if(qt.test(o.tagName)){let u=o.textContent.split(A),k=u.length-1;if(k>0){o.textContent=Le?Le.emptyScript:"";for(let f=0;f<k;f++)o.append(u[f],Q()),H.nextNode(),c.push({type:2,index:++i});o.append(u[k],Q())}}}else if(o.nodeType===8)if(o.data===lt)c.push({type:2,index:i});else{let u=-1;for(;(u=o.data.indexOf(A,u+1))!==-1;)c.push({type:7,index:i}),u+=A.length-1}i++}}static createElement(e,r){let a=M.createElement("template");return a.innerHTML=e,a}};function D(t,e,r=t,a){if(e===L)return e;let o=a!==void 0?r._$Co?.[a]:r._$Cl,i=ee(e)?void 0:e._$litDirective$;return o?.constructor!==i&&(o?._$AO?.(!1),i===void 0?o=void 0:(o=new i(t),o._$AT(t,r,a)),a!==void 0?(r._$Co??(r._$Co=[]))[a]=o:r._$Cl=o),o!==void 0&&(e=D(t,o._$AS(t,e.values),o,a)),e}var Te=class{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){let{el:{content:r},parts:a}=this._$AD,o=(e?.creationScope??M).importNode(r,!0);H.currentNode=o;let i=H.nextNode(),n=0,l=0,c=a[0];for(;c!==void 0;){if(n===c.index){let h;c.type===2?h=new q(i,i.nextSibling,this,e):c.type===1?h=new c.ctor(i,c.name,c.strings,this,e):c.type===6&&(h=new Pe(i,this,e)),this._$AV.push(h),c=a[++l]}n!==c?.index&&(i=H.nextNode(),n++)}return H.currentNode=M,o}p(e){let r=0;for(let a of this._$AV)a!==void 0&&(a.strings!==void 0?(a._$AI(e,a,r),r+=a.strings.length-2):a._$AI(e[r])),r++}},q=class t{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,r,a,o){this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=e,this._$AB=r,this._$AM=a,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,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=D(this,e,r),ee(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):Wt(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&&ee(this._$AH)?this._$AA.nextSibling.data=e:this.T(M.createTextNode(e)),this._$AH=e}$(e){let{values:r,_$litType$:a}=e,o=typeof a=="number"?this._$AC(e):(a.el===void 0&&(a.el=te.createElement(Ft(a.h,a.h[0]),this.options)),a);if(this._$AH?._$AD===o)this._$AH.p(r);else{let i=new Te(o,this),n=i.u(this.options);i.p(r),this.T(n),this._$AH=i}}_$AC(e){let r=Bt.get(e.strings);return r===void 0&&Bt.set(e.strings,r=new te(e)),r}k(e){ct(this._$AH)||(this._$AH=[],this._$AR());let r=this._$AH,a,o=0;for(let i of e)o===r.length?r.push(a=new t(this.O(Q()),this.O(Q()),this,this.options)):a=r[o],a._$AI(i),o++;o<r.length&&(this._$AR(a&&a._$AB.nextSibling,o),r.length=o)}_$AR(e=this._$AA.nextSibling,r){for(this._$AP?.(!1,!0,r);e!==this._$AB;){let a=e.nextSibling;e.remove(),e=a}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},R=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,r,a,o,i){this.type=1,this._$AH=b,this._$AN=void 0,this.element=e,this.name=r,this._$AM=o,this.options=i,a.length>2||a[0]!==""||a[1]!==""?(this._$AH=Array(a.length-1).fill(new String),this.strings=a):this._$AH=b}_$AI(e,r=this,a,o){let i=this.strings,n=!1;if(i===void 0)e=D(this,e,r,0),n=!ee(e)||e!==this._$AH&&e!==L,n&&(this._$AH=e);else{let l=e,c,h;for(e=i[0],c=0;c<i.length-1;c++)h=D(this,l[a+c],r,c),h===L&&(h=this._$AH[c]),n||(n=!ee(h)||h!==this._$AH[c]),h===b?e=b:e!==b&&(e+=(h??"")+i[c+1]),this._$AH[c]=h}n&&!o&&this.j(e)}j(e){e===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},Ne=class extends R{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===b?void 0:e}},Ie=class extends R{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==b)}},Oe=class extends R{constructor(e,r,a,o,i){super(e,r,a,o,i),this.type=5}_$AI(e,r=this){if((e=D(this,e,r,0)??b)===L)return;let a=this._$AH,o=e===b&&a!==b||e.capture!==a.capture||e.once!==a.once||e.passive!==a.passive,i=e!==b&&(a===b||o);o&&this.element.removeEventListener(this.name,this,a),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)}},Pe=class{constructor(e,r,a){this.element=e,this.type=6,this._$AN=void 0,this._$AM=r,this.options=a}get _$AU(){return this._$AM._$AU}_$AI(e){D(this,e)}},Zt={M:nt,P:A,A:lt,C:1,L:Gt,R:Te,D:Wt,V:D,I:q,H:R,N:Ie,U:Oe,B:Ne,F:Pe},ua=X.litHtmlPolyfillSupport;ua?.(te,q),(X.litHtmlVersions??(X.litHtmlVersions=[])).push("3.3.1");var Jt=(t,e,r)=>{let a=r?.renderBefore??e,o=a._$litPart$;if(o===void 0){let i=r?.renderBefore??null;a._$litPart$=o=new q(e.insertBefore(Q(),i),i,void 0,r??{})}return o._$AI(t),o};var{I:go}=Zt;var Yt=t=>t.strings===void 0;var re=(t,e)=>{let r=t._$AN;if(r===void 0)return!1;for(let a of r)a._$AO?.(e,!1),re(a,e);return!0},ze=t=>{let e,r;do{if((e=t._$AM)===void 0)break;r=e._$AN,r.delete(t),t=e}while(r?.size===0)},Xt=t=>{for(let e;e=t._$AM;t=e){let r=e._$AN;if(r===void 0)e._$AN=r=new Set;else if(r.has(t))break;r.add(t),ga(e)}};function ha(t){this._$AN!==void 0?(ze(this),this._$AM=t,Xt(this)):this._$AM=t}function pa(t,e=!1,r=0){let a=this._$AH,o=this._$AN;if(o!==void 0&&o.size!==0)if(e)if(Array.isArray(a))for(let i=r;i<a.length;i++)re(a[i],!1),ze(a[i]);else a!=null&&(re(a,!1),ze(a));else re(this,t)}var ga=t=>{t.type==Ae.CHILD&&(t._$AP??(t._$AP=pa),t._$AQ??(t._$AQ=ha))},Ve=class extends W{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,r,a){super._$AT(e,r,a),Xt(this),this.isConnected=e._$AU}_$AO(e,r=!0){e!==this.isConnected&&(this.isConnected=e,e?this.reconnected?.():this.disconnected?.()),r&&(re(this,e),ze(this))}setValue(e){if(Yt(this._$Ct))this._$Ct._$AI(e,this);else{let r=[...this._$Ct._$AH];r[this._$Ci]=e,this._$Ct._$AI(r,this,0)}}disconnected(){}reconnected(){}};var He=class extends Ve{_$Sl(){if(this._$Su!==void 0)return;this._$SW=new _.Computed((()=>{var r;return(r=this._$Sj)===null||r===void 0?void 0:r.get()}));let e=this._$Su=new _.subtle.Watcher((()=>{var r;(r=this._$SO)===null||r===void 0||r._(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,[r]){var a,o;return(a=this._$SO)!==null&&a!==void 0||(this._$SO=(o=e.options)===null||o===void 0?void 0:o.host),r!==this._$Sj&&this._$Sj!==void 0&&this._$Sp(),this._$Sj=r,this._$Sl(),_.subtle.untrack((()=>this._$SW.get()))}disconnected(){this._$Sp()}reconnected(){this._$Sl()}},ut=J(He);var ht=t=>(e,...r)=>t(e,...r.map((a=>a instanceof _.State||a instanceof _.Computed?ut(a):a))),fa=ht(s),ma=ht(Kt);var Po=_.State,zo=_.Computed,ae=(t,e)=>new _.State(t,e);var va={mode:"auto",baseWidth:280,minScale:.75,maxScale:2},Re=ae(1),De=ae(va);function ya(t,e=De.get()){if(e.mode==="fixed")return 1;let r=t/e.baseWidth,a=Math.max(e.minScale,Math.min(e.maxScale,r));return Number(a.toFixed(3))}function jo(t){let r={...De.get(),...t};De.set(r),typeof window<"u"&&Me()}function Me(){if(typeof window>"u"||typeof document>"u")return;let t=document.documentElement.clientWidth,e=De.get(),r=ya(t,e);Re.set(r),document.documentElement.style.setProperty("--sf",r.toString()),window.dispatchEvent(new CustomEvent("scaling-changed",{detail:{scalingFactor:r,config:e}}))}function Bo(){return Re.get()}function Wo(t){return t*Re.get()}function qo(t){let e=Re.get();return e===0?t:t/e}function Qt(){if(typeof window>"u")return;Me();let t;window.addEventListener("resize",()=>{clearTimeout(t),t=setTimeout(()=>{Me()},100)}),window.addEventListener("orientationchange",()=>{setTimeout(Me,100)})}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Qt):Qt());function ba(){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 K=ae(ba());function er(t){if(t!==K.get()&&(K.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)}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=K.get(),e=window.document?.documentElement;e&&(e.classList.remove("light-theme","dark-theme"),e.classList.add(`${t}-theme`))}var Ue=globalThis,je=Ue.ShadowRoot&&(Ue.ShadyCSS===void 0||Ue.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,pt=Symbol(),tr=new WeakMap,oe=class{constructor(e,r,a){if(this._$cssResult$=!0,a!==pt)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=r}get styleSheet(){let e=this.o,r=this.t;if(je&&e===void 0){let a=r!==void 0&&r.length===1;a&&(e=tr.get(r)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),a&&tr.set(r,e))}return e}toString(){return this.cssText}},g=t=>new oe(typeof t=="string"?t:t+"",void 0,pt),T=(t,...e)=>{let r=t.length===1?t[0]:e.reduce(((a,o,i)=>a+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+t[i+1]),t[0]);return new oe(r,t,pt)},rr=(t,e)=>{if(je)t.adoptedStyleSheets=e.map((r=>r instanceof CSSStyleSheet?r:r.styleSheet));else for(let r of e){let a=document.createElement("style"),o=Ue.litNonce;o!==void 0&&a.setAttribute("nonce",o),a.textContent=r.cssText,t.appendChild(a)}},gt=je?t=>t:t=>t instanceof CSSStyleSheet?(e=>{let r="";for(let a of e.cssRules)r+=a.cssText;return g(r)})(t):t;var{is:wa,defineProperty:xa,getOwnPropertyDescriptor:_a,getOwnPropertyNames:$a,getOwnPropertySymbols:Sa,getPrototypeOf:ka}=Object,O=globalThis,ar=O.trustedTypes,Ca=ar?ar.emptyScript:"",Ea=O.reactiveElementPolyfillSupport,ie=(t,e)=>t,ft={toAttribute(t,e){switch(e){case Boolean:t=t?Ca: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}},ir=(t,e)=>!wa(t,e),or={attribute:!0,type:String,converter:ft,reflect:!1,useDefault:!1,hasChanged:ir};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,r=or){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){let a=Symbol(),o=this.getPropertyDescriptor(e,a,r);o!==void 0&&xa(this.prototype,e,o)}}static getPropertyDescriptor(e,r,a){let{get:o,set:i}=_a(this.prototype,e)??{get(){return this[r]},set(n){this[r]=n}};return{get:o,set(n){let l=o?.call(this);i?.call(this,n),this.requestUpdate(e,l,a)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??or}static _$Ei(){if(this.hasOwnProperty(ie("elementProperties")))return;let e=ka(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(ie("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(ie("properties"))){let r=this.properties,a=[...$a(r),...Sa(r)];for(let o of a)this.createProperty(o,r[o])}let e=this[Symbol.metadata];if(e!==null){let r=litPropertyMetadata.get(e);if(r!==void 0)for(let[a,o]of r)this.elementProperties.set(a,o)}this._$Eh=new Map;for(let[r,a]of this.elementProperties){let o=this._$Eu(r,a);o!==void 0&&this._$Eh.set(o,r)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let r=[];if(Array.isArray(e)){let a=new Set(e.flat(1/0).reverse());for(let o of a)r.unshift(gt(o))}else e!==void 0&&r.push(gt(e));return r}static _$Eu(e,r){let a=r.attribute;return a===!1?void 0:typeof a=="string"?a: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,r=this.constructor.elementProperties;for(let a of r.keys())this.hasOwnProperty(a)&&(e.set(a,this[a]),delete this[a]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return rr(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,a){this._$AK(e,a)}_$ET(e,r){let a=this.constructor.elementProperties.get(e),o=this.constructor._$Eu(e,a);if(o!==void 0&&a.reflect===!0){let i=(a.converter?.toAttribute!==void 0?a.converter:ft).toAttribute(r,a.type);this._$Em=e,i==null?this.removeAttribute(o):this.setAttribute(o,i),this._$Em=null}}_$AK(e,r){let a=this.constructor,o=a._$Eh.get(e);if(o!==void 0&&this._$Em!==o){let i=a.getPropertyOptions(o),n=typeof i.converter=="function"?{fromAttribute:i.converter}:i.converter?.fromAttribute!==void 0?i.converter:ft;this._$Em=o;let l=n.fromAttribute(r,i.type);this[o]=l??this._$Ej?.get(o)??l,this._$Em=null}}requestUpdate(e,r,a){if(e!==void 0){let o=this.constructor,i=this[e];if(a??(a=o.getPropertyOptions(e)),!((a.hasChanged??ir)(i,r)||a.useDefault&&a.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(o._$Eu(e,a))))return;this.C(e,r,a)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,r,{useDefault:a,reflect:o,wrapped:i},n){a&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,n??r??this[e]),i!==!0||n!==void 0)||(this._$AL.has(e)||(this.hasUpdated||a||(r=void 0),this._$AL.set(e,r)),o===!0&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(r){Promise.reject(r)}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[o,i]of this._$Ep)this[o]=i;this._$Ep=void 0}let a=this.constructor.elementProperties;if(a.size>0)for(let[o,i]of a){let{wrapped:n}=i,l=this[o];n!==!0||this._$AL.has(o)||l===void 0||this.C(o,void 0,i,l)}}let e=!1,r=this._$AL;try{e=this.shouldUpdate(r),e?(this.willUpdate(r),this._$EO?.forEach((a=>a.hostUpdate?.())),this.update(r)):this._$EM()}catch(a){throw e=!1,this._$EM(),a}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=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){}};N.elementStyles=[],N.shadowRootOptions={mode:"open"},N[ie("elementProperties")]=new Map,N[ie("finalized")]=new Map,Ea?.({ReactiveElement:N}),(O.reactiveElementVersions??(O.reactiveElementVersions=[])).push("2.1.1");var se=globalThis,d=class extends N{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var r;let e=super.createRenderRoot();return(r=this.renderOptions).renderBefore??(r.renderBefore=e.firstChild),e}update(e){let r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=Jt(r,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return L}};d._$litElement$=!0,d.finalized=!0,se.litElementHydrateSupport?.({LitElement:d});var Aa=se.litElementPolyfillSupport;Aa?.({LitElement:d});(se.litElementVersions??(se.litElementVersions=[])).push("4.2.1");var sr={};var Be=class extends d{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._currentLanguage=S.value,this.boundHandlers={languageChanged:(()=>{console.log("Language changed event received in ds-text"),this._currentLanguage=S.value,this._updateLanguageAttribute(),this._loadText(),this.requestUpdate()})}}connectedCallback(){super.connectedCallback(),this._currentLanguage=S.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("key")||e.has("defaultValue"))&&this._loadText()}_updateLanguageAttribute(){let r=(this._currentLanguage||S.value||"").toLowerCase().split(/[-_]/).filter(Boolean),a=r[0]||"";if(a==="ja"){this.setAttribute("data-language","ja");return}if(a==="zh"){let o=r.includes("hans")||r.includes("cn")||r.includes("sg"),i=r.includes("hant")||r.includes("tw")||r.includes("hk")||r.includes("mo");o?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.key){this._text=this.defaultValue||this.fallback||"",this._updateLanguageAttribute(),this.requestUpdate();return}try{let e=U(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._updateLanguageAttribute(),this.requestUpdate()}render(){return s`<span>${this._text||this.defaultValue||this.key}</span>`}};Be.styles=g(sr);customElements.define("ds-text",Be);var nr={};var ne=class extends d{constructor(){super(),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}connectedCallback(){super.connectedCallback()}render(){let e=this.key||this.defaultText||this.fallback;return s`
       <button
         class=${this.variant}
         ?disabled=${this.disabled}
@@ -35,167 +17,121 @@ function Ue(){if(typeof navigator>"u"||typeof window>"u")return!1;let t=navigato
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${e?o`<ds-text
+        ${e?s`<ds-text
               .key=${this.key}
               .defaultValue=${this.defaultText}
               .fallback=${this.fallback}
-            ></ds-text>`:o`<slot></slot>`}
+            ></ds-text>`:s`<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}}};ie.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}};ie.styles=p`
-    button {
-      max-height: calc(var(--08) * var(--sf));
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      cursor: pointer;
-      padding: 0 calc(0.5px * var(--sf));
-      color: var(--button-text-color);
-      font-family: var(--typeface-regular);
-    }
+    `}_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}};ne.styles=g(nr);customElements.define("ds-button",ne);var lr={};var le=class extends d{constructor(){super(...arguments),this.textKey="",this.actionKey="",this.href="",this.mailto="",this.subjectKey="",this.describeKey="",this.appVersionKey="",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{let e=this.subjectKey?U(this.subjectKey)||this.subjectKey:"Issue report",r=this.describeKey?U(this.describeKey)||this.describeKey:"Describe the issue:",a=this.appVersionKey?U(this.appVersionKey)||this.appVersionKey:"App version:",o=`${r}
 
-    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);
+${a} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURIComponent(e)}&body=${encodeURIComponent(o)}`}catch{return`mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version||""}`}return"#"}render(){let e=this._getMailtoHref();return s`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion&&this.version?s`<ds-text default-value=${this.version}></ds-text>`:s`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey?s`
+            <div class="action-wrapper">
+              <a href=${e}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          `:""}
+    `}};le.properties={textKey:{type:String,attribute:"text-key"},actionKey:{type:String,attribute:"action-key"},href:{type:String},mailto:{type:String},subjectKey:{type:String,attribute:"subject-key"},describeKey:{type:String,attribute:"describe-key"},appVersionKey:{type:String,attribute:"app-version-key"},variant:{type:String},version:{type:String},_showVersion:{type:Boolean,state:!0}};le.styles=g(lr);customElements.define("ds-banner",le);var ce=class extends d{constructor(){super(),this.variant="default",this.elevation=1,this.interactive=!1,this.disabled=!1,this.padding="medium"}render(){return s`
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `}};ce.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}};ce.styles=T`
+    :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;
     }
 
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      font-family: var(--typeface-regular);
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     }
 
-    button.text {
+    :host([variant="outlined"]) {
       background-color: transparent;
-      color: var(--button-color, var(--button-text-color));
-      font-family: var(--typeface-regular);
-      padding: 0;
-      text-decoration: none;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
     }
 
-    button.text:hover {
-      opacity: 0.8;
-      text-decoration: none;
+    :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);
     }
 
-    button[bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
     }
 
-    button[no-background] {
-      background-color: transparent;
-      max-height: var(--1);
-      padding: 0;
-      color: var(--button-color, var(--button-text-color-secondary));
+    :host([elevation="0"]) {
+      box-shadow: none;
     }
 
-    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([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     }
 
-    .loading {
-      opacity: 0.7;
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
     }
-  `;customElements.define("ds-button",ie);var oe=class extends h{constructor(){super(...arguments),this.textKey="",this.actionKey="",this.href="",this.mailto="",this.subjectKey="",this.describeKey="",this.appVersionKey="",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{let e=this.subjectKey?R(this.subjectKey)||this.subjectKey:"Issue report",r=this.describeKey?R(this.describeKey)||this.describeKey:"Describe the issue:",s=this.appVersionKey?R(this.appVersionKey)||this.appVersionKey:"App version:",n=`${r}
 
-
-${s} ${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(){let e=this._getMailtoHref();return o`
-      <div class="text-wrapper" @click=${this._toggleVersion}>
-        ${this._showVersion&&this.version?o`<ds-text default-value=${this.version}></ds-text>`:o`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
-      </div>
-      ${this.actionKey?o`
-            <div class="action-wrapper">
-              <a href=${e}>
-                <ds-text key=${this.actionKey}></ds-text>
-              </a>
-            </div>
-          `:""}
-    `}};oe.properties={textKey:{type:String,attribute:"text-key"},actionKey:{type:String,attribute:"action-key"},href:{type:String},mailto:{type:String},subjectKey:{type:String,attribute:"subject-key"},describeKey:{type:String,attribute:"describe-key"},appVersionKey:{type:String,attribute:"app-version-key"},variant:{type:String},version:{type:String},_showVersion:{type:Boolean,state:!0}};oe.styles=p`
-    :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([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
     }
 
-    :host([variant="info"]) {
-      background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
-      --banner-text-color: var(--white, #fff);
-      --banner-action-color: var(--white, #fff);
+    :host([interactive]) {
+      cursor: pointer;
     }
 
-    :host([variant="success"]) {
-      background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
-      --banner-text-color: var(--white, #fff);
-      --banner-action-color: var(--white, #fff);
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
 
-    :host([variant="error"]) {
-      background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
-      --banner-text-color: var(--white, #fff);
-      --banner-action-color: var(--slate, #1e1e1e);
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
     }
 
-    .text-wrapper {
-      flex: 1;
-      cursor: pointer;
-      user-select: none;
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
     }
 
-    .text-wrapper ds-text,
-    .text-wrapper .version {
-      color: var(--banner-text-color);
+    :host([padding="none"]) {
+      padding: 0;
     }
 
-    .action-wrapper {
-      font-size: calc(12px * var(--sf, 1));
+    :host([padding="small"]) {
+      padding: calc(var(--025) * 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;
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
     }
 
-    .action-wrapper a:hover {
-      opacity: 0.8;
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
     }
 
-    .action-wrapper ds-text {
-      color: var(--banner-action-color);
-      font-family: var(--typeface-regular);
-      font-size: calc(12px * var(--sf, 1));
-      pointer-events: none;
+    .card-content {
+      width: 100%;
+      height: 100%;
     }
-  `;customElements.define("ds-banner",oe);var ae=class extends W{constructor(e){if(super(e),this.it=w,e.type!==$e.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===w||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 r=[e];return r.raw=r,this._t={_$litType$:this.constructor.resultType,strings:r,values:[]}}};ae.directiveName="unsafeHTML",ae.resultType=1;var Qt=Z(ae);var K=class t extends h{get type(){return this._type}set type(e){let r=this._type;this._type=e,this.requestUpdate("type",r)}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"),o`<div class="icon-container"><slot></slot></div>`;let e=t.iconNameToSvgMap[this._type.toLowerCase()];if(e)return o`<div class="icon-container">${Qt(e)}</div>`;switch(this._type.toLowerCase()){case"close":return console.log("Rendering close icon"),o`
+  `;customElements.define("ds-card",ce);var de=class extends W{constructor(e){if(super(e),this.it=b,e.type!==Ae.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 r=[e];return r.raw=r,this._t={_$litType$:this.constructor.resultType,strings:r,values:[]}}};de.directiveName="unsafeHTML",de.resultType=1;var cr=J(de);var dr={};var F=class t extends d{get type(){return this._type}set type(e){let r=this._type;this._type=e,this.requestUpdate("type",r)}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"),s`<div class="icon-container"><slot></slot></div>`;let e=t.iconNameToSvgMap[this._type.toLowerCase()];if(e)return s`<div class="icon-container">${cr(e)}</div>`;switch(this._type.toLowerCase()){case"close":return console.log("Rendering close icon"),s`
           <div class="icon-container">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -203,7 +139,7 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               />
             </svg>
           </div>
-        `;case"page":return console.log("Rendering page icon"),o`
+        `;case"page":return console.log("Rendering page icon"),s`
           <div class="icon-container">
             <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
               <rect
@@ -218,7 +154,7 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               />
             </svg>
           </div>
-        `;case"note":return console.log("Rendering note icon"),o`
+        `;case"note":return console.log("Rendering note icon"),s`
           <div class="icon-container">
             <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
               <rect
@@ -237,7 +173,7 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               />
             </svg>
           </div>
-        `;case"default":return console.log("Rendering default icon"),o`
+        `;case"default":return console.log("Rendering default icon"),s`
           <div class="icon-container">
             <svg
               width="17"
@@ -264,7 +200,7 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               />
             </svg>
           </div>
-        `;case"big":return console.log("Rendering big icon"),o`
+        `;case"big":return console.log("Rendering big icon"),s`
           <div class="icon-container">
             <svg
               width="17"
@@ -303,7 +239,7 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               </defs>
             </svg>
           </div>
-        `;case"gallery":return console.log("Rendering gallery icon"),o`
+        `;case"gallery":return console.log("Rendering gallery icon"),s`
           <div class="icon-container">
             <svg
               width="17"
@@ -338,7 +274,7 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               </defs>
             </svg>
           </div>
-        `;case"check":return console.log("Rendering check icon"),o`
+        `;case"check":return console.log("Rendering check icon"),s`
           <div class="icon-container">
             <svg
               viewBox="0 0 17 17"
@@ -357,245 +293,189 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
               />
             </svg>
           </div>
-        `;default:return console.log(`Unknown icon type: ${this._type}, rendering default slot`),o`<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()}};K.properties={type:{type:String,reflect:!0}};K.styles=p`
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    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));
-    }
-
-    /* Notes style color variable for future implementation */
-    :host {
-      --notes-style-color: #ffb6b9;
-    }
-  `;K.iconNameToSvgMap=(()=>{try{let t=import.meta.glob("../x Icon/*.svg",{as:"raw",eager:!0}),e={};for(let[r,s]of Object.entries(t)){let i=(r.split("/").pop()??"").replace(/\.svg$/i,"").toLowerCase();i&&(e[i]=s)}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",K);console.log("Icon component registered with custom elements registry");var is=t=>{localStorage.setItem("accentColor",t)},ct=()=>localStorage.getItem("accentColor")||"--sharp-blue",lt=()=>{let t=ct();document.documentElement.style.setProperty("--accent-color",`var(${t})`)},os=t=>{localStorage.setItem("notesStyleMedium",t)},er=()=>localStorage.getItem("notesStyleMedium")||"note",tr=t=>{localStorage.setItem("pageStyle",t)},le=()=>localStorage.getItem("pageStyle")||"note",He=class extends h{static get properties(){return{type:{type:String},values:{type:Array},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.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=je();this.values=e,this.currentValue=S.value}else if(this.type==="theme"){this.values=["light","dark"];let 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"];let e=ct();this.currentValue=e,lt()}else if(this.type==="notes-style-medium"){this.values=["default","big","gallery"];let e=er();this.currentValue=e;let r=le();this.disabled=r==="note"}else if(this.type==="page-style"){this.values=["note","page"];let e=le();this.currentValue=e}else this.type==="icon-only"&&(this.values=["note","page"],this.currentValue=this.values[0]);this.requestUpdate()}ensureThemeInitialized(){if(!localStorage.getItem("theme")){let s=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";localStorage.setItem("theme",s),document.documentElement.classList.add(`${s}-theme`)}}attributeChangedCallback(e,r,s){super.attributeChangedCallback(e,r,s),e==="type"&&r!==s&&this.initializeValues()}async setupInitialValue(){if(this.type==="language"){let e=S.value;this.currentValue=e}else if(this.type==="theme"){let e=q.get();this.currentValue=e}else if(this.type==="accent-color"){let e=ct();this.currentValue=e,lt()}else if(this.type==="notes-style-medium"){let e=er();this.currentValue=e;let r=le();this.disabled=r==="note"}else if(this.type==="page-style"){let e=le();this.currentValue=e}else if(this.type==="icon-only"){let e=le();this.currentValue=e}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 s=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[s];this.currentValue=n,document.startViewTransition?document.startViewTransition(()=>{We(n)}):We(n),V({language:n}),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:n}}))}else if(this.type==="theme"){let s=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[s];this.currentValue=n,Kt(n),V({theme:n})}else if(this.type==="accent-color"){let s=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[s];this.currentValue=n,is(n),lt(),V({accentColor:n}),window.dispatchEvent(new CustomEvent("accent-color-changed",{detail:{color:n}}))}else if(this.type==="notes-style-medium"){let s=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[s];this.currentValue=n,os(n),V({notesStyleMedium:n}),window.dispatchEvent(new CustomEvent("notes-style-medium-changed",{detail:{style:n}}))}else if(this.type==="page-style"){let s=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[s];this.currentValue=n,tr(n),V({pageStyle:n}),window.dispatchEvent(new CustomEvent("page-style-changed",{detail:{behavior:n}}))}else if(this.type==="icon-only"){let s=(this.values.indexOf(this.currentValue)+1)%this.values.length,n=this.values[s];this.currentValue=n,tr(n),V({pageStyle:n}),window.dispatchEvent(new CustomEvent("page-style-changed",{detail:{behavior:n}}))}this.requestUpdate()}}getValueDisplay(e){if(this.type==="language")return $t(e,{locale:S.value});if(this.type==="theme"){if(this.translationsReady){let r=O(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){let r=O(e==="note"?"note":"page");if(r&&r!==(e==="note"?"note":"page"))return r}return e}else if(this.type==="icon-only")return e==="note"?o`<ds-icon type="note"></ds-icon>`:e==="page"?o`<ds-icon type="page"></ds-icon>`:o`<span>${e}</span>`}return e}getColorKey(e){return{"--tuned-red":"red","--orange":"orange","--yellow":"yellow","--apple-green":"appleGreen","--every-green":"green","--zenith-blue":"lightBlue","--sharp-blue":"blue","--pink":"pink"}[e]||e.replace("--","").replace("-"," ")}getColorName(e){let s={"--tuned-red":"red","--orange":"orange","--yellow":"yellow","--apple-green":"appleGreen","--every-green":"green","--zenith-blue":"lightBlue","--sharp-blue":"blue","--pink":"pink"}[e];if(s&&this.translationsReady){let n=O(s);if(n&&n!==s)return n}return e.replace("--","").replace("-"," ")}getNotesStyleIcon(e){return e==="page"?o`<ds-icon type="page"></ds-icon>`:e==="note"?o`<ds-icon type="note"></ds-icon>`:e==="default"?o`<ds-icon type="default"></ds-icon>`:e==="big"?o`<ds-icon type="big"></ds-icon>`:e==="gallery"?o`<ds-icon type="gallery"></ds-icon>`:o`<span>${e}</span>`}render(){return o`
+        `;default:return console.log(`Unknown icon type: ${this._type}, rendering default slot`),s`<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()}};F.properties={type:{type:String,reflect:!0}};F.styles=g(dr);F.iconNameToSvgMap=(()=>{try{let t=import.meta.glob("../x Icon/*.svg",{as:"raw",eager:!0}),e={};for(let[r,a]of Object.entries(t)){let i=(r.split("/").pop()??"").replace(/\.svg$/i,"").toLowerCase();i&&(e[i]=a)}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",F);console.log("Icon component registered with custom elements registry");var ur={};var Pa=t=>{localStorage.setItem("accentColor",t)},vt=()=>localStorage.getItem("accentColor")||"--sharp-blue",mt=()=>{let t=vt();document.documentElement.style.setProperty("--accent-color",`var(${t})`)},za=t=>{localStorage.setItem("notesStyleMedium",t)},hr=()=>localStorage.getItem("notesStyleMedium")||"note",pr=t=>{localStorage.setItem("pageStyle",t)},ue=()=>localStorage.getItem("pageStyle")||"note",We=class extends d{static get properties(){return{type:{type:String},values:{type:Array},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.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=Je();this.values=e,this.currentValue=S.value}else if(this.type==="theme"){this.values=["light","dark"];let e=K.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"];let e=vt();this.currentValue=e,mt()}else if(this.type==="notes-style-medium"){this.values=["default","big","gallery"];let e=hr();this.currentValue=e;let r=ue();this.disabled=r==="note"}else if(this.type==="page-style"){this.values=["note","page"];let e=ue();this.currentValue=e}else this.type==="icon-only"&&(this.values=["note","page"],this.currentValue=this.values[0]);this.requestUpdate()}ensureThemeInitialized(){if(!localStorage.getItem("theme")){let a=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";localStorage.setItem("theme",a),document.documentElement.classList.add(`${a}-theme`)}}attributeChangedCallback(e,r,a){super.attributeChangedCallback(e,r,a),e==="type"&&r!==a&&this.initializeValues()}async setupInitialValue(){if(this.type==="language"){let e=S.value;this.currentValue=e}else if(this.type==="theme"){let e=K.get();this.currentValue=e}else if(this.type==="accent-color"){let e=vt();this.currentValue=e,mt()}else if(this.type==="notes-style-medium"){let e=hr();this.currentValue=e;let r=ue();this.disabled=r==="note"}else if(this.type==="page-style"){let e=ue();this.currentValue=e}else if(this.type==="icon-only"){let e=ue();this.currentValue=e}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 a=(this.values.indexOf(this.currentValue)+1)%this.values.length,o=this.values[a];this.currentValue=o,document.startViewTransition?document.startViewTransition(()=>{Ye(o)}):Ye(o),z({language:o}),window.dispatchEvent(new CustomEvent("language-changed",{detail:{language:o}}))}else if(this.type==="theme"){let a=(this.values.indexOf(this.currentValue)+1)%this.values.length,o=this.values[a];this.currentValue=o,er(o),z({theme:o})}else if(this.type==="accent-color"){let a=(this.values.indexOf(this.currentValue)+1)%this.values.length,o=this.values[a];this.currentValue=o,Pa(o),mt(),z({accentColor:o}),window.dispatchEvent(new CustomEvent("accent-color-changed",{detail:{color:o}}))}else if(this.type==="notes-style-medium"){let a=(this.values.indexOf(this.currentValue)+1)%this.values.length,o=this.values[a];this.currentValue=o,za(o),z({notesStyleMedium:o}),window.dispatchEvent(new CustomEvent("notes-style-medium-changed",{detail:{style:o}}))}else if(this.type==="page-style"){let a=(this.values.indexOf(this.currentValue)+1)%this.values.length,o=this.values[a];this.currentValue=o,pr(o),z({pageStyle:o}),window.dispatchEvent(new CustomEvent("page-style-changed",{detail:{behavior:o}}))}else if(this.type==="icon-only"){let a=(this.values.indexOf(this.currentValue)+1)%this.values.length,o=this.values[a];this.currentValue=o,pr(o),z({pageStyle:o}),window.dispatchEvent(new CustomEvent("page-style-changed",{detail:{behavior:o}}))}this.requestUpdate()}}getValueDisplay(e){if(this.type==="language")return Nt(e,{locale:S.value});if(this.type==="theme"){if(this.translationsReady){let r=P(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){let r=P(e==="note"?"note":"page");if(r&&r!==(e==="note"?"note":"page"))return r}return e}else if(this.type==="icon-only")return e==="note"?s`<ds-icon type="note"></ds-icon>`:e==="page"?s`<ds-icon type="page"></ds-icon>`:s`<span>${e}</span>`}return e}getColorKey(e){return{"--tuned-red":"red","--orange":"orange","--yellow":"yellow","--apple-green":"appleGreen","--every-green":"green","--zenith-blue":"lightBlue","--sharp-blue":"blue","--pink":"pink"}[e]||e.replace("--","").replace("-"," ")}getColorName(e){let a={"--tuned-red":"red","--orange":"orange","--yellow":"yellow","--apple-green":"appleGreen","--every-green":"green","--zenith-blue":"lightBlue","--sharp-blue":"blue","--pink":"pink"}[e];if(a&&this.translationsReady){let o=P(a);if(o&&o!==a)return o}return e.replace("--","").replace("-"," ")}getNotesStyleIcon(e){return e==="page"?s`<ds-icon type="page"></ds-icon>`:e==="note"?s`<ds-icon type="note"></ds-icon>`:e==="default"?s`<ds-icon type="default"></ds-icon>`:e==="big"?s`<ds-icon type="big"></ds-icon>`:e==="gallery"?s`<ds-icon type="gallery"></ds-icon>`:s`<span>${e}</span>`}render(){return s`
       <div class="cycle">
         <ds-button
           variant=${this.variant||(this.type==="language"||this.type==="theme"?"secondary":"primary")}
           ?disabled=${this.disabled}
           @click=${this.handleButtonClick}
         >
-          ${this.type==="notes-style-medium"||this.type==="icon-only"?o`<span
+          ${this.type==="notes-style-medium"||this.type==="icon-only"?s`<span
                 style="display: inline-flex; align-items: center; gap: var(--025)"
                 >${this.getValueDisplay(this.currentValue)}</span
-              >`:this.type==="language"?o`<ds-text
+              >`:this.type==="language"?s`<ds-text
                   default-value=${this.getValueDisplay(this.currentValue)}
-                ></ds-text>`:this.type==="theme"?o`<ds-text
+                ></ds-text>`:this.type==="theme"?s`<ds-text
                     key=${this.currentValue}
                     default-value=${this.currentValue}
-                  ></ds-text>`:this.type==="accent-color"?o`<ds-text
+                  ></ds-text>`:this.type==="accent-color"?s`<ds-text
                       key=${this.getColorKey(this.currentValue)}
                       default-value=${this.getColorName(this.currentValue)}
-                    ></ds-text>`:this.type==="page-style"?o`<ds-text
+                    ></ds-text>`:this.type==="page-style"?s`<ds-text
                         key=${this.currentValue}
                         default-value=${this.currentValue}
-                      ></ds-text>`:o`<ds-text
+                      ></ds-text>`:s`<ds-text
                         default-value=${this.getValueDisplay(this.currentValue)}
                       ></ds-text>`}
         </ds-button>
 
-        ${this.type==="accent-color"?o`
+        ${this.type==="accent-color"?s`
               <div
                 class="color-preview"
                 style="background-color: var(${this.currentValue})"
               ></div>
             `:""}
       </div>
-    `}async waitForTranslations(){return new Promise(e=>{if(this.translationsReady){e();return}let 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"){let e=je();this.values=e}this.setupInitialValue()}handleLanguageChanged(){this.setupInitialValue()}handleThemeChanged(){this.setupInitialValue()}handleAccentColorChanged(){this.setupInitialValue()}handleNoteBehaviorChanged(){this.setupInitialValue()}};He.styles=p`
-    :host {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .cycle {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--025);
-    }
+    `}async waitForTranslations(){return new Promise(e=>{if(this.translationsReady){e();return}let 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"){let e=Je();this.values=e}this.setupInitialValue()}handleLanguageChanged(){this.setupInitialValue()}handleThemeChanged(){this.setupInitialValue()}handleAccentColorChanged(){this.setupInitialValue()}handleNoteBehaviorChanged(){this.setupInitialValue()}};We.styles=g(ur);customElements.define("ds-cycle",We);var gr={};var qe=class extends d{render(){let e=new Date().getFullYear();return s`<span>${e}</span>`}};qe.styles=g(gr);customElements.define("ds-date",qe);var fr={};var he=class extends d{constructor(){super(),this.size=""}render(){return s``}};he.properties={size:{type:String,reflect:!0}};he.styles=g(fr);customElements.define("ds-gap",he);var pe=class extends d{constructor(){super(),this.type="text",this.name="",this.value="",this.placeholder="",this.placeholderKey="",this.label="",this.labelKey="",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.errorKey="",this._focused=!1}_handleInput(e){let 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(){this.shadowRoot?.querySelector("input")?.focus()}blur(){this.shadowRoot?.querySelector("input")?.blur()}select(){this.shadowRoot?.querySelector("input")?.select()}render(){let e=!!(this.error||this.errorKey);return s`
+      <div class="input-wrapper">
+        ${this.label||this.labelKey?s`
+              <label for="input">
+                ${this.labelKey?s`<ds-text .key=${this.labelKey}></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}
+            ?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>
 
-    .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;
-    }
-  `;customElements.define("ds-cycle",He);var ce=class extends h{constructor(){super(),this.size=""}render(){return o``}};ce.properties={size:{type:String,reflect:!0}};ce.styles=p`
+        ${e?s`
+              <div class="error-message">
+                ${this.errorKey?s`<ds-text .key=${this.errorKey}></ds-text>`:this.error}
+              </div>
+            `:null}
+      </div>
+    `}};pe.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},labelKey:{type:String,attribute:"label-key"},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},errorKey:{type:String,attribute:"error-key"},_focused:{type:Boolean,state:!0}};pe.styles=T`
     :host {
       display: block;
       width: 100%;
-      /* Default if no attribute is provided */
-      --gap-size: var(--unit);
-      height: var(--gap-size);
-      flex: 0 0 auto;
     }
 
-    /* Semantic sizing tokens (from DS1/1-root/one.css) */
-    :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);
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--025) * var(--sf, 1));
+      width: 100%;
     }
 
-    /* Raw scale sizing (size="...") */
-    :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);
+    label {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--text-color-secondary);
     }
-    :host([size="3"]) {
-      --gap-size: var(--3);
+
+    .input-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
     }
-    :host([size="4"]) {
-      --gap-size: var(--4);
+
+    input {
+      width: 100%;
+      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([size="8"]) {
-      --gap-size: var(--8);
+
+    input::placeholder {
+      color: var(--text-color-tertiary, #999);
     }
-    :host([size="12"]) {
-      --gap-size: var(--12);
+
+    input:focus {
+      border-color: var(--accent-color, #007aff);
+      box-shadow: 0 0 0 2px var(--input-focus-ring, rgba(0, 122, 255, 0.2));
     }
-  `;customElements.define("ds-gap",ce);var de=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=O(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 o`
-      <span class="slot-wrapper"><slot></slot></span>
-      ${this._text?o`<div class="${e}">${this._text}</div>`:null}
-    `}};de.properties={key:{type:String,reflect:!0},defaultValue:{type:String,reflect:!0,attribute:"default-value"},_text:{state:!0},_visible:{state:!0}};de.styles=p`
-    :host {
-      position: relative;
-      display: inline-block;
+
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--input-disabled-background, #f5f5f5);
     }
 
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
+    input:read-only {
+      background-color: var(--input-readonly-background, #fafafa);
     }
 
-    .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 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-regular,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
+    :host([variant="filled"]) input {
+      background-color: var(
+        --input-filled-background,
+        var(--surface-color-secondary, #f5f5f5)
       );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
+      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;
     }
 
-    .bubble.visible {
-      opacity: 1;
+    :host([variant="filled"]) input:focus {
+      border-bottom-color: var(--accent-color, #007aff);
+      box-shadow: none;
     }
-  `;customElements.define("ds-tooltip",de);var ze=class extends h{render(){let e=new Date().getFullYear();return o`<span>${e}</span>`}};ze.styles=p`
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular, var(--typeface-regular-regular));
-      font-size: inherit;
-      color: inherit;
+
+    :host([variant="outlined"]) input {
+      background-color: transparent;
+      border: 2px solid var(--border-color, #ccc);
     }
-  `;customElements.define("ds-date",ze);var Me=class extends h{render(){return o`<slot></slot>`}};Me.styles=p`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      width: 100%;
+
+    :host([variant="outlined"]) input:focus {
+      border-color: var(--accent-color, #007aff);
     }
-  `;customElements.define("ds-list",Me);var ue=class extends h{constructor(){super(),this.type="fill"}render(){return o`<slot></slot>`}};ue.properties={type:{type:String,reflect:!0}};ue.styles=p`
-    :host {
-      display: flex;
-      align-items: end;
-      width: calc(240px * var(--sf));
+
+    .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));
     }
 
-    :host([type="fill"]) {
-      justify-content: space-between;
-      height: calc(var(--1) * var(--sf));
+    :host([required]) label::after {
+      content: " *";
+      color: var(--error-color, #ff3b30);
     }
 
-    :host([type="centered"]) {
-      justify-content: center;
-      height: calc(var(--1) * var(--sf));
-      gap: calc(var(--025) * var(--sf));
+    /* Error state */
+    input.has-error {
+      border-color: var(--error-color, #ff3b30);
+    }
+
+    input.has-error:focus {
+      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
     }
-  `;customElements.define("ds-row",ue);var he=class extends h{constructor(){super(),this.summaryKey="",this.detailsKey="",this.open=!1}render(){return o`
+  `;customElements.define("ds-input",pe);var mr={};var ge=class extends d{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=P(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 s`
+      <span class="slot-wrapper"><slot></slot></span>
+      ${this._text?s`<div class="${e}">${this._text}</div>`:null}
+    `}};ge.properties={key:{type:String,reflect:!0},defaultValue:{type:String,reflect:!0,attribute:"default-value"},_text:{state:!0},_visible:{state:!0}};ge.styles=g(mr);customElements.define("ds-tooltip",ge);var vr={};var fe=class extends d{constructor(){super(),this.type="fill"}render(){return s`<slot></slot>`}};fe.properties={type:{type:String,reflect:!0}};fe.styles=g(vr);customElements.define("ds-row",fe);var yr={};var me=class extends d{constructor(){super(),this.summaryKey="",this.detailsKey="",this.open=!1}render(){return s`
       <details ?open=${this.open}>
         <summary>
           <ds-row class="summaryRow" type="centered">
@@ -620,293 +500,237 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
           <ds-text class="detailsText" .key=${this.detailsKey}></ds-text>
         </div>
       </details>
-    `}};he.properties={summaryKey:{type:String,attribute:"summary-key"},detailsKey:{type:String,attribute:"details-key"},open:{type:Boolean,reflect:!0}};he.styles=p`
+    `}};me.properties={summaryKey:{type:String,attribute:"summary-key"},detailsKey:{type:String,attribute:"details-key"},open:{type:Boolean,reflect:!0}};me.styles=g(yr);customElements.define("ds-accordion",me);var ve=class extends d{constructor(){super(),this.action="",this.method="post",this.name="",this.novalidate=!1,this.autocomplete="on",this._isSubmitting=!1}getFormData(){let e={},a=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})||[];for(let o of a)this._collectFormData(o,e);return e}_collectFormData(e,r){let a=e.getAttribute("name")||e.name;if(a){let i=e.value;i!==void 0&&(e instanceof HTMLInputElement&&(e.type==="checkbox"||e.type==="radio")?e.type==="checkbox"?r[a]=e.checked:e.type==="radio"&&e.checked&&(r[a]=i):r[a]=i)}(e.shadowRoot?.querySelectorAll("*")||e.querySelectorAll("*")).forEach(i=>{this._collectFormData(i,r)})}validate(){let e={valid:!0,errors:{}};if(this.novalidate)return e;let a=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})||[];for(let o of a)this._validateElement(o,e);return e}_validateElement(e,r){let a=e.getAttribute("name")||e.name;if(e.tagName.toLowerCase()==="ds-input"){let i=e;i.required&&!i.value&&(r.valid=!1,r.errors[a||"unknown"]="This field is required")}(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)&&(e.checkValidity()||(r.valid=!1,r.errors[a||"unknown"]=e.validationMessage)),(e.shadowRoot?.querySelectorAll("*")||e.querySelectorAll("*")).forEach(i=>{this._validateElement(i,r)})}reset(){let r=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})||[];for(let a of r)this._resetElement(a);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(a=>{this._resetElement(a)})}async submit(){if(this._isSubmitting)return;let e=this.validate();if(!e.valid){this.dispatchEvent(new CustomEvent("form-invalid",{detail:e.errors,bubbles:!0}));return}this._isSubmitting=!0;let r=this.getFormData();if(this.dispatchEvent(new CustomEvent("form-submit",{detail:{data:r},bubbles:!0})),this.action)try{let a=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:a,data:r},bubbles:!0}))}catch(a){this.dispatchEvent(new CustomEvent("form-error",{detail:{error:a,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 s`
+      <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>
+    `}};ve.properties={action:{type:String},method:{type:String},name:{type:String},novalidate:{type:Boolean,reflect:!0},autocomplete:{type:String},_isSubmitting:{type:Boolean,state:!0}};ve.styles=T`
     :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 {
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--05) * var(--sf, 1));
       width: 100%;
     }
 
-    ds-icon.chevron {
-      transform: rotate(0deg);
-      transition: transform 140ms ease;
-    }
-
-    details[open] ds-icon.chevron {
-      transform: rotate(180deg);
-    }
-
-    .detailsBody {
-      padding-top: calc(var(--half) * var(--sf));
+    ::slotted(*) {
+      width: 100%;
     }
 
-    .detailsText {
-      display: block;
-      white-space: normal;
-      text-align: left;
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
     }
-  `;customElements.define("ds-accordion",he);var pe=class extends h{constructor(){super(),this.data=[],this.columns=["Product","Users","Retention"],this.showStatus=!0}render(){return o`
+  `;customElements.define("ds-form",ve);var br={};var Ke=class extends d{render(){return s`<slot></slot>`}};Ke.styles=g(br);customElements.define("ds-list",Ke);var wr={};var ye=class extends d{constructor(){super(),this.data=[],this.columns=["Product","Users","Retention"],this.showStatus=!0}render(){return s`
       <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?o`<div class="header-cell">Status</div>`:""}
+          ${this.showStatus?s`<div class="header-cell">Status</div>`:""}
         </div>
         <div class="table-body">
-          ${this.data.map((e,r)=>o`
+          ${this.data.map((e,r)=>s`
               <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?o`<div class="data-cell status-cell">
+              ${this.showStatus?s`<div class="data-cell status-cell">
                     ${e.status||"Pending"}
                   </div>`:""}
             `)}
         </div>
       </div>
-    `}};pe.properties={data:{type:Array},columns:{type:Array},showStatus:{type:Boolean,attribute:"show-status"}};pe.styles=p`
-    :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: -0.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: -0.26px;
-    }
-
-    .status-cell {
-      background-color: var(--apple-green);
-    }
-
-    .product-cell {
-      text-align: left;
-      justify-content: flex-start;
-    }
-
-    .users-cell,
-    .retention-cell {
-      text-align: center;
-    }
-
-    .status-cell {
-      text-align: center;
-    }
-
-    /* Responsive adjustments */
-    @media (max-width: 480px) {
-      .table-header,
-      .table-body {
-        width: 100%;
-        grid-template-columns: 1fr 60px 60px 60px;
-      }
-    }
-  `;customElements.define("ds-table",pe);var De=class extends h{render(){return o`<slot></slot>`}};De.styles=p`
-    :host {
-      display: flex;
-      width: 100%;
-      max-width: 100%;
-      flex-direction: column;
-      background-color: var(--background-color);
-      box-sizing: border-box;
-    }
-
-    /* Ensure children don't overflow */
-    :host ::slotted(*) {
-      max-width: 100%;
-      box-sizing: border-box;
-    }
-
-    /* Mobile: 100% width */
-    @media (max-width: 820px) {
-      :host {
-        width: 100%;
-        max-width: 100%;
-      }
-    }
-
-    /* Desktop: max-width 1000px, centered */
-    @media (min-width: 821px) {
-      :host {
-        max-width: 1000px;
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-      }
-    }
-  `;customElements.define("ds-container",De);var fe=class extends h{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(){Ue()?(this.classList.add("mobile"),this.classList.remove("desktop")):(this.classList.add("desktop"),this.classList.remove("mobile"))}render(){return o``}};fe.properties={align:{type:String}};fe.styles=p`
-    :host {
-      margin-top: 0.5px !important;
-      margin-left: 0.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 var(--yellow);
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-    }
-
-    /* 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.5px !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)));
-    }
-
-    :host([align="left"]) {
-      left: 0;
-      transform: none;
-    }
-
-    :host([align="center"]) {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    :host([align="right"]) {
-      left: auto;
-      right: 0;
-      transform: none;
-    }
-  `;customElements.define("ds-grid",fe);var ge=class extends h{constructor(){super(...arguments),this.mode="portfolio"}render(){let e=this.view||this.mode==="view",r=this.mode==="portfolio",s=this.mode==="company",n=this.mode==="app";return o`
+    `}};ye.properties={data:{type:Array},columns:{type:Array},showStatus:{type:Boolean,attribute:"show-status"}};ye.styles=g(wr);customElements.define("ds-table",ye);var xr={};var Fe=class extends d{render(){return s`<slot></slot>`}};Fe.styles=g(xr);customElements.define("ds-container",Fe);var _r={};var be=class extends d{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(){Ze()?(this.classList.add("mobile"),this.classList.remove("desktop")):(this.classList.add("desktop"),this.classList.remove("mobile"))}render(){return s``}};be.properties={align:{type:String}};be.styles=g(_r);customElements.define("ds-grid",be);var $r={};var we=class extends d{constructor(){super(...arguments),this.mode="portfolio"}render(){let e=this.view||this.mode==="view",r=this.mode==="portfolio",a=this.mode==="company",o=this.mode==="app",i=this.mode==="list",n=this.mode==="home";return s`
       <slot></slot>
-      ${e?o`
+      ${e?s`
             <div class="view-overlay">
-              ${n?o`
+              ${n?s`
                     <div class="view-area view-banner">
-                      <ds-text key="banner">banner</ds-text>
+                      <div class="grid-area-label">
+                        <ds-text key="banner" default-value="banner"></ds-text>
+                      </div>
                     </div>
                     <div class="view-area view-header">
-                      <ds-text key="header">header</ds-text>
+                      <div class="grid-area-label">
+                        <ds-text key="header" default-value="header"></ds-text>
+                      </div>
                     </div>
-
-                    <div class="view-area view-main">
-                      <ds-text key="main">main</ds-text>
+                    <div class="view-area view-message">
+                      <div class="grid-area-label">
+                        <ds-text
+                          key="message"
+                          default-value="message"
+                        ></ds-text>
+                      </div>
                     </div>
-                    <div class="view-area view-footer">
-                      <ds-text key="footer">footer</ds-text>
+                    <div class="view-area view-lists">
+                      <div class="grid-area-label">
+                        <ds-text key="lists" default-value="lists"></ds-text>
+                      </div>
                     </div>
-                  `:s?o`
-                      <div class="view-area view-header">
-                        <ds-text key="header">header</ds-text>
+                    <div class="view-area view-footer">
+                      <div class="grid-area-label">
+                        <ds-text key="footer" default-value="footer"></ds-text>
                       </div>
-                      <div class="view-area view-content">
-                        <ds-text key="content">content</ds-text>
+                    </div>
+                  `:i?s`
+                      <div class="view-area view-banner">
+                        <div class="grid-area-label">
+                          <ds-text
+                            key="banner"
+                            default-value="banner"
+                          ></ds-text>
+                        </div>
                       </div>
-                      <div class="view-area view-footer">
-                        <ds-text key="footer">footer</ds-text>
+                      <div class="view-area view-header">
+                        <div class="grid-area-label">
+                          <ds-text
+                            key="header"
+                            default-value="header"
+                          ></ds-text>
+                        </div>
                       </div>
-                    `:r?o`
-                        <div class="view-area view-square">
-                          <ds-text key="square">square</ds-text>
+                      <div class="view-area view-board">
+                        <div class="grid-area-label">
+                          <ds-text key="board" default-value="board"></ds-text>
                         </div>
-                        <div class="view-area view-title">
-                          <ds-text key="title">title</ds-text>
+                      </div>
+                    `:o?s`
+                        <div class="view-area view-banner">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="banner"
+                              default-value="banner"
+                            ></ds-text>
+                          </div>
                         </div>
                         <div class="view-area view-header">
-                          <ds-text key="header">header</ds-text>
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="header"
+                              default-value="header"
+                            ></ds-text>
+                          </div>
                         </div>
-                        <div class="view-area view-projects">
-                          <ds-text key="projects">projects</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="view-area view-bio">
-                          <ds-text key="bio">bio</ds-text>
-                        </div>
-                        <div class="view-area view-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="view-area view-footer">
-                          <ds-text key="footer">footer</ds-text>
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="footer"
+                              default-value="footer"
+                            ></ds-text>
+                          </div>
                         </div>
-                      `:""}
+                      `:a?s`
+                          <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?s`
+                            <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>
           `:""}
-    `}};ge.properties={mode:{type:String},align:{type:String},view:{type:Boolean}};ge.styles=p`
+    `}};we.properties={mode:{type:String},align:{type:String},view:{type:Boolean}};we.styles=[g($r),T`
     :host {
       display: grid;
       position: relative;
@@ -962,7 +786,9 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
     :host([align="left"]),
     :host([mode="portfolio"][align="left"]),
     :host([mode="company"][align="left"]),
-    :host([mode="app"][align="left"]) {
+    :host([mode="app"][align="left"]),
+    :host([mode="list"][align="left"]),
+    :host([mode="home"][align="left"]) {
       margin: 0;
       justify-self: start;
     }
@@ -970,7 +796,9 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
     :host([align="center"]),
     :host([mode="portfolio"][align="center"]),
     :host([mode="company"][align="center"]),
-    :host([mode="app"][align="center"]) {
+    :host([mode="app"][align="center"]),
+    :host([mode="list"][align="center"]),
+    :host([mode="home"][align="center"]) {
       margin: 0 auto;
       justify-self: center;
     }
@@ -978,7 +806,9 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
     :host([align="right"]),
     :host([mode="portfolio"][align="right"]),
     :host([mode="company"][align="right"]),
-    :host([mode="app"][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;
     }
@@ -986,20 +816,10 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
     /* App mode - Base */
     :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(--quad) * var(--sf))
-        calc(var(--unit) * var(--sf));
-      --app-areas: "banner" "." "header" "." "main" "." "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(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
-      --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
       grid-template-columns: var(--app-cols);
-      grid-template-rows: var(--app-rows);
-      grid-template-areas: var(--app-areas);
+      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));
@@ -1009,8 +829,58 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
 
     :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);
+      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: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
+      margin: 0 auto;
+    }
+
+    :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);
     }
 
     .view-overlay {
@@ -1040,52 +910,333 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
         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%
+        );
+    }
 
     .view-square {
       grid-area: square;
@@ -1126,7 +1277,23 @@ ${s} ${this.version||""}`;return`mailto:${this.mailto}?subject=${encodeURICompon
     .view-main {
       grid-area: main;
     }
-  `;customElements.define("ds-layout",ge);export{he as Accordion,oe as Banner,ie as Button,De as Container,He as Cycle,ze as DateComponent,pe as DsTable,ce as Gap,fe as Grid,K as Icon,ge as Layout,Me as List,ue as Row,Pe as Text,de as Tooltip,S as currentLanguage,q as currentTheme,Ue as detectMobileDevice,ds as getAvailableLanguages,je as getAvailableLanguagesSync,wr as getBrowserLanguage,dr as getDeviceInfo,$t as getLanguageDisplayName,fs as getPriceLabel,R as getText,cs as hasTranslation,Re as initDeviceDetection,us as loadTranslations,V as savePreferences,We as setLanguage,Kt as setTheme,O as translate};
+
+    .view-page-dots {
+      grid-area: page-dots;
+    }
+
+    .view-board {
+      grid-area: board;
+    }
+
+    .view-message {
+      grid-area: message;
+    }
+
+    .view-lists {
+      grid-area: lists;
+    }
+    `];customElements.define("ds-layout",we);export{me as Accordion,le as Banner,ne as Button,ce as Card,Fe as Container,We as Cycle,qe as DateComponent,ye as DsTable,ve as Form,he as Gap,be as Grid,F as Icon,pe as Input,we as Layout,Ke as List,fe as Row,Be as Text,ge as Tooltip,Ka as applike,ya as calculateScalingFactor,S as currentLanguage,K as currentTheme,Ze as detectMobileDevice,Ja as getAvailableLanguages,Je as getAvailableLanguagesSync,Ur as getBrowserLanguage,Ir as getDeviceInfo,Nt as getLanguageDisplayName,eo as getPriceLabel,Bo as getScalingFactor,U as getText,Za as hasTranslation,Ge as initDeviceDetection,Qt as initScaling,Ya as loadTranslations,z as savePreferences,Wo as scale,De as scalingConfig,Re as scalingFactor,Ye as setLanguage,jo as setScalingConfig,er as setTheme,P as translate,qo as unscale,Me as updateScalingFactor};
 /*! Bundled license information:
 
 signal-polyfill/dist/index.js: