@pure-ds/core 0.4.37 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/dist/types/pds.d.ts +34 -11
  2. package/dist/types/public/assets/auto-definer-XWHRBQPU.d.ts +9 -0
  3. package/dist/types/public/assets/auto-definer-XWHRBQPU.d.ts.map +1 -0
  4. package/dist/types/public/assets/chunk-746HIXIK.d.ts +52 -0
  5. package/dist/types/public/assets/chunk-746HIXIK.d.ts.map +1 -0
  6. package/dist/types/public/assets/chunk-APJV5T3J.d.ts +106 -0
  7. package/dist/types/public/assets/chunk-APJV5T3J.d.ts.map +1 -0
  8. package/dist/types/public/assets/chunk-BEPKFFM7.d.ts +398 -0
  9. package/dist/types/public/assets/chunk-BEPKFFM7.d.ts.map +1 -0
  10. package/dist/types/public/assets/chunk-ISS7UH5H.d.ts +2424 -0
  11. package/dist/types/public/assets/chunk-ISS7UH5H.d.ts.map +1 -0
  12. package/dist/types/public/assets/chunk-RUPLQUDG.d.ts +582 -0
  13. package/dist/types/public/assets/chunk-RUPLQUDG.d.ts.map +1 -0
  14. package/dist/types/public/assets/chunk-USML4NYF.d.ts +18 -0
  15. package/dist/types/public/assets/chunk-USML4NYF.d.ts.map +1 -0
  16. package/dist/types/public/assets/chunk-Z47A3HLT.d.ts +3 -0
  17. package/dist/types/public/assets/chunk-Z47A3HLT.d.ts.map +1 -0
  18. package/dist/types/public/assets/js/auto-definer-HZLD2XF4.d.ts +9 -0
  19. package/dist/types/public/assets/js/auto-definer-HZLD2XF4.d.ts.map +1 -0
  20. package/dist/types/public/assets/js/chunk-6A6DFAIG.d.ts +88 -0
  21. package/dist/types/public/assets/js/chunk-6A6DFAIG.d.ts.map +1 -0
  22. package/dist/types/public/assets/js/chunk-746HIXIK.d.ts +52 -0
  23. package/dist/types/public/assets/js/chunk-746HIXIK.d.ts.map +1 -0
  24. package/dist/types/public/assets/js/chunk-A3TZGIYX.d.ts +4 -0
  25. package/dist/types/public/assets/js/chunk-A3TZGIYX.d.ts.map +1 -0
  26. package/dist/types/public/assets/js/chunk-BEPKFFM7.d.ts +398 -0
  27. package/dist/types/public/assets/js/chunk-BEPKFFM7.d.ts.map +1 -0
  28. package/dist/types/public/assets/js/chunk-OTTRJ5MB.d.ts +1695 -0
  29. package/dist/types/public/assets/js/chunk-OTTRJ5MB.d.ts.map +1 -0
  30. package/dist/types/public/assets/js/chunk-RBPKHG76.d.ts +747 -0
  31. package/dist/types/public/assets/js/chunk-RBPKHG76.d.ts.map +1 -0
  32. package/dist/types/public/assets/js/chunk-RUPLQUDG.d.ts +582 -0
  33. package/dist/types/public/assets/js/chunk-RUPLQUDG.d.ts.map +1 -0
  34. package/dist/types/public/assets/js/chunk-SMD2R3CX.d.ts +68 -0
  35. package/dist/types/public/assets/js/chunk-SMD2R3CX.d.ts.map +1 -0
  36. package/dist/types/public/assets/js/chunk-Y73DA2D5.d.ts +15 -0
  37. package/dist/types/public/assets/js/chunk-Y73DA2D5.d.ts.map +1 -0
  38. package/dist/types/public/assets/js/chunks/auto-definer-X7MSXKTU.d.ts +9 -0
  39. package/dist/types/public/assets/js/chunks/auto-definer-X7MSXKTU.d.ts.map +1 -0
  40. package/dist/types/public/assets/js/chunks/chunk-7BDQH5CT.d.ts +485 -0
  41. package/dist/types/public/assets/js/chunks/chunk-7BDQH5CT.d.ts.map +1 -0
  42. package/dist/types/public/assets/js/chunks/chunk-MWB3S7NG.d.ts +3 -0
  43. package/dist/types/public/assets/js/chunks/chunk-MWB3S7NG.d.ts.map +1 -0
  44. package/dist/types/public/assets/js/chunks/chunk-WIMLORAU.d.ts +5 -0
  45. package/dist/types/public/assets/js/chunks/chunk-WIMLORAU.d.ts.map +1 -0
  46. package/dist/types/public/assets/js/chunks/chunk-WN4Y2ELN.d.ts +833 -0
  47. package/dist/types/public/assets/js/chunks/chunk-WN4Y2ELN.d.ts.map +1 -0
  48. package/dist/types/public/assets/js/chunks/chunk-XQOUIBLO.d.ts +1687 -0
  49. package/dist/types/public/assets/js/chunks/chunk-XQOUIBLO.d.ts.map +1 -0
  50. package/dist/types/public/assets/js/chunks/font-loader-VN5SRNOD.d.ts +5 -0
  51. package/dist/types/public/assets/js/chunks/font-loader-VN5SRNOD.d.ts.map +1 -0
  52. package/dist/types/public/assets/js/chunks/pds-live-validation-BQPWN5JG.d.ts +38 -0
  53. package/dist/types/public/assets/js/chunks/pds-live-validation-BQPWN5JG.d.ts.map +1 -0
  54. package/dist/types/public/assets/js/common-WIAC4WAJ.d.ts +4 -0
  55. package/dist/types/public/assets/js/common-WIAC4WAJ.d.ts.map +1 -0
  56. package/dist/types/public/assets/js/pds-config-WEBAXXSM.d.ts +4 -0
  57. package/dist/types/public/assets/js/pds-config-WEBAXXSM.d.ts.map +1 -0
  58. package/dist/types/public/assets/js/pds-core/pds-generator.d.ts +700 -0
  59. package/dist/types/public/assets/js/pds-core/pds-generator.d.ts.map +1 -0
  60. package/dist/types/public/assets/js/pds-core/pds-utilities.d.ts +27 -0
  61. package/dist/types/public/assets/js/pds-core/pds-utilities.d.ts.map +1 -0
  62. package/dist/types/public/assets/js/pds-enums-DCBZHS64.d.ts +3 -0
  63. package/dist/types/public/assets/js/pds-enums-DCBZHS64.d.ts.map +1 -0
  64. package/dist/types/public/assets/js/pds-gen.d.ts +106 -0
  65. package/dist/types/public/assets/js/pds-gen.d.ts.map +1 -0
  66. package/dist/types/public/assets/js/pds-live.d.ts +11 -0
  67. package/dist/types/public/assets/js/pds-live.d.ts.map +1 -0
  68. package/dist/types/public/assets/js/pds-manager.d.ts +1047 -0
  69. package/dist/types/public/assets/js/pds-manager.d.ts.map +1 -0
  70. package/dist/types/public/assets/js/pds-ontology-2DICJXHO.d.ts +9 -0
  71. package/dist/types/public/assets/js/pds-ontology-2DICJXHO.d.ts.map +1 -0
  72. package/dist/types/public/assets/js/pds-query-B54LBKKR.d.ts +70 -0
  73. package/dist/types/public/assets/js/pds-query-B54LBKKR.d.ts.map +1 -0
  74. package/dist/types/public/assets/js/pds.d.ts +1 -18
  75. package/dist/types/public/assets/js/pds.d.ts.map +1 -1
  76. package/dist/types/public/assets/pds-ontology-ZO6TJHO3.d.ts +9 -0
  77. package/dist/types/public/assets/pds-ontology-ZO6TJHO3.d.ts.map +1 -0
  78. package/dist/types/src/js/common/pds-core/pds-config.d.ts +757 -0
  79. package/dist/types/src/js/common/pds-core/pds-config.d.ts.map +1 -0
  80. package/dist/types/src/js/common/pds-core/pds-enhancers.d.ts +28 -0
  81. package/dist/types/src/js/common/pds-core/pds-enhancers.d.ts.map +1 -0
  82. package/dist/types/src/js/common/pds-core/pds-enums.d.ts +87 -0
  83. package/dist/types/src/js/common/pds-core/pds-enums.d.ts.map +1 -0
  84. package/dist/types/src/js/common/pds-core/pds-generator.d.ts +700 -0
  85. package/dist/types/src/js/common/pds-core/pds-generator.d.ts.map +1 -0
  86. package/dist/types/src/js/common/pds-core/pds-ontology.d.ts +380 -0
  87. package/dist/types/src/js/common/pds-core/pds-ontology.d.ts.map +1 -0
  88. package/dist/types/src/js/common/pds-core/pds-paths.d.ts +37 -0
  89. package/dist/types/src/js/common/pds-core/pds-paths.d.ts.map +1 -0
  90. package/dist/types/src/js/common/pds-core/pds-query.d.ts +102 -0
  91. package/dist/types/src/js/common/pds-core/pds-query.d.ts.map +1 -0
  92. package/dist/types/src/js/common/pds-core/pds-registry.d.ts +35 -0
  93. package/dist/types/src/js/common/pds-core/pds-registry.d.ts.map +1 -0
  94. package/dist/types/src/js/common/pds-core/pds-utilities.d.ts +27 -0
  95. package/dist/types/src/js/common/pds-core/pds-utilities.d.ts.map +1 -0
  96. package/dist/types/src/js/pds-core/pds-generator.d.ts +38 -46
  97. package/dist/types/src/js/pds-core/pds-generator.d.ts.map +1 -1
  98. package/dist/types/src/js/pds-core/pds-live.d.ts +39 -0
  99. package/dist/types/src/js/pds-core/pds-live.d.ts.map +1 -0
  100. package/dist/types/src/js/pds-core/pds-runtime.d.ts +39 -0
  101. package/dist/types/src/js/pds-core/pds-runtime.d.ts.map +1 -0
  102. package/dist/types/src/js/pds-core/pds-start-helpers.d.ts +60 -0
  103. package/dist/types/src/js/pds-core/pds-start-helpers.d.ts.map +1 -0
  104. package/dist/types/src/js/pds-core/pds-utilities.d.ts +27 -0
  105. package/dist/types/src/js/pds-core/pds-utilities.d.ts.map +1 -0
  106. package/dist/types/src/js/pds-gen.d.ts +48 -0
  107. package/dist/types/src/js/pds-gen.d.ts.map +1 -0
  108. package/dist/types/src/js/pds-live-runtime.d.ts +7 -0
  109. package/dist/types/src/js/pds-live-runtime.d.ts.map +1 -0
  110. package/dist/types/src/js/pds-live-validation.d.ts +44 -0
  111. package/dist/types/src/js/pds-live-validation.d.ts.map +1 -0
  112. package/dist/types/src/js/pds-live.d.ts +11 -0
  113. package/dist/types/src/js/pds-live.d.ts.map +1 -0
  114. package/dist/types/src/js/pds-manager.d.ts +2 -0
  115. package/dist/types/src/js/pds-manager.d.ts.map +1 -0
  116. package/dist/types/src/js/pds.d.ts +6 -33
  117. package/dist/types/src/js/pds.d.ts.map +1 -1
  118. package/package.json +11 -12
  119. package/packages/pds-cli/bin/{generate-css-data.mjs → generate-css-data.js} +563 -563
  120. package/packages/pds-cli/bin/{generate-manifest.mjs → generate-manifest.js} +352 -352
  121. package/packages/pds-cli/bin/{pds-build-icons.mjs → pds-build-icons.js} +152 -152
  122. package/packages/pds-cli/bin/{pds-dx.mjs → pds-dx.js} +114 -114
  123. package/packages/pds-cli/bin/{pds-init-config.mjs → pds-init-config.js} +34 -34
  124. package/packages/pds-cli/bin/{pds-setup-copilot.mjs → pds-setup-copilot.js} +106 -106
  125. package/packages/pds-cli/bin/{pds-static.mjs → pds-static.js} +597 -581
  126. package/packages/pds-cli/bin/{pds.mjs → pds.js} +127 -127
  127. package/packages/pds-cli/bin/postinstall.mjs +522 -563
  128. package/packages/pds-cli/bin/{sync-assets.mjs → sync-assets.js} +251 -251
  129. package/packages/pds-cli/lib/{asset-roots.mjs → asset-roots.js} +47 -47
  130. package/packages/pds-cli/lib/{fs-writer.mjs → fs-writer.js} +75 -75
  131. package/public/assets/js/app.js +95 -118
  132. package/public/assets/js/pds-manager.js +3251 -0
  133. package/public/assets/js/pds.js +10 -3201
  134. package/readme.md +2014 -2016
  135. package/src/js/pds-core/pds-enhancers.js +518 -518
  136. package/src/js/pds-core/pds-enums.js +86 -86
  137. package/src/js/pds-core/pds-generator.js +255 -185
  138. package/src/js/pds-core/pds-live.js +434 -0
  139. package/src/js/pds-core/pds-paths.js +109 -109
  140. package/src/js/pds-core/pds-registry.js +79 -79
  141. package/src/js/pds-core/pds-runtime.js +184 -0
  142. package/src/js/pds-core/pds-start-helpers.js +405 -0
  143. package/src/js/pds.d.ts +34 -11
  144. package/src/js/pds.js +43 -1182
  145. package/getting-started.md +0 -626
  146. package/src/js/pds-core/pds.d.ts +0 -129
@@ -1,3186 +1,18 @@
1
- var Tt=Object.defineProperty;var Lt=(n,e)=>()=>(n&&(e=n(n=0)),e);var Ue=(n,e)=>{for(var t in e)Tt(n,t,{get:e[t],enumerable:!0})};var vt={};Ue(vt,{AutoDefiner:()=>Fe});async function cr(...n){let e={};n.length&&typeof n[n.length-1]=="object"&&(e=n.pop()||{});let t=n,{baseURL:o,mapper:r=l=>`${l}.js`,onError:a=(l,d)=>console.error(`[defineWebComponents] ${l}:`,d)}=e,i=o?new URL(o,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),c=l=>l.toLowerCase().replace(/(^|-)([a-z])/g,(d,p,g)=>g.toUpperCase()),s=async l=>{try{if(customElements.get(l))return{tag:l,status:"already-defined"};let d=r(l),g=await import(d instanceof URL?d.href:new URL(d,i).href),h=g?.default??g?.[c(l)];if(!h){if(customElements.get(l))return{tag:l,status:"self-defined"};throw new Error(`No export found for ${l}. Expected default export or named export "${c(l)}".`)}return customElements.get(l)?{tag:l,status:"race-already-defined"}:(customElements.define(l,h),{tag:l,status:"defined"})}catch(d){throw a(l,d),d}};return Promise.all(t.map(s))}var Fe,xt=Lt(()=>{Fe=class{constructor(e={}){let{baseURL:t,mapper:o,onError:r,predicate:a=()=>!0,attributeModule:i="data-module",root:c=document,scanExisting:s=!0,debounceMs:l=16,observeShadows:d=!0,enhancers:p=[],patchAttachShadow:g=!0}=e,h=new Set,w=new Set,m=new Set,y=new Map,k=new WeakMap,_=new WeakMap,E=0,K=!1,S=null,C=b=>{if(!b||!p.length)return;let x=_.get(b);x||(x=new Set,_.set(b,x));for(let v of p)if(!(!v.selector||!v.run)&&!x.has(v.selector))try{b.matches&&b.matches(v.selector)&&(v.run(b),x.add(v.selector))}catch(T){console.warn(`[AutoDefiner] Error applying enhancer for selector "${v.selector}":`,T)}},z=(b,x)=>{if(!K&&!(!b||!b.includes("-"))&&!customElements.get(b)&&!w.has(b)&&!m.has(b)){if(x&&x.getAttribute){let v=x.getAttribute(i);v&&!y.has(b)&&y.set(b,v)}h.add(b),D()}},D=()=>{E||(E=setTimeout(We,l))},M=b=>{if(b){if(b.nodeType===1){let x=b,v=x.tagName?.toLowerCase();v&&v.includes("-")&&!customElements.get(v)&&a(v,x)&&z(v,x),C(x),d&&x.shadowRoot&&ye(x.shadowRoot)}b.querySelectorAll&&b.querySelectorAll("*").forEach(x=>{let v=x.tagName?.toLowerCase();v&&v.includes("-")&&!customElements.get(v)&&a(v,x)&&z(v,x),C(x),d&&x.shadowRoot&&ye(x.shadowRoot)})}},ye=b=>{if(!b||k.has(b))return;M(b);let x=new MutationObserver(v=>{for(let T of v)T.addedNodes?.forEach(H=>{M(H)}),T.type==="attributes"&&T.target&&M(T.target)});x.observe(b,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[i,...p.map(v=>v.selector).filter(v=>v.startsWith("data-"))]}),k.set(b,x)};async function We(){if(clearTimeout(E),E=0,!h.size)return;let b=Array.from(h);h.clear(),b.forEach(x=>w.add(x));try{let x=v=>y.get(v)??(o?o(v):`${v}.js`);await cr(...b,{baseURL:t,mapper:x,onError:(v,T)=>{m.add(v),r?.(v,T)}})}catch{}finally{b.forEach(x=>w.delete(x))}}let Be=c===document?document.documentElement:c,je=new MutationObserver(b=>{for(let x of b)x.addedNodes?.forEach(v=>{M(v)}),x.type==="attributes"&&x.target&&M(x.target)});if(je.observe(Be,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[i,...p.map(b=>b.selector).filter(b=>b.startsWith("data-"))]}),d&&g&&Element.prototype.attachShadow){let b=Element.prototype.attachShadow;Element.prototype.attachShadow=function(v){let T=b.call(this,v);if(v&&v.mode==="open"){ye(T);let H=this.tagName?.toLowerCase();H&&H.includes("-")&&!customElements.get(H)&&z(H,this)}return T},S=()=>Element.prototype.attachShadow=b}return s&&M(Be),{stop(){K=!0,je.disconnect(),S&&S(),E&&(clearTimeout(E),E=0),k.forEach(b=>b.disconnect())},flush:We}}static async define(...e){let t={};e.length&&typeof e[e.length-1]=="object"&&(t=e.pop()||{});let o=e,{baseURL:r,mapper:a=d=>`${d}.js`,onError:i=(d,p)=>console.error(`[defineWebComponents] ${d}:`,p)}=t,c=r?new URL(r,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),s=d=>d.toLowerCase().replace(/(^|-)([a-z])/g,(p,g,h)=>h.toUpperCase()),l=async d=>{try{if(customElements.get(d))return{tag:d,status:"already-defined"};let p=a(d),h=await import(p instanceof URL?p.href:new URL(p,c).href),w=h?.default??h?.[s(d)];if(!w){if(customElements.get(d))return{tag:d,status:"self-defined"};throw new Error(`No export found for ${d}. Expected default export or named export "${s(d)}".`)}return customElements.get(d)?{tag:d,status:"race-already-defined"}:(customElements.define(d,w),{tag:d,status:"defined"})}catch(p){throw i(d,p),p}};return Promise.all(o.map(l))}}});var ve=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(e={}){this._mode="static",this._staticPaths={...this._staticPaths,...e},console.log("[PDS Registry] Switched to STATIC mode",this._staticPaths)}async getStylesheet(e){if(this._mode==="live")return null;try{return(await import(this._staticPaths[e]))[e]}catch(t){console.error(`[PDS Registry] Failed to load static ${e}:`,t),console.error(`[PDS Registry] Looking for: ${this._staticPaths[e]}`),console.error("[PDS Registry] Make sure you've run 'npm run pds:export' and configured PDS.start() with the correct static.root path");let o=new CSSStyleSheet;return o.replaceSync("/* Failed to load "+e+" */"),o}}get mode(){return this._mode}get isLive(){return this._mode==="live"}},Z=new ve;var u={FontWeights:{light:300,normal:400,medium:500,semibold:600,bold:700},LineHeights:{tight:1.25,normal:1.5,relaxed:1.75},BorderWidths:{hairline:.5,thin:1,medium:2,thick:3},RadiusSizes:{none:0,small:4,medium:8,large:16,xlarge:24,xxlarge:32},ShadowDepths:{none:"none",light:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",medium:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",deep:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",extreme:"0 25px 50px -12px rgba(0, 0, 0, 0.25)"},TransitionSpeeds:{fast:150,normal:250,slow:350},AnimationEasings:{linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},TouchTargetSizes:{compact:36,standard:44,comfortable:48,spacious:56},LinkStyles:{inline:"inline",block:"block",button:"button"},FocusStyles:{ring:"ring",outline:"outline",border:"border",glow:"glow"},TabSizes:{compact:2,standard:4,wide:8},SelectIcons:{chevron:"chevron",arrow:"arrow",caret:"caret",none:"none"}};var se={meta:{name:"Pure Design System Ontology",version:"1.0.0",description:"Complete metadata registry for PDS primitives, components, utilities, and tokens"},tokens:{colors:{semantic:["primary","secondary","accent","success","warning","danger","info"],neutral:["gray"],shades:[50,100,200,300,400,500,600,700,800,900,950],surface:["base","subtle","elevated","sunken","overlay","inverse","translucent"],text:["default","muted","subtle","inverse","primary","success","warning","danger","info"]},spacing:{scale:["1","2","3","4","5","6","8","10","12","16","20","24"],semantic:["xs","sm","md","lg","xl"]},typography:{families:["heading","body","mono"],sizes:["xs","sm","base","lg","xl","2xl","3xl","4xl","5xl"],weights:["light","normal","medium","semibold","bold"]},radius:{scale:["none","sm","base","md","lg","xl","2xl","full"]},shadows:{scale:["none","sm","base","md","lg","xl","inner"]},themes:["light","dark"],breakpoints:{sm:640,md:768,lg:1024,xl:1280}},primitives:[{id:"badge",name:"Badge / Pill",description:"Inline status indicators and labels",selectors:[".badge",".badge-primary",".badge-secondary",".badge-success",".badge-info",".badge-warning",".badge-danger",".badge-outline",".badge-sm",".badge-lg",".pill",".tag",".chip"],tags:["status","label","indicator","inline"],category:"feedback"},{id:"card",name:"Card",description:"Content container with padding, border-radius, and optional shadow",selectors:[".card",".card-basic",".card-elevated",".card-outlined",".card-interactive"],tags:["container","content","grouping"],category:"container"},{id:"surface",name:"Surface",description:"Smart surface classes with automatic text/background color handling",selectors:[".surface-base",".surface-subtle",".surface-elevated",".surface-sunken",".surface-overlay",".surface-inverse",".surface-translucent",".surface-translucent-25",".surface-translucent-50",".surface-translucent-75",".surface-primary",".surface-secondary",".surface-success",".surface-warning",".surface-danger",".surface-info"],tags:["background","theming","color","container"],category:"theming"},{id:"alert",name:"Alert",description:"Contextual feedback messages",selectors:[".alert",".alert-info",".alert-success",".alert-warning",".alert-danger",".alert-error",".alert-dismissible",".semantic-message"],tags:["feedback","message","notification","status"],category:"feedback"},{id:"dialog",name:"Dialog",description:"Modal dialog element",selectors:["dialog",".dialog"],tags:["modal","overlay","popup","modal"],category:"overlay"},{id:"divider",name:"Divider",description:"Horizontal rule with optional label",selectors:["hr","hr[data-content]"],tags:["separator","line","content-divider"],category:"layout"},{id:"table",name:"Table",description:"Data tables with responsive and styling variants",selectors:["table",".table-responsive",".table-striped",".table-bordered",".table-compact",".data-table"],tags:["data","grid","tabular","responsive"],category:"data"},{id:"button",name:"Button",description:"Interactive button element with variants",selectors:["button",".btn-primary",".btn-secondary",".btn-outline",".btn-sm",".btn-xs",".btn-lg",".btn-working",".icon-only"],tags:["interactive","action","cta","form"],category:"action"},{id:"fieldset",name:"Fieldset Group",description:"Form field grouping for radio/checkbox groups",selectors:["fieldset[role='group']","fieldset[role='radiogroup']","fieldset.buttons"],tags:["form","grouping","radio","checkbox"],category:"form"},{id:"label-field",name:"Label+Input",description:"Semantic label wrapping form input",selectors:["label","label:has(input)","label:has(select)","label:has(textarea)"],tags:["form","input","accessibility"],category:"form"},{id:"accordion",name:"Accordion",description:"Collapsible content sections",selectors:[".accordion",".accordion-item","details","details > summary"],tags:["expandable","collapsible","disclosure"],category:"disclosure"},{id:"icon",name:"Icon",description:"SVG icon element with size and color variants",selectors:["pds-icon",".icon-xs",".icon-sm",".icon-md",".icon-lg",".icon-xl",".icon-primary",".icon-secondary",".icon-accent",".icon-success",".icon-warning",".icon-danger",".icon-info",".icon-muted",".icon-subtle",".icon-text",".icon-text-start",".icon-text-end"],tags:["graphic","symbol","visual"],category:"media"},{id:"figure",name:"Figure/Media",description:"Figure element for images with captions",selectors:["figure","figure.media","figcaption"],tags:["image","media","caption"],category:"media"},{id:"gallery",name:"Gallery",description:"Image gallery grid",selectors:[".gallery",".gallery-grid",".img-gallery"],tags:["images","grid","collection"],category:"media"},{id:"form",name:"Form Container",description:"Form styling and layout",selectors:["form",".form-container",".form-actions",".field-description"],tags:["form","input","submission"],category:"form"},{id:"navigation",name:"Navigation",description:"Navigation elements and menus",selectors:["nav","nav[data-dropdown]","menu","nav menu li"],tags:["menu","links","routing"],category:"navigation"}],components:[{id:"pds-tabstrip",name:"Tab Strip",description:"Tabbed interface component",selectors:["pds-tabstrip"],tags:["tabs","navigation","panels"],category:"navigation"},{id:"pds-drawer",name:"Drawer",description:"Slide-out panel overlay",selectors:["pds-drawer"],tags:["panel","overlay","sidebar"],category:"overlay"},{id:"pds-upload",name:"Upload",description:"File upload component with drag-and-drop",selectors:["pds-upload"],tags:["file","upload","drag-drop","form"],category:"form"},{id:"pds-icon",name:"Icon",description:"SVG icon web component",selectors:["pds-icon"],tags:["icon","graphic","svg"],category:"media"},{id:"pds-toaster",name:"Toaster",description:"Toast notification container",selectors:["pds-toaster"],tags:["notification","toast","feedback"],category:"feedback"},{id:"pds-form",name:"JSON Form",description:"Auto-generated form from JSON Schema",selectors:["pds-form"],tags:["form","schema","auto-generate"],category:"form"},{id:"pds-splitpanel",name:"Split Panel",description:"Resizable split pane layout",selectors:["pds-splitpanel"],tags:["layout","resize","panels"],category:"layout"},{id:"pds-scrollrow",name:"Scroll Row",description:"Horizontal scrolling row with snap points",selectors:["pds-scrollrow"],tags:["scroll","horizontal","carousel"],category:"layout"},{id:"pds-richtext",name:"Rich Text",description:"Rich text editor component",selectors:["pds-richtext"],tags:["editor","wysiwyg","text"],category:"form"},{id:"pds-calendar",name:"Calendar",description:"Date picker calendar component",selectors:["pds-calendar"],tags:["date","picker","calendar"],category:"form"}],layoutPatterns:[{id:"container",name:"Container",description:"Centered max-width wrapper with padding",selectors:[".container"],tags:["wrapper","centered","max-width","page"],category:"structure"},{id:"grid",name:"Grid",description:"CSS Grid layout container",selectors:[".grid"],tags:["layout","columns","css-grid"],category:"layout"},{id:"grid-cols",name:"Grid Columns",description:"Fixed column count grids",selectors:[".grid-cols-1",".grid-cols-2",".grid-cols-3",".grid-cols-4",".grid-cols-6"],tags:["columns","fixed","grid"],category:"layout"},{id:"grid-auto",name:"Auto-fit Grid",description:"Responsive auto-fit grid with minimum widths",selectors:[".grid-auto-sm",".grid-auto-md",".grid-auto-lg",".grid-auto-xl"],tags:["responsive","auto-fit","fluid"],category:"layout"},{id:"flex",name:"Flex Container",description:"Flexbox layout with direction and wrap modifiers",selectors:[".flex",".flex-wrap",".flex-col",".flex-row"],tags:["flexbox","layout","alignment"],category:"layout"},{id:"grow",name:"Flex Grow",description:"Fill remaining flex space",selectors:[".grow"],tags:["flex","expand","fill"],category:"layout"},{id:"stack",name:"Stack",description:"Vertical flex layout with predefined gaps",selectors:[".stack-sm",".stack-md",".stack-lg",".stack-xl"],tags:["vertical","spacing","column"],category:"layout"},{id:"gap",name:"Gap",description:"Spacing between flex/grid children",selectors:[".gap-0",".gap-xs",".gap-sm",".gap-md",".gap-lg",".gap-xl"],tags:["spacing","margin","gutters"],category:"spacing"},{id:"items",name:"Items Alignment",description:"Cross-axis alignment for flex/grid",selectors:[".items-start",".items-center",".items-end",".items-stretch",".items-baseline"],tags:["alignment","vertical","cross-axis"],category:"alignment"},{id:"justify",name:"Justify Content",description:"Main-axis alignment for flex/grid",selectors:[".justify-start",".justify-center",".justify-end",".justify-between",".justify-around",".justify-evenly"],tags:["alignment","horizontal","main-axis"],category:"alignment"},{id:"max-width",name:"Max-Width",description:"Content width constraints",selectors:[".max-w-sm",".max-w-md",".max-w-lg",".max-w-xl"],tags:["width","constraint","readable"],category:"sizing"},{id:"section",name:"Section Spacing",description:"Vertical padding for content sections",selectors:[".section",".section-lg"],tags:["spacing","vertical","padding"],category:"spacing"},{id:"mobile-stack",name:"Mobile Stack",description:"Stack on mobile, row on desktop",selectors:[".mobile-stack"],tags:["responsive","mobile","breakpoint"],category:"responsive"}],utilities:{text:{alignment:[".text-left",".text-center",".text-right"],color:[".text-muted"],overflow:[".truncate"]},backdrop:{base:[".backdrop"],variants:[".backdrop-light",".backdrop-dark"],blur:[".backdrop-blur-sm",".backdrop-blur-md",".backdrop-blur-lg"]},shadow:{scale:[".shadow-sm",".shadow-base",".shadow-md",".shadow-lg",".shadow-xl",".shadow-inner",".shadow-none"]},border:{gradient:[".border-gradient",".border-gradient-primary",".border-gradient-accent",".border-gradient-secondary",".border-gradient-soft",".border-gradient-medium",".border-gradient-strong"],glow:[".border-glow",".border-glow-sm",".border-glow-lg",".border-glow-primary",".border-glow-accent",".border-glow-success",".border-glow-warning",".border-glow-danger"],combined:[".border-gradient-glow"]},media:{image:[".img-gallery",".img-rounded-sm",".img-rounded-md",".img-rounded-lg",".img-rounded-xl",".img-rounded-full",".img-inline"],video:[".video-responsive"],figure:[".figure-responsive"]},effects:{glass:[".liquid-glass"]}},responsive:{prefixes:["sm","md","lg"],utilities:{grid:[":grid-cols-2",":grid-cols-3",":grid-cols-4"],flex:[":flex-row"],text:[":text-sm",":text-lg",":text-xl"],spacing:[":p-6",":p-8",":p-12",":gap-6",":gap-8",":gap-12"],width:[":w-1/2",":w-1/3",":w-1/4"],display:[":hidden",":block"]}},enhancements:[{id:"dropdown",selector:"nav[data-dropdown]",description:"Dropdown menu from nav element",tags:["menu","interactive","navigation"]},{id:"toggle",selector:"label[data-toggle]",description:"Toggle switch from checkbox",tags:["switch","boolean","form"]},{id:"range",selector:'input[type="range"]',description:"Enhanced range slider with output",tags:["slider","input","form"]},{id:"required",selector:"form [required]",description:"Required field asterisk indicator",tags:["validation","form","accessibility"]},{id:"open-group",selector:"fieldset[role=group][data-open]",description:"Editable checkbox/radio group",tags:["form","dynamic","editable"]},{id:"working-button",selector:"button.btn-working, a.btn-working",description:"Button with loading spinner",tags:["loading","async","feedback"]},{id:"labeled-divider",selector:"hr[data-content]",description:"Horizontal rule with centered label",tags:["divider","separator","text"]}],categories:{feedback:{description:"User feedback and status indicators",primitives:["alert","badge"],components:["pds-toaster"]},form:{description:"Form inputs and controls",primitives:["button","fieldset","label-field","form"],components:["pds-upload","pds-form","pds-richtext","pds-calendar"]},layout:{description:"Page structure and content arrangement",patterns:["container","grid","flex","stack","section"],components:["pds-splitpanel","pds-scrollrow"]},navigation:{description:"Navigation and routing",primitives:["navigation"],components:["pds-tabstrip","pds-drawer"]},media:{description:"Images, icons, and visual content",primitives:["icon","figure","gallery"],components:["pds-icon"]},overlay:{description:"Modal and overlay content",primitives:["dialog"],components:["pds-drawer"]},data:{description:"Data display and tables",primitives:["table"]},theming:{description:"Colors, surfaces, and visual theming",primitives:["surface"]}},styles:{typography:["headings","body","code","links"],icons:{source:"svg",sets:["core","brand"]},interactive:["focus","hover","active","disabled"],states:["success","warning","danger","info","muted"]},searchRelations:{text:["typography","truncate","text-muted","text-primary","text-left","text-center","text-right","pds-richtext","heading","font","label","paragraph","content","ellipsis","overflow","input"],font:["typography","text","heading","font-size","font-weight","font-family"],type:["typography","text","font"],typography:["text","font","heading","truncate","text-muted"],heading:["typography","text","font-size","h1","h2","h3"],truncate:["text","overflow","ellipsis","clamp","nowrap","typography"],ellipsis:["truncate","text","overflow","clamp"],overflow:["truncate","scroll","hidden","text"],paragraph:["text","typography","content","body"],content:["text","typography","body","article"],form:["input","field","label","button","fieldset","pds-form","pds-upload","pds-richtext","pds-calendar","required","validation","submit"],input:["form","field","text","label","required","validation"],field:["form","input","label","required"],button:["btn","interactive","action","submit","form","btn-primary","btn-secondary","btn-working"],btn:["button","interactive","action"],toggle:["switch","checkbox","boolean","form","interactive"],switch:["toggle","checkbox","boolean"],slider:["range","input","form"],range:["slider","input","form"],checkbox:["toggle","form","fieldset","boolean"],radio:["fieldset","form","group"],select:["dropdown","form","input","menu"],upload:["file","pds-upload","form","drag-drop"],file:["upload","pds-upload","form"],modal:["dialog","pds-ask","overlay","popup","backdrop","pds-drawer","alert","confirm","prompt","lightbox"],dialog:["modal","pds-ask","overlay","popup","backdrop","alert","confirm","prompt"],popup:["modal","dialog","dropdown","popover","overlay","tooltip"],popover:["popup","tooltip","overlay"],overlay:["modal","dialog","backdrop","drawer","popup"],drawer:["pds-drawer","sidebar","panel","overlay","modal"],backdrop:["overlay","modal","dialog","blur"],confirm:["pds-ask","dialog","modal"],prompt:["pds-ask","dialog","modal","input"],ask:["pds-ask","dialog","confirm","prompt","modal"],dropdown:["menu","nav-dropdown","select","popover"],menu:["dropdown","navigation","nav","list"],nav:["navigation","menu","dropdown","tabs","links"],navigation:["nav","menu","tabs","pds-tabstrip","links","routing"],tabs:["pds-tabstrip","navigation","panels"],tab:["tabs","pds-tabstrip","panel"],link:["navigation","anchor","href","routing"],alert:["notification","feedback","message","status","toast","modal","dialog","pds-ask","confirm","warning","error","info","success","danger"],notification:["alert","toast","pds-toaster","feedback","message","popup"],toast:["pds-toaster","notification","alert","feedback","popup","snackbar"],feedback:["alert","notification","toast","status","badge","validation","error","success"],message:["alert","notification","feedback","dialog","toast"],status:["badge","alert","indicator","feedback","state"],error:["alert","danger","validation","feedback","warning"],success:["alert","feedback","badge","status","check"],warning:["alert","caution","feedback","status"],info:["alert","information","feedback","status"],danger:["alert","error","feedback","destructive","delete"],badge:["status","pill","tag","chip","indicator","label"],pill:["badge","tag","chip"],tag:["badge","pill","chip","label"],chip:["badge","pill","tag"],layout:["grid","flex","stack","container","gap","spacing","pds-splitpanel","section"],grid:["layout","columns","css-grid","table","gallery"],flex:["layout","flexbox","alignment","row","column"],stack:["layout","vertical","spacing","column","gap"],container:["wrapper","layout","max-width","centered"],gap:["spacing","margin","padding","layout"],spacing:["gap","margin","padding","section"],section:["spacing","layout","container","page"],split:["pds-splitpanel","resizable","panels","layout"],panel:["pds-splitpanel","drawer","sidebar","section"],card:["surface","container","elevated","content"],surface:["card","background","elevated","theming","color"],box:["card","container","surface"],elevated:["surface","shadow","card"],color:["palette","theme","surface","primary","secondary","accent"],colours:["color","palette","theme"],palette:["color","theme","tokens"],theme:["color","palette","dark","light","surface"],primary:["color","button","badge","surface"],secondary:["color","button","badge","surface"],accent:["color","highlight","surface"],border:["border-gradient","border-glow","outline","radius"],effect:["border-gradient","border-glow","shadow","glass","animation"],gradient:["border-gradient","color","background"],glow:["border-glow","effect","shadow"],shadow:["elevated","effect","depth","card"],radius:["rounded","border","corner"],rounded:["radius","border","corner"],glass:["liquid-glass","backdrop","blur","effect"],icon:["pds-icon","graphic","symbol","svg","phosphor"],image:["img","figure","gallery","media","picture"],img:["image","figure","gallery","media"],figure:["image","media","caption"],gallery:["images","grid","collection","media"],media:["image","icon","figure","gallery","video"],table:["data","grid","tabular","rows","columns"],data:["table","json","form","display"],editor:["pds-richtext","wysiwyg","text","content"],wysiwyg:["editor","pds-richtext","richtext"],richtext:["pds-richtext","editor","wysiwyg","text"],calendar:["pds-calendar","date","picker","datepicker"],date:["calendar","pds-calendar","picker","input"],datepicker:["calendar","date","pds-calendar"],scroll:["pds-scrollrow","carousel","horizontal","overflow"],carousel:["scroll","pds-scrollrow","slider","gallery"],accordion:["details","collapsible","expandable","disclosure"],collapsible:["accordion","details","expandable"],expandable:["accordion","collapsible","disclosure"],details:["accordion","summary","disclosure"],divider:["hr","separator","line","rule"],separator:["divider","hr","line"],hr:["divider","separator","horizontal-rule"],interactive:["hover","focus","active","disabled","button","link"],hover:["interactive","effect","state"],focus:["interactive","accessibility","state","outline"],disabled:["interactive","state","muted"],loading:["btn-working","spinner","async","progress"],spinner:["loading","btn-working","progress"],accessibility:["a11y","aria","focus","label","required"],a11y:["accessibility","aria","semantic"],aria:["accessibility","a11y","role"],required:["form","validation","asterisk","input"],validation:["form","required","error","feedback"],start:["getting-started","intro","overview","whatispds"],intro:["getting-started","overview","start","docs"],getting:["getting-started","start","intro"],overview:["intro","start","summary","layout-overview"],docs:["documentation","reference","guide"],primitive:["primitives"],component:["components"],enhancement:["enhancements"],foundation:["foundations","color","icon","typography","spacing","tokens"],utility:["utilities","text","backdrop","shadow","border","helper"],pattern:["patterns","layout","responsive","mobile-stack"]}};function W(n,e){if(!n||!e)return!1;try{return n.matches(e)}catch{return!1}}function Ne(n,e){if(!n||!e||!n.closest)return null;try{return n.closest(e)}catch{return null}}function Oe(n,{maxDepth:e=5}={}){if(!n||n.closest&&n.closest(".showcase-toc"))return null;let t=n,o=0;for(;t&&o<e;){if(o++,t.tagName==="DS-SHOWCASE")return null;if(t.classList&&t.classList.contains("showcase-section")){t=t.parentElement;continue}for(let a of PDS.ontology.enhancements){let i=a.selector||a;if(W(t,i))return{element:t,componentType:"enhanced-component",displayName:a.description||i,id:a.id}}if(t.tagName==="FIELDSET"){let a=t.getAttribute("role");if(a==="group"||a==="radiogroup")return{element:t,componentType:"form-group",displayName:a==="radiogroup"?"radio group":"form group"}}if(t.tagName==="LABEL"&&t.querySelector&&t.querySelector("input,select,textarea"))return{element:t,componentType:"form-control",displayName:"label with input"};let r=t.closest?t.closest("label"):null;if(r&&r.querySelector&&r.querySelector("input,select,textarea"))return{element:r,componentType:"form-control",displayName:"label with input"};for(let a of PDS.ontology.primitives){for(let i of a.selectors||[]){let c=String(i||"").trim();if(c.includes("*")){if(c.startsWith(".")){let l=c.slice(1).replace(/\*/g,"");if(t.classList&&Array.from(t.classList).some(g=>g.startsWith(l)))return{element:t,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags};let d=t.parentElement,p=0;for(;d&&p<e;){if(d.classList&&Array.from(d.classList).some(g=>g.startsWith(l))&&d.tagName!=="DS-SHOWCASE")return{element:d,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags};d=d.parentElement,p++}continue}continue}if(W(t,c))return{element:t,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags};let s=Ne(t,c);if(s&&s.tagName!=="DS-SHOWCASE")return{element:s,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags}}if(t.classList){let i=Array.from(t.classList);for(let c of a.selectors||[])if(typeof c=="string"&&c.includes("*")&&c.startsWith(".")){let s=c.slice(1).replace(/\*/g,"");if(i.some(l=>l.startsWith(s)))return{element:t,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags}}}}for(let a of PDS.ontology.layoutPatterns||[])for(let i of a.selectors||[]){let c=String(i||"").trim();if(c.includes("*")){if(c.startsWith(".")){let l=c.slice(1).replace(/\*/g,"");if(t.classList&&Array.from(t.classList).some(d=>d.startsWith(l)))return{element:t,componentType:"layout-pattern",displayName:a.name||a.id,id:a.id,tags:a.tags}}continue}if(W(t,c))return{element:t,componentType:"layout-pattern",displayName:a.name||a.id,id:a.id,tags:a.tags};let s=Ne(t,c);if(s&&s.tagName!=="DS-SHOWCASE")return{element:s,componentType:"layout-pattern",displayName:a.name||a.id,id:a.id,tags:a.tags}}if(t.tagName&&t.tagName.includes("-")){let a=t.tagName.toLowerCase(),i=PDS.ontology.components.find(c=>c.selectors.includes(a));return{element:t,componentType:"web-component",displayName:i?.name||a,id:i?.id||a,tags:i?.tags}}if(t.tagName==="BUTTON"){let a=t.querySelector&&t.querySelector("pds-icon");return{element:t,componentType:"button",displayName:a?"button with icon":"button",id:"button"}}if(W(t,"pds-icon")||t.closest&&t.closest("pds-icon")){let a=W(t,"pds-icon")?t:t.closest("pds-icon");return{element:a,componentType:"icon",displayName:`pds-icon (${a.getAttribute&&a.getAttribute("icon")||"unknown"})`,id:"pds-icon"}}if(W(t,"nav[data-dropdown]")||t.closest&&t.closest("nav[data-dropdown]"))return{element:W(t,"nav[data-dropdown]")?t:t.closest("nav[data-dropdown]"),componentType:"navigation",displayName:"dropdown menu",id:"dropdown"};t=t.parentElement}return null}var Ie=se;var A=class n{static#d;static get instance(){return this.#d}#e;#o;constructor(e={}){this.options={debug:!1,...e},this.options.design||(this.options.design={}),this.options.debug&&this.options.log?.("debug","Generator options:",this.options),n.#d=this,this.tokens=this.generateTokens(),this.options.debug&&this.options.log?.("debug","Generated tokens:",this.tokens),this.#fe(),typeof CSSStyleSheet<"u"?this.#we():this.options.debug&&this.options.log?.("debug","[Generator] Skipping browser features (CSSStyleSheet not available)")}generateTokens(){let e=this.options.design||{};return{colors:this.#v(e.colors||{}),spacing:this.generateSpacingTokens(e.spatialRhythm||{}),radius:this.#T(e.shape||{}),borderWidths:this.#L(e.shape||{}),typography:this.generateTypographyTokens(e.typography||{}),shadows:this.#_(e.layers||{}),layout:this.#F(e.layout||{}),transitions:this.#R(e.behavior||{}),zIndex:this.#P(e.layers||{}),icons:this.#D(e.icons||{})}}#v(e){let{primary:t="#3b82f6",secondary:o="#64748b",accent:r="#ec4899",background:a="#ffffff",success:i=null,warning:c="#FFBF00",danger:s=null,info:l=null,darkMode:d={}}=e,p={primary:this.#r(t),secondary:this.#r(o),accent:this.#r(r),success:this.#r(i||this.#x(t)),warning:this.#r(c||r),danger:this.#r(s||this.#w(t)),info:this.#r(l||t),gray:this.#p(o),surface:this.#u(a)};return p.surface.fieldset=this.#k(p.surface),p.surfaceSmart=this.#b(p.surface),p.dark=this.#$(p,a,d),p.dark&&p.dark.surface&&(p.dark.surfaceSmart=this.#b(p.dark.surface)),p.interactive={light:{fill:this.#f(p.primary,4.5),text:p.primary[600]},dark:{fill:this.#f(p.dark.primary,4.5),text:this.#A(p.dark.primary,p.dark.surface.base,4.5)}},p}#r(e){let t=this.#a(e);return{50:this.#t(t.h,Math.max(t.s-10,10),Math.min(t.l+45,95)),100:this.#t(t.h,Math.max(t.s-5,15),Math.min(t.l+35,90)),200:this.#t(t.h,t.s,Math.min(t.l+25,85)),300:this.#t(t.h,t.s,Math.min(t.l+15,75)),400:this.#t(t.h,t.s,Math.min(t.l+5,65)),500:e,600:this.#t(t.h,t.s,Math.max(t.l-10,25)),700:this.#t(t.h,t.s,Math.max(t.l-20,20)),800:this.#t(t.h,t.s,Math.max(t.l-30,15)),900:this.#t(t.h,t.s,Math.max(t.l-40,10))}}#x(e){let t=this.#a(e);return this.#t(120,Math.max(t.s,60),45)}#w(e){let t=this.#a(e);return this.#t(0,Math.max(t.s,70),50)}#p(e){let t=this.#a(e),o=t.h,r=Math.min(t.s,10);return{50:this.#t(o,r,98),100:this.#t(o,r,95),200:this.#t(o,r,88),300:this.#t(o,r,78),400:this.#t(o,r,60),500:e,600:this.#t(o,Math.min(r+5,15),45),700:this.#t(o,Math.min(r+8,18),35),800:this.#t(o,Math.min(r+10,20),20),900:this.#t(o,Math.min(r+12,22),10)}}#u(e){let t=this.#a(e);return{base:e,subtle:this.#t(t.h,Math.max(t.s,2),Math.max(t.l-2,2)),elevated:this.#t(t.h,Math.max(t.s,3),Math.max(t.l-4,5)),sunken:this.#t(t.h,Math.max(t.s,4),Math.max(t.l-6,8)),overlay:this.#t(t.h,Math.max(t.s,2),Math.min(t.l+2,98)),inverse:this.#g(e),hover:"color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-primary) 8%);"}}#k(e){return{base:e.subtle,subtle:e.elevated,elevated:e.sunken,sunken:this.#S(e.sunken,.05),overlay:e.elevated}}#S(e,t=.05){let o=this.#a(e),r=Math.max(o.l-o.l*t,5);return this.#t(o.h,o.s,r)}#g(e){let t=this.#a(e);if(t.l>50){let o=Math.min(t.s+5,25),r=Math.max(12-(t.l-50)*.1,8);return this.#t(t.h,o,r)}else{let o=Math.max(t.s-10,5),r=Math.min(85+(50-t.l)*.3,95);return this.#t(t.h,o,r)}}#$(e,t="#ffffff",o={}){let r=o.background?o.background:this.#g(t),a=this.#u(r),i=o.primary?this.#r(o.primary):this.#n(e.primary);return{surface:{...a,fieldset:this.#C(a)},primary:i,secondary:o.secondary?this.#r(o.secondary):this.#n(e.secondary),accent:o.accent?this.#r(o.accent):this.#n(e.accent),gray:o.secondary?this.#p(o.secondary):e.gray,success:this.#n(e.success),info:this.#n(e.info),warning:this.#n(e.warning),danger:this.#n(e.danger)}}#s(e){let t=String(e||"").replace("#",""),o=t.length===3?t.split("").map(a=>a+a).join(""):t,r=parseInt(o,16);return{r:r>>16&255,g:r>>8&255,b:r&255}}#l(e){let{r:t,g:o,b:r}=this.#s(e),a=[t/255,o/255,r/255].map(i=>i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4));return .2126*a[0]+.7152*a[1]+.0722*a[2]}#c(e,t){let o=this.#l(e),r=this.#l(t),a=Math.max(o,r),i=Math.min(o,r);return(a+.05)/(i+.05)}#h(e,t=4.5){if(!e)return"#000000";let o="#ffffff",r="#000000",a=this.#c(e,o);if(a>=t)return o;let i=this.#c(e,r);return i>=t||i>a?r:o}#m(e,t=1){let{r:o,g:r,b:a}=this.#s(e);return`rgba(${o}, ${r}, ${a}, ${t})`}#E(e,t,o=.5){let r=this.#s(e),a=this.#s(t),i=Math.round(r.r+(a.r-r.r)*o),c=Math.round(r.g+(a.g-r.g)*o),s=Math.round(r.b+(a.b-r.b)*o);return this.#z(i,c,s)}#z(e,t,o){let r=a=>{let i=Math.max(0,Math.min(255,Math.round(a))).toString(16);return i.length===1?"0"+i:i};return`#${r(e)}${r(t)}${r(o)}`}#C(e){return{base:e.elevated,subtle:e.overlay,elevated:this.#y(e.elevated,.08),sunken:e.elevated,overlay:this.#y(e.overlay,.05)}}#A(e={},t="#000000",o=4.5){let r=["600","700","800","500","400","900","300","200"],a={shade:null,color:null,ratio:0};for(let i of r){let c=e?.[i];if(!c||typeof c!="string")continue;let s=this.#c(c,t);if(s>a.ratio&&(a={shade:i,color:c,ratio:s}),s>=o)return c}return a.color||e?.["600"]||e?.["500"]}#f(e={},t=4.5){let o=["600","700","800","500","400","900"],r={shade:null,color:null,ratio:0};for(let a of o){let i=e?.[a];if(!i||typeof i!="string")continue;let c=this.#c(i,"#ffffff");if(c>r.ratio&&(r={shade:a,color:i,ratio:c}),c>=t)return i}return r.color||e?.["600"]||e?.["500"]}#b(e){let t={};return Object.entries(e).forEach(([o,r])=>{if(!r||typeof r!="string"||!r.startsWith("#"))return;let a=this.#l(r)<.5,i=this.#h(r,4.5),c=this.#h(r,3),s=this.#E(i,r,.4),l=i,d=s,p=a?"#ffffff":"#000000",g=a?.25:.1,h=this.#m(p,g),w=a?"#ffffff":"#000000",m=a?.15:.1,y=this.#m(w,m);t[o]={bg:r,text:i,textSecondary:c,textMuted:s,icon:l,iconSubtle:d,shadow:h,border:y,scheme:a?"dark":"light"}}),t}#y(e,t=.05){let o=this.#a(e),r=Math.min(o.l+(100-o.l)*t,95);return this.#t(o.h,o.s,r)}#n(e){let t={};return Object.entries({50:{source:"900",dimFactor:.8},100:{source:"800",dimFactor:.8},200:{source:"700",dimFactor:.8},300:{source:"600",dimFactor:.8},400:{source:"500",dimFactor:.85},500:{source:"400",dimFactor:.85},600:{source:"300",dimFactor:.85},700:{source:"200",dimFactor:.85},800:{source:"100",dimFactor:.95},900:{source:"50",dimFactor:.95}}).forEach(([r,a])=>{let i=e[a.source];t[r]=this.#M(i,a.dimFactor)}),t}#M(e,t=.8){let o=this.#a(e),r=Math.max(o.s*t,5),a=Math.max(o.l*t,5);return this.#t(o.h,r,a)}generateSpacingTokens(e){let{baseUnit:t=4,scaleRatio:o=1.25,maxSpacingSteps:r=12}=e,a=Number.isFinite(Number(t))?Number(t):4,i=Math.min(Number.isFinite(Number(r))?Number(r):12,12),c={0:"0"};for(let s=1;s<=i;s++)c[s]=`${a*s}px`;return c}#T(e){let{radiusSize:t="medium",customRadius:o=null}=e,r;o!=null?r=o:typeof t=="number"?r=t:typeof t=="string"?r=u.RadiusSizes[t]??u.RadiusSizes.medium:r=u.RadiusSizes.medium;let a=Number.isFinite(Number(r))?Number(r):u.RadiusSizes.medium;return{none:"0",xs:`${Number.isFinite(a*.25)?Math.round(a*.25):0}px`,sm:`${Number.isFinite(a*.5)?Math.round(a*.5):0}px`,md:`${a}px`,lg:`${Number.isFinite(a*1.5)?Math.round(a*1.5):0}px`,xl:`${Number.isFinite(a*2)?Math.round(a*2):0}px`,full:"9999px"}}#L(e){let{borderWidth:t="medium"}=e,o;return typeof t=="number"?o=t:typeof t=="string"?o=u.BorderWidths[t]??u.BorderWidths.medium:o=u.BorderWidths.medium,{hairline:`${u.BorderWidths.hairline}px`,thin:`${u.BorderWidths.thin}px`,medium:`${u.BorderWidths.medium}px`,thick:`${u.BorderWidths.thick}px`}}generateTypographyTokens(e){let{fontFamilyHeadings:t="system-ui, -apple-system, sans-serif",fontFamilyBody:o="system-ui, -apple-system, sans-serif",fontFamilyMono:r='ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',baseFontSize:a=16,fontScale:i=1.25,fontWeightLight:c=u.FontWeights.light,fontWeightNormal:s=u.FontWeights.normal,fontWeightMedium:l=u.FontWeights.medium,fontWeightSemibold:d=u.FontWeights.semibold,fontWeightBold:p=u.FontWeights.bold,lineHeightTight:g=u.LineHeights.tight,lineHeightNormal:h=u.LineHeights.normal,lineHeightRelaxed:w=u.LineHeights.relaxed}=e,m=Number.isFinite(Number(a))?Number(a):16,y=Number.isFinite(Number(i))?Number(i):1.25;return{fontFamily:{headings:t,body:o,mono:r},fontSize:{xs:`${Math.round(m/Math.pow(y,2))}px`,sm:`${Math.round(m/y)}px`,base:`${m}px`,lg:`${Math.round(m*y)}px`,xl:`${Math.round(m*Math.pow(y,2))}px`,"2xl":`${Math.round(m*Math.pow(y,3))}px`,"3xl":`${Math.round(m*Math.pow(y,4))}px`,"4xl":`${Math.round(m*Math.pow(y,5))}px`},fontWeight:{light:c?.toString()||"300",normal:s?.toString()||"400",medium:l?.toString()||"500",semibold:d?.toString()||"600",bold:p?.toString()||"700"},lineHeight:{tight:g?.toString()||"1.25",normal:h?.toString()||"1.5",relaxed:w?.toString()||"1.75"}}}#_(e){let{baseShadowOpacity:t=.1,shadowBlurMultiplier:o=1,shadowOffsetMultiplier:r=1}=e,a=`rgba(0, 0, 0, ${t})`,i=`rgba(0, 0, 0, ${t*.5})`;return{sm:`0 ${1*r}px ${2*o}px 0 ${i}`,base:`0 ${1*r}px ${3*o}px 0 ${a}, 0 ${1*r}px ${2*o}px 0 ${i}`,md:`0 ${4*r}px ${6*o}px ${-1*r}px ${a}, 0 ${2*r}px ${4*o}px ${-1*r}px ${i}`,lg:`0 ${10*r}px ${15*o}px ${-3*r}px ${a}, 0 ${4*r}px ${6*o}px ${-2*r}px ${i}`,xl:`0 ${20*r}px ${25*o}px ${-5*r}px ${a}, 0 ${10*r}px ${10*o}px ${-5*r}px ${i}`,inner:`inset 0 ${2*r}px ${4*o}px 0 ${i}`}}#F(e){let{maxWidth:t=1200,containerPadding:o=16,breakpoints:r={sm:640,md:768,lg:1024,xl:1280}}=e;return{maxWidth:`${t}px`,minHeight:"100vh",containerPadding:`${o}px`,breakpoints:{sm:`${r.sm}px`,md:`${r.md}px`,lg:`${r.lg}px`,xl:`${r.xl}px`},pageMargin:"120px",sectionGap:"160px",containerGap:"200px",heroSpacing:"240px",footerSpacing:"160px"}}#R(e){let{transitionSpeed:t=u.TransitionSpeeds.normal,animationEasing:o=u.AnimationEasings["ease-out"]}=e,r;return typeof t=="number"?r=t:typeof t=="string"&&u.TransitionSpeeds[t]?r=u.TransitionSpeeds[t]:r=u.TransitionSpeeds.normal,{fast:`${Math.round(r*.6)}ms`,normal:`${r}ms`,slow:`${Math.round(r*1.4)}ms`}}#P(e){let{baseZIndex:t=1e3,zIndexStep:o=10}=e;return{dropdown:t.toString(),sticky:(t+o*2).toString(),fixed:(t+o*3).toString(),modal:(t+o*4).toString(),drawer:(t+o*5).toString(),popover:(t+o*6).toString(),tooltip:(t+o*7).toString(),notification:(t+o*8).toString()}}#D(e){let{set:t="phosphor",weight:o="regular",defaultSize:r=24,sizes:a={xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64},spritePath:i="/assets/pds/icons/pds-icons.svg",externalPath:c="/assets/img/icons/"}=e;return{set:t,weight:o,defaultSize:`${r}px`,sizes:Object.fromEntries(Object.entries(a).map(([s,l])=>[s,`${l}px`])),spritePath:i,externalPath:c}}#W(e){let t=[];t.push(` /* Colors */
2
- `);let o=(r,a="")=>{Object.entries(r).forEach(([i,c])=>{typeof c=="object"&&c!==null?o(c,`${a}${i}-`):typeof c=="string"&&t.push(` --color-${a}${i}: ${c};
3
- `)})};return Object.entries(e).forEach(([r,a])=>{r!=="dark"&&r!=="surfaceSmart"&&r!=="interactive"&&typeof a=="object"&&a!==null&&o(a,`${r}-`)}),e.surfaceSmart&&(t.push(` /* Smart Surface Tokens (context-aware) */
4
- `),Object.entries(e.surfaceSmart).forEach(([r,a])=>{t.push(` --surface-${r}-bg: ${a.bg};
5
- `),t.push(` --surface-${r}-text: ${a.text};
6
- `),t.push(` --surface-${r}-text-secondary: ${a.textSecondary};
7
- `),t.push(` --surface-${r}-text-muted: ${a.textMuted};
8
- `),t.push(` --surface-${r}-icon: ${a.icon};
9
- `),t.push(` --surface-${r}-icon-subtle: ${a.iconSubtle};
10
- `),t.push(` --surface-${r}-shadow: ${a.shadow};
11
- `),t.push(` --surface-${r}-border: ${a.border};
12
- `)}),t.push(`
13
- `)),t.push(` /* Semantic Text Colors */
14
- `),t.push(` --color-text-primary: var(--color-gray-900);
15
- `),t.push(` --color-text-secondary: var(--color-gray-600);
16
- `),t.push(` --color-text-muted: var(--color-gray-600);
17
- `),t.push(` --color-border: var(--color-gray-300);
18
- `),t.push(` --color-input-bg: var(--color-surface-base);
19
- `),t.push(` --color-input-disabled-bg: var(--color-gray-50);
20
- `),t.push(` --color-input-disabled-text: var(--color-gray-500);
21
- `),t.push(` --color-code-bg: var(--color-gray-100);
22
- `),e.interactive&&e.interactive.light&&(t.push(` /* Interactive Colors - optimized for specific use cases */
23
- `),t.push(` --color-primary-fill: ${e.interactive.light.fill}; /* For button backgrounds with white text */
24
- `),t.push(` --color-primary-text: ${e.interactive.light.text}; /* For links and outline buttons on light surfaces */
25
- `)),t.push(` /* Translucent Surface Tokens */
26
- `),t.push(` --color-surface-translucent-25: color-mix(in oklab, var(--color-surface-subtle) 25%, transparent 75%);
27
- `),t.push(` --color-surface-translucent-50: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
28
- `),t.push(` --color-surface-translucent-75: color-mix(in oklab, var(--color-surface-subtle) 75%, transparent 25%);
29
- `),t.push(` /* Backdrop tokens - used for modal dialogs, drawers, overlays */
30
-
31
- --backdrop-bg: linear-gradient(
32
- 135deg,
33
- rgba(255, 255, 255, 0.2),
34
- rgba(255, 255, 255, 0.1)
35
- );
36
- --backdrop-blur: 10px;
37
- --backdrop-saturate: 150%;
38
- --backdrop-brightness: 0.9;
39
- --backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)) brightness(var(--backdrop-brightness));
40
- --backdrop-opacity: 1;
41
-
42
- /* Legacy alias for backwards compatibility */
43
- --backdrop-background: var(--backdrop-bg);
44
- `),t.push(this.#B(e)),`${t.join("")}
45
- `}#B(e){let t=e.primary?.[500]||"#3b82f6",o=e.secondary?.[500]||"#8b5cf6",r=e.accent?.[500]||"#f59e0b";return`
46
- /* Mesh Gradient Backgrounds */
47
- --background-mesh-01: radial-gradient(at 27% 37%, color-mix(in oklab, ${t} 25%, transparent) 0px, transparent 50%),
48
- radial-gradient(at 97% 21%, color-mix(in oklab, ${o} 22%, transparent) 0px, transparent 50%),
49
- radial-gradient(at 52% 99%, color-mix(in oklab, ${r} 18%, transparent) 0px, transparent 50%),
50
- radial-gradient(at 10% 29%, color-mix(in oklab, ${t} 15%, transparent) 0px, transparent 50%);
51
-
52
- --background-mesh-02: radial-gradient(at 40% 20%, color-mix(in oklab, ${o} 24%, transparent) 0px, transparent 50%),
53
- radial-gradient(at 80% 0%, color-mix(in oklab, ${t} 20%, transparent) 0px, transparent 50%),
54
- radial-gradient(at 0% 50%, color-mix(in oklab, ${r} 17%, transparent) 0px, transparent 50%),
55
- radial-gradient(at 80% 100%, color-mix(in oklab, ${o} 15%, transparent) 0px, transparent 50%);
56
-
57
- --background-mesh-03: radial-gradient(at 15% 50%, color-mix(in oklab, ${r} 21%, transparent) 0px, transparent 50%),
58
- radial-gradient(at 85% 30%, color-mix(in oklab, ${t} 23%, transparent) 0px, transparent 50%),
59
- radial-gradient(at 50% 80%, color-mix(in oklab, ${o} 18%, transparent) 0px, transparent 50%),
60
- radial-gradient(at 90% 90%, color-mix(in oklab, ${r} 16%, transparent) 0px, transparent 50%);
61
-
62
- --background-mesh-04: radial-gradient(at 70% 15%, color-mix(in oklab, ${t} 19%, transparent) 0px, transparent 50%),
63
- radial-gradient(at 20% 80%, color-mix(in oklab, ${o} 22%, transparent) 0px, transparent 50%),
64
- radial-gradient(at 90% 60%, color-mix(in oklab, ${r} 17%, transparent) 0px, transparent 50%),
65
- radial-gradient(at 30% 40%, color-mix(in oklab, ${t} 16%, transparent) 0px, transparent 50%);
66
-
67
- --background-mesh-05: radial-gradient(at 50% 50%, color-mix(in oklab, ${t} 23%, transparent) 0px, transparent 50%),
68
- radial-gradient(at 10% 10%, color-mix(in oklab, ${r} 20%, transparent) 0px, transparent 50%),
69
- radial-gradient(at 90% 10%, color-mix(in oklab, ${o} 18%, transparent) 0px, transparent 50%),
70
- radial-gradient(at 50% 90%, color-mix(in oklab, ${r} 15%, transparent) 0px, transparent 50%);
71
- `}#j(e){let t=[` /* Spacing */
72
- `];return Object.entries(e).forEach(([o,r])=>{o!=null&&o!=="NaN"&&r!==void 0&&!r.includes("NaN")&&t.push(` --spacing-${o}: ${r};
73
- `)}),`${t.join("")}
74
- `}#U(e){let t=[` /* Border Radius */
75
- `];return Object.entries(e).forEach(([o,r])=>{t.push(` --radius-${o}: ${r};
76
- `)}),`${t.join("")}
77
- `}#N(e){let t=[` /* Border Widths */
78
- `];return Object.entries(e).forEach(([o,r])=>{t.push(` --border-width-${o}: ${r};
79
- `)}),`${t.join("")}
80
- `}#O(e){let t=[` /* Typography */
81
- `];return Object.entries(e).forEach(([o,r])=>{let a=o.replace(/^font/,"").replace(/^(.)/,i=>i.toLowerCase()).replace(/([A-Z])/g,"-$1").toLowerCase();Object.entries(r).forEach(([i,c])=>{let s=i.replace(/([A-Z])/g,"-$1").toLowerCase();t.push(` --font-${a}-${s}: ${c};
82
- `)})}),`${t.join("")}
83
- `}#I(e){let t=[` /* Shadows */
84
- `];return Object.entries(e).forEach(([o,r])=>{t.push(` --shadow-${o}: ${r};
85
- `)}),`${t.join("")}
86
- `}#H(e){let t=[` /* Layout */
87
- `];return Object.entries(e).forEach(([o,r])=>{let a=o.replace(/([A-Z])/g,"-$1").toLowerCase();o!=="breakpoints"&&t.push(` --layout-${a}: ${r};
88
- `)}),`${t.join("")}
89
- `}#q(e){let t=[` /* Transitions */
90
- `];return Object.entries(e).forEach(([o,r])=>{t.push(` --transition-${o}: ${r};
91
- `)}),`${t.join("")}
92
- `}#G(e){let t=[` /* Z-Index */
93
- `];return Object.entries(e).forEach(([o,r])=>{t.push(` --z-${o}: ${r};
94
- `)}),`${t.join("")}
95
- `}#V(e){let t=[` /* Icon System */
96
- `];return t.push(` --icon-set: ${e.set};
97
- `),t.push(` --icon-weight: ${e.weight};
98
- `),t.push(` --icon-size: ${e.defaultSize};
99
- `),Object.entries(e.sizes).forEach(([o,r])=>{t.push(` --icon-size-${o}: ${r};
100
- `)}),`${t.join("")}
101
- `}#K(e){if(!e?.dark)return"";let t=[],o=(l,d="")=>{Object.entries(l).forEach(([p,g])=>{typeof g=="object"&&g!==null?o(g,`${d}${p}-`):typeof g=="string"&&t.push(` --color-${d}${p}: ${g};
102
- `)})};Object.entries(e.dark).forEach(([l,d])=>{l!=="surfaceSmart"&&typeof d=="object"&&d!==null&&o(d,`${l}-`)});let r=[];e.dark.surfaceSmart&&(r.push(` /* Smart Surface Tokens (dark mode, context-aware) */
103
- `),Object.entries(e.dark.surfaceSmart).forEach(([l,d])=>{r.push(` --surface-${l}-bg: ${d.bg};
104
- `),r.push(` --surface-${l}-text: ${d.text};
105
- `),r.push(` --surface-${l}-text-secondary: ${d.textSecondary};
106
- `),r.push(` --surface-${l}-text-muted: ${d.textMuted};
107
- `),r.push(` --surface-${l}-icon: ${d.icon};
108
- `),r.push(` --surface-${l}-icon-subtle: ${d.iconSubtle};
109
- `),r.push(` --surface-${l}-shadow: ${d.shadow};
110
- `),r.push(` --surface-${l}-border: ${d.border};
111
- `)}),r.push(`
112
- `));let a=` --color-text-primary: var(--color-gray-100);
113
- --color-text-secondary: var(--color-gray-300);
114
- --color-text-muted: var(--color-gray-400);
115
- --color-border: var(--color-gray-700);
116
- --color-input-bg: var(--color-gray-800);
117
- --color-input-disabled-bg: var(--color-gray-900);
118
- --color-input-disabled-text: var(--color-gray-600);
119
- --color-code-bg: var(--color-gray-800);
120
- `,i=` /* Backdrop tokens - dark mode */
121
- --backdrop-bg: linear-gradient(
122
- 135deg,
123
- rgba(0, 0, 0, 0.6),
124
- rgba(0, 0, 0, 0.4)
125
- );
126
- --backdrop-blur: 10px;
127
- --backdrop-saturate: 120%;
128
- --backdrop-brightness: 0.7;
129
- --backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)) brightness(var(--backdrop-brightness));
130
- --backdrop-opacity: 1;
131
-
132
- /* Legacy alias for backwards compatibility */
133
- --backdrop-background: var(--backdrop-bg);
134
- `,c=this.#Q(e);return`html[data-theme="dark"] {
135
- ${[...t,...r,a,i,c].join("")}}
136
- `}#Z(e){if(!e?.dark)return"";let t=[],o=(d,p="")=>{Object.entries(d).forEach(([g,h])=>{typeof h=="object"&&h!==null?o(h,`${p}${g}-`):typeof h=="string"&&t.push(` --color-${p}${g}: ${h};
137
- `)})};Object.entries(e.dark).forEach(([d,p])=>{d!=="surfaceSmart"&&typeof p=="object"&&p!==null&&o(p,`${d}-`)});let r=[];e.dark.surfaceSmart&&(r.push(` /* Smart Surface Tokens (dark mode, context-aware) */
138
- `),Object.entries(e.dark.surfaceSmart).forEach(([d,p])=>{r.push(` --surface-${d}-bg: ${p.bg};
139
- `),r.push(` --surface-${d}-text: ${p.text};
140
- `),r.push(` --surface-${d}-text-secondary: ${p.textSecondary};
141
- `),r.push(` --surface-${d}-text-muted: ${p.textMuted};
142
- `),r.push(` --surface-${d}-icon: ${p.icon};
143
- `),r.push(` --surface-${d}-icon-subtle: ${p.iconSubtle};
144
- `),r.push(` --surface-${d}-shadow: ${p.shadow};
145
- `),r.push(` --surface-${d}-border: ${p.border};
146
- `)}),r.push(`
147
- `));let a=[];e.interactive&&e.interactive.dark&&(a.push(` /* Interactive Colors - optimized for specific use cases (dark mode) */
148
- `),a.push(` --color-primary-fill: ${e.interactive.dark.fill}; /* For button backgrounds with white text */
149
- `),a.push(` --color-primary-text: ${e.interactive.dark.text}; /* For links and outline buttons on dark surfaces */
150
- `));let i=[` --color-text-primary: var(--color-gray-100);
151
- `,` --color-text-secondary: var(--color-gray-300);
152
- `,` --color-text-muted: var(--color-gray-400);
153
- `,` --color-border: var(--color-gray-700);
154
- `,` --color-input-bg: var(--color-gray-800);
155
- `,` --color-input-disabled-bg: var(--color-gray-900);
156
- `,` --color-input-disabled-text: var(--color-gray-600);
157
- `,` --color-code-bg: var(--color-gray-800);
158
- `,...a].join(""),c=` /* Backdrop tokens - dark mode */
159
- --backdrop-bg: linear-gradient(
160
- 135deg,
161
- rgba(0, 0, 0, 0.6),
162
- rgba(0, 0, 0, 0.4)
163
- );
164
- --backdrop-blur: 10px;
165
- --backdrop-saturate: 120%;
166
- --backdrop-brightness: 0.7;
167
- --backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)) brightness(var(--backdrop-brightness));
168
- --backdrop-opacity: 1;
169
-
170
- /* Legacy alias for backwards compatibility */
171
- --backdrop-background: var(--backdrop-bg);
172
- `,s=this.#J(e);return`
173
- html[data-theme="dark"] {
174
- ${[...t,...r,i,c,s].join("")} }
175
- `}#J(e){let t=e.dark||e,o=t.primary?.[400]||"#60a5fa",r=t.secondary?.[400]||"#a78bfa",a=t.accent?.[400]||"#fbbf24";return` /* Mesh Gradient Variables (Dark Mode) */
176
- --background-mesh-01: radial-gradient(at 27% 37%, color-mix(in oklab, ${o} 20%, transparent) 0px, transparent 50%),
177
- radial-gradient(at 97% 21%, color-mix(in oklab, ${r} 16%, transparent) 0px, transparent 50%),
178
- radial-gradient(at 52% 99%, color-mix(in oklab, ${a} 13%, transparent) 0px, transparent 50%),
179
- radial-gradient(at 10% 29%, color-mix(in oklab, ${o} 10%, transparent) 0px, transparent 50%);
180
-
181
- --background-mesh-02: radial-gradient(at 40% 20%, color-mix(in oklab, ${r} 18%, transparent) 0px, transparent 50%),
182
- radial-gradient(at 80% 0%, color-mix(in oklab, ${o} 14%, transparent) 0px, transparent 50%),
183
- radial-gradient(at 0% 50%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
184
- radial-gradient(at 80% 100%, color-mix(in oklab, ${r} 10%, transparent) 0px, transparent 50%);
185
-
186
- --background-mesh-03: radial-gradient(at 15% 50%, color-mix(in oklab, ${a} 15%, transparent) 0px, transparent 50%),
187
- radial-gradient(at 85% 30%, color-mix(in oklab, ${o} 17%, transparent) 0px, transparent 50%),
188
- radial-gradient(at 50% 80%, color-mix(in oklab, ${r} 13%, transparent) 0px, transparent 50%),
189
- radial-gradient(at 90% 90%, color-mix(in oklab, ${a} 11%, transparent) 0px, transparent 50%);
190
-
191
- --background-mesh-04: radial-gradient(at 70% 15%, color-mix(in oklab, ${o} 14%, transparent) 0px, transparent 50%),
192
- radial-gradient(at 20% 80%, color-mix(in oklab, ${r} 16%, transparent) 0px, transparent 50%),
193
- radial-gradient(at 90% 60%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
194
- radial-gradient(at 30% 40%, color-mix(in oklab, ${o} 11%, transparent) 0px, transparent 50%);
195
-
196
- --background-mesh-05: radial-gradient(at 50% 50%, color-mix(in oklab, ${o} 17%, transparent) 0px, transparent 50%),
197
- radial-gradient(at 10% 10%, color-mix(in oklab, ${a} 14%, transparent) 0px, transparent 50%),
198
- radial-gradient(at 90% 10%, color-mix(in oklab, ${r} 13%, transparent) 0px, transparent 50%),
199
- radial-gradient(at 50% 90%, color-mix(in oklab, ${a} 10%, transparent) 0px, transparent 50%);
200
- `}#Q(e){let t=e.dark||e,o=t.primary?.[400]||"#60a5fa",r=t.secondary?.[400]||"#a78bfa",a=t.accent?.[400]||"#fbbf24";return`
201
- /* Mesh Gradient Backgrounds (Dark Mode) */
202
- --background-mesh-01: radial-gradient(at 27% 37%, color-mix(in oklab, ${o} 20%, transparent) 0px, transparent 50%),
203
- radial-gradient(at 97% 21%, color-mix(in oklab, ${r} 16%, transparent) 0px, transparent 50%),
204
- radial-gradient(at 52% 99%, color-mix(in oklab, ${a} 13%, transparent) 0px, transparent 50%),
205
- radial-gradient(at 10% 29%, color-mix(in oklab, ${o} 10%, transparent) 0px, transparent 50%);
206
-
207
- --background-mesh-02: radial-gradient(at 40% 20%, color-mix(in oklab, ${r} 18%, transparent) 0px, transparent 50%),
208
- radial-gradient(at 80% 0%, color-mix(in oklab, ${o} 14%, transparent) 0px, transparent 50%),
209
- radial-gradient(at 0% 50%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
210
- radial-gradient(at 80% 100%, color-mix(in oklab, ${r} 10%, transparent) 0px, transparent 50%);
211
-
212
- --background-mesh-03: radial-gradient(at 15% 50%, color-mix(in oklab, ${a} 15%, transparent) 0px, transparent 50%),
213
- radial-gradient(at 85% 30%, color-mix(in oklab, ${o} 17%, transparent) 0px, transparent 50%),
214
- radial-gradient(at 50% 80%, color-mix(in oklab, ${r} 13%, transparent) 0px, transparent 50%),
215
- radial-gradient(at 90% 90%, color-mix(in oklab, ${a} 11%, transparent) 0px, transparent 50%);
216
-
217
- --background-mesh-04: radial-gradient(at 70% 15%, color-mix(in oklab, ${o} 14%, transparent) 0px, transparent 50%),
218
- radial-gradient(at 20% 80%, color-mix(in oklab, ${r} 16%, transparent) 0px, transparent 50%),
219
- radial-gradient(at 90% 60%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
220
- radial-gradient(at 30% 40%, color-mix(in oklab, ${o} 11%, transparent) 0px, transparent 50%);
221
-
222
- --background-mesh-05: radial-gradient(at 50% 50%, color-mix(in oklab, ${o} 17%, transparent) 0px, transparent 50%),
223
- radial-gradient(at 10% 10%, color-mix(in oklab, ${a} 14%, transparent) 0px, transparent 50%),
224
- radial-gradient(at 90% 10%, color-mix(in oklab, ${r} 13%, transparent) 0px, transparent 50%),
225
- radial-gradient(at 50% 90%, color-mix(in oklab, ${a} 10%, transparent) 0px, transparent 50%);
226
- `}#Y(){return`/* Alert dark mode adjustments */
227
- html[data-theme="dark"] {
228
- .alert-success { background-color: var(--color-success-50); border-color: var(--color-success-500); color: var(--color-success-900); }
229
- .alert-info { background-color: var(--color-info-50); border-color: var(--color-info-500); color: var(--color-info-900); }
230
- .alert-warning { background-color: var(--color-warning-50); border-color: var(--color-warning-500); color: var(--color-warning-900); }
231
- .alert-danger, .alert-error { background-color: var(--color-danger-50); border-color: var(--color-danger-500); color: var(--color-danger-900); }
232
- img, video { opacity: 0.8; transition: opacity var(--transition-normal); }
233
- img:hover, video:hover { opacity: 1; }
234
- }`}#X(){try{let e=this.options?.design?.options?.backgroundMesh;this.options.debug&&this.options.log?.("debug","backgroundMesh check:",e);let t=Number(e);return!Number.isFinite(t)||t===0?"":`/* Optional background mesh applied from config */
235
- body {
236
- background: var(--background-mesh-0${Math.max(1,Math.min(5,Math.floor(t)))});
237
- background-attachment: fixed;
238
- }`}catch(e){return this.options.debug&&this.options.log?.("error","Error in generateBodyBackgroundMeshRule:",e),""}}#ee(){try{return this.options?.design?.options?.liquidGlassEffects?`/* Liquid glass utility (opt-in via options.liquidGlassEffects) */
239
- .liquid-glass {
240
- border-radius: var(--radius-lg);
241
- /* Subtle translucent fill blended with surface */
242
- background: color-mix(in oklab, var(--color-surface-subtle) 45%, transparent);
243
-
244
- background-image: linear-gradient(
245
- 135deg,
246
- rgba(255,255,255,0.35),
247
- rgba(255,255,255,0.12)
248
- );
249
- /* Frosted glass blur + saturation */
250
- -webkit-backdrop-filter: blur(12px) saturate(140%);
251
- backdrop-filter: blur(12px) saturate(140%);
252
- /* Soft inner highlight and outer depth */
253
- box-shadow:
254
- inset 0 1px 0 rgba(255,255,255,0.6),
255
- inset 0 -40px 80px rgba(255,255,255,0.12),
256
- 0 10px 30px rgba(0,0,0,0.10);
257
- /* Glossy border with slight light and dark edges */
258
- border: 1px solid color-mix(in oklab, var(--color-primary-500) 22%, transparent);
259
- outline: 1px solid color-mix(in oklab, #ffffff 18%, transparent);
260
- outline-offset: -1px;
261
- }
262
-
263
- html[data-theme="dark"] .liquid-glass {
264
- background: color-mix(in oklab, var(--color-surface-inverse) 45%, transparent);
265
- background-image: linear-gradient(
266
- 135deg,
267
- color-mix(in oklab, var(--color-primary-300) 40%, transparent),
268
- color-mix(in oklab, var(--color-surface-overlay) 48%, transparent)
269
- );
270
- box-shadow:
271
- inset 0 1px 0 rgba(255,255,255,0.12),
272
- inset 0 -40px 80px rgba(0,0,0,0.55),
273
- 0 18px 38px rgba(0,0,0,0.65);
274
- border: 1px solid color-mix(in oklab, var(--color-primary-300) 26%, transparent);
275
- outline: 1px solid color-mix(in oklab, #ffffff 16%, transparent);
276
- }
277
-
278
- /* Fallback when backdrop-filter isn't supported */
279
- @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
280
- .liquid-glass {
281
- /* Strengthen fill a bit to compensate for lack of blur */
282
- background: color-mix(in oklab, var(--color-surface-subtle) 70%, rgba(255,255,255,0.4));
283
- box-shadow:
284
- inset 0 1px 0 rgba(255,255,255,0.6),
285
- 0 10px 24px rgba(0,0,0,0.08);
286
- }
287
-
288
- html[data-theme="dark"] .liquid-glass {
289
- background: color-mix(in oklab, var(--color-surface-inverse) 70%, transparent);
290
- box-shadow:
291
- inset 0 1px 0 rgba(255,255,255,0.1),
292
- 0 18px 32px rgba(0,0,0,0.58);
293
- }
294
- }
295
- `:""}catch{return""}}#te(){return`/* ============================================================================
296
- Border Gradient Utilities
297
- Card outlines with gradient borders and glow effects
298
- ============================================================================ */
299
-
300
-
301
- /* Gradient border utility - premium/promo card style */
302
- .border-gradient {
303
- border: var(--border-width-medium) solid transparent;
304
- background:
305
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
306
- linear-gradient(var(--gradient-angle, 135deg),
307
- var(--color-primary-400),
308
- var(--color-accent-400)
309
- ) border-box;
310
- }
311
-
312
- /* Gradient border variants - different color combinations */
313
- .border-gradient-primary {
314
- border: var(--border-width-medium) solid transparent;
315
- background:
316
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
317
- linear-gradient(var(--gradient-angle, 135deg),
318
- var(--color-primary-300),
319
- var(--color-primary-600)
320
- ) border-box;
321
- }
322
-
323
- .border-gradient-accent {
324
- border: var(--border-width-medium) solid transparent;
325
- background:
326
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
327
- linear-gradient(var(--gradient-angle, 135deg),
328
- var(--color-accent-300),
329
- var(--color-accent-600)
330
- ) border-box;
331
- }
332
-
333
- .border-gradient-secondary {
334
- border: var(--border-width-medium) solid transparent;
335
- background:
336
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
337
- linear-gradient(var(--gradient-angle, 135deg),
338
- var(--color-secondary-300),
339
- var(--color-secondary-600)
340
- ) border-box;
341
- }
342
-
343
- /* Gradient border with different strengths/thickness */
344
- .border-gradient-soft {
345
- border: 1px solid transparent;
346
- background:
347
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
348
- linear-gradient(var(--gradient-angle, 135deg),
349
- var(--color-primary-400),
350
- var(--color-accent-400)
351
- ) border-box;
352
- }
353
-
354
- .border-gradient-medium {
355
- border: 2px solid transparent;
356
- background:
357
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
358
- linear-gradient(var(--gradient-angle, 135deg),
359
- var(--color-primary-400),
360
- var(--color-accent-400)
361
- ) border-box;
362
- }
363
-
364
- .border-gradient-strong {
365
- border: 3px solid transparent;
366
- background:
367
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
368
- linear-gradient(var(--gradient-angle, 135deg),
369
- var(--color-primary-400),
370
- var(--color-accent-400)
371
- ) border-box;
372
- }
373
-
374
- /* Glow effect utility - for callouts and active states */
375
- .border-glow {
376
- box-shadow: 0 0 12px var(--color-primary-500);
377
- }
378
-
379
- .border-glow-sm {
380
- box-shadow: 0 0 6px var(--color-primary-500);
381
- }
382
-
383
- .border-glow-lg {
384
- box-shadow: 0 0 20px var(--color-primary-500);
385
- }
386
-
387
- /* Combined gradient + glow for premium effects */
388
- .border-gradient-glow {
389
- border: var(--border-width-medium) solid transparent;
390
- background:
391
- linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
392
- linear-gradient(135deg,
393
- var(--color-primary-400),
394
- var(--color-accent-400)
395
- ) border-box;
396
- box-shadow: 0 0 12px var(--color-primary-500);
397
- }
398
-
399
- /* Semantic glow variants */
400
- .border-glow-primary {
401
- box-shadow: 0 0 12px var(--color-primary-500);
402
- }
403
-
404
- .border-glow-accent {
405
- box-shadow: 0 0 12px var(--color-accent-500);
406
- }
407
-
408
- .border-glow-success {
409
- box-shadow: 0 0 12px var(--color-success-500);
410
- }
411
-
412
- .border-glow-warning {
413
- box-shadow: 0 0 12px var(--color-warning-500);
414
- }
415
-
416
- .border-glow-danger {
417
- box-shadow: 0 0 12px var(--color-danger-500);
418
- }
419
-
420
- `}#re(){let{layout:e={}}=this.options.design,t=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280};return`/* Semantic HTML Elements (low-specificity via :where()) */
421
-
422
- :where(blockquote) {
423
- margin: 0 0 var(--spacing-4) 0;
424
- padding: var(--spacing-6) var(--spacing-8);
425
- border-left: 4px solid var(--color-primary-500);
426
- background-color: var(--color-surface-elevated);
427
- border-radius: var(--radius-none);
428
- font-size: var(--font-size-lg);
429
- line-height: var(--line-height-relaxed);
430
- color: var(--color-text-primary);
431
-
432
- :where(p):last-child {
433
- margin-bottom: 0;
434
- }
435
-
436
- :where(cite) {
437
- display: block;
438
- margin-top: var(--spacing-4);
439
- font-size: var(--font-size-base);
440
- font-style: normal;
441
- color: var(--color-primary-500);
442
- }
443
- }
444
-
445
- :where(hr) {
446
- margin: var(--spacing-8) 0;
447
- border: none;
448
- border-top: 1px solid var(--color-border);
449
- height: 0;
450
- }
451
-
452
- /* Labeled horizontal rule: <hr data-content="OR"> */
453
- :where(hr[data-content]) {
454
- position: relative;
455
- border: none;
456
- text-align: center;
457
- height: auto;
458
- overflow: visible;
459
-
460
- &::before {
461
- content: "";
462
- position: absolute;
463
- left: 0;
464
- top: 50%;
465
- width: 100%;
466
- height: 1px;
467
- background: linear-gradient(to right, transparent, var(--color-border), transparent);
468
- }
469
-
470
- &::after {
471
- content: attr(data-content);
472
- position: relative;
473
- display: inline-block;
474
- padding: 0 var(--spacing-3);
475
- background-color: var(--color-surface-base);
476
- color: var(--color-text-muted);
477
- font-size: var(--font-size-sm);
478
- line-height: var(--font-line-height-normal);
479
- }
480
- }
481
-
482
- :where(dl) {
483
- margin: 0 0 var(--spacing-4) 0;
484
- }
485
-
486
- :where(dt) {
487
- font-weight: var(--font-weight-semibold);
488
- color: var(--color-text-primary);
489
- margin-top: var(--spacing-3);
490
-
491
- &:first-child {
492
- margin-top: 0;
493
- }
494
- }
495
-
496
- :where(dd) {
497
- margin: var(--spacing-1) 0 var(--spacing-3) var(--spacing-6);
498
- color: var(--color-text-secondary);
499
- }
500
-
501
- :where(nav), :where(header), :where(footer) {
502
- display: block;
503
- }
504
-
505
- :where(header), :where(footer) {
506
- width: 100%;
507
- }
508
-
509
- /* Headings within header elements have tight spacing for intro content */
510
- :where(header) > :where(h1, h2, h3, h4, h5, h6) {
511
- margin: 0;
512
- }
513
-
514
- :where(article), :where(section), :where(aside) {
515
- display: block;
516
- margin-bottom: var(--spacing-6);
517
-
518
- & > *:last-child {
519
- margin-bottom: 0;
520
- }
521
- }
522
-
523
- :where(mark) {
524
- background-color: var(--color-warning-200);
525
- color: var(--color-warning-900);
526
- padding: 0 var(--spacing-1);
527
- border-radius: var(--radius-sm);
528
- }
529
-
530
- :where(kbd) {
531
- display: inline-block;
532
- padding: var(--spacing-1) var(--spacing-2);
533
- font-family: var(--font-family-mono);
534
- font-size: var(--font-size-sm);
535
- color: var(--color-text-primary);
536
- background-color: var(--color-surface-elevated);
537
- border: 1px solid var(--color-border);
538
- border-radius: var(--radius-sm);
539
- box-shadow: 0 2px 0 0 var(--color-border);
540
- }
541
-
542
- :where(abbr[title]) {
543
- text-decoration: underline dotted;
544
- cursor: help;
545
- text-decoration-thickness: 1px;
546
- }
547
-
548
- :where(time) {
549
- font-variant-numeric: tabular-nums;
550
- }
551
-
552
- :where(address) {
553
- font-style: normal;
554
- line-height: var(--font-line-height-relaxed);
555
- margin: 0 0 var(--spacing-4) 0;
556
- }
557
-
558
- :where(details):not(.accordion *) {
559
- margin: 0 0 var(--spacing-2) 0;
560
- border: 1px solid var(--color-border);
561
- border-radius: var(--radius-md);
562
- background-color: var(--color-surface-base);
563
-
564
- &[open] :where(summary) {
565
- border-bottom: 1px solid var(--color-border);
566
- background-color: var(--color-surface-subtle);
567
-
568
- &::after {
569
- transform: rotate(270deg);
570
- }
571
- }
572
-
573
- & > *:not(:where(summary)) {
574
- padding: var(--spacing-4);
575
- }
576
- }
577
-
578
- :where(summary) {
579
- padding: var(--spacing-3) var(--spacing-4);
580
- cursor: pointer;
581
- border-radius: var(--radius-md);
582
- font-weight: var(--font-weight-medium);
583
- user-select: none;
584
- list-style: none;
585
- display: flex;
586
- align-items: center;
587
- justify-content: space-between;
588
- transition: background-color var(--transition-fast);
589
-
590
- &::-webkit-details-marker {
591
- display: none;
592
- }
593
-
594
- &::after {
595
- content: "\u203A";
596
- display: inline-block;
597
- transform: rotate(90deg);
598
- transition: transform var(--transition-fast);
599
- font-size: var(--font-size-xl);
600
- font-weight: var(--font-weight-bold);
601
- color: var(--color-text-secondary);
602
- }
603
-
604
- &:hover {
605
- background-color: var(--color-surface-subtle);
606
- }
607
- }
608
-
609
- /* Dialog styles moved to #generateDialogStyles() */
610
-
611
- `}#oe(){let{gap:e,inputPadding:t,buttonPadding:o,focusRingWidth:r,focusRingOpacity:a,borderWidthThin:i,sectionSpacing:c,buttonMinHeight:s,inputMinHeight:l}=this.options.design,d=t||.75,p=o||1,g=r||3,h=i||1,w=e||1,m=c||2,y=s||44;return`/* Mobile-First Form Styles - Generated from Design Config */
612
- form {
613
- margin: 0;
614
- width: 100%;
615
- }
616
-
617
- fieldset {
618
- margin: 0;
619
- width: 100%;
620
-
621
- /* Unified styling for radio groups and checkbox groups */
622
- &[role="radiogroup"],
623
- &[role="group"] {
624
- display: flex;
625
- flex-direction: column;
626
- gap: var(--spacing-2);
627
- padding: 0;
628
- background-color: transparent;
629
-
630
- label {
631
- display: flex;
632
- align-items: center;
633
- gap: var(--spacing-3);
634
- padding: var(--spacing-1) 0;
635
- cursor: pointer;
636
- min-height: auto;
637
- border: none;
638
- background: none;
639
- font-weight: var(--font-weight-normal);
640
- margin-bottom: 0;
641
-
642
- &:hover {
643
- color: var(--color-primary-700);
644
- }
645
- }
646
-
647
- input[type="checkbox"]{
648
- border-radius: var(--radius-xs);
649
- }
650
-
651
- input[type="radio"],
652
- input[type="checkbox"] {
653
- position: static;
654
- opacity: 1;
655
- width: var(--spacing-5);
656
- height: var(--spacing-5);
657
- min-height: var(--spacing-5);
658
- padding: var(--spacing-2);
659
- margin: 0;
660
- cursor: pointer;
661
- flex-shrink: 0;
662
- accent-color: var(--color-primary-600);
663
-
664
- &:focus-visible {
665
- outline: none;
666
-
667
- box-shadow:
668
- 0 0 0 2px var(--color-primary-500),
669
- 0 0 0 4px color-mix(in srgb,
670
- var(--color-primary-500) 40%,
671
- transparent
672
- );
673
- }
674
-
675
- &:checked {
676
- background-color: var(--color-primary-600);
677
- }
678
-
679
- }
680
- }
681
-
682
- }
683
-
684
-
685
-
686
- /* Nested legend scaling: reduce font-size for deeper sub-forms */
687
- fieldset > legend { font-size: var(--font-size-lg); }
688
- fieldset fieldset > legend { font-size: var(--font-size-base); }
689
- fieldset fieldset fieldset > legend { font-size: var(--font-size-sm); }
690
-
691
- .form-container {
692
- display: grid;
693
- gap: var(--spacing-6);
694
- width: 100%;
695
- }
696
-
697
- .fields {
698
- display: grid;
699
- gap: var(--spacing-4);
700
- }
701
-
702
- label {
703
- display: block;
704
- font-weight: var(--font-weight-medium);
705
- color: var(--color-text-primary);
706
- font-size: var(--font-size-sm);
707
- line-height: var(--font-line-height-normal);
708
- }
709
-
710
- [data-label] {
711
- display: block;
712
- font-weight: var(--font-weight-medium);
713
- color: var(--color-text-primary);
714
- font-size: var(--font-size-sm);
715
- margin-bottom: var(--spacing-2);
716
- }
717
-
718
- [data-open]{
719
- [data-label]{
720
- margin-bottom: 0;
721
- }
722
- }
723
-
724
- .field-description {
725
- font-size: var(--font-size-xs);
726
- color: var(--color-text-secondary);
727
- margin-top: var(--spacing-1);
728
- line-height: var(--font-line-height-relaxed);
729
- }
730
-
731
- input, textarea, select {
732
- &:focus {
733
- outline: none;
734
- }
735
- }
736
-
737
- input, textarea, select {
738
- width: 100%;
739
- min-height: ${l||40}px;
740
- padding: calc(var(--spacing-1) * ${d}) var(--spacing-4);
741
- border: ${h}px solid var(--color-border);
742
- border-radius: var(--radius-md);
743
- font-family: var(--font-family-body);
744
- font-size: var(--font-size-base);
745
- line-height: var(--font-line-height-normal);
746
- background-color: var(--color-input-bg);
747
- color: var(--color-text-primary);
748
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
749
- touch-action: manipulation;
750
- appearance: none;
751
- -webkit-appearance: none;
752
-
753
- &:focus {
754
- border-color: var(--color-primary-500);
755
- background-color: var(--color-surface-base);
756
- }
757
-
758
- &:disabled {
759
- background-color: var(--color-input-disabled-bg);
760
- color: var(--color-input-disabled-text);
761
- border-color: var(--color-border);
762
- cursor: not-allowed;
763
- opacity: 0.6;
764
- }
765
-
766
- &:invalid {
767
- border-color: var(--color-danger-500);
768
-
769
- &:focus {
770
- box-shadow: 0 0 0 ${g}px color-mix(in oklab, var(--color-danger-500) ${Math.round((a||.3)*100)}%, transparent);
771
- }
772
- }
773
- }
774
-
775
- input[type="range"] {
776
- padding: 0;
777
- background: transparent;
778
- min-height: auto;
779
- }
780
-
781
- /* Make range visually match other inputs */
782
- input[type="range"] {
783
- -webkit-appearance: none;
784
- appearance: none;
785
- height: var(--input-min-height, 40px); /* align control height with inputs */
786
- width: 100%;
787
- }
788
-
789
- /* Track and thumb styling - using CSS nesting to reduce repetition */
790
- input[type="range"] {
791
- /* WebKit track */
792
- &::-webkit-slider-runnable-track {
793
- height: var(--range-track-height, 8px);
794
- background: var(--color-input-bg);
795
- border-radius: var(--radius-full);
796
- }
797
-
798
- /* WebKit thumb */
799
- &::-webkit-slider-thumb {
800
- -webkit-appearance: none;
801
- appearance: none;
802
- width: var(--range-thumb-size, 28px);
803
- height: var(--range-thumb-size, 28px);
804
- margin-top: calc((var(--range-track-height, 8px) - var(--range-thumb-size, 28px)) / 2);
805
- background: color-mix(in srgb, var(--color-primary-500) 15%, var(--color-surface-base));
806
- border-radius: 50%;
807
- box-shadow: var(--shadow-sm);
808
- cursor: grab;
809
- border: 1px solid color-mix(in srgb, var(--color-primary-500) 30%, var(--color-border));
810
- }
811
-
812
- /* Mozilla track */
813
- &::-moz-range-track {
814
- height: var(--range-track-height, 8px);
815
- background: var(--color-input-bg);
816
- border-radius: var(--radius-full);
817
- }
818
-
819
- /* Mozilla thumb */
820
- &::-moz-range-thumb {
821
- width: var(--range-thumb-size, 28px);
822
- height: var(--range-thumb-size, 28px);
823
- background: color-mix(in srgb, var(--color-primary-500) 15%, var(--color-surface-base));
824
- border-radius: 50%;
825
- box-shadow: var(--shadow-sm);
826
- border: 1px solid color-mix(in srgb, var(--color-primary-500) 30%, var(--color-border));
827
- transform: translateY(calc((var(--range-track-height, 8px) - var(--range-thumb-size, 28px)) / 2));
828
- }
829
-
830
- /* Hover and focus states for WebKit */
831
- &:hover::-webkit-slider-thumb,
832
- &:focus-visible::-webkit-slider-thumb {
833
- cursor: grabbing;
834
- background: var(--color-primary-500);
835
- box-shadow: 0 4px 12px rgba(0,0,0,0.2);
836
- border-color: var(--color-primary-600);
837
- }
838
-
839
- /* Active state for WebKit */
840
- &:active::-webkit-slider-thumb {
841
- background: var(--color-primary-600);
842
- }
843
-
844
- /* Hover and focus states for Mozilla */
845
- &:hover::-moz-range-thumb,
846
- &:focus-visible::-moz-range-thumb {
847
- background: var(--color-primary-500);
848
- box-shadow: 0 4px 12px rgba(0,0,0,0.2);
849
- border-color: var(--color-primary-600);
850
- cursor: grabbing;
851
- }
852
-
853
- /* Active state for Mozilla */
854
- &:active::-moz-range-thumb {
855
- background: var(--color-primary-600);
856
- }
857
- }
858
-
859
- /* Focus style for container to match input focus */
860
- .range-container:focus-within {
861
- border-color: var(--color-primary-500);
862
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
863
- }
864
-
865
- input[type="range"]:active::-moz-range-thumb {
866
- background: var(--color-primary-600);
867
- }
868
-
869
- input[type="color"] {
870
- -webkit-appearance: none;
871
- padding: 0;
872
- width: 3rem;
873
- height: 3rem;
874
- border-radius: 0.75rem; /* your radius */
875
- overflow: hidden; /* important */
876
- cursor: pointer;
877
-
878
- /* The wrapper */
879
- &::-webkit-color-swatch-wrapper {
880
- padding: 0;
881
- border-radius: inherit;
882
- }
883
-
884
- /* The swatch (the actual color box) */
885
- &::-webkit-color-swatch {
886
- border: none;
887
- border-radius: inherit;
888
- }
889
- }
890
-
891
- /* Button-style checkbox inputs outside of fieldsets */
892
- .checkbox-container input[type="checkbox"] {
893
- appearance: none;
894
- -webkit-appearance: none;
895
- -moz-appearance: none;
896
- position: absolute;
897
- opacity: 0;
898
- width: 0;
899
- height: 0;
900
- margin: 0;
901
- padding: 0;
902
- pointer-events: none;
903
- }
904
-
905
- label:has(input[type="checkbox"]):not(fieldset label):not(label[data-toggle]),
906
- input[type="checkbox"] + label:not(fieldset label):not(label[data-toggle]) {
907
- display: inline-flex;
908
- align-items: center;
909
- justify-content: center;
910
- min-height: calc(${y}px * 0.75);
911
- padding: calc(var(--spacing-1) * ${p*.6}) calc(var(--spacing-4) * 0.85);
912
- border: ${h}px solid var(--color-border);
913
- border-radius: var(--radius-md);
914
- font-family: var(--font-family-body);
915
- font-size: var(--font-size-sm);
916
- font-weight: var(--font-weight-medium);
917
- line-height: 1.2;
918
- cursor: pointer;
919
- transition: all var(--transition-fast);
920
- text-decoration: none;
921
- touch-action: manipulation;
922
- user-select: none;
923
- background-color: transparent;
924
- color: var(--color-text-primary);
925
- margin: 0;
926
- flex: 0 1 auto;
927
- white-space: nowrap;
928
-
929
- &:hover {
930
- background-color: var(--color-surface-subtle);
931
- border-color: var(--color-primary-500);
932
- }
933
- }
934
-
935
- label:has(input[type="checkbox"]:checked):not(fieldset label):not(label[data-toggle]),
936
- input[type="checkbox"]:checked + label:not(fieldset label):not(label[data-toggle]) {
937
- background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
938
- color: var(--color-primary-700);
939
- border-color: var(--color-primary-500);
940
- border-width: 2px;
941
- font-weight: var(--font-weight-semibold);
942
-
943
- &:hover {
944
- background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
945
- border-color: var(--color-primary-600);
946
- }
947
- }
948
-
949
- label:has(input[type="checkbox"]:focus):not(fieldset label):not(label[data-toggle]),
950
- input[type="checkbox"]:focus + label:not(fieldset label):not(label[data-toggle]) {
951
- outline: none;
952
- box-shadow: 0 0 0 ${g}px color-mix(in oklab, var(--color-primary-500) ${Math.round((a||.3)*100)}%, transparent);
953
- }
954
-
955
- label:has(input[type="checkbox"]:disabled):not(fieldset label):not(label[data-toggle]),
956
- input[type="checkbox"]:disabled + label:not(fieldset label):not(label[data-toggle]) {
957
- background-color: var(--color-input-disabled-bg);
958
- color: var(--color-input-disabled-text);
959
- border-color: var(--color-border);
960
- cursor: not-allowed;
961
- opacity: 0.6;
962
- }
963
-
964
- label:has(input[type="checkbox"]:checked:disabled):not(fieldset label):not(label[data-toggle]),
965
- input[type="checkbox"]:checked:disabled + label:not(fieldset label):not(label[data-toggle]) {
966
- background-color: var(--color-input-disabled-bg);
967
- color: var(--color-input-disabled-text);
968
- border-color: var(--color-border);
969
- }
970
-
971
- /* Keep default checkbox/radio for inputs NOT in special containers */
972
- input[type="checkbox"]:not(fieldset input[type="checkbox"]):not(.checkbox-container input[type="checkbox"]),
973
- input[type="radio"]:not(fieldset input[type="radio"]) {
974
- width: var(--spacing-5);
975
- height: var(--spacing-5);
976
- min-height: var(--spacing-5);
977
- margin-right: var(--spacing-2);
978
- cursor: pointer;
979
- position: static;
980
- opacity: 1;
981
- appearance: auto;
982
- -webkit-appearance: auto;
983
-
984
- &:disabled {
985
- cursor: not-allowed;
986
- }
987
- }
988
-
989
- /* Button-style radio and checkbox groups with .buttons class */
990
- fieldset[role="radiogroup"].buttons,
991
- fieldset[role="group"].buttons {
992
- flex-direction: row;
993
- flex-wrap: wrap;
994
- gap: var(--spacing-3);
995
-
996
- input[type="radio"],
997
- input[type="checkbox"] {
998
- appearance: none;
999
- -webkit-appearance: none;
1000
- -moz-appearance: none;
1001
- position: absolute;
1002
- opacity: 0;
1003
- width: 0;
1004
- height: 0;
1005
- margin: 0;
1006
- padding: 0;
1007
- pointer-events: none;
1008
- }
1009
-
1010
- label {
1011
- display: inline-flex;
1012
- align-items: center;
1013
- justify-content: center;
1014
- min-height: calc(${y}px * 0.75);
1015
- padding: calc(var(--spacing-1) * ${p*.6}) calc(var(--spacing-4) * 0.85);
1016
- border: 2px solid var(--color-border);
1017
- border-radius: var(--radius-md);
1018
- font-family: var(--font-family-body);
1019
- font-size: var(--font-size-sm);
1020
- font-weight: var(--font-weight-medium);
1021
- line-height: 1.2;
1022
- cursor: pointer;
1023
- transition: all var(--transition-fast);
1024
- text-decoration: none;
1025
- touch-action: manipulation;
1026
- user-select: none;
1027
- background-color: transparent;
1028
- color: var(--color-text-primary);
1029
- margin: 0;
1030
- flex: 0 1 auto;
1031
- white-space: nowrap;
1032
-
1033
- &:hover {
1034
- background-color: var(--color-surface-subtle);
1035
- border-color: var(--color-primary-500);
1036
- color: var(--color-text-primary);
1037
- }
1038
-
1039
- &:has([disabled]){
1040
- pointer-events: none;
1041
- }
1042
- }
1043
-
1044
- label:has(input[type="radio"]:checked),
1045
- label:has(input[type="checkbox"]:checked) {
1046
- background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
1047
- border-color: var(--color-primary-500);
1048
- border-width: 2px;
1049
- font-weight: var(--font-weight-semibold);
1050
-
1051
- &:hover {
1052
- background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
1053
- border-color: var(--color-primary-600);
1054
- }
1055
- }
1056
-
1057
- label:has(input[type="radio"]:focus),
1058
- label:has(input[type="checkbox"]:focus) {
1059
- outline: none;
1060
- box-shadow: 0 0 0 ${g}px color-mix(in oklab, var(--color-primary-500) ${Math.round((a||.3)*100)}%, transparent);
1061
- }
1062
-
1063
- label:has(input[type="radio"]:disabled),
1064
- label:has(input[type="checkbox"]:disabled) {
1065
- background-color: var(--color-input-disabled-bg);
1066
- color: var(--color-input-disabled-text);
1067
- border-color: var(--color-border);
1068
- cursor: not-allowed;
1069
- opacity: 0.6;
1070
- }
1071
-
1072
- label:has(input[type="radio"]:checked:disabled),
1073
- label:has(input[type="checkbox"]:checked:disabled) {
1074
- background-color: var(--color-input-disabled-bg);
1075
- color: var(--color-input-disabled-text);
1076
- border-color: var(--color-border);
1077
- }
1078
- }
1079
-
1080
- /* Toggle switches - enhanced checkboxes with data-toggle attribute */
1081
- label[data-toggle] {
1082
- display: inline-flex;
1083
- align-items: normal;
1084
- gap: var(--spacing-3);
1085
- cursor: pointer;
1086
- user-select: none;
1087
- padding: 0;
1088
- background: transparent;
1089
- border: none;
1090
- min-height: auto;
1091
- font-weight: var(--font-weight-normal);
1092
-
1093
- /* Hide the original checkbox in toggle switches */
1094
- input[type="checkbox"] {
1095
- display: none;
1096
- }
1097
-
1098
- /* Toggle switch container */
1099
- .toggle-switch {
1100
- position: relative;
1101
- display: inline-block;
1102
- width: 44px;
1103
- height: 24px;
1104
- background-color: var(--color-gray-300);
1105
- border-radius: var(--radius-full);
1106
- transition: background-color 200ms ease;
1107
- cursor: pointer;
1108
- flex-shrink: 0;
1109
- }
1110
-
1111
- /* Toggle switch knob */
1112
- .toggle-knob {
1113
- position: absolute;
1114
- top: 2px;
1115
- left: 2px;
1116
- width: 20px;
1117
- height: 20px;
1118
- background-color: #ffffff;
1119
- border-radius: 50%;
1120
- transition: left 200ms ease;
1121
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
1122
- }
1123
-
1124
- /* Icons in toggle knob (opt-in via .with-icons class) */
1125
- &.with-icons .toggle-knob::before {
1126
- content: "\u2715";
1127
- position: absolute;
1128
- inset: 0;
1129
- display: flex;
1130
- align-items: center;
1131
- justify-content: center;
1132
- font-size: 12px;
1133
- font-weight: bold;
1134
- color: var(--color-gray-600);
1135
- transition: opacity 200ms ease;
1136
- }
1137
-
1138
- &.with-icons:has(input[type="checkbox"]:checked) .toggle-knob::before {
1139
- content: "\u2713";
1140
- color: var(--color-primary-600);
1141
- }
1142
-
1143
- /* Toggle switch when checked - using :has() selector */
1144
- &:has(input[type="checkbox"]:checked) .toggle-switch {
1145
- background-color: var(--color-primary-fill);
1146
- }
1147
-
1148
-
1149
- /* Toggle knob when checked - always moves to the right */
1150
- &:has(input[type="checkbox"]:checked) .toggle-knob {
1151
- left: 22px;
1152
- }
1153
-
1154
- /* Focus state for toggle switch */
1155
- &:has(input[type="checkbox"]:focus) .toggle-switch {
1156
- outline: 2px solid var(--color-primary-500);
1157
- outline-offset: 2px;
1158
- }
1159
-
1160
- /* Focus visible state when label is focused via keyboard */
1161
- &:focus-visible .toggle-switch {
1162
- outline: 2px solid var(--color-primary-500);
1163
- outline-offset: 2px;
1164
- }
1165
-
1166
- /* Remove default outline on label itself */
1167
- &:focus {
1168
- outline: none;
1169
- }
1170
-
1171
- /* Disabled state */
1172
- &:has(input[type="checkbox"]:disabled) {
1173
- cursor: not-allowed;
1174
- opacity: 0.6;
1175
-
1176
- .toggle-switch {
1177
- opacity: 0.5;
1178
- cursor: not-allowed;
1179
- }
1180
- }
1181
- }
1182
-
1183
- input[type="file"] {
1184
- padding: var(--spacing-2) var(--spacing-4);
1185
- cursor: pointer;
1186
- }
1187
-
1188
- /* Textareas */
1189
- textarea {
1190
- min-height: calc(var(--spacing-4) * 5);
1191
- padding: var(--spacing-3) var(--spacing-4);
1192
- resize: vertical;
1193
- line-height: var(--font-line-height-relaxed);
1194
- }
1195
-
1196
- /* Select dropdowns */
1197
- select {
1198
- cursor: pointer;
1199
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
1200
- background-position: right var(--spacing-2) center;
1201
- background-repeat: no-repeat;
1202
- background-size: 1.5em 1.5em;
1203
- padding-right: var(--spacing-8);
1204
- }
1205
-
1206
- /* Button styling */
1207
- button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
1208
- display: inline-flex;
1209
- gap: var(--spacing-1);
1210
- align-items: center;
1211
- justify-content: center;
1212
- min-height: ${y}px;
1213
- padding: calc(var(--spacing-1) * ${p}) var(--spacing-6);
1214
- border: ${h}px solid transparent;
1215
- border-radius: var(--radius-md);
1216
- font-family: var(--font-family-body);
1217
- font-size: var(--font-size-base);
1218
- font-weight: var(--font-weight-medium);
1219
- line-height: 1;
1220
- cursor: pointer;
1221
- transition: all var(--transition-fast);
1222
- text-decoration: none;
1223
- touch-action: manipulation;
1224
- user-select: none;
1225
- background-color: var(--color-surface-base);
1226
- color: var(--color-text-primary);
1227
- border-color: var(--color-border);
1228
-
1229
- /* Only apply generic hover to non-variant buttons */
1230
- &:hover:not(.btn-primary):not(.btn-secondary):not(.btn-outline) {
1231
- background-color: var(--color-surface-elevated);
1232
- }
1233
-
1234
- &:focus {
1235
- outline: none;
1236
- box-shadow: 0 0 0 ${g}px color-mix(in oklab, var(--color-primary-500) ${Math.round((a||.3)*100)}%, transparent);
1237
- }
1238
-
1239
- &:disabled {
1240
- background-color: var(--color-input-disabled-bg);
1241
- color: var(--color-input-disabled-text);
1242
- border-color: var(--color-input-disabled-bg);
1243
- cursor: not-allowed;
1244
- opacity: 0.6;
1245
- }
1246
- }
1247
-
1248
- .btn-primary {
1249
- background-color: var(--color-primary-fill);
1250
- color: white;
1251
- border-color: var(--color-primary-fill);
1252
-
1253
- &:hover {
1254
- background-color: color-mix(in oklab, var(--color-primary-fill) 90%, black 10%);
1255
- border-color: color-mix(in oklab, var(--color-primary-fill) 90%, black 10%);
1256
- color: white;
1257
- }
1258
-
1259
- &:active {
1260
- background-color: color-mix(in oklab, var(--color-primary-fill) 80%, black 20%);
1261
- border-color: color-mix(in oklab, var(--color-primary-fill) 80%, black 20%);
1262
- color: white;
1263
- }
1264
-
1265
- &:focus {
1266
- box-shadow: 0 0 0 ${g}px color-mix(in oklab, var(--color-primary-500) ${Math.round((a||.3)*100)}%, transparent);
1267
- }
1268
-
1269
- &:disabled {
1270
- background-color: var(--color-input-disabled-bg);
1271
- color: var(--color-input-disabled-text);
1272
- border-color: var(--color-input-disabled-bg);
1273
- }
1274
- }
1275
-
1276
- .btn-secondary {
1277
- background-color: var(--color-surface-base);
1278
- color: var(--color-text-primary);
1279
- border-color: var(--color-border);
1280
-
1281
- &:hover {
1282
- background-color: var(--color-surface-elevated);
1283
- }
1284
- }
1285
-
1286
- .btn-outline {
1287
- background-color: transparent;
1288
- color: var(--color-primary-500);
1289
- border-color: var(--color-primary-500);
1290
-
1291
- &:hover {
1292
- background-color: var(--color-primary-500);
1293
- color: var(--color-primary-contrast, #ffffff);
1294
- border-color: var(--color-primary-500);
1295
-
1296
- pds-icon {
1297
- color: var(--color-primary-contrast, #ffffff);
1298
- }
1299
- }
1300
-
1301
- &:active {
1302
- background-color: color-mix(in oklab, var(--color-primary-500) 80%, black 20%);
1303
- border-color: color-mix(in oklab, var(--color-primary-500) 80%, black 20%);
1304
- color: var(--color-primary-contrast, #ffffff);
1305
-
1306
- pds-icon {
1307
- color: var(--color-primary-contrast, #ffffff);
1308
- }
1309
- }
1310
-
1311
- &:disabled {
1312
- background-color: transparent;
1313
- color: var(--color-input-disabled-text);
1314
- border-color: var(--color-input-disabled-bg);
1315
- }
1316
- }
1317
-
1318
- .btn-sm {
1319
- padding: var(--spacing-2) var(--spacing-4);
1320
- font-size: var(--font-size-sm);
1321
- min-height: calc(${y}px * 0.8);
1322
- }
1323
-
1324
- .btn-xs {
1325
- padding: var(--spacing-1) var(--spacing-2);
1326
- font-size: var(--font-size-xs);
1327
- min-height: calc(${y}px * 0.6);
1328
- }
1329
-
1330
-
1331
- .btn-lg {
1332
- padding: var(--spacing-4) var(--spacing-8);
1333
- font-size: var(--font-size-lg);
1334
- min-height: calc(${y}px * 1.2);
1335
- }
1336
-
1337
- /* Working/loading state for buttons */
1338
- button.btn-working,
1339
- a.btn-working {
1340
- cursor: wait;
1341
- pointer-events: none;
1342
- opacity: 0.6;
1343
-
1344
- pds-icon:first-child {
1345
- animation: pds-spin 0.8s linear infinite;
1346
- }
1347
- }
1348
-
1349
- @keyframes pds-spin {
1350
- to { transform: rotate(360deg); }
1351
- }
1352
-
1353
- /* Skeleton loading animation */
1354
- .skeleton {
1355
- background: linear-gradient(
1356
- 90deg,
1357
- color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-primary) 8%) 0%,
1358
- color-mix(in oklab, var(--color-surface-base) 85%, var(--color-text-primary) 15%) 50%,
1359
- color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-primary) 8%) 100%
1360
- );
1361
- background-size: 200% 100%;
1362
- animation: pds-skeleton 1.5s ease-in-out infinite;
1363
- border-radius: var(--radius-sm);
1364
-
1365
- &::before {
1366
- content: '\\00a0';
1367
- }
1368
- }
1369
-
1370
- @keyframes pds-skeleton {
1371
- 0% { background-position: 200% 0; }
1372
- 100% { background-position: -200% 0; }
1373
- }
1374
-
1375
- /* Form utility classes */
1376
- .range-container {
1377
- display: flex;
1378
- align-items: center;
1379
- gap: var(--spacing-3);
1380
- width: 100%;
1381
- background: var(--color-input-bg);
1382
- border: 1px solid var(--color-border);
1383
- border-radius: var(--radius-md);
1384
- min-height: var(--input-min-height, 40px);
1385
- position: relative;
1386
-
1387
- input[type="range"] {
1388
- border: none;
1389
- }
1390
- }
1391
-
1392
- .range-bubble {
1393
- position: absolute;
1394
- top: calc(-1 * (var(--range-thumb-size, 28px) + var(--spacing-2)));
1395
- transform: translateX(-50%);
1396
- min-width: calc(var(--range-thumb-size, 28px) * 0.8);
1397
- padding: var(--spacing-1) var(--spacing-2);
1398
- border-radius: var(--radius-md);
1399
- background: var(--color-surface-base);
1400
- color: var(--color-text-primary);
1401
- text-align: center;
1402
- font-size: var(--font-size-sm);
1403
- box-shadow: var(--shadow-md);
1404
- opacity: 0;
1405
- pointer-events: none;
1406
- transition: opacity 150ms ease, transform 150ms ease;
1407
-
1408
- &.visible {
1409
- opacity: 1;
1410
- }
1411
- }
1412
-
1413
- /* Anchor bubble to the thumb position using left (set by enhancer)
1414
- and center with translateX(-50%). */
1415
-
1416
- /* Array field styling */
1417
- .array-list {
1418
- display: flex;
1419
- flex-direction: column;
1420
- gap: var(--spacing-4);
1421
- margin-bottom: var(--spacing-4);
1422
- }
1423
-
1424
- .array-item {
1425
- position: relative;
1426
- padding: var(--spacing-4);
1427
- border: ${h}px solid var(--color-border);
1428
- border-radius: var(--radius-md);
1429
- background-color: var(--color-surface-base);
1430
-
1431
- .array-controls {
1432
- padding-top: var(--spacing-3);
1433
- border-top: ${h}px solid var(--color-border);
1434
- margin-top: var(--spacing-4);
1435
- }
1436
- }
1437
-
1438
- .array-controls {
1439
- display: flex;
1440
- gap: var(--spacing-2);
1441
- margin-top: var(--spacing-3);
1442
- flex-wrap: wrap;
1443
-
1444
- button {
1445
- padding: var(--spacing-2) var(--spacing-3);
1446
- font-size: var(--font-size-sm);
1447
- min-height: auto;
1448
- }
1449
- }
1450
-
1451
- .range-value {
1452
- min-width: var(--spacing-16);
1453
- text-align: right;
1454
- font-weight: var(--font-weight-medium);
1455
- font-size: var(--font-size-sm);
1456
- color: var(--color-text-primary);
1457
- }
1458
-
1459
- .checkbox-container {
1460
- display: flex;
1461
- flex-direction: row;
1462
- align-items: center;
1463
- gap: var(--spacing-2);
1464
- flex-wrap: wrap;
1465
-
1466
- input[type="checkbox"],
1467
- input[type="radio"] {
1468
- position: absolute;
1469
- opacity: 0;
1470
- }
1471
- }
1472
-
1473
- `}#ae(){let{layout:e={}}=this.options.design,t=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280};return`/* Table Styles - Mobile First */
1474
-
1475
- table {
1476
- width: 100%;
1477
- border-collapse: collapse;
1478
- margin: 0 0 var(--spacing-6) 0;
1479
- background-color: var(--color-surface-base);
1480
- border-radius: var(--radius-md);
1481
- overflow: hidden;
1482
- font-size: var(--font-size-sm);
1483
-
1484
- @media (min-width: ${t.sm}px) {
1485
- font-size: var(--font-size-base);
1486
- }
1487
- }
1488
-
1489
- .table-responsive {
1490
- @media (max-width: ${t.sm-1}px) {
1491
- overflow-x: auto;
1492
- -webkit-overflow-scrolling: touch;
1493
- margin: 0 0 var(--spacing-6) 0;
1494
-
1495
- table {
1496
- min-width: 600px;
1497
- margin: 0;
1498
- }
1499
- }
1500
- }
1501
-
1502
- thead {
1503
- background-color: var(--color-surface-subtle);
1504
- }
1505
-
1506
- th {
1507
- padding: var(--spacing-3) var(--spacing-4);
1508
- text-align: left;
1509
- font-weight: var(--font-weight-semibold);
1510
- color: var(--color-text-primary);
1511
- border-bottom: 2px solid var(--color-border);
1512
- }
1513
-
1514
- td {
1515
- padding: var(--spacing-3) var(--spacing-4);
1516
- color: var(--color-text-secondary);
1517
- border-bottom: 1px solid var(--color-border);
1518
- }
1519
-
1520
- tbody {
1521
- tr {
1522
- transition: background-color var(--transition-fast);
1523
-
1524
- &:hover {
1525
- background-color: var(--color-surface-subtle);
1526
- }
1527
-
1528
- &:last-child td {
1529
- border-bottom: none;
1530
- }
1531
- }
1532
- }
1533
-
1534
- .table-striped {
1535
- tbody tr:nth-child(even) {
1536
- background-color: var(--color-surface-subtle);
1537
- }
1538
- }
1539
-
1540
- .table-bordered {
1541
- border: 1px solid var(--color-border);
1542
-
1543
- th, td {
1544
- border: 1px solid var(--color-border);
1545
- }
1546
- }
1547
-
1548
- .table-compact {
1549
- th, td {
1550
- padding: var(--spacing-2) var(--spacing-3);
1551
- }
1552
- }
1553
-
1554
- `}#ne(){return`/* Alert/Notification Styles */
1555
-
1556
- /* Alias: .semantic-message shares alert base styles */
1557
- .alert, .semantic-message {
1558
- padding: var(--spacing-4);
1559
- border-radius: var(--radius-md);
1560
- margin: 0 0 var(--spacing-4) 0;
1561
- border-left: 4px solid;
1562
- display: flex;
1563
- align-items: flex-start;
1564
- gap: var(--spacing-3);
1565
- font-size: var(--font-size-sm);
1566
- line-height: var(--font-line-height-relaxed);
1567
-
1568
- & > *:last-child {
1569
- margin-bottom: 0;
1570
- }
1571
- }
1572
- /* Variants: success/info/warning/danger mapped to tokens */
1573
- .alert-success, .semantic-message.success {
1574
- background-color: var(--color-success-50);
1575
- border-color: var(--color-success-600);
1576
- color: var(--color-success-900);
1577
- }
1578
- .alert-info, .semantic-message.info {
1579
- background-color: var(--color-info-50);
1580
- border-color: var(--color-info-600);
1581
- color: var(--color-info-900);
1582
- }
1583
- .alert-warning, .semantic-message.warning {
1584
- background-color: var(--color-warning-50);
1585
- border-color: var(--color-warning-600);
1586
- color: var(--color-warning-900);
1587
- }
1588
- .alert-danger,
1589
- .alert-error,
1590
- .semantic-message.danger {
1591
- background-color: var(--color-danger-50);
1592
- border-color: var(--color-danger-600);
1593
- color: var(--color-danger-900);
1594
- }
1595
-
1596
- /* Semantic-message content defaults */
1597
- .semantic-message strong { display: block; }
1598
- .semantic-message p { margin: 0; font-size: var(--font-size-sm); }
1599
-
1600
- .alert-title {
1601
- font-weight: var(--font-weight-semibold);
1602
- margin: 0 0 var(--spacing-2) 0;
1603
- font-size: var(--font-size-base);
1604
- }
1605
-
1606
- .alert-icon {
1607
- flex-shrink: 0;
1608
- display: flex;
1609
- align-items: center;
1610
- justify-content: center;
1611
-
1612
- pds-icon {
1613
- flex-shrink: 0;
1614
- }
1615
- }
1616
-
1617
- .alert-dismissible {
1618
- padding-right: var(--spacing-12);
1619
- position: relative;
1620
- }
1621
-
1622
- .alert-close {
1623
- position: absolute;
1624
- top: var(--spacing-3);
1625
- right: var(--spacing-3);
1626
- background: none;
1627
- border: none;
1628
- font-size: var(--font-size-xl);
1629
- line-height: 1;
1630
- opacity: 0.6;
1631
- cursor: pointer;
1632
- padding: var(--spacing-1);
1633
- transition: opacity var(--transition-fast);
1634
-
1635
- &:hover {
1636
- opacity: 1;
1637
- }
1638
- }
1639
-
1640
- `}#ie(){return`/* Accordion (details/summary) */
1641
-
1642
- .accordion {
1643
- --_acc-radius: var(--radius-md);
1644
- --_acc-border: 1px solid var(--color-border);
1645
- --_acc-bg: var(--color-surface-base);
1646
-
1647
- details {
1648
- border: var(--_acc-border);
1649
- border-radius: var(--_acc-radius);
1650
- background: var(--_acc-bg);
1651
- margin: 0 0 var(--spacing-3) 0;
1652
-
1653
- &[open] {
1654
- & > summary::after {
1655
- transform: rotate(45deg);
1656
- }
1657
-
1658
- &::details-content {
1659
- block-size: auto;
1660
- }
1661
- }
1662
-
1663
- /* Modern approach: animate block-size with ::details-content */
1664
- &::details-content {
1665
- block-size: 0;
1666
- overflow: hidden;
1667
- transition: block-size var(--transition-normal) ease, content-visibility var(--transition-normal);
1668
- transition-behavior: allow-discrete;
1669
- }
1670
-
1671
- /* Content padding (works for both approaches) */
1672
- & > :not(summary) > * {
1673
- padding-inline: var(--spacing-4);
1674
- padding-block: var(--spacing-3);
1675
- }
1676
- }
1677
-
1678
- summary {
1679
- cursor: pointer;
1680
- padding: var(--spacing-3) var(--spacing-4);
1681
- list-style: none;
1682
- display: flex;
1683
- align-items: center;
1684
- gap: var(--spacing-2);
1685
- border-radius: var(--radius-sm);
1686
- transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
1687
-
1688
- &::-webkit-details-marker {
1689
- display: none;
1690
- }
1691
-
1692
- &:hover {
1693
- background-color: var(--color-surface-subtle);
1694
- }
1695
-
1696
- &:focus {
1697
- outline: none;
1698
- }
1699
-
1700
- &:focus-visible {
1701
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 30%, transparent);
1702
- }
1703
-
1704
- /* Chevron indicator */
1705
- &::after {
1706
- content: "";
1707
- margin-inline-start: auto;
1708
- inline-size: 0.7em;
1709
- block-size: 0.7em;
1710
- border-inline-end: 2px solid currentColor;
1711
- border-block-end: 2px solid currentColor;
1712
- transform: rotate(-45deg);
1713
- transition: transform var(--transition-normal);
1714
- }
1715
- }
1716
- }
1717
-
1718
- /* Fallback: grid trick for browsers without ::details-content support */
1719
- @supports not selector(::details-content) {
1720
- .accordion details {
1721
- & > :not(summary) {
1722
- display: grid;
1723
- grid-template-rows: 0fr;
1724
- transition: grid-template-rows var(--transition-normal) ease;
1725
- overflow: hidden;
1726
-
1727
- & > * {
1728
- min-block-size: 0;
1729
- }
1730
- }
1731
-
1732
- &[open] > :not(summary) {
1733
- grid-template-rows: 1fr;
1734
- }
1735
- }
1736
- }
1737
- `}#se(){return`/* Badge/Pill Styles */
1738
-
1739
- .badge {
1740
- display: inline-flex;
1741
- align-items: center;
1742
- justify-content: center;
1743
- padding: var(--spacing-1) var(--spacing-2);
1744
- font-size: var(--font-size-xs);
1745
- font-weight: var(--font-weight-semibold);
1746
- line-height: 1;
1747
- border-radius: var(--radius-full);
1748
- white-space: nowrap;
1749
- vertical-align: middle;
1750
- background-color: var(--color-gray-200);
1751
- color: var(--color-gray-800);
1752
- }
1753
-
1754
- .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
1755
- .badge-primary { background-color: var(--color-primary-600); }
1756
- .badge-secondary { background-color: var(--color-secondary-600); }
1757
- .badge-success { background-color: var(--color-success-600); }
1758
- .badge-info { background-color: var(--color-info-600); }
1759
- .badge-warning { background-color: var(--color-warning-600); }
1760
- .badge-danger { background-color: var(--color-danger-600); }
1761
-
1762
- .badge-outline {
1763
- background-color: transparent;
1764
- border: 1px solid currentColor;
1765
- &.badge-primary { color: var(--color-text-primary); }
1766
- &.badge-secondary { color: var(--color-secondary-600); }
1767
- &.badge-success { color: var(--color-success-600); }
1768
- &.badge-info { color: var(--color-info-600); }
1769
- &.badge-warning { color: var(--color-warning-600); }
1770
- &.badge-danger { color: var(--color-danger-600); }
1771
- }
1772
-
1773
- .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }
1774
- .badge-lg { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
1775
- .pill { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); }
1776
-
1777
- `}#ce(){let{layout:e={},behavior:t={}}=this.options.design;return`/* ============================================================================
1778
- Dialog Primitive
1779
- Native <dialog> element with PDS integration
1780
- ============================================================================ */
1781
-
1782
- /* Dialog base styles */
1783
- dialog {
1784
- position: fixed;
1785
- inset: 0;
1786
- max-width: min(600px, calc(100vw - var(--spacing-8)));
1787
- max-height: calc(100vh - var(--spacing-8));
1788
- margin: auto;
1789
- padding: 0;
1790
- border: none;
1791
- border-radius: var(--radius-lg);
1792
-
1793
- /* Surface styling - elevated overlay */
1794
- background-color: var(--surface-overlay-bg);
1795
- color: var(--surface-overlay-text);
1796
- box-shadow: 0 8px 32px var(--surface-overlay-shadow);
1797
-
1798
- /* Smooth transitions */
1799
- opacity: 0;
1800
- scale: 0.95;
1801
- transition:
1802
- opacity 0.2s ease,
1803
- scale 0.2s ease,
1804
- overlay 0.2s ease allow-discrete,
1805
- display 0.2s ease allow-discrete;
1806
-
1807
-
1808
- }
1809
-
1810
- /* Open state */
1811
- dialog[open] {
1812
- opacity: 1;
1813
- scale: 1;
1814
- }
1815
-
1816
- /* Starting style for smooth open animation */
1817
- @starting-style {
1818
- dialog[open] {
1819
- opacity: 0;
1820
- scale: 0.95;
1821
- }
1822
- }
1823
-
1824
- /* Backdrop styling */
1825
- dialog::backdrop {
1826
- background: var(--backdrop-bg);
1827
- backdrop-filter: var(--backdrop-filter);
1828
- opacity: 0;
1829
- transition:
1830
- opacity 0.2s ease,
1831
- overlay 0.2s ease allow-discrete,
1832
- display 0.2s ease allow-discrete;
1833
- }
1834
-
1835
- dialog[open]::backdrop {
1836
- opacity: var(--backdrop-opacity, 1);
1837
- }
1838
-
1839
- @starting-style {
1840
- dialog[open]::backdrop {
1841
- opacity: 0;
1842
- }
1843
- }
1844
-
1845
- /* Dialog - constrain max height to 90vh, support custom maxHeight via CSS variable */
1846
- dialog {
1847
- max-height: var(--dialog-max-height, 90vh);
1848
- display: flex;
1849
- flex-direction: column;
1850
- overflow: hidden; /* Prevent dialog itself from scrolling - let .dialog-body handle it */
1851
- }
1852
-
1853
- /* Form structure - use flexbox instead of contents */
1854
- dialog form {
1855
- display: flex;
1856
- flex-direction: column;
1857
- flex: 1;
1858
- min-height: 0; /* Allow flex child to shrink */
1859
- margin: 0;
1860
- }
1861
-
1862
- /* Dialog fields - to open pds-form subforms */
1863
- .dialog-field {
1864
- margin-top: var(--spacing-3);
1865
- }
1866
-
1867
- /* Dialog header */
1868
- dialog {
1869
- header,
1870
- form > header {
1871
- display: flex;
1872
- align-items: center;
1873
- justify-content: space-between;
1874
- gap: var(--spacing-4);
1875
- padding: var(--spacing-6);
1876
- border-bottom: 1px solid var(--surface-overlay-border);
1877
- flex-shrink: 0;
1878
-
1879
- h2,
1880
- h3 {
1881
- margin: 0;
1882
- font-size: var(--font-size-lg);
1883
- font-weight: var(--font-weight-semibold);
1884
- color: var(--surface-overlay-text);
1885
- flex: 1;
1886
- }
1887
-
1888
- /* Close button in header */
1889
- button[value="cancel"],
1890
- .dialog-close {
1891
- background: none;
1892
- border: none;
1893
- padding: var(--spacing-2);
1894
- border-radius: var(--radius-sm);
1895
- cursor: pointer;
1896
- color: var(--surface-overlay-icon);
1897
- transition: background-color var(--transition-fast);
1898
- display: inline-flex;
1899
- align-items: center;
1900
- justify-content: center;
1901
-
1902
- &:hover {
1903
- background-color: var(--color-surface-subtle);
1904
- }
1905
-
1906
- &:focus-visible {
1907
- outline: 2px solid var(--color-focus-ring);
1908
- outline-offset: 2px;
1909
- }
1910
- }
1911
- }
1912
-
1913
- /* Dialog body - scrollable content */
1914
- article,
1915
- form > article,
1916
- .dialog-body {
1917
- flex: 1 1 auto;
1918
- min-height: 0; /* Critical: allow flex child to shrink and scroll */
1919
- padding: var(--spacing-3) var(--spacing-6);
1920
- overflow-y: auto;
1921
- overflow-x: hidden;
1922
- }
1923
-
1924
- /* Dialog footer - actions */
1925
- footer,
1926
- form > footer {
1927
- display: flex;
1928
- flex-direction: row;
1929
- gap: var(--spacing-3);
1930
- justify-content: flex-end;
1931
- align-items: center;
1932
- padding: var(--spacing-6);
1933
- border-top: 1px solid var(--surface-overlay-border);
1934
- flex-shrink: 0;
1935
- }
1936
- }
1937
-
1938
- /* Dialog size modifiers */
1939
- dialog.dialog-sm { max-width: min(400px, calc(100vw - var(--spacing-8))); }
1940
- dialog.dialog-lg { max-width: min(800px, calc(100vw - var(--spacing-8))); }
1941
- dialog.dialog-xl { max-width: min(1200px, calc(100vw - var(--spacing-8))); }
1942
- dialog.dialog-full { max-width: calc(100vw - var(--spacing-8)); max-height: calc(100vh - var(--spacing-8)); }
1943
-
1944
- /* Mobile responsiveness - maximize on mobile */
1945
- @media (max-width: ${(e.breakpoints||{sm:640,md:768,lg:1024,xl:1280}).sm-1}px) {
1946
- dialog {
1947
- max-width: 100vw;
1948
- max-height: 100vh;
1949
- --dialog-max-height: 100vh; /* Override custom maxHeight on mobile */
1950
- border-radius: 0;
1951
- top: 50%;
1952
- transform: translateY(-50%);
1953
- margin: 0;
1954
- }
1955
- dialog header, dialog form > header, dialog article, dialog form > article, dialog footer, dialog form > footer { padding: var(--spacing-4); }
1956
- }
1957
-
1958
- /* Reduced motion support */
1959
- @media (prefers-reduced-motion: reduce) {
1960
- dialog, dialog::backdrop { transition-duration: 0.01s !important; }
1961
- }
1962
-
1963
- `}#le(){let{layout:e={}}=this.options.design;return`/* Tab Strip Component */
1964
-
1965
- /* Tab navigation */
1966
-
1967
- pds-tabstrip {
1968
- margin-top: var(--spacing-6);
1969
-
1970
- & > nav {
1971
- display: flex;
1972
- gap: var(--spacing-1);
1973
- border-bottom: 2px solid var(--color-border);
1974
- margin-bottom: var(--spacing-6);
1975
- position: relative;
1976
- overflow-x: auto;
1977
- overflow-y: hidden;
1978
- scrollbar-width: none; /* Firefox */
1979
- -ms-overflow-style: none; /* IE/Edge */
1980
-
1981
- &::-webkit-scrollbar {
1982
- display: none; /* Chrome/Safari */
1983
- }
1984
-
1985
- /* Tab links */
1986
- & > a {
1987
- position: relative;
1988
- display: inline-flex;
1989
- align-items: center;
1990
- gap: var(--spacing-2);
1991
- padding: var(--spacing-3) var(--spacing-4);
1992
- font-family: var(--font-family-body);
1993
- font-size: var(--font-size-base);
1994
- font-weight: var(--font-weight-medium);
1995
- color: var(--color-text-secondary);
1996
- text-decoration: none;
1997
- white-space: nowrap;
1998
- border: none;
1999
- background: transparent;
2000
- cursor: pointer;
2001
- transition: color var(--transition-fast);
2002
- border-bottom: 2px solid transparent;
2003
- margin-bottom: -2px; /* Overlap the nav border */
2004
-
2005
- &:hover {
2006
- color: var(--color-text-primary);
2007
- background-color: var(--color-surface-hover);
2008
- }
2009
-
2010
- &:focus-visible {
2011
- outline: var(--focus-ring-width, 2px) solid var(--color-primary-500);
2012
- outline-offset: -2px;
2013
- border-radius: var(--radius-sm);
2014
- z-index: 1;
2015
- }
2016
-
2017
- /* Active tab */
2018
- &[aria-current="page"] {
2019
- color: var(--color-primary-600);
2020
- font-weight: var(--font-weight-semibold);
2021
- border-bottom-color: var(--color-primary-600);
2022
-
2023
- &:hover {
2024
- color: var(--color-primary-700);
2025
- border-bottom-color: var(--color-primary-700);
2026
- background-color: var(--color-primary-50);
2027
- }
2028
- }
2029
- }
2030
- }
2031
-
2032
- /* Tab panel */
2033
- & > pds-tabpanel {
2034
- display: block;
2035
- margin-top: var(--spacing-4);
2036
-
2037
- &[data-tabpanel] {
2038
- animation: tabFadeIn var(--transition-normal) ease-out;
2039
- padding: var(--spacing-4) 0;
2040
-
2041
- &[hidden] {
2042
- display: none;
2043
- }
2044
- }
2045
- }
2046
- }
2047
-
2048
- @keyframes tabFadeIn {
2049
- from { opacity: 0; transform: translateY(8px); }
2050
- to { opacity: 1; transform: translateY(0); }
2051
- }
2052
-
2053
- /* Mobile responsive */
2054
- @media (max-width: ${(e.breakpoints||{sm:640,md:768,lg:1024,xl:1280}).sm-1}px) {
2055
- pds-tabstrip > nav { gap: var(--spacing-1); }
2056
- pds-tabstrip > nav > a { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
2057
- pds-tabstrip > pds-tabpanel[data-tabpanel] { padding: var(--spacing-3) 0; }
2058
- }
2059
-
2060
- `}#de(){return`/* Custom Scrollbars */
2061
- ::-webkit-scrollbar { width: 12px; height: 12px; }
2062
- ::-webkit-scrollbar-track { background: transparent; }
2063
- ::-webkit-scrollbar-thumb {
2064
- background: var(--color-secondary-300);
2065
- border-radius: var(--radius-full);
2066
- border: 3px solid transparent;
2067
- background-clip: padding-box;
2068
- transition: background-color var(--transition-fast);
2069
- &:hover { background: var(--color-secondary-400); border: 2px solid transparent; background-clip: padding-box; }
2070
- &:active { background: var(--color-secondary-500); border: 2px solid transparent; background-clip: padding-box; }
2071
- @media (prefers-color-scheme: dark) {
2072
- background: var(--color-secondary-600);
2073
- &:hover { background: var(--color-secondary-500); }
2074
- &:active { background: var(--color-secondary-400); }
2075
- }
2076
- }
2077
-
2078
- * {
2079
- scrollbar-width: thin;
2080
- scrollbar-color: var(--color-secondary-300) transparent;
2081
- @media (prefers-color-scheme: dark) { scrollbar-color: var(--color-secondary-600) transparent; }
2082
- }
2083
- *:hover { scrollbar-color: var(--color-secondary-400) transparent; }
2084
- @media (prefers-color-scheme: dark) { *:hover { scrollbar-color: var(--color-secondary-500) transparent; } }
2085
-
2086
- `}#pe(){let{a11y:e={}}=this.options.design,t=e.minTouchTarget||u.TouchTargetSizes.standard;return`/* Icon System */
2087
-
2088
- pds-icon {
2089
- display: inline-flex;
2090
- align-items: center;
2091
- justify-content: center;
2092
- flex-shrink: 0;
2093
- vertical-align: middle;
2094
- pointer-events: none;
2095
- }
2096
-
2097
- /* Icon size utilities */
2098
- .icon-xs, pds-icon[size="xs"] { width: var(--icon-size-xs); height: var(--icon-size-xs); }
2099
- .icon-sm, pds-icon[size="sm"] { width: var(--icon-size-sm); height: var(--icon-size-sm); }
2100
- .icon-md, pds-icon[size="md"] { width: var(--icon-size-md); height: var(--icon-size-md); }
2101
- .icon-lg, pds-icon[size="lg"] { width: var(--icon-size-lg); height: var(--icon-size-lg); }
2102
- .icon-xl, pds-icon[size="xl"] { width: var(--icon-size-xl); height: var(--icon-size-xl); }
2103
- .icon-2xl, pds-icon[size="2xl"] { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }
2104
-
2105
- /* Icon color utilities */
2106
- .icon-primary, pds-icon.primary { color: var(--color-primary-600); }
2107
- .icon-secondary, pds-icon.secondary { color: var(--color-secondary-600); }
2108
- .icon-accent, pds-icon.accent { color: var(--color-accent-600); }
2109
- .icon-success, pds-icon.success { color: var(--color-success-600); }
2110
- .icon-warning, pds-icon.warning { color: var(--color-warning-600); }
2111
- .icon-danger, pds-icon.danger { color: var(--color-danger-600); }
2112
- .icon-info, pds-icon.info { color: var(--color-info-600); }
2113
- .icon-muted, pds-icon.muted { color: var(--color-text-muted); }
2114
- .icon-subtle, pds-icon.subtle { color: var(--color-text-subtle); }
2115
-
2116
- /* Icon with text combinations */
2117
- .icon-text { display: inline-flex; align-items: center; gap: var(--spacing-2); }
2118
- .icon-text-start { flex-direction: row; }
2119
- .icon-text-end { flex-direction: row-reverse; }
2120
-
2121
- /* Button icon utilities */
2122
- button, a {
2123
- pds-icon {
2124
- flex-shrink: 0;
2125
- }
2126
-
2127
- &.icon-only {
2128
- padding: var(--spacing-2);
2129
- min-width: ${t}px;
2130
- width: ${t}px;
2131
- height: ${t}px;
2132
- display: inline-flex;
2133
- align-items: center;
2134
- justify-content: center;
2135
- }
2136
- }
2137
-
2138
- /* Icon in inputs */
2139
- .input-icon, .input-icon-end {
2140
- position: relative;
2141
- display: flex;
2142
- align-items: center;
2143
- pds-icon { position: absolute; color: var(--color-text-muted); pointer-events: none; width: var(--icon-size-md); height: var(--icon-size-md); }
2144
- }
2145
- .input-icon {
2146
- pds-icon { left: var(--spacing-3); }
2147
- input { padding-left: calc(var(--icon-size-md) + var(--spacing-6)); width: 100%; }
2148
- }
2149
- .input-icon-end {
2150
- pds-icon { left: unset; right: var(--spacing-3); }
2151
- input { padding-left: var(--spacing-4); padding-right: calc(var(--icon-size-md) + var(--spacing-6)); width: 100%; }
2152
- }
2153
-
2154
- `}#ue(){return`/* Dropdown Component */
2155
-
2156
- /* Basic dropdown host */
2157
- nav[data-dropdown] {
2158
- position: relative;
2159
- display: inline-block;
2160
- padding: 0;
2161
-
2162
- menu {
2163
- position: absolute;
2164
- list-style: none;
2165
- padding: var(--spacing-2);
2166
- margin: 0;
2167
- background: var(--color-surface-overlay);
2168
- border: 1px solid var(--color-border);
2169
- border-radius: var(--radius-md);
2170
- box-shadow: var(--shadow-lg);
2171
- top: 100%;
2172
- bottom: auto;
2173
- left: 0;
2174
- right: auto;
2175
- margin-top: var(--spacing-2);
2176
- --dropdown-transition-duration: var(--transition-fast, 160ms);
2177
- min-width: max(100%, var(--dropdown-min-width, 12rem));
2178
- width: max-content;
2179
- opacity: 0;
2180
- scale: 0.95;
2181
- visibility: hidden;
2182
- display: none;
2183
- pointer-events: none;
2184
- transform-origin: top center;
2185
- z-index: var(--z-dropdown, 1050);
2186
- max-height: min(60vh, 24rem);
2187
- overflow-y: auto;
2188
- transition:
2189
- opacity var(--dropdown-transition-duration) ease,
2190
- scale var(--dropdown-transition-duration) ease,
2191
- visibility 0s linear var(--dropdown-transition-duration),
2192
- display 0s linear var(--dropdown-transition-duration);
2193
- transition-behavior: allow-discrete;
2194
- }
2195
-
2196
- menu[aria-hidden="false"] {
2197
- display: block;
2198
- opacity: 1;
2199
- scale: 1;
2200
- visibility: visible;
2201
- pointer-events: auto;
2202
- transition:
2203
- opacity var(--dropdown-transition-duration) ease,
2204
- scale var(--dropdown-transition-duration) ease,
2205
- visibility 0s linear 0s,
2206
- display 0s linear 0s;
2207
- }
2208
-
2209
- li {
2210
- padding: var(--spacing-1) 0;
2211
-
2212
- & + li {
2213
- border-top: 1px solid var(--color-border);
2214
- margin-top: var(--spacing-2);
2215
- }
2216
-
2217
- &:has(> hr) {
2218
- border-top: none;
2219
- margin-top: 0;
2220
- padding: 0;
2221
-
2222
- & + li {
2223
- border-top: none;
2224
- margin-top: 0;
2225
- }
2226
- }
2227
-
2228
- & > hr {
2229
- border: none;
2230
- border-top: 3px solid var(--color-border);
2231
- margin: var(--spacing-2) 0;
2232
- }
2233
- }
2234
-
2235
- a {
2236
- display: flex;
2237
- color: var(--color-text-primary);
2238
- text-decoration: none;
2239
- align-items: center;
2240
- gap: var(--spacing-2);
2241
-
2242
- &.danger {
2243
- color: var(--color-danger-600);
2244
- }
2245
- }
2246
-
2247
- &.align-right,
2248
- &[data-align="right"],
2249
- &[data-align="end"],
2250
- &[data-dropdown-align="right"],
2251
- &[data-dropdown-align="end"] {
2252
- menu {
2253
- left: auto;
2254
- right: 0;
2255
- }
2256
- }
2257
-
2258
- &[data-mode="up"],
2259
- &[data-dropdown-direction="up"] {
2260
- menu {
2261
- top: auto;
2262
- bottom: 100%;
2263
- margin-top: 0;
2264
- margin-bottom: var(--spacing-2);
2265
- transform-origin: bottom center;
2266
- }
2267
- }
2268
-
2269
- &[data-mode="down"],
2270
- &[data-dropdown-direction="down"] {
2271
- menu {
2272
- top: 100%;
2273
- bottom: auto;
2274
- margin-top: var(--spacing-2);
2275
- margin-bottom: 0;
2276
- transform-origin: top center;
2277
- }
2278
- }
2279
-
2280
- &[data-mode="auto"] menu {
2281
- top: 100%;
2282
- bottom: auto;
2283
- }
2284
-
2285
- @media (prefers-reduced-motion: reduce) {
2286
- menu {
2287
- transition-duration: 0.01s !important;
2288
- }
2289
- }
2290
- }
2291
-
2292
- @starting-style {
2293
- nav[data-dropdown] menu[aria-hidden="false"] {
2294
- opacity: 0;
2295
- scale: 0.95;
2296
- }
2297
- }
2298
- `}#ge(){let{layout:e={}}=this.options.design,t=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280},o=e.gridSystem||{},r=o.columns||[1,2,3,4,6],a=o.autoFitBreakpoints||{sm:"150px",md:"250px",lg:"350px",xl:"450px"},i=[`
2299
- /* ============================================================================
2300
- Layout Utilities
2301
- Modern grid and flex system for building responsive layouts
2302
- ============================================================================ */
2303
-
2304
- /* Container */
2305
- .container {
2306
- display: block;
2307
- width: 100%;
2308
- max-width: ${e.containerMaxWidth||"1400px"};
2309
- margin: 0 auto;
2310
- padding: ${e.containerPadding||"var(--spacing-6)"};
2311
- }
2312
-
2313
- /* Grid System */
2314
- .grid {
2315
- display: grid;
2316
- gap: var(--spacing-4);
2317
- }
2318
-
2319
- `];for(let c of r)i.push(`.grid-cols-${c} { grid-template-columns: repeat(${c}, 1fr); }
2320
- `);i.push(`
2321
- /* Auto-fit grids (responsive) */
2322
- `);for(let[c,s]of Object.entries(a))i.push(`.grid-auto-${c} { grid-template-columns: repeat(auto-fit, minmax(${s}, 1fr)); }
2323
- `);return i.push(`
2324
- /* Gap utilities */
2325
- .gap-0 { gap: 0; } .gap-xs { gap: var(--spacing-1); } .gap-sm { gap: var(--spacing-2); } .gap-md { gap: var(--spacing-4); } .gap-lg { gap: var(--spacing-6); } .gap-xl { gap: var(--spacing-8); }
2326
-
2327
- `),i.push(`
2328
- /* Flexbox System */
2329
- .flex { display: flex; }
2330
- .flex-wrap { flex-wrap: wrap; }
2331
- .flex-col { flex-direction: column; }
2332
- .flex-row { flex-direction: row; }
2333
- .grow { flex: 1 1 0%; }
2334
-
2335
- /* Alignment utilities */
2336
- .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; }
2337
- .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; }
2338
- .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
2339
-
2340
- /* Text overflow utility */
2341
- .truncate {
2342
- overflow: hidden;
2343
- text-overflow: ellipsis;
2344
- white-space: nowrap;
2345
- }
2346
-
2347
- /* Required Legend Utility */
2348
- :where(.required-legend) {
2349
- display: block;
2350
- margin: var(--spacing-3) 0;
2351
- color: var(--color-text-muted);
2352
- }
2353
-
2354
- /* Max-width utilities */
2355
- .max-w-sm { max-width: 400px; } .max-w-md { max-width: 600px; } .max-w-lg { max-width: 800px; } .max-w-xl { max-width: 1200px; }
2356
-
2357
- /* Stack utilities - vertical rhythm for stacked elements */
2358
- [class^="stack-"], [class*=" stack-"] {
2359
- display: flex;
2360
- flex-direction: column;
2361
- }
2362
- .stack-xs { gap: var(--spacing-1); }
2363
- .stack-sm { gap: var(--spacing-2); }
2364
- .stack-md { gap: var(--spacing-4); }
2365
- .stack-lg { gap: var(--spacing-6); }
2366
- .stack-xl { gap: var(--spacing-8); }
2367
-
2368
- /* Section spacing - for major content blocks */
2369
- .section { padding-block: var(--spacing-8); }
2370
- .section-lg { padding-block: var(--spacing-12); }
2371
-
2372
- /* Responsive helpers */
2373
- @media (max-width: ${t.md-1}px) {
2374
- .mobile-stack { flex-direction: column; }
2375
- .mobile-stack > * { width: 100%; }
2376
- }
2377
-
2378
- /* ============================================================================
2379
- Backdrop Utilities
2380
- Reusable backdrop layer for modal components (dialogs, drawers, overlays)
2381
- ============================================================================ */
2382
-
2383
- /* Base backdrop class for modal overlays */
2384
- .backdrop {
2385
- position: fixed;
2386
- inset: 0;
2387
- background: var(--backdrop-bg);
2388
- backdrop-filter: var(--backdrop-filter);
2389
- opacity: 0;
2390
- pointer-events: none;
2391
- transition: opacity 0.2s ease;
2392
- z-index: var(--z-modal, 1040);
2393
-
2394
- &.active {
2395
- opacity: var(--backdrop-opacity, 1);
2396
- pointer-events: auto;
2397
- }
2398
- }
2399
-
2400
- /* Backdrop variants */
2401
- .backdrop-light { --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)); --backdrop-brightness: 1.1; }
2402
- .backdrop-dark { --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); --backdrop-brightness: 0.6; }
2403
- .backdrop-blur-sm { --backdrop-blur: 5px; } .backdrop-blur-md { --backdrop-blur: 10px; } .backdrop-blur-lg { --backdrop-blur: 20px; }
2404
- `),i.join("")}#he(){return`/* Media Element Utilities */
2405
-
2406
- /* Gallery images */
2407
- .img-gallery {
2408
- width: 100%;
2409
- height: auto;
2410
- aspect-ratio: 1;
2411
- object-fit: cover;
2412
- border-radius: var(--radius-sm);
2413
- }
2414
-
2415
- /* Responsive images with different radius sizes */
2416
- .img-rounded-sm { border-radius: var(--radius-sm); } .img-rounded-md { border-radius: var(--radius-md); } .img-rounded-lg { border-radius: var(--radius-lg); } .img-rounded-xl { border-radius: var(--radius-xl); } .img-rounded-full { border-radius: var(--radius-full); }
2417
-
2418
- /* Inline images */
2419
- .img-inline {
2420
- display: inline;
2421
- vertical-align: middle;
2422
- border-radius: var(--radius-xs);
2423
- margin: 0 var(--spacing-1);
2424
- max-width: 60px;
2425
- height: auto;
2426
- }
2427
-
2428
- /* Video specific utilities */
2429
- .video-responsive {
2430
- width: 100%;
2431
- max-width: 600px;
2432
- height: auto;
2433
- border-radius: var(--radius-md);
2434
- }
2435
-
2436
- /* Figure utilities */
2437
- .figure-responsive {
2438
- width: 100%;
2439
- height: auto;
2440
- }
2441
-
2442
- `}#me(){let{layout:e={},a11y:t={}}=this.options.design,o=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280},r=t.minTouchTarget||u.TouchTargetSizes.standard;return`/* Mobile-First Responsive Design */
2443
-
2444
- /* Small devices (${o.sm}px and up) */
2445
- @media (min-width: ${o.sm}px) {
2446
- .sm\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .sm\\:flex-row { flex-direction: row; } .sm\\:text-sm { font-size: var(--font-size-sm); } .sm\\:p-6 { padding: var(--spacing-6); } .sm\\:gap-6 { gap: var(--spacing-6); } .sm\\:hidden { display: none; } .sm\\:block { display: block; }
2447
- }
2448
-
2449
- /* Medium devices (${o.md}px and up) */
2450
- @media (min-width: ${o.md}px) {
2451
- .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .md\\:text-lg { font-size: var(--font-size-lg); } .md\\:p-8 { padding: var(--spacing-8); } .md\\:gap-8 { gap: var(--spacing-8); } .md\\:flex-row { flex-direction: row; } .md\\:w-1\\/2 { width: 50%; } .md\\:w-1\\/3 { width: 33.333333%; } .md\\:hidden { display: none; } .md\\:block { display: block; }
2452
- }
2453
-
2454
- /* Large devices (${o.lg}px and up) */
2455
- @media (min-width: ${o.lg}px) {
2456
- .lg\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .lg\\:text-xl { font-size: var(--font-size-xl); } .lg\\:p-12 { padding: var(--spacing-12); } .lg\\:gap-12 { gap: var(--spacing-12); } .lg\\:w-1\\/4 { width: 25%; } .lg\\:hidden { display: none; } .lg\\:block { display: block; }
2457
- }
2458
-
2459
- /* Touch device optimizations */
2460
- @media (hover: none) and (pointer: coarse) {
2461
- /* Touch devices - larger touch targets for interactive elements */
2462
- button, a, select, textarea,
2463
- input:not([type="radio"]):not([type="checkbox"]) {
2464
- min-height: ${r}px;
2465
- min-width: ${r}px;
2466
- }
2467
-
2468
- /* Radio and checkbox inputs: keep reasonable size but ensure label tap area is large */
2469
- input[type="radio"],
2470
- input[type="checkbox"] {
2471
- /* Keep native size - labels provide the touch target */
2472
- min-height: unset;
2473
- min-width: unset;
2474
- }
2475
-
2476
- /* Ensure labels with radio/checkbox have adequate touch targets */
2477
- /* Exclude button-style fieldsets which already have proper sizing */
2478
- label:has(input[type="radio"]):not(fieldset.buttons label),
2479
- label:has(input[type="checkbox"]):not(fieldset.buttons label),
2480
- fieldset[role="radiogroup"]:not(.buttons) label,
2481
- fieldset[role="group"]:not(.buttons) label {
2482
- min-height: ${r}px;
2483
- display: inline-flex;
2484
- align-items: center;
2485
- padding: var(--spacing-2) 0;
2486
- }
2487
-
2488
- /* Disable hover effects
2489
- on touch devices */
2490
- .card {
2491
- &:hover {
2492
- box-shadow: var(--shadow-base);
2493
- }
2494
- }
2495
-
2496
- a {
2497
- &:hover {
2498
- color: var(--color-primary-600);
2499
- }
2500
- }
2501
- }
2502
-
2503
- /* Reduced motion */
2504
- @media (prefers-reduced-motion: reduce) {
2505
- *, *::before, *::after {
2506
- animation-duration: 0.01ms !important;
2507
- animation-iteration-count: 1 !important;
2508
- transition-duration: 0.01ms !important;
2509
- scroll-behavior: auto !important;
2510
- }
2511
- }
2512
-
2513
- /* High contrast mode */
2514
- @media (prefers-contrast: high) {
2515
- :root {
2516
- --color-primary-600: #0000ff;
2517
- --color-primary-700: #0000cc;
2518
- }
2519
-
2520
- button, input, textarea, select {
2521
- border-width: 2px;
2522
- }
2523
- }
2524
-
2525
- /* Print styles */
2526
- @media print {
2527
- *, *::before, *::after {
2528
- background: transparent !important;
2529
- color: black !important;
2530
- box-shadow: none !important;
2531
- }
2532
-
2533
- a, a:visited {
2534
- text-decoration: underline;
2535
- }
2536
-
2537
- button {
2538
- display: none;
2539
- }
2540
-
2541
- .mobile-hidden, .desktop-hidden {
2542
- display: block !important;
2543
- }
2544
- }
2545
-
2546
- `}#a(e){let t=parseInt(e.slice(1,3),16)/255,o=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,a=Math.max(t,o,r),i=Math.min(t,o,r),c,s,l=(a+i)/2;if(a===i)c=s=0;else{let d=a-i;switch(s=l>.5?d/(2-a-i):d/(a+i),a){case t:c=(o-r)/d+(o<r?6:0);break;case o:c=(r-t)/d+2;break;case r:c=(t-o)/d+4;break}c/=6}return{h:c*360,s:s*100,l:l*100}}#t(e,t,o){e=e/360,t=t/100,o=o/100;let r=(l,d,p)=>(p<0&&(p+=1),p>1&&(p-=1),p<1/6?l+(d-l)*6*p:p<1/2?d:p<2/3?l+(d-l)*(2/3-p)*6:l),a,i,c;if(t===0)a=i=c=o;else{let l=o<.5?o*(1+t):o+t-o*t,d=2*o-l;a=r(d,l,e+1/3),i=r(d,l,e),c=r(d,l,e-1/3)}let s=l=>{let d=Math.round(l*255).toString(16);return d.length===1?"0"+d:d};return`#${s(a)}${s(i)}${s(c)}`}getTokens(){return this.tokens}exportCSS(){return this.layeredCSS}#fe(){this.#e={tokens:this.#be(),primitives:this.#ye(),components:this.#ve(),utilities:this.#xe()},this.options.debug&&this.options.log?.("debug","[Generator] Layer sizes:",{tokens:`${(this.#e.tokens.length/1024).toFixed(2)} KB`,primitives:`${(this.#e.primitives.length/1024).toFixed(2)} KB`,components:`${(this.#e.components.length/1024).toFixed(2)} KB`,utilities:`${(this.#e.utilities.length/1024).toFixed(2)} KB`})}#be(){let{colors:e,spacing:t,radius:o,borderWidths:r,typography:a,shadows:i,layout:c,transitions:s,zIndex:l,icons:d}=this.tokens,p=[`@layer tokens {
2547
- :root {
2548
- ${this.#W(e)}
2549
- ${this.#j(t)}
2550
- ${this.#U(o)}
2551
- ${this.#N(r)}
2552
- ${this.#O(a)}
2553
- ${this.#I(i)}
2554
- ${this.#H(c)}
2555
- ${this.#q(s)}
2556
- ${this.#G(l)}
2557
- ${this.#V(d)}
2558
- }
2559
- ${this.#Z(e)}
2560
- }`];return p.push(`
2561
- /* Non-layered dark variables fallback (ensures attribute wins) */
2562
- `),p.push(this.#K(e)),p.join("")}#ye(){let{advanced:e={},a11y:t={},layout:o={}}=this.options.design,r=e.tabSize||u.TabSizes.standard,a=t.minTouchTarget||u.TouchTargetSizes.standard,i=o.breakpoints||{sm:640,md:768,lg:1024,xl:1280};return`@layer primitives {
2563
- /* Base HTML reset */
2564
- *, *::before, *::after {
2565
- box-sizing: border-box;
2566
- }
2567
-
2568
- :where(html) {
2569
- interpolate-size: allow-keywords;
2570
- font-family: var(--font-family-body);
2571
- font-size: var(--font-size-base);
2572
- line-height: var(--font-line-height-normal);
2573
- color: var(--color-text-primary);
2574
- background-color: var(--color-surface-base);
2575
- -webkit-text-size-adjust: 100%;
2576
- -webkit-font-smoothing: antialiased;
2577
- -moz-osx-font-smoothing: grayscale;
2578
- tab-size: ${r};
2579
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
2580
- }
2581
-
2582
- :where(dialog){
2583
- background-color: transparent;
2584
- min-width: 320px;
2585
- border: none;
2586
- }
2587
-
2588
- :where(body) {
2589
- margin: 0;
2590
- padding: 0;
2591
- scroll-behavior: smooth;
2592
- min-height: 100vh;
2593
- min-height: var(--layout-min-height, 100vh);
2594
- overflow-x: hidden;
2595
- -webkit-overflow-scrolling: touch;
2596
- }
2597
-
2598
- :where(body.drawer-open) {
2599
- /* overflow: hidden; */
2600
- /* scrollbar-gutter: stable; */
2601
- }
2602
-
2603
- /* Button primitives */
2604
- :where(button) {
2605
- all: unset;
2606
- box-sizing: border-box;
2607
- font: inherit;
2608
- color: var(--color-primary-contrast, white);
2609
- background: var(--color-primary-600);
2610
- padding: var(--spacing-2) var(--spacing-4);
2611
- border: 0;
2612
- border-radius: var(--radius-md);
2613
- cursor: pointer;
2614
- transition: opacity var(--transition-fast), background-color var(--transition-fast);
2615
- display: inline-flex;
2616
- align-items: center;
2617
- justify-content: center;
2618
- gap: var(--spacing-2);
2619
- font-weight: var(--font-weight-medium);
2620
- line-height: 1.5;
2621
- min-height: ${a}px;
2622
- touch-action: manipulation;
2623
- user-select: none;
2624
- }
2625
-
2626
- :where(button):hover:not(:disabled) {
2627
- opacity: 0.9;
2628
- background-color: var(--color-primary-700);
2629
- }
2630
-
2631
- :where(button):focus-visible {
2632
- outline: 2px solid var(--color-primary-500);
2633
- outline-offset: 2px;
2634
- }
2635
-
2636
- :where(button):disabled {
2637
- opacity: 0.5;
2638
- cursor: not-allowed;
2639
- }
2640
-
2641
- :where(button):active:not(:disabled) {
2642
- transform: scale(0.98);
2643
- }
2644
-
2645
- /* Input primitives */
2646
- :where(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"])),
2647
- :where(select),
2648
- :where(textarea) {
2649
- font: inherit;
2650
- color: var(--color-text-primary);
2651
- background: var(--color-input-bg);
2652
- border: 1px solid var(--color-border);
2653
- border-radius: var(--radius-md);
2654
- padding: var(--spacing-2) var(--spacing-3);
2655
- min-height: 40px;
2656
- width: 100%;
2657
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
2658
- appearance: none;
2659
- }
2660
-
2661
- :where(input):focus-visible,
2662
- :where(select):focus-visible,
2663
- :where(textarea):focus-visible {
2664
- outline: none;
2665
- border-color: var(--color-primary-500);
2666
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
2667
- }
2668
-
2669
- :where(input):disabled,
2670
- :where(select):disabled,
2671
- :where(textarea):disabled {
2672
- opacity: 0.6;
2673
- cursor: not-allowed;
2674
- background-color: var(--color-input-disabled-bg);
2675
- }
2676
-
2677
- /* Harmonized placeholder styling */
2678
- :where(input)::placeholder,
2679
- :where(textarea)::placeholder,
2680
- :where(pds-richtext)::placeholder {
2681
- color: var(--color-text-muted);
2682
- opacity: 1;
2683
- font-weight: var(--font-weight-normal);
2684
- }
2685
-
2686
- :where(textarea) {
2687
- min-height: 80px;
2688
- resize: vertical;
2689
- }
2690
-
2691
- /* Link primitives */
2692
- :where(a) {
2693
- color: var(--color-primary-600);
2694
- text-decoration: underline;
2695
- text-underline-offset: 0.2em;
2696
- transition: opacity var(--transition-fast);
2697
- }
2698
-
2699
- :where(a):hover {
2700
- opacity: 0.8;
2701
- }
2702
-
2703
- :where(a):focus-visible {
2704
- outline: 2px solid var(--color-primary-500);
2705
- outline-offset: 2px;
2706
- border-radius: var(--radius-sm);
2707
- }
2708
-
2709
- /* Form primitives */
2710
- :where(label) {
2711
- display: block;
2712
- font-weight: var(--font-weight-medium);
2713
- margin-bottom: var(--spacing-2);
2714
- color: var(--color-text-primary);
2715
- font-size: var(--font-size-sm);
2716
- }
2717
-
2718
- /* Checkbox enhancement - visually hide native input but keep accessible
2719
- Excludes button-style checkboxes in fieldsets and special containers */
2720
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]) input[type="checkbox"]) {
2721
- position: absolute;
2722
- opacity: 0;
2723
- width: 1px;
2724
- height: 1px;
2725
- }
2726
-
2727
- /* Style label container for checkbox */
2728
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])) {
2729
- display: inline-flex;
2730
- align-items: center;
2731
- gap: var(--spacing-2);
2732
- cursor: pointer;
2733
- user-select: none;
2734
- position: relative;
2735
- padding-left: calc(var(--spacing-5) + var(--spacing-3));
2736
- }
2737
-
2738
- /* Custom checkbox box using PDS tokens - works with or without span wrapper */
2739
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])::before) {
2740
- content: "";
2741
- position: absolute;
2742
- left: 0;
2743
- top: 50%;
2744
- transform: translateY(-50%);
2745
- width: var(--spacing-5);
2746
- height: var(--spacing-5);
2747
- border: var(--border-width-md) solid var(--color-border);
2748
- border-radius: var(--radius-sm);
2749
- background: var(--color-surface-base);
2750
- transition: all var(--transition-fast);
2751
- flex-shrink: 0;
2752
- }
2753
-
2754
- /* Checkmark */
2755
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked)::after) {
2756
- content: "";
2757
- position: absolute;
2758
- left: var(--spacing-2);
2759
- top: 50%;
2760
- transform: translateY(-60%) rotate(45deg);
2761
- width: var(--spacing-1-5);
2762
- height: var(--spacing-3);
2763
- border: solid var(--color-primary-contrast, white);
2764
- border-width: 0 2px 2px 0;
2765
- }
2766
-
2767
- /* Checked state */
2768
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked)::before) {
2769
- background: var(--color-primary-600);
2770
- border-color: var(--color-primary-600);
2771
- }
2772
-
2773
- /* Focus styles for accessibility */
2774
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:focus)::before) {
2775
- outline: 2px solid var(--color-primary-500);
2776
- outline-offset: 2px;
2777
- }
2778
-
2779
- /* Hover effects */
2780
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:not(:disabled)):hover::before) {
2781
- border-color: var(--color-primary-600);
2782
- background: var(--color-surface-subtle);
2783
- }
2784
-
2785
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked:not(:disabled)):hover::before) {
2786
- background: var(--color-primary-700);
2787
- border-color: var(--color-primary-700);
2788
- }
2789
-
2790
- /* Disabled state */
2791
- :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:disabled)) {
2792
- opacity: 0.5;
2793
- cursor: not-allowed;
2794
- }
2795
-
2796
- :where(fieldset) {
2797
- border: none;
2798
- }
2799
-
2800
- :where(legend) {
2801
- display: block;
2802
- font-weight: var(--font-weight-semibold);
2803
- padding: 0;
2804
- color: var(--color-text-primary);
2805
- font-weight: var(--font-weight-semibold);
2806
- color: var(--color-text-primary);
2807
- margin: 0 0 var(--spacing-3) 0;
2808
- border: none;
2809
- line-height: var(--font-line-height-tight);
2810
- font-size: var(--font-size-lg);
2811
- background: transparent; /* avoid browser default notch behavior */
2812
- width: auto;
2813
- box-sizing: border-box;
2814
- }
2815
-
2816
-
2817
- /* List primitives */
2818
- :where(ul, ol) {
2819
- padding-left: var(--spacing-6);
2820
- margin: var(--spacing-3) 0;
2821
- }
2822
-
2823
- :where(li) {
2824
- margin: var(--spacing-1) 0;
2825
- }
2826
-
2827
- /* Typography primitives */
2828
- :where(h1, h2, h3, h4, h5, h6) {
2829
- font-family: var(--font-family-headings);
2830
- font-weight: var(--font-weight-bold);
2831
- line-height: var(--font-line-height-tight);
2832
- margin: var(--spacing-4) 0 var(--spacing-3) 0;
2833
- color: var(--color-text-primary);
2834
- word-wrap: break-word;
2835
- hyphens: auto;
2836
- overflow-wrap: break-word;
2837
- }
2838
-
2839
- /* Mobile-first heading sizes */
2840
- :where(h1) { font-size: var(--font-size-2xl); }
2841
- :where(h2) { font-size: var(--font-size-xl); }
2842
- :where(h3) { font-size: var(--font-size-lg); }
2843
- :where(h4) { font-size: var(--font-size-base); }
2844
- :where(h5) { font-size: var(--font-size-sm); }
2845
- :where(h6) { font-size: var(--font-size-xs); }
2846
-
2847
- /* Scale up on larger screens */
2848
- @media (min-width: ${i.sm}px) {
2849
- :where(h1) { font-size: var(--font-size-3xl); }
2850
- :where(h2) { font-size: var(--font-size-2xl); }
2851
- :where(h3) { font-size: var(--font-size-xl); }
2852
- :where(h4) { font-size: var(--font-size-lg); }
2853
- :where(h5) { font-size: var(--font-size-base); }
2854
- :where(h6) { font-size: var(--font-size-sm); }
2855
- }
2856
-
2857
- :where(p) {
2858
- margin: var(--spacing-3) 0;
2859
- line-height: var(--font-line-height-relaxed);
2860
- color: var(--color-text-primary);
2861
- }
2862
-
2863
- /* Code primitives */
2864
- :where(code) {
2865
- font-family: var(--font-family-mono, monospace);
2866
- font-size: 0.9em;
2867
- background: var(--color-surface-muted);
2868
- padding: 0.2em 0.4em;
2869
- border-radius: var(--radius-sm);
2870
- color: var(--color-text-primary);
2871
- }
2872
-
2873
- :where(pre) {
2874
- font-family: var(--font-family-mono, monospace);
2875
- background: var(--color-surface-muted);
2876
- padding: var(--spacing-4);
2877
- border-radius: var(--radius-md);
2878
- overflow-x: auto;
2879
- margin: var(--spacing-4) 0;
2880
- }
2881
-
2882
- :where(pre code) {
2883
- background: none;
2884
- padding: 0;
2885
- }
2886
-
2887
- /* Media primitives */
2888
- :where(img, video) {
2889
- max-width: 100%;
2890
- height: auto;
2891
- border-radius: var(--radius-sm);
2892
- }
2893
-
2894
- :where(figure) {
2895
- margin: 0 0 var(--spacing-6) 0;
2896
- }
2897
-
2898
- :where(figcaption) {
2899
- margin-top: var(--spacing-3);
2900
- font-size: var(--font-size-sm);
2901
- color: var(--color-text-secondary);
2902
- line-height: var(--font-line-height-relaxed);
2903
- }
2904
-
2905
-
2906
- :where([hidden]) {
2907
- display: none !important;
2908
- }
2909
- }
2910
-
2911
- `}#ve(){return`@layer components {
2912
-
2913
- ${this.#re()}
2914
-
2915
- ${this.#oe()}
2916
-
2917
- ${this.#ne()}
2918
-
2919
- ${this.#se()}
2920
-
2921
- ${this.#ce()}
2922
-
2923
- ${this.#ie()}
2924
-
2925
- ${this.#ue()}
2926
-
2927
- ${this.#le()}
2928
-
2929
- ${this.#ae()}
2930
-
2931
- /* Card component */
2932
-
2933
- .card {
2934
- background: var(--color-surface-base);
2935
- border-radius: var(--radius-md);
2936
- padding: var(--spacing-4);
2937
- }
2938
-
2939
- .card-elevated {
2940
- background: var(--color-surface-elevated);
2941
- box-shadow: var(--shadow-md);
2942
- }
2943
-
2944
- .card-outlined,
2945
- .card-basic {
2946
- background: var(--color-surface-base);
2947
- border: 1px solid var(--color-border);
2948
- }
2949
-
2950
- .card-interactive:hover {
2951
- transform: translateY(-2px);
2952
- box-shadow: var(--shadow-lg);
2953
- transition: transform var(--transition-fast), box-shadow var(--transition-fast);
2954
- }
2955
-
2956
- ${this.#de()}
2957
-
2958
- ${this.#Y()}
2959
-
2960
- }
2961
- `}#xe(){return`@layer utilities {
2962
-
2963
- ${this.#pe()}
2964
-
2965
- ${this.#ge()}
2966
-
2967
- /* Optional utilities/features controlled by config options */
2968
- /* - Body background mesh rule (applies one of the generated mesh vars) */
2969
- /* - Liquid glass utility class */
2970
- ${this.#X()}
2971
- ${this.#ee()}
2972
-
2973
- ${this.#te()}
2974
-
2975
- /* Surface utilities */
2976
-
2977
- .surface {
2978
- background-color: var(--color-surface-base);
2979
- }
2980
-
2981
- .surface-subtle {
2982
- background-color: var(--color-surface-subtle);
2983
- }
2984
-
2985
- .surface-elevated {
2986
- background-color: var(--color-surface-elevated);
2987
- }
2988
-
2989
- .surface-sunken {
2990
- background-color: var(--color-surface-sunken);
2991
- }
2992
-
2993
- .surface-overlay {
2994
- background-color: var(--color-surface-overlay);
2995
- }
2996
-
2997
- /* Translucent semantic variants */
2998
- .surface-translucent {
2999
- background-color: var(--color-surface-translucent-50);
3000
- }
3001
-
3002
- .surface-translucent-25 {
3003
- background-color: var(--color-surface-translucent-25);
3004
- }
3005
-
3006
- .surface-translucent-50 {
3007
- background-color: var(--color-surface-translucent-50);
3008
- }
3009
-
3010
- .surface-translucent-75 {
3011
- background-color: var(--color-surface-translucent-75);
3012
- }
3013
-
3014
- /* Legacy utility retained for backwards compatibility (opinionated overlay) */
3015
- .surface-overlay {
3016
- padding: var(--spacing-4);
3017
- background-color: var(--color-surface-overlay);
3018
- box-shadow: var(--shadow-lg);
3019
- border-radius: var(--radius-md);
3020
- }
3021
-
3022
-
3023
- /*
3024
- * SURFACE-INVERSE: Local Theme Context Flip
3025
- *
3026
- * We can't simply add .surface-inverse to the dark mode selector because that would
3027
- * also apply the dark color PALETTE (grays, surfaces, etc.), which would override
3028
- * --color-surface-inverse itself. Instead, we duplicate only the SEMANTIC tokens.
3029
- *
3030
- * Light theme .surface-inverse \u2192 dark semantic tokens
3031
- * Dark theme .surface-inverse \u2192 light semantic tokens (flip back)
3032
- */
3033
-
3034
- /* Surface-inverse visual properties (shared, uses smart surface tokens) */
3035
- .surface-inverse {
3036
- background-color: var(--color-surface-inverse);
3037
- color: var(--surface-inverse-text);
3038
-
3039
- pds-icon {
3040
- color: var(--surface-inverse-icon);
3041
- }
3042
-
3043
- /* btn-primary stays vibrant in any context */
3044
- & .btn-primary {
3045
- background-color: var(--color-primary-500);
3046
- border-color: var(--color-primary-500);
3047
- color: var(--color-primary-contrast, #ffffff);
3048
-
3049
- &:hover {
3050
- background-color: var(--color-primary-400);
3051
- border-color: var(--color-primary-400);
3052
- }
3053
- }
3054
- }
3055
-
3056
- /* Light-mode inverse: apply dark semantic tokens */
3057
- html:not([data-theme="dark"]) .surface-inverse {
3058
- --color-text-primary: var(--color-gray-100);
3059
- --color-text-secondary: var(--color-gray-300);
3060
- --color-text-muted: var(--color-gray-400);
3061
- --color-border: var(--color-gray-700);
3062
- --color-input-bg: var(--color-gray-800);
3063
- --color-input-disabled-bg: var(--color-gray-900);
3064
- --color-input-disabled-text: var(--color-gray-600);
3065
- --color-code-bg: var(--color-gray-800);
3066
- --color-surface-muted: rgba(255, 255, 255, 0.08);
3067
-
3068
- & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
3069
- & .btn-secondary {
3070
- background-color: rgba(255, 255, 255, 0.12);
3071
- color: var(--surface-inverse-text);
3072
- border-color: rgba(255, 255, 255, 0.25);
3073
-
3074
- &:hover { background-color: rgba(255, 255, 255, 0.2); }
3075
- &:active { background-color: rgba(255, 255, 255, 0.28); }
3076
- }
3077
-
3078
- & select {
3079
- background-color: rgba(255, 255, 255, 0.1);
3080
- color: var(--surface-inverse-text);
3081
- }
3082
-
3083
- & a:not([class*="btn"]) {
3084
- color: var(--color-primary-300, #7dd3fc);
3085
- }
3086
- }
3087
-
3088
- /* Dark-mode inverse: flip back to light semantic tokens */
3089
- html[data-theme="dark"] .surface-inverse {
3090
- --color-text-primary: var(--color-gray-900);
3091
- --color-text-secondary: var(--color-gray-600);
3092
- --color-text-muted: var(--color-gray-600);
3093
- --color-border: var(--color-gray-300);
3094
- --color-input-bg: var(--color-surface-base);
3095
- --color-input-disabled-bg: var(--color-gray-50);
3096
- --color-input-disabled-text: var(--color-gray-500);
3097
- --color-code-bg: var(--color-gray-100);
3098
- --color-surface-muted: var(--color-gray-100);
3099
-
3100
- & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
3101
- & .btn-secondary {
3102
- background-color: rgba(0, 0, 0, 0.06);
3103
- color: var(--surface-inverse-text);
3104
- border-color: rgba(0, 0, 0, 0.15);
3105
-
3106
- &:hover { background-color: rgba(0, 0, 0, 0.1); }
3107
- &:active { background-color: rgba(0, 0, 0, 0.15); }
3108
- }
3109
-
3110
- & select {
3111
- background-color: #ffffff;
3112
- color: var(--surface-inverse-text);
3113
- }
3114
-
3115
- & a:not([class*="btn"]) {
3116
- color: var(--color-primary-600, #0284c7);
3117
- }
3118
- }
3119
-
3120
- /* Shadow utilities */
3121
- .shadow-sm {
3122
- box-shadow: var(--shadow-sm);
3123
- }
3124
-
3125
- .shadow-base, .shadow {
3126
- box-shadow: var(--shadow-base);
3127
- }
3128
-
3129
- .shadow-md {
3130
- box-shadow: var(--shadow-md);
3131
- }
3132
-
3133
- .shadow-lg {
3134
- box-shadow: var(--shadow-lg);
3135
- }
3136
-
3137
- .shadow-xl {
3138
- box-shadow: var(--shadow-xl);
3139
- }
3140
-
3141
- .shadow-inner {
3142
- box-shadow: var(--shadow-inner);
3143
- }
3144
-
3145
- .shadow-none {
3146
- box-shadow: none;
3147
- }
3148
-
3149
- .text-muted {
3150
- color: var(--color-text-muted);
3151
- }
3152
-
3153
-
3154
- ${this.#he()}
3155
-
3156
- ${this.#me()}
3157
-
3158
- }
3159
- `}#we(){this.#o={tokens:new CSSStyleSheet,primitives:new CSSStyleSheet,components:new CSSStyleSheet,utilities:new CSSStyleSheet},this.#ke()}#ke(){this.#o.tokens.replaceSync(this.#e.tokens),this.#o.primitives.replaceSync(this.#e.primitives),this.#o.components.replaceSync(this.#e.components),this.#o.utilities.replaceSync(this.#e.utilities)}get tokensCSS(){return this.#e?.tokens||""}get primitivesCSS(){return this.#e?.primitives||""}get componentsCSS(){return this.#e?.components||""}get utilitiesCSS(){return this.#e?.utilities||""}get layeredCSS(){return this.#e?`${this.#e.tokens}
3160
- ${this.#e.primitives}
3161
- ${this.#e.components}
3162
- ${this.#e.utilities}`:""}get compiled(){return{tokens:{colors:this.tokens.colors,spacing:this.tokens.spacing,radius:this.tokens.radius,borderWidths:this.tokens.borderWidths,typography:this.tokens.typography,shadows:this.tokens.shadows,layout:this.tokens.layout,transitions:this.tokens.transitions,zIndex:this.tokens.zIndex,icons:this.tokens.icons},layers:{tokens:{css:this.#e?.tokens||"",size:this.#e?.tokens?.length||0,sizeKB:((this.#e?.tokens?.length||0)/1024).toFixed(2)},primitives:{css:this.#e?.primitives||"",size:this.#e?.primitives?.length||0,sizeKB:((this.#e?.primitives?.length||0)/1024).toFixed(2)},components:{css:this.#e?.components||"",size:this.#e?.components?.length||0,sizeKB:((this.#e?.components?.length||0)/1024).toFixed(2)},utilities:{css:this.#e?.utilities||"",size:this.#e?.utilities?.length||0,sizeKB:((this.#e?.utilities?.length||0)/1024).toFixed(2)},combined:{css:this.layeredCSS,size:this.layeredCSS?.length||0,sizeKB:((this.layeredCSS?.length||0)/1024).toFixed(2)}},config:{design:this.options.design||{},preset:this.options.preset||null,debug:this.options.debug||!1},capabilities:{constructableStylesheets:typeof CSSStyleSheet<"u",blobURLs:typeof Blob<"u"&&typeof URL<"u",shadowDOM:typeof ShadowRoot<"u"},references:{ontology:typeof se<"u"?se:null,enums:typeof u<"u"?u:null},meta:{generatedAt:new Date().toISOString(),totalSize:(this.#e?.tokens?.length||0)+(this.#e?.primitives?.length||0)+(this.#e?.components?.length||0)+(this.#e?.utilities?.length||0),totalSizeKB:(((this.#e?.tokens?.length||0)+(this.#e?.primitives?.length||0)+(this.#e?.components?.length||0)+(this.#e?.utilities?.length||0))/1024).toFixed(2),layerCount:4,tokenGroups:Object.keys(this.tokens).length},helpers:{getColorScales:()=>{let e=[],t=this.tokens.colors;for(let[o,r]of Object.entries(t))typeof r=="object"&&r!==null&&e.push({name:o,scale:r});return e},getColorScale:e=>this.tokens.colors[e]||null,getSpacingValues:()=>Object.entries(this.tokens.spacing).map(([e,t])=>({key:e,value:t})),getTypography:()=>this.tokens.typography,getLayerCSS:e=>{let t=["tokens","primitives","components","utilities"];if(!t.includes(e))throw new Error(`Invalid layer: ${e}. Must be one of ${t.join(", ")}`);return this.#e?.[e]||""},usesEnumValue:(e,t)=>{let o=this.options.design||{};return JSON.stringify(o).includes(t)}}}}get tokensStylesheet(){return this.#o?.tokens}get primitivesStylesheet(){return this.#o?.primitives}get componentsStylesheet(){return this.#o?.components}get utilitiesStylesheet(){return this.#o?.utilities}getCSSModules(){return{"pds-tokens.css.js":this.#i("tokens",this.#e.tokens),"pds-primitives.css.js":this.#i("primitives",this.#e.primitives),"pds-components.css.js":this.#i("components",this.#e.components),"pds-utilities.css.js":this.#i("utilities",this.#e.utilities),"pds-styles.css.js":this.#i("styles",this.layeredCSS)}}#i(e,t){let o=t.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$/g,"\\$");return`// Pure Design System - ${e}
3163
- // Auto-generated - do not edit directly
3164
-
3165
- export const ${e} = new CSSStyleSheet();
3166
- ${e}.replaceSync(\`${o}\`);
3167
-
3168
- export const ${e}CSS = \`${o}\`;
3169
- `}static applyStyles(e){let t=e||n.instance;if(!t||typeof t!="object"){console.error("[Generator] applyStyles requires a generator object or active singleton");return}let o=t.layeredCSS||t.css||"";if(!o){t.options?.log?.("warn","[Generator] No CSS available on designer to apply");return}n.installRuntimeStyles(o)}static installRuntimeStyles(e){try{if(typeof document>"u")return;if(typeof CSSStyleSheet<"u"&&"adoptedStyleSheets"in Document.prototype){let r=new CSSStyleSheet;r.replaceSync(e),r._pds=!0;let a=(document.adoptedStyleSheets||[]).filter(i=>i._pds!==!0);document.adoptedStyleSheets=[...a,r],n.__pdsRuntimeSheet=r;return}let t="pds-runtime-stylesheet",o=document.getElementById(t);if(!o){o=document.createElement("style"),o.id=t,o.type="text/css";let r=document.head||document.getElementsByTagName("head")[0];r?r.appendChild(o):document.documentElement.appendChild(o)}o.textContent=e}catch(t){console.warn("Generator.installRuntimeStyles failed:",t)}}};async function He(n,e=[]){try{let t=await PDS.registry.getStylesheet("primitives");if(n.adoptedStyleSheets=[t,...e],PDS.registry.isLive){let o=n.host?.tagName?.toLowerCase()||"unknown"}}catch(t){let o=n.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${o}> failed to adopt primitives:`,t),n.adoptedStyleSheets=e}}async function qe(n,e=["primitives"],t=[]){try{let r=(await Promise.all(e.map(async a=>{if(A.instance)switch(a){case"tokens":return A.instance.tokensStylesheet;case"primitives":return A.instance.primitivesStylesheet;case"components":return A.instance.componentsStylesheet;case"utilities":return A.instance.utilitiesStylesheet;default:break}return Z.getStylesheet(a)}))).filter(a=>a!==null);if(n.adoptedStyleSheets=[...r,...t],PDS.registry.isLive){let a=n.host?.tagName?.toLowerCase()||"unknown"}}catch(o){let r=n.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${r}> failed to adopt layers:`,o),n.adoptedStyleSheets=t}}function Ge(n){let e=new CSSStyleSheet;return e.replaceSync(n),e}var L={"ocean-breeze":{id:"ocean-breeze",name:"Ocean Breeze",tags:["playful"],description:"Fresh and calming ocean-inspired palette with professional undertones",options:{liquidGlassEffects:!0,backgroundMesh:3},colors:{primary:"#0891b2",secondary:"#64748b",accent:"#06b6d4",background:"#f0f9ff",darkMode:{background:"#0c1821",secondary:"#94a3b8",primary:"#0891b2"}},typography:{baseFontSize:17,fontScale:1.5,fontFamilyHeadings:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontFamilyBody:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'},spatialRhythm:{baseUnit:6,scaleRatio:1.2},shape:{radiusSize:u.RadiusSizes.xxlarge}},"midnight-steel":{id:"midnight-steel",name:"Midnight Steel",description:"Bold industrial aesthetic with sharp contrasts and urban edge",colors:{primary:"#3b82f6",secondary:"#52525b",accent:"#f59e0b",background:"#fafaf9",darkMode:{background:"#18181b",secondary:"#71717a",primary:"#3b82f6"}},typography:{baseFontSize:16,fontScale:1.333,fontFamilyHeadings:"'IBM Plex Sans', system-ui, -apple-system, sans-serif",fontFamilyBody:"'Inter', system-ui, -apple-system, sans-serif",fontWeightSemibold:600},spatialRhythm:{baseUnit:4,scaleRatio:1.25},shape:{radiusSize:u.RadiusSizes.small,borderWidth:u.BorderWidths.thin}},"neural-glow":{id:"neural-glow",name:"Neural Glow",description:"AI-inspired with vibrant purple-blue gradients and futuristic vibes",colors:{primary:"#8b5cf6",secondary:"#6366f1",accent:"#ec4899",background:"#faf5ff",darkMode:{background:"#0f0a1a",secondary:"#818cf8",primary:"#8b5cf6"}},typography:{baseFontSize:16,fontScale:1.618,fontFamilyHeadings:"'Space Grotesk', system-ui, sans-serif",fontFamilyBody:"'Space Grotesk', system-ui, sans-serif"},spatialRhythm:{baseUnit:4,scaleRatio:1.5},shape:{radiusSize:u.RadiusSizes.xlarge,borderWidth:u.BorderWidths.medium},behavior:{transitionSpeed:u.TransitionSpeeds.fast}},"paper-and-ink":{id:"paper-and-ink",name:"Paper & Ink",tags:["app","featured"],description:"Ultra-minimal design with focus on typography and whitespace",colors:{primary:"#171717",secondary:"#737373",accent:"#525252",background:"#ffffff",darkMode:{background:"#0a0a0a",secondary:"#a3a3a3",primary:"#737373"}},typography:{baseFontSize:18,fontScale:1.333,fontFamilyHeadings:"'Helvetica Neue', 'Arial', sans-serif",fontFamilyBody:"'Georgia', 'Times New Roman', serif",fontWeightNormal:400,fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.2},shape:{radiusSize:u.RadiusSizes.none,borderWidth:u.BorderWidths.thin}},"sunset-paradise":{id:"sunset-paradise",name:"Sunset Paradise",description:"Warm tropical colors evoking golden hour by the beach",options:{liquidGlassEffects:!0,backgroundMesh:2},colors:{primary:"#ea580c",secondary:"#d4a373",accent:"#fb923c",background:"#fffbeb",darkMode:{background:"#1a0f0a",secondary:"#c9a482",primary:"#f97316"}},typography:{baseFontSize:16,fontScale:1.5,fontFamilyHeadings:"'Quicksand', 'Comfortaa', sans-serif",fontFamilyBody:"'Quicksand', 'Comfortaa', sans-serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.5},shape:{radiusSize:u.RadiusSizes.xxlarge,borderWidth:u.BorderWidths.medium}},"retro-wave":{id:"retro-wave",name:"Retro Wave",description:"Nostalgic 80s-inspired palette with neon undertones",colors:{primary:"#c026d3",secondary:"#a78bfa",accent:"#22d3ee",background:"#fef3ff",darkMode:{background:"#1a0a1f",secondary:"#c4b5fd",primary:"#d946ef"}},typography:{baseFontSize:15,fontScale:1.5,fontFamilyHeadings:"'Orbitron', 'Impact', monospace",fontFamilyBody:"'Courier New', 'Courier', monospace",fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.25},shape:{radiusSize:u.RadiusSizes.none,borderWidth:u.BorderWidths.thick},behavior:{transitionSpeed:u.TransitionSpeeds.instant}},"forest-canopy":{id:"forest-canopy",name:"Forest Canopy",description:"Natural earth tones with organic, calming green hues",colors:{primary:"#059669",secondary:"#78716c",accent:"#84cc16",background:"#f0fdf4",darkMode:{background:"#0a1410",secondary:"#a8a29e",primary:"#10b981"}},typography:{baseFontSize:16,fontScale:1.414,fontFamilyHeadings:"'Merriweather Sans', 'Arial', sans-serif",fontFamilyBody:"'Merriweather', 'Georgia', serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.3},shape:{radiusSize:u.RadiusSizes.medium,borderWidth:u.BorderWidths.thin}},"ruby-elegance":{id:"ruby-elegance",name:"Ruby Elegance",description:"Sophisticated palette with rich ruby reds and warm accents",colors:{primary:"#dc2626",secondary:"#9ca3af",accent:"#be123c",background:"#fef2f2",darkMode:{background:"#1b0808",secondary:"#d1d5db",primary:"#ef4444"}},typography:{baseFontSize:17,fontScale:1.5,fontFamilyHeadings:"'Playfair Display', 'Georgia', serif",fontFamilyBody:"'Crimson Text', 'Garamond', serif",fontWeightNormal:400,fontWeightSemibold:600},spatialRhythm:{baseUnit:4,scaleRatio:1.333},shape:{radiusSize:u.RadiusSizes.small,borderWidth:u.BorderWidths.thin}},"desert-dawn":{id:"desert-dawn",name:"Desert Dawn",description:"Sun-baked neutrals with grounded terracotta and cool oasis accents",colors:{primary:"#b45309",secondary:"#a8a29e",accent:"#0ea5a8",background:"#fcf6ef",darkMode:{background:"#12100e",secondary:"#d1d5db",primary:"#f59e0b"}},typography:{baseFontSize:16,fontScale:1.414,fontFamilyHeadings:"'Source Sans Pro', system-ui, -apple-system, sans-serif",fontFamilyBody:"'Source Serif Pro', Georgia, serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.3},shape:{radiusSize:u.RadiusSizes.medium,borderWidth:u.BorderWidths.medium}},"contrast-pro":{id:"contrast-pro",name:"Contrast Pro",description:"Accessibility-first, high-contrast UI with assertive clarity",colors:{primary:"#1f2937",secondary:"#111827",accent:"#eab308",background:"#ffffff",darkMode:{background:"#0b0f14",secondary:"#9ca3af",primary:"#9ca3af"}},typography:{baseFontSize:17,fontScale:1.2,fontFamilyHeadings:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontFamilyBody:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontWeightBold:700},spatialRhythm:{baseUnit:3,scaleRatio:1.2},shape:{radiusSize:u.RadiusSizes.small,borderWidth:u.BorderWidths.thick},behavior:{transitionSpeed:u.TransitionSpeeds.fast,focusRingWidth:4}},"pastel-play":{id:"pastel-play",name:"Pastel Play",description:"Playful pastels with soft surfaces and friendly rounded shapes",colors:{primary:"#db2777",secondary:"#a78bfa",accent:"#34d399",background:"#fff7fa",darkMode:{background:"#1a1016",secondary:"#c4b5fd",primary:"#ec4899"}},typography:{baseFontSize:16,fontScale:1.333,fontFamilyHeadings:"'Nunito', system-ui, -apple-system, sans-serif",fontFamilyBody:"'Nunito', system-ui, -apple-system, sans-serif",lineHeightRelaxed:u.LineHeights.relaxed},spatialRhythm:{baseUnit:6,scaleRatio:1.4},shape:{radiusSize:u.RadiusSizes.xxlarge,borderWidth:u.BorderWidths.thin},behavior:{transitionSpeed:u.TransitionSpeeds.slow,animationEasing:u.AnimationEasings["ease-out"]}},"brutalist-tech":{id:"brutalist-tech",name:"Brutalist Tech",description:"Stark grayscale with engineered accents and unapologetically bold structure",colors:{primary:"#111111",secondary:"#4b5563",accent:"#06b6d4",background:"#f8fafc",darkMode:{background:"#0b0b0b",secondary:"#9ca3af",primary:"#06b6d4"}},typography:{baseFontSize:15,fontScale:1.25,fontFamilyHeadings:"'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace",fontFamilyBody:"'Inter', system-ui, -apple-system, sans-serif",letterSpacingTight:-.02},spatialRhythm:{baseUnit:4,scaleRatio:1.25},shape:{radiusSize:u.RadiusSizes.none,borderWidth:u.BorderWidths.thick},behavior:{transitionSpeed:u.TransitionSpeeds.instant}},"zen-garden":{id:"zen-garden",name:"Zen Garden",description:"Soft botanicals with contemplative spacing and balanced motion",colors:{primary:"#3f6212",secondary:"#6b7280",accent:"#7c3aed",background:"#f7fbef",darkMode:{background:"#0d130a",secondary:"#a3a3a3",primary:"#84cc16"}},typography:{baseFontSize:17,fontScale:1.414,fontFamilyHeadings:"'Merriweather', Georgia, serif",fontFamilyBody:"'Noto Sans', system-ui, -apple-system, sans-serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.35},shape:{radiusSize:u.RadiusSizes.large,borderWidth:u.BorderWidths.medium},behavior:{transitionSpeed:u.TransitionSpeeds.normal,animationEasing:u.AnimationEasings.ease}},"fitness-pro":{id:"fitness-pro",name:"Fitness Pro",tags:["app","featured"],description:"Health and fitness tracking aesthetic with data-driven dark surfaces and vibrant accent rings",options:{liquidGlassEffects:!0,backgroundMesh:2},colors:{primary:"#e91e63",secondary:"#78909c",accent:"#ab47bc",background:"#fafafa",darkMode:{background:"#1a1d21",secondary:"#78909c",primary:"#0a4ca4"}},typography:{baseFontSize:15,fontScale:1.25,fontFamilyHeadings:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightNormal:u.LineHeights.tight},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerPadding:1.25,sectionSpacing:2.5},shape:{radiusSize:u.RadiusSizes.large,borderWidth:u.BorderWidths.thin},layers:{shadowDepth:"medium",blurMedium:12},behavior:{transitionSpeed:u.TransitionSpeeds.fast,animationEasing:u.AnimationEasings["ease-out"],focusRingWidth:2}},"travel-market":{id:"travel-market",name:"Travel Market",description:"Hospitality marketplace design with clean cards, subtle shadows, and trust-building neutrals",options:{liquidGlassEffects:!0,backgroundMesh:3},colors:{primary:"#d93251",secondary:"#717171",accent:"#144990",background:"#ffffff",darkMode:{background:"#222222",secondary:"#b0b0b0",primary:"#ff5a7a"}},typography:{baseFontSize:16,fontScale:1.2,fontFamilyHeadings:"'Circular', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Circular', system-ui, -apple-system, 'Segoe UI', sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightRelaxed:u.LineHeights.relaxed},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerMaxWidth:1440,containerPadding:1.5,sectionSpacing:3},shape:{radiusSize:u.RadiusSizes.medium,borderWidth:u.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:8},behavior:{transitionSpeed:u.TransitionSpeeds.normal,animationEasing:u.AnimationEasings["ease-in-out"],hoverOpacity:.9}},"mobility-app":{id:"mobility-app",name:"Mobility App",tags:["app","featured"],description:"On-demand service platform with bold typography, map-ready colors, and action-driven UI",options:{liquidGlassEffects:!0,backgroundMesh:0},colors:{primary:"#000000",secondary:"#545454",accent:"#06c167",background:"#f6f6f6",darkMode:{background:"#0f0f0f",secondary:"#8a8a8a",primary:"#06c167"}},typography:{baseFontSize:16,fontScale:1.3,fontFamilyHeadings:"'UberMove', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'UberMove', system-ui, -apple-system, 'Segoe UI', sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.25,buttonPadding:1.25,inputPadding:1},shape:{radiusSize:u.RadiusSizes.small,borderWidth:u.BorderWidths.medium},behavior:{transitionSpeed:u.TransitionSpeeds.fast,animationEasing:u.AnimationEasings["ease-out"],focusRingWidth:3},a11y:{minTouchTarget:u.TouchTargetSizes.comfortable,focusStyle:u.FocusStyles.ring}},"fintech-secure":{id:"fintech-secure",name:"Fintech Secure",description:"Financial services app UI with trust-building blues, precise spacing, and security-first design",options:{liquidGlassEffects:!1,backgroundMesh:0},colors:{primary:"#0a2540",secondary:"#425466",accent:"#00d4ff",background:"#f7fafc",darkMode:{background:"#0a1929",secondary:"#8796a5",primary:"#00d4ff"}},typography:{baseFontSize:16,fontScale:1.25,fontFamilyHeadings:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerMaxWidth:1280,sectionSpacing:2.5},shape:{radiusSize:u.RadiusSizes.medium,borderWidth:u.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:6},behavior:{transitionSpeed:u.TransitionSpeeds.fast,animationEasing:u.AnimationEasings["ease-in-out"],focusRingWidth:3,focusRingOpacity:.4},a11y:{minTouchTarget:u.TouchTargetSizes.standard,focusStyle:u.FocusStyles.ring}},"social-feed":{id:"social-feed",name:"Social Feed",tags:["app","featured"],description:"Content-first social platform with minimal chrome, bold actions, and vibrant media presentation",options:{liquidGlassEffects:!0,backgroundMesh:4},colors:{primary:"#1877f2",secondary:"#65676b",accent:"#fe2c55",background:"#ffffff",darkMode:{background:"#18191a",secondary:"#b0b3b8",primary:"#2d88ff"}},typography:{baseFontSize:15,fontScale:1.2,fontFamilyHeadings:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontFamilyBody:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightNormal:u.LineHeights.relaxed},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerMaxWidth:680,sectionSpacing:1.5},shape:{radiusSize:u.RadiusSizes.medium,borderWidth:u.BorderWidths.thin},behavior:{transitionSpeed:u.TransitionSpeeds.fast,animationEasing:u.AnimationEasings["ease-out"],hoverOpacity:.85}},"enterprise-dash":{id:"enterprise-dash",tags:["app","featured"],name:"Enterprise Dashboard",description:"Data-dense business intelligence app interface with organized hierarchy and professional polish",options:{liquidGlassEffects:!1},colors:{primary:"#0066cc",secondary:"#5f6368",accent:"#1a73e8",background:"#ffffff",success:"#34a853",warning:"#fbbc04",danger:"#ea4335",darkMode:{background:"#202124",secondary:"#9aa0a6",primary:"#8ab4f8"}},typography:{baseFontSize:14,fontScale:1.2,fontFamilyHeadings:"'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyMono:"'Roboto Mono', ui-monospace, Consolas, monospace",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightNormal:u.LineHeights.tight},spatialRhythm:{baseUnit:4,scaleRatio:1.2,containerMaxWidth:1600,containerPadding:1.5,sectionSpacing:2},shape:{radiusSize:u.RadiusSizes.small,borderWidth:u.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:4},behavior:{transitionSpeed:u.TransitionSpeeds.fast,animationEasing:u.AnimationEasings["ease-in-out"],focusRingWidth:2},layout:{densityCompact:.85,gridColumns:12}}};L.default={id:"default",name:"Default",tags:["app","featured"],description:"Fresh and modern design system with balanced aesthetics and usability",options:{liquidGlassEffects:!0,backgroundMesh:4},form:{options:{widgets:{booleans:"toggle",numbers:"input",selects:"standard"},layouts:{fieldsets:"default",arrays:"default"},enhancements:{icons:!0,datalists:!0,rangeOutput:!0},validation:{showErrors:!0,validateOnChange:!1}}},colors:{primary:"#0e7490",secondary:"#a99b95",accent:"#e54271",background:"#e7e6de",darkMode:{background:"#16171a",secondary:"#8b9199",primary:"#06b6d4"},success:null,warning:"#B38600",danger:null,info:null,gradientStops:3,elevationOpacity:.05},typography:{baseFontSize:16,fontScale:1.2,fontFamilyHeadings:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontFamilyBody:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontFamilyMono:'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',fontWeightLight:u.FontWeights.light,fontWeightNormal:u.FontWeights.normal,fontWeightMedium:u.FontWeights.medium,fontWeightSemibold:u.FontWeights.semibold,fontWeightBold:u.FontWeights.bold,lineHeightTight:u.LineHeights.tight,lineHeightNormal:u.LineHeights.normal,lineHeightRelaxed:u.LineHeights.relaxed,letterSpacingTight:-.025,letterSpacingNormal:0,letterSpacingWide:.025},spatialRhythm:{baseUnit:4,scaleRatio:1.25,maxSpacingSteps:32,containerMaxWidth:1200,containerPadding:1,inputPadding:.75,buttonPadding:1,sectionSpacing:2},layers:{shadowDepth:"medium",blurLight:4,blurMedium:8,blurHeavy:16,zIndexBase:0,zIndexDropdown:1e3,zIndexSticky:1020,zIndexFixed:1030,zIndexModal:1040,zIndexPopover:1050,zIndexTooltip:1060,zIndexNotification:1070},shape:{radiusSize:u.RadiusSizes.large,borderWidth:u.BorderWidths.medium,customRadius:null},behavior:{transitionSpeed:u.TransitionSpeeds.normal,animationEasing:u.AnimationEasings["ease-out"],customTransitionSpeed:null,customEasing:null,focusRingWidth:3,focusRingOpacity:.3,hoverOpacity:.8},layout:{gridColumns:12,gridGutter:1,breakpoints:{sm:640,md:768,lg:1024,xl:1280},densityCompact:.8,densityNormal:1,densityComfortable:1.2,buttonMinHeight:u.TouchTargetSizes.standard,inputMinHeight:40,utilities:{grid:!0,flex:!0,spacing:!0,container:!0},gridSystem:{columns:[1,2,3,4,6],autoFitBreakpoints:{sm:"150px",md:"250px",lg:"350px",xl:"450px"},enableGapUtilities:!0},containerMaxWidth:"1400px",containerPadding:"var(--spacing-6)"},advanced:{linkStyle:u.LinkStyles.inline,colorDerivation:"hsl"},a11y:{minTouchTarget:u.TouchTargetSizes.standard,prefersReducedMotion:!0,focusStyle:u.FocusStyles.ring},icons:{set:"phosphor",weight:"regular",defaultSize:24,externalPath:"/assets/img/icons/",sizes:{xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64},include:{navigation:["arrow-left","arrow-right","arrow-up","arrow-down","arrow-counter-clockwise","caret-left","caret-right","caret-down","caret-up","x","list","list-dashes","dots-three-vertical","dots-three","house","gear","magnifying-glass","funnel","tabs","sidebar"],actions:["plus","minus","check","trash","pencil","floppy-disk","copy","download","upload","share","link","eye","eye-slash","heart","star","bookmark","note-pencil","cursor-click","clipboard","magic-wand","sparkle"],communication:["envelope","bell","bell-ringing","bell-simple","chat-circle","phone","paper-plane-tilt","user","users","user-gear","at"],content:["image","file","file-text","file-css","file-js","folder","folder-open","book-open","camera","video-camera","play","pause","microphone","brackets-curly","code","folder-simple","grid-four","briefcase","chart-line","chart-bar","database","map-pin"],status:["info","warning","check-circle","x-circle","question","shield","shield-check","shield-warning","lock","lock-open","fingerprint","circle-notch"],time:["calendar","clock","timer","hourglass"],commerce:["shopping-cart","credit-card","currency-dollar","tag","receipt","storefront"],formatting:["text-align-left","text-align-center","text-align-right","text-b","text-italic","text-underline","list-bullets","list-numbers","text-aa"],system:["cloud","cloud-arrow-up","cloud-arrow-down","desktop","device-mobile","globe","wifi-high","battery-charging","sun","moon","moon-stars","palette","rocket","feather","square","circle","squares-four","lightning","wrench"]},spritePath:"public/assets/pds/icons/pds-icons.svg"},gap:4,debug:!1};function ce(n="log",e,...t){if(this?.debug||this?.design?.debug||!1||n==="error"||n==="warn"){let r=console[n]||console.log;t.length>0?r(e,...t):r(e)}}var le=globalThis,pe=le.ShadowRoot&&(le.ShadyCSS===void 0||le.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Ke=Symbol(),Ve=new WeakMap,de=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==Ke)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(pe&&e===void 0){let o=t!==void 0&&t.length===1;o&&(e=Ve.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&Ve.set(t,e))}return e}toString(){return this.cssText}},Ze=n=>new de(typeof n=="string"?n:n+"",void 0,Ke);var Je=(n,e)=>{if(pe)n.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(let t of e){let o=document.createElement("style"),r=le.litNonce;r!==void 0&&o.setAttribute("nonce",r),o.textContent=t.cssText,n.appendChild(o)}},xe=pe?n=>n:n=>n instanceof CSSStyleSheet?(e=>{let t="";for(let o of e.cssRules)t+=o.cssText;return Ze(t)})(n):n;var{is:_t,defineProperty:Ft,getOwnPropertyDescriptor:Rt,getOwnPropertyNames:Pt,getOwnPropertySymbols:Dt,getPrototypeOf:Wt}=Object,ue=globalThis,Qe=ue.trustedTypes,Bt=Qe?Qe.emptyScript:"",jt=ue.reactiveElementPolyfillSupport,J=(n,e)=>n,we={toAttribute(n,e){switch(e){case Boolean:n=n?Bt:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,e){let t=n;switch(e){case Boolean:t=n!==null;break;case Number:t=n===null?null:Number(n);break;case Object:case Array:try{t=JSON.parse(n)}catch{t=null}}return t}},Xe=(n,e)=>!_t(n,e),Ye={attribute:!0,type:String,converter:we,reflect:!1,useDefault:!1,hasChanged:Xe};Symbol.metadata??=Symbol("metadata"),ue.litPropertyMetadata??=new WeakMap;var R=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=Ye){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let o=Symbol(),r=this.getPropertyDescriptor(e,o,t);r!==void 0&&Ft(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){let{get:r,set:a}=Rt(this.prototype,e)??{get(){return this[t]},set(i){this[t]=i}};return{get:r,set(i){let c=r?.call(this);a?.call(this,i),this.requestUpdate(e,c,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ye}static _$Ei(){if(this.hasOwnProperty(J("elementProperties")))return;let e=Wt(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(J("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(J("properties"))){let t=this.properties,o=[...Pt(t),...Dt(t)];for(let r of o)this.createProperty(r,t[r])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[o,r]of t)this.elementProperties.set(o,r)}this._$Eh=new Map;for(let[t,o]of this.elementProperties){let r=this._$Eu(t,o);r!==void 0&&this._$Eh.set(r,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let o=new Set(e.flat(1/0).reverse());for(let r of o)t.unshift(xe(r))}else e!==void 0&&t.push(xe(e));return t}static _$Eu(e,t){let o=t.attribute;return o===!1?void 0:typeof o=="string"?o:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(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,t=this.constructor.elementProperties;for(let o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Je(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$ET(e,t){let o=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,o);if(r!==void 0&&o.reflect===!0){let a=(o.converter?.toAttribute!==void 0?o.converter:we).toAttribute(t,o.type);this._$Em=e,a==null?this.removeAttribute(r):this.setAttribute(r,a),this._$Em=null}}_$AK(e,t){let o=this.constructor,r=o._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let a=o.getPropertyOptions(r),i=typeof a.converter=="function"?{fromAttribute:a.converter}:a.converter?.fromAttribute!==void 0?a.converter:we;this._$Em=r;let c=i.fromAttribute(t,a.type);this[r]=c??this._$Ej?.get(r)??c,this._$Em=null}}requestUpdate(e,t,o){if(e!==void 0){let r=this.constructor,a=this[e];if(o??=r.getPropertyOptions(e),!((o.hasChanged??Xe)(a,t)||o.useDefault&&o.reflect&&a===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,o))))return;this.C(e,t,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:r,wrapped:a},i){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,i??t??this[e]),a!==!0||i!==void 0)||(this._$AL.has(e)||(this.hasUpdated||o||(t=void 0),this._$AL.set(e,t)),r===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}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.createRenderRoot(),this._$Ep){for(let[r,a]of this._$Ep)this[r]=a;this._$Ep=void 0}let o=this.constructor.elementProperties;if(o.size>0)for(let[r,a]of o){let{wrapped:i}=a,c=this[r];i!==!0||this._$AL.has(r)||c===void 0||this.C(r,void 0,a,c)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(o=>o.hostUpdate?.()),this.update(t)):this._$EM()}catch(o){throw e=!1,this._$EM(),o}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(t=>t.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.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(e){}firstUpdated(e){}};R.elementStyles=[],R.shadowRootOptions={mode:"open"},R[J("elementProperties")]=new Map,R[J("finalized")]=new Map,jt?.({ReactiveElement:R}),(ue.reactiveElementVersions??=[]).push("2.1.1");var Ae=globalThis,ge=Ae.trustedTypes,et=ge?ge.createPolicy("lit-html",{createHTML:n=>n}):void 0,it="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,st="?"+P,Ut=`<${st}>`,U=document,Y=()=>U.createComment(""),X=n=>n===null||typeof n!="object"&&typeof n!="function",Me=Array.isArray,Nt=n=>Me(n)||typeof n?.[Symbol.iterator]=="function",ke=`[
3170
- \f\r]`,Q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,tt=/-->/g,rt=/>/g,B=RegExp(`>|${ke}(?:([^\\s"'>=/]+)(${ke}*=${ke}*(?:[^
3171
- \f\r"'\`<>=]|("|')|))|$)`,"g"),ot=/'/g,at=/"/g,ct=/^(?:script|style|textarea|title)$/i,Te=n=>(e,...t)=>({_$litType$:n,strings:e,values:t}),Lr=Te(1),_r=Te(2),Fr=Te(3),N=Symbol.for("lit-noChange"),$=Symbol.for("lit-nothing"),nt=new WeakMap,j=U.createTreeWalker(U,129);function lt(n,e){if(!Me(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return et!==void 0?et.createHTML(e):e}var Ot=(n,e)=>{let t=n.length-1,o=[],r,a=e===2?"<svg>":e===3?"<math>":"",i=Q;for(let c=0;c<t;c++){let s=n[c],l,d,p=-1,g=0;for(;g<s.length&&(i.lastIndex=g,d=i.exec(s),d!==null);)g=i.lastIndex,i===Q?d[1]==="!--"?i=tt:d[1]!==void 0?i=rt:d[2]!==void 0?(ct.test(d[2])&&(r=RegExp("</"+d[2],"g")),i=B):d[3]!==void 0&&(i=B):i===B?d[0]===">"?(i=r??Q,p=-1):d[1]===void 0?p=-2:(p=i.lastIndex-d[2].length,l=d[1],i=d[3]===void 0?B:d[3]==='"'?at:ot):i===at||i===ot?i=B:i===tt||i===rt?i=Q:(i=B,r=void 0);let h=i===B&&n[c+1].startsWith("/>")?" ":"";a+=i===Q?s+Ut:p>=0?(o.push(l),s.slice(0,p)+it+s.slice(p)+P+h):s+P+(p===-2?c:h)}return[lt(n,a+(n[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),o]},ee=class n{constructor({strings:e,_$litType$:t},o){let r;this.parts=[];let a=0,i=0,c=e.length-1,s=this.parts,[l,d]=Ot(e,t);if(this.el=n.createElement(l,o),j.currentNode=this.el.content,t===2||t===3){let p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(r=j.nextNode())!==null&&s.length<c;){if(r.nodeType===1){if(r.hasAttributes())for(let p of r.getAttributeNames())if(p.endsWith(it)){let g=d[i++],h=r.getAttribute(p).split(P),w=/([.?@])?(.*)/.exec(g);s.push({type:1,index:a,name:w[2],strings:h,ctor:w[1]==="."?$e:w[1]==="?"?Ee:w[1]==="@"?ze:G}),r.removeAttribute(p)}else p.startsWith(P)&&(s.push({type:6,index:a}),r.removeAttribute(p));if(ct.test(r.tagName)){let p=r.textContent.split(P),g=p.length-1;if(g>0){r.textContent=ge?ge.emptyScript:"";for(let h=0;h<g;h++)r.append(p[h],Y()),j.nextNode(),s.push({type:2,index:++a});r.append(p[g],Y())}}}else if(r.nodeType===8)if(r.data===st)s.push({type:2,index:a});else{let p=-1;for(;(p=r.data.indexOf(P,p+1))!==-1;)s.push({type:7,index:a}),p+=P.length-1}a++}}static createElement(e,t){let o=U.createElement("template");return o.innerHTML=e,o}};function q(n,e,t=n,o){if(e===N)return e;let r=o!==void 0?t._$Co?.[o]:t._$Cl,a=X(e)?void 0:e._$litDirective$;return r?.constructor!==a&&(r?._$AO?.(!1),a===void 0?r=void 0:(r=new a(n),r._$AT(n,t,o)),o!==void 0?(t._$Co??=[])[o]=r:t._$Cl=r),r!==void 0&&(e=q(n,r._$AS(n,e.values),r,o)),e}var Se=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:o}=this._$AD,r=(e?.creationScope??U).importNode(t,!0);j.currentNode=r;let a=j.nextNode(),i=0,c=0,s=o[0];for(;s!==void 0;){if(i===s.index){let l;s.type===2?l=new te(a,a.nextSibling,this,e):s.type===1?l=new s.ctor(a,s.name,s.strings,this,e):s.type===6&&(l=new Ce(a,this,e)),this._$AV.push(l),s=o[++c]}i!==s?.index&&(a=j.nextNode(),i++)}return j.currentNode=U,r}p(e){let t=0;for(let o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(e,o,t),t+=o.strings.length-2):o._$AI(e[t])),t++}},te=class n{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,o,r){this.type=2,this._$AH=$,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=o,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=q(this,e,t),X(e)?e===$||e==null||e===""?(this._$AH!==$&&this._$AR(),this._$AH=$):e!==this._$AH&&e!==N&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Nt(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==$&&X(this._$AH)?this._$AA.nextSibling.data=e:this.T(U.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:o}=e,r=typeof o=="number"?this._$AC(e):(o.el===void 0&&(o.el=ee.createElement(lt(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===r)this._$AH.p(t);else{let a=new Se(r,this),i=a.u(this.options);a.p(t),this.T(i),this._$AH=a}}_$AC(e){let t=nt.get(e.strings);return t===void 0&&nt.set(e.strings,t=new ee(e)),t}k(e){Me(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,o,r=0;for(let a of e)r===t.length?t.push(o=new n(this.O(Y()),this.O(Y()),this,this.options)):o=t[r],o._$AI(a),r++;r<t.length&&(this._$AR(o&&o._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let o=e.nextSibling;e.remove(),e=o}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},G=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,o,r,a){this.type=1,this._$AH=$,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=a,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=$}_$AI(e,t=this,o,r){let a=this.strings,i=!1;if(a===void 0)e=q(this,e,t,0),i=!X(e)||e!==this._$AH&&e!==N,i&&(this._$AH=e);else{let c=e,s,l;for(e=a[0],s=0;s<a.length-1;s++)l=q(this,c[o+s],t,s),l===N&&(l=this._$AH[s]),i||=!X(l)||l!==this._$AH[s],l===$?e=$:e!==$&&(e+=(l??"")+a[s+1]),this._$AH[s]=l}i&&!r&&this.j(e)}j(e){e===$?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},$e=class extends G{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===$?void 0:e}},Ee=class extends G{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==$)}},ze=class extends G{constructor(e,t,o,r,a){super(e,t,o,r,a),this.type=5}_$AI(e,t=this){if((e=q(this,e,t,0)??$)===N)return;let o=this._$AH,r=e===$&&o!==$||e.capture!==o.capture||e.once!==o.once||e.passive!==o.passive,a=e!==$&&(o===$||r);r&&this.element.removeEventListener(this.name,this,o),a&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},Ce=class{constructor(e,t,o){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(e){q(this,e)}};var It=Ae.litHtmlPolyfillSupport;It?.(ee,te),(Ae.litHtmlVersions??=[]).push("3.3.1");var O=(n,e,t)=>{let o=t?.renderBefore??e,r=o._$litPart$;if(r===void 0){let a=t?.renderBefore??null;o._$litPart$=r=new te(e.insertBefore(Y(),a),a,void 0,t??{})}return r._$AI(n),r};var Le=globalThis,V=class extends R{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=O(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return N}};V._$litElement$=!0,V.finalized=!0,Le.litElementHydrateSupport?.({LitElement:V});var Ht=Le.litElementPolyfillSupport;Ht?.({LitElement:V});(Le.litElementVersions??=[]).push("4.2.1");var dt={mode:"live",preset:"default",autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(n,e,...t){console[n](e,...t)}};async function pt(n,e={}){return e={...{title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}},...e},new Promise(o=>{let r=document.createElement("dialog");dt.options?.liquidGlassEffects&&r.classList.add("liquid-glass"),e.size&&r.classList.add(`dialog-${e.size}`),e.type&&r.classList.add(`dialog-${e.type}`),e.class&&(Array.isArray(e.class)?r.classList.add(...e.class):r.classList.add(e.class)),e.maxHeight&&r.style.setProperty("--dialog-max-height",e.maxHeight);let a=Object.entries(e.buttons).map(([c,s])=>{let l=s.primary?"btn-primary btn-sm":"btn-outline btn-sm";return`<button type="${s.cancel?"button":"submit"}" class="${l}" value="${c}">${s.name}</button>`});if(e.useForm){let c=document.createElement("div");typeof n=="object"&&n._$litType$?O(n,c):typeof n=="string"?c.textContent=n:O(n,c);let s=c.querySelector("form");if(s){r.innerHTML=`
1
+ var wt=Object.defineProperty;var me=(t,e)=>()=>(t&&(e=t(t=0)),e);var De=(t,e)=>{for(var s in e)wt(t,s,{get:e[s],enumerable:!0})};var ct={};De(ct,{AutoDefiner:()=>Me});async function Jt(...t){let e={};t.length&&typeof t[t.length-1]=="object"&&(e=t.pop()||{});let s=t,{baseURL:n,mapper:i=u=>`${u}.js`,onError:r=(u,l)=>console.error(`[defineWebComponents] ${u}:`,l)}=e,o=n?new URL(n,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),a=u=>u.toLowerCase().replace(/(^|-)([a-z])/g,(l,p,g)=>g.toUpperCase()),c=async u=>{try{if(customElements.get(u))return{tag:u,status:"already-defined"};let l=i(u),g=await import(l instanceof URL?l.href:new URL(l,o).href),h=g?.default??g?.[a(u)];if(!h){if(customElements.get(u))return{tag:u,status:"self-defined"};throw new Error(`No export found for ${u}. Expected default export or named export "${a(u)}".`)}return customElements.get(u)?{tag:u,status:"race-already-defined"}:(customElements.define(u,h),{tag:u,status:"defined"})}catch(l){throw r(u,l),l}};return Promise.all(s.map(c))}var Me,dt=me(()=>{Me=class{constructor(e={}){let{baseURL:s,mapper:n,onError:i,predicate:r=()=>!0,attributeModule:o="data-module",root:a=document,scanExisting:c=!0,debounceMs:u=16,observeShadows:l=!0,enhancers:p=[],patchAttachShadow:g=!0}=e,h=new Set,v=new Set,k=new Set,b=new Map,A=new WeakMap,F=new WeakMap,w=0,C=!1,H=null,fe=f=>{if(!f||!p.length)return;let y=F.get(f);y||(y=new Set,F.set(f,y));for(let m of p)if(!(!m.selector||!m.run)&&!y.has(m.selector))try{f.matches&&f.matches(m.selector)&&(m.run(f),y.add(m.selector))}catch($){console.warn(`[AutoDefiner] Error applying enhancer for selector "${m.selector}":`,$)}},te=(f,y)=>{if(!C&&!(!f||!f.includes("-"))&&!customElements.get(f)&&!v.has(f)&&!k.has(f)){if(y&&y.getAttribute){let m=y.getAttribute(o);m&&!b.has(f)&&b.set(f,m)}h.add(f),ze()}},ze=()=>{w||(w=setTimeout(ne,u))},L=f=>{if(f){if(f.nodeType===1){let y=f,m=y.tagName?.toLowerCase();m&&m.includes("-")&&!customElements.get(m)&&r(m,y)&&te(m,y),fe(y),l&&y.shadowRoot&&se(y.shadowRoot)}f.querySelectorAll&&f.querySelectorAll("*").forEach(y=>{let m=y.tagName?.toLowerCase();m&&m.includes("-")&&!customElements.get(m)&&r(m,y)&&te(m,y),fe(y),l&&y.shadowRoot&&se(y.shadowRoot)})}},se=f=>{if(!f||A.has(f))return;L(f);let y=new MutationObserver(m=>{for(let $ of m)$.addedNodes?.forEach(B=>{L(B)}),$.type==="attributes"&&$.target&&L($.target)});y.observe(f,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[o,...p.map(m=>m.selector).filter(m=>m.startsWith("data-"))]}),A.set(f,y)};async function ne(){if(clearTimeout(w),w=0,!h.size)return;let f=Array.from(h);h.clear(),f.forEach(y=>v.add(y));try{let y=m=>b.get(m)??(n?n(m):`${m}.js`);await Jt(...f,{baseURL:s,mapper:y,onError:(m,$)=>{k.add(m),i?.(m,$)}})}catch{}finally{f.forEach(y=>v.delete(y))}}let ie=a===document?document.documentElement:a,M=new MutationObserver(f=>{for(let y of f)y.addedNodes?.forEach(m=>{L(m)}),y.type==="attributes"&&y.target&&L(y.target)});if(M.observe(ie,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[o,...p.map(f=>f.selector).filter(f=>f.startsWith("data-"))]}),l&&g&&Element.prototype.attachShadow){let f=Element.prototype.attachShadow;Element.prototype.attachShadow=function(m){let $=f.call(this,m);if(m&&m.mode==="open"){se($);let B=this.tagName?.toLowerCase();B&&B.includes("-")&&!customElements.get(B)&&te(B,this)}return $},H=()=>Element.prototype.attachShadow=f}return c&&L(ie),{stop(){C=!0,M.disconnect(),H&&H(),w&&(clearTimeout(w),w=0),A.forEach(f=>f.disconnect())},flush:ne}}static async define(...e){let s={};e.length&&typeof e[e.length-1]=="object"&&(s=e.pop()||{});let n=e,{baseURL:i,mapper:r=l=>`${l}.js`,onError:o=(l,p)=>console.error(`[defineWebComponents] ${l}:`,p)}=s,a=i?new URL(i,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),c=l=>l.toLowerCase().replace(/(^|-)([a-z])/g,(p,g,h)=>h.toUpperCase()),u=async l=>{try{if(customElements.get(l))return{tag:l,status:"already-defined"};let p=r(l),h=await import(p instanceof URL?p.href:new URL(p,a).href),v=h?.default??h?.[c(l)];if(!v){if(customElements.get(l))return{tag:l,status:"self-defined"};throw new Error(`No export found for ${l}. Expected default export or named export "${c(l)}".`)}return customElements.get(l)?{tag:l,status:"race-already-defined"}:(customElements.define(l,v),{tag:l,status:"defined"})}catch(p){throw o(l,p),p}};return Promise.all(n.map(u))}}});var d,mt=me(()=>{d={FontWeights:{light:300,normal:400,medium:500,semibold:600,bold:700},LineHeights:{tight:1.25,normal:1.5,relaxed:1.75},BorderWidths:{hairline:.5,thin:1,medium:2,thick:3},RadiusSizes:{none:0,small:4,medium:8,large:16,xlarge:24,xxlarge:32},ShadowDepths:{none:"none",light:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",medium:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",deep:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",extreme:"0 25px 50px -12px rgba(0, 0, 0, 0.25)"},TransitionSpeeds:{fast:150,normal:250,slow:350},AnimationEasings:{linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},TouchTargetSizes:{compact:36,standard:44,comfortable:48,spacious:56},LinkStyles:{inline:"inline",block:"block",button:"button"},FocusStyles:{ring:"ring",outline:"outline",border:"border",glow:"glow"},TabSizes:{compact:2,standard:4,wide:8},SelectIcons:{chevron:"chevron",arrow:"arrow",caret:"caret",none:"none"}}});var gt={};De(gt,{defaultLog:()=>Zt,presets:()=>yt});function Zt(t="log",e,...s){if(this?.debug||this?.design?.debug||!1||t==="error"||t==="warn"){let i=console[t]||console.log;s.length>0?i(e,...s):i(e)}}var yt,bt=me(()=>{mt();yt={"ocean-breeze":{id:"ocean-breeze",name:"Ocean Breeze",tags:["playful"],description:"Fresh and calming ocean-inspired palette with professional undertones",options:{liquidGlassEffects:!0,backgroundMesh:3},colors:{primary:"#0891b2",secondary:"#64748b",accent:"#06b6d4",background:"#f0f9ff",darkMode:{background:"#0c1821",secondary:"#94a3b8",primary:"#0891b2"}},typography:{baseFontSize:17,fontScale:1.5,fontFamilyHeadings:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontFamilyBody:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'},spatialRhythm:{baseUnit:6,scaleRatio:1.2},shape:{radiusSize:d.RadiusSizes.xxlarge}},"midnight-steel":{id:"midnight-steel",name:"Midnight Steel",description:"Bold industrial aesthetic with sharp contrasts and urban edge",colors:{primary:"#3b82f6",secondary:"#52525b",accent:"#f59e0b",background:"#fafaf9",darkMode:{background:"#18181b",secondary:"#71717a",primary:"#3b82f6"}},typography:{baseFontSize:16,fontScale:1.333,fontFamilyHeadings:"'IBM Plex Sans', system-ui, -apple-system, sans-serif",fontFamilyBody:"'Inter', system-ui, -apple-system, sans-serif",fontWeightSemibold:600},spatialRhythm:{baseUnit:4,scaleRatio:1.25},shape:{radiusSize:d.RadiusSizes.small,borderWidth:d.BorderWidths.thin}},"neural-glow":{id:"neural-glow",name:"Neural Glow",description:"AI-inspired with vibrant purple-blue gradients and futuristic vibes",colors:{primary:"#8b5cf6",secondary:"#6366f1",accent:"#ec4899",background:"#faf5ff",darkMode:{background:"#0f0a1a",secondary:"#818cf8",primary:"#8b5cf6"}},typography:{baseFontSize:16,fontScale:1.618,fontFamilyHeadings:"'Space Grotesk', system-ui, sans-serif",fontFamilyBody:"'Space Grotesk', system-ui, sans-serif"},spatialRhythm:{baseUnit:4,scaleRatio:1.5},shape:{radiusSize:d.RadiusSizes.xlarge,borderWidth:d.BorderWidths.medium},behavior:{transitionSpeed:d.TransitionSpeeds.fast}},"paper-and-ink":{id:"paper-and-ink",name:"Paper & Ink",tags:["app","featured"],description:"Ultra-minimal design with focus on typography and whitespace",colors:{primary:"#171717",secondary:"#737373",accent:"#525252",background:"#ffffff",darkMode:{background:"#0a0a0a",secondary:"#a3a3a3",primary:"#737373"}},typography:{baseFontSize:18,fontScale:1.333,fontFamilyHeadings:"'Helvetica Neue', 'Arial', sans-serif",fontFamilyBody:"'Georgia', 'Times New Roman', serif",fontWeightNormal:400,fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.2},shape:{radiusSize:d.RadiusSizes.none,borderWidth:d.BorderWidths.thin}},"sunset-paradise":{id:"sunset-paradise",name:"Sunset Paradise",description:"Warm tropical colors evoking golden hour by the beach",options:{liquidGlassEffects:!0,backgroundMesh:2},colors:{primary:"#ea580c",secondary:"#d4a373",accent:"#fb923c",background:"#fffbeb",darkMode:{background:"#1a0f0a",secondary:"#c9a482",primary:"#f97316"}},typography:{baseFontSize:16,fontScale:1.5,fontFamilyHeadings:"'Quicksand', 'Comfortaa', sans-serif",fontFamilyBody:"'Quicksand', 'Comfortaa', sans-serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.5},shape:{radiusSize:d.RadiusSizes.xxlarge,borderWidth:d.BorderWidths.medium}},"retro-wave":{id:"retro-wave",name:"Retro Wave",description:"Nostalgic 80s-inspired palette with neon undertones",colors:{primary:"#c026d3",secondary:"#a78bfa",accent:"#22d3ee",background:"#fef3ff",darkMode:{background:"#1a0a1f",secondary:"#c4b5fd",primary:"#d946ef"}},typography:{baseFontSize:15,fontScale:1.5,fontFamilyHeadings:"'Orbitron', 'Impact', monospace",fontFamilyBody:"'Courier New', 'Courier', monospace",fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.25},shape:{radiusSize:d.RadiusSizes.none,borderWidth:d.BorderWidths.thick},behavior:{transitionSpeed:d.TransitionSpeeds.instant}},"forest-canopy":{id:"forest-canopy",name:"Forest Canopy",description:"Natural earth tones with organic, calming green hues",colors:{primary:"#059669",secondary:"#78716c",accent:"#84cc16",background:"#f0fdf4",darkMode:{background:"#0a1410",secondary:"#a8a29e",primary:"#10b981"}},typography:{baseFontSize:16,fontScale:1.414,fontFamilyHeadings:"'Merriweather Sans', 'Arial', sans-serif",fontFamilyBody:"'Merriweather', 'Georgia', serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.3},shape:{radiusSize:d.RadiusSizes.medium,borderWidth:d.BorderWidths.thin}},"ruby-elegance":{id:"ruby-elegance",name:"Ruby Elegance",description:"Sophisticated palette with rich ruby reds and warm accents",colors:{primary:"#dc2626",secondary:"#9ca3af",accent:"#be123c",background:"#fef2f2",darkMode:{background:"#1b0808",secondary:"#d1d5db",primary:"#ef4444"}},typography:{baseFontSize:17,fontScale:1.5,fontFamilyHeadings:"'Playfair Display', 'Georgia', serif",fontFamilyBody:"'Crimson Text', 'Garamond', serif",fontWeightNormal:400,fontWeightSemibold:600},spatialRhythm:{baseUnit:4,scaleRatio:1.333},shape:{radiusSize:d.RadiusSizes.small,borderWidth:d.BorderWidths.thin}},"desert-dawn":{id:"desert-dawn",name:"Desert Dawn",description:"Sun-baked neutrals with grounded terracotta and cool oasis accents",colors:{primary:"#b45309",secondary:"#a8a29e",accent:"#0ea5a8",background:"#fcf6ef",darkMode:{background:"#12100e",secondary:"#d1d5db",primary:"#f59e0b"}},typography:{baseFontSize:16,fontScale:1.414,fontFamilyHeadings:"'Source Sans Pro', system-ui, -apple-system, sans-serif",fontFamilyBody:"'Source Serif Pro', Georgia, serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.3},shape:{radiusSize:d.RadiusSizes.medium,borderWidth:d.BorderWidths.medium}},"contrast-pro":{id:"contrast-pro",name:"Contrast Pro",description:"Accessibility-first, high-contrast UI with assertive clarity",colors:{primary:"#1f2937",secondary:"#111827",accent:"#eab308",background:"#ffffff",darkMode:{background:"#0b0f14",secondary:"#9ca3af",primary:"#9ca3af"}},typography:{baseFontSize:17,fontScale:1.2,fontFamilyHeadings:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontFamilyBody:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontWeightBold:700},spatialRhythm:{baseUnit:3,scaleRatio:1.2},shape:{radiusSize:d.RadiusSizes.small,borderWidth:d.BorderWidths.thick},behavior:{transitionSpeed:d.TransitionSpeeds.fast,focusRingWidth:4}},"pastel-play":{id:"pastel-play",name:"Pastel Play",description:"Playful pastels with soft surfaces and friendly rounded shapes",colors:{primary:"#db2777",secondary:"#a78bfa",accent:"#34d399",background:"#fff7fa",darkMode:{background:"#1a1016",secondary:"#c4b5fd",primary:"#ec4899"}},typography:{baseFontSize:16,fontScale:1.333,fontFamilyHeadings:"'Nunito', system-ui, -apple-system, sans-serif",fontFamilyBody:"'Nunito', system-ui, -apple-system, sans-serif",lineHeightRelaxed:d.LineHeights.relaxed},spatialRhythm:{baseUnit:6,scaleRatio:1.4},shape:{radiusSize:d.RadiusSizes.xxlarge,borderWidth:d.BorderWidths.thin},behavior:{transitionSpeed:d.TransitionSpeeds.slow,animationEasing:d.AnimationEasings["ease-out"]}},"brutalist-tech":{id:"brutalist-tech",name:"Brutalist Tech",description:"Stark grayscale with engineered accents and unapologetically bold structure",colors:{primary:"#111111",secondary:"#4b5563",accent:"#06b6d4",background:"#f8fafc",darkMode:{background:"#0b0b0b",secondary:"#9ca3af",primary:"#06b6d4"}},typography:{baseFontSize:15,fontScale:1.25,fontFamilyHeadings:"'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace",fontFamilyBody:"'Inter', system-ui, -apple-system, sans-serif",letterSpacingTight:-.02},spatialRhythm:{baseUnit:4,scaleRatio:1.25},shape:{radiusSize:d.RadiusSizes.none,borderWidth:d.BorderWidths.thick},behavior:{transitionSpeed:d.TransitionSpeeds.instant}},"zen-garden":{id:"zen-garden",name:"Zen Garden",description:"Soft botanicals with contemplative spacing and balanced motion",colors:{primary:"#3f6212",secondary:"#6b7280",accent:"#7c3aed",background:"#f7fbef",darkMode:{background:"#0d130a",secondary:"#a3a3a3",primary:"#84cc16"}},typography:{baseFontSize:17,fontScale:1.414,fontFamilyHeadings:"'Merriweather', Georgia, serif",fontFamilyBody:"'Noto Sans', system-ui, -apple-system, sans-serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.35},shape:{radiusSize:d.RadiusSizes.large,borderWidth:d.BorderWidths.medium},behavior:{transitionSpeed:d.TransitionSpeeds.normal,animationEasing:d.AnimationEasings.ease}},"fitness-pro":{id:"fitness-pro",name:"Fitness Pro",tags:["app","featured"],description:"Health and fitness tracking aesthetic with data-driven dark surfaces and vibrant accent rings",options:{liquidGlassEffects:!0,backgroundMesh:2},colors:{primary:"#e91e63",secondary:"#78909c",accent:"#ab47bc",background:"#fafafa",darkMode:{background:"#1a1d21",secondary:"#78909c",primary:"#0a4ca4"}},typography:{baseFontSize:15,fontScale:1.25,fontFamilyHeadings:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightNormal:d.LineHeights.tight},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerPadding:1.25,sectionSpacing:2.5},shape:{radiusSize:d.RadiusSizes.large,borderWidth:d.BorderWidths.thin},layers:{shadowDepth:"medium",blurMedium:12},behavior:{transitionSpeed:d.TransitionSpeeds.fast,animationEasing:d.AnimationEasings["ease-out"],focusRingWidth:2}},"travel-market":{id:"travel-market",name:"Travel Market",description:"Hospitality marketplace design with clean cards, subtle shadows, and trust-building neutrals",options:{liquidGlassEffects:!0,backgroundMesh:3},colors:{primary:"#d93251",secondary:"#717171",accent:"#144990",background:"#ffffff",darkMode:{background:"#222222",secondary:"#b0b0b0",primary:"#ff5a7a"}},typography:{baseFontSize:16,fontScale:1.2,fontFamilyHeadings:"'Circular', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Circular', system-ui, -apple-system, 'Segoe UI', sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightRelaxed:d.LineHeights.relaxed},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerMaxWidth:1440,containerPadding:1.5,sectionSpacing:3},shape:{radiusSize:d.RadiusSizes.medium,borderWidth:d.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:8},behavior:{transitionSpeed:d.TransitionSpeeds.normal,animationEasing:d.AnimationEasings["ease-in-out"],hoverOpacity:.9}},"mobility-app":{id:"mobility-app",name:"Mobility App",tags:["app","featured"],description:"On-demand service platform with bold typography, map-ready colors, and action-driven UI",options:{liquidGlassEffects:!0,backgroundMesh:0},colors:{primary:"#000000",secondary:"#545454",accent:"#06c167",background:"#f6f6f6",darkMode:{background:"#0f0f0f",secondary:"#8a8a8a",primary:"#06c167"}},typography:{baseFontSize:16,fontScale:1.3,fontFamilyHeadings:"'UberMove', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'UberMove', system-ui, -apple-system, 'Segoe UI', sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.25,buttonPadding:1.25,inputPadding:1},shape:{radiusSize:d.RadiusSizes.small,borderWidth:d.BorderWidths.medium},behavior:{transitionSpeed:d.TransitionSpeeds.fast,animationEasing:d.AnimationEasings["ease-out"],focusRingWidth:3},a11y:{minTouchTarget:d.TouchTargetSizes.comfortable,focusStyle:d.FocusStyles.ring}},"fintech-secure":{id:"fintech-secure",name:"Fintech Secure",description:"Financial services app UI with trust-building blues, precise spacing, and security-first design",options:{liquidGlassEffects:!1,backgroundMesh:0},colors:{primary:"#0a2540",secondary:"#425466",accent:"#00d4ff",background:"#f7fafc",darkMode:{background:"#0a1929",secondary:"#8796a5",primary:"#00d4ff"}},typography:{baseFontSize:16,fontScale:1.25,fontFamilyHeadings:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerMaxWidth:1280,sectionSpacing:2.5},shape:{radiusSize:d.RadiusSizes.medium,borderWidth:d.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:6},behavior:{transitionSpeed:d.TransitionSpeeds.fast,animationEasing:d.AnimationEasings["ease-in-out"],focusRingWidth:3,focusRingOpacity:.4},a11y:{minTouchTarget:d.TouchTargetSizes.standard,focusStyle:d.FocusStyles.ring}},"social-feed":{id:"social-feed",name:"Social Feed",tags:["app","featured"],description:"Content-first social platform with minimal chrome, bold actions, and vibrant media presentation",options:{liquidGlassEffects:!0,backgroundMesh:4},colors:{primary:"#1877f2",secondary:"#65676b",accent:"#fe2c55",background:"#ffffff",darkMode:{background:"#18191a",secondary:"#b0b3b8",primary:"#2d88ff"}},typography:{baseFontSize:15,fontScale:1.2,fontFamilyHeadings:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontFamilyBody:"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightNormal:d.LineHeights.relaxed},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerMaxWidth:680,sectionSpacing:1.5},shape:{radiusSize:d.RadiusSizes.medium,borderWidth:d.BorderWidths.thin},behavior:{transitionSpeed:d.TransitionSpeeds.fast,animationEasing:d.AnimationEasings["ease-out"],hoverOpacity:.85}},"enterprise-dash":{id:"enterprise-dash",tags:["app","featured"],name:"Enterprise Dashboard",description:"Data-dense business intelligence app interface with organized hierarchy and professional polish",options:{liquidGlassEffects:!1},colors:{primary:"#0066cc",secondary:"#5f6368",accent:"#1a73e8",background:"#ffffff",success:"#34a853",warning:"#fbbc04",danger:"#ea4335",darkMode:{background:"#202124",secondary:"#9aa0a6",primary:"#8ab4f8"}},typography:{baseFontSize:14,fontScale:1.2,fontFamilyHeadings:"'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyBody:"'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif",fontFamilyMono:"'Roboto Mono', ui-monospace, Consolas, monospace",fontWeightNormal:400,fontWeightMedium:500,fontWeightSemibold:600,fontWeightBold:700,lineHeightNormal:d.LineHeights.tight},spatialRhythm:{baseUnit:4,scaleRatio:1.2,containerMaxWidth:1600,containerPadding:1.5,sectionSpacing:2},shape:{radiusSize:d.RadiusSizes.small,borderWidth:d.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:4},behavior:{transitionSpeed:d.TransitionSpeeds.fast,animationEasing:d.AnimationEasings["ease-in-out"],focusRingWidth:2},layout:{densityCompact:.85,gridColumns:12}}};yt.default={id:"default",name:"Default",tags:["app","featured"],description:"Fresh and modern design system with balanced aesthetics and usability",options:{liquidGlassEffects:!0,backgroundMesh:4},form:{options:{widgets:{booleans:"toggle",numbers:"input",selects:"standard"},layouts:{fieldsets:"default",arrays:"default"},enhancements:{icons:!0,datalists:!0,rangeOutput:!0},validation:{showErrors:!0,validateOnChange:!1}}},colors:{primary:"#0e7490",secondary:"#a99b95",accent:"#e54271",background:"#e7e6de",darkMode:{background:"#16171a",secondary:"#8b9199",primary:"#06b6d4"},success:null,warning:"#B38600",danger:null,info:null,gradientStops:3,elevationOpacity:.05},typography:{baseFontSize:16,fontScale:1.2,fontFamilyHeadings:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontFamilyBody:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontFamilyMono:'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',fontWeightLight:d.FontWeights.light,fontWeightNormal:d.FontWeights.normal,fontWeightMedium:d.FontWeights.medium,fontWeightSemibold:d.FontWeights.semibold,fontWeightBold:d.FontWeights.bold,lineHeightTight:d.LineHeights.tight,lineHeightNormal:d.LineHeights.normal,lineHeightRelaxed:d.LineHeights.relaxed,letterSpacingTight:-.025,letterSpacingNormal:0,letterSpacingWide:.025},spatialRhythm:{baseUnit:4,scaleRatio:1.25,maxSpacingSteps:32,containerMaxWidth:1200,containerPadding:1,inputPadding:.75,buttonPadding:1,sectionSpacing:2},layers:{shadowDepth:"medium",blurLight:4,blurMedium:8,blurHeavy:16,zIndexBase:0,zIndexDropdown:1e3,zIndexSticky:1020,zIndexFixed:1030,zIndexModal:1040,zIndexPopover:1050,zIndexTooltip:1060,zIndexNotification:1070},shape:{radiusSize:d.RadiusSizes.large,borderWidth:d.BorderWidths.medium,customRadius:null},behavior:{transitionSpeed:d.TransitionSpeeds.normal,animationEasing:d.AnimationEasings["ease-out"],customTransitionSpeed:null,customEasing:null,focusRingWidth:3,focusRingOpacity:.3,hoverOpacity:.8},layout:{gridColumns:12,gridGutter:1,breakpoints:{sm:640,md:768,lg:1024,xl:1280},densityCompact:.8,densityNormal:1,densityComfortable:1.2,buttonMinHeight:d.TouchTargetSizes.standard,inputMinHeight:40,utilities:{grid:!0,flex:!0,spacing:!0,container:!0},gridSystem:{columns:[1,2,3,4,6],autoFitBreakpoints:{sm:"150px",md:"250px",lg:"350px",xl:"450px"},enableGapUtilities:!0},containerMaxWidth:"1400px",containerPadding:"var(--spacing-6)"},advanced:{linkStyle:d.LinkStyles.inline,colorDerivation:"hsl"},a11y:{minTouchTarget:d.TouchTargetSizes.standard,prefersReducedMotion:!0,focusStyle:d.FocusStyles.ring},icons:{set:"phosphor",weight:"regular",defaultSize:24,externalPath:"/assets/img/icons/",sizes:{xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64},include:{navigation:["arrow-left","arrow-right","arrow-up","arrow-down","arrow-counter-clockwise","caret-left","caret-right","caret-down","caret-up","x","list","list-dashes","dots-three-vertical","dots-three","house","gear","magnifying-glass","funnel","tabs","sidebar"],actions:["plus","minus","check","trash","pencil","floppy-disk","copy","download","upload","share","link","eye","eye-slash","heart","star","bookmark","note-pencil","cursor-click","clipboard","magic-wand","sparkle"],communication:["envelope","bell","bell-ringing","bell-simple","chat-circle","phone","paper-plane-tilt","user","users","user-gear","at"],content:["image","file","file-text","file-css","file-js","folder","folder-open","book-open","camera","video-camera","play","pause","microphone","brackets-curly","code","folder-simple","grid-four","briefcase","chart-line","chart-bar","database","map-pin"],status:["info","warning","check-circle","x-circle","question","shield","shield-check","shield-warning","lock","lock-open","fingerprint","circle-notch"],time:["calendar","clock","timer","hourglass"],commerce:["shopping-cart","credit-card","currency-dollar","tag","receipt","storefront"],formatting:["text-align-left","text-align-center","text-align-right","text-b","text-italic","text-underline","list-bullets","list-numbers","text-aa"],system:["cloud","cloud-arrow-up","cloud-arrow-down","desktop","device-mobile","globe","wifi-high","battery-charging","sun","moon","moon-stars","palette","rocket","feather","square","circle","squares-four","lightning","wrench"]},spritePath:"public/assets/pds/icons/pds-icons.svg"},gap:4,debug:!1}});var ye=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(e={}){this._mode="static",this._staticPaths={...this._staticPaths,...e},console.log("[PDS Registry] Switched to STATIC mode",this._staticPaths)}async getStylesheet(e){if(this._mode==="live")return null;try{return(await import(this._staticPaths[e]))[e]}catch(s){console.error(`[PDS Registry] Failed to load static ${e}:`,s),console.error(`[PDS Registry] Looking for: ${this._staticPaths[e]}`),console.error("[PDS Registry] Make sure you've run 'npm run pds:export' and configured PDS.start() with the correct static.root path");let n=new CSSStyleSheet;return n.replaceSync("/* Failed to load "+e+" */"),n}}get mode(){return this._mode}get isLive(){return this._mode==="live"}},N=new ye;async function Fe(t,e=[],s=null){try{let n=s?.primitivesStylesheet?s.primitivesStylesheet:await N.getStylesheet("primitives");t.adoptedStyleSheets=[n,...e]}catch(n){let i=t.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${i}> failed to adopt primitives:`,n),t.adoptedStyleSheets=e}}async function He(t,e=["primitives"],s=[],n=null){try{let r=(await Promise.all(e.map(async o=>{if(n)switch(o){case"tokens":return n.tokensStylesheet;case"primitives":return n.primitivesStylesheet;case"components":return n.componentsStylesheet;case"utilities":return n.utilitiesStylesheet;default:break}return N.getStylesheet(o)}))).filter(o=>o!==null);t.adoptedStyleSheets=[...r,...s]}catch(i){let r=t.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${r}> failed to adopt layers:`,i),t.adoptedStyleSheets=s}}function Be(t){let e=new CSSStyleSheet;return e.replaceSync(t),e}var re=globalThis,ae=re.ShadowRoot&&(re.ShadyCSS===void 0||re.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Ie=Symbol(),Ne=new WeakMap,oe=class{constructor(e,s,n){if(this._$cssResult$=!0,n!==Ie)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=s}get styleSheet(){let e=this.o,s=this.t;if(ae&&e===void 0){let n=s!==void 0&&s.length===1;n&&(e=Ne.get(s)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&Ne.set(s,e))}return e}toString(){return this.cssText}},Oe=t=>new oe(typeof t=="string"?t:t+"",void 0,Ie);var qe=(t,e)=>{if(ae)t.adoptedStyleSheets=e.map(s=>s instanceof CSSStyleSheet?s:s.styleSheet);else for(let s of e){let n=document.createElement("style"),i=re.litNonce;i!==void 0&&n.setAttribute("nonce",i),n.textContent=s.cssText,t.appendChild(n)}},ge=ae?t=>t:t=>t instanceof CSSStyleSheet?(e=>{let s="";for(let n of e.cssRules)s+=n.cssText;return Oe(s)})(t):t;var{is:vt,defineProperty:Et,getOwnPropertyDescriptor:At,getOwnPropertyNames:$t,getOwnPropertySymbols:_t,getPrototypeOf:xt}=Object,ce=globalThis,je=ce.trustedTypes,kt=je?je.emptyScript:"",Rt=ce.reactiveElementPolyfillSupport,j=(t,e)=>t,be={toAttribute(t,e){switch(e){case Boolean:t=t?kt:null;break;case Object:case Array:t=t==null?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=t!==null;break;case Number:s=t===null?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch{s=null}}return s}},Ve=(t,e)=>!vt(t,e),Ge={attribute:!0,type:String,converter:be,reflect:!1,useDefault:!1,hasChanged:Ve};Symbol.metadata??=Symbol("metadata"),ce.litPropertyMetadata??=new WeakMap;var x=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,s=Ge){if(s.state&&(s.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((s=Object.create(s)).wrapped=!0),this.elementProperties.set(e,s),!s.noAccessor){let n=Symbol(),i=this.getPropertyDescriptor(e,n,s);i!==void 0&&Et(this.prototype,e,i)}}static getPropertyDescriptor(e,s,n){let{get:i,set:r}=At(this.prototype,e)??{get(){return this[s]},set(o){this[s]=o}};return{get:i,set(o){let a=i?.call(this);r?.call(this,o),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ge}static _$Ei(){if(this.hasOwnProperty(j("elementProperties")))return;let e=xt(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(j("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(j("properties"))){let s=this.properties,n=[...$t(s),..._t(s)];for(let i of n)this.createProperty(i,s[i])}let e=this[Symbol.metadata];if(e!==null){let s=litPropertyMetadata.get(e);if(s!==void 0)for(let[n,i]of s)this.elementProperties.set(n,i)}this._$Eh=new Map;for(let[s,n]of this.elementProperties){let i=this._$Eu(s,n);i!==void 0&&this._$Eh.set(i,s)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let s=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let i of n)s.unshift(ge(i))}else e!==void 0&&s.push(ge(e));return s}static _$Eu(e,s){let n=s.attribute;return n===!1?void 0:typeof n=="string"?n: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??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,s=this.constructor.elementProperties;for(let n of s.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return qe(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,s,n){this._$AK(e,n)}_$ET(e,s){let n=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,n);if(i!==void 0&&n.reflect===!0){let r=(n.converter?.toAttribute!==void 0?n.converter:be).toAttribute(s,n.type);this._$Em=e,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(e,s){let n=this.constructor,i=n._$Eh.get(e);if(i!==void 0&&this._$Em!==i){let r=n.getPropertyOptions(i),o=typeof r.converter=="function"?{fromAttribute:r.converter}:r.converter?.fromAttribute!==void 0?r.converter:be;this._$Em=i;let a=o.fromAttribute(s,r.type);this[i]=a??this._$Ej?.get(i)??a,this._$Em=null}}requestUpdate(e,s,n){if(e!==void 0){let i=this.constructor,r=this[e];if(n??=i.getPropertyOptions(e),!((n.hasChanged??Ve)(r,s)||n.useDefault&&n.reflect&&r===this._$Ej?.get(e)&&!this.hasAttribute(i._$Eu(e,n))))return;this.C(e,s,n)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,s,{useDefault:n,reflect:i,wrapped:r},o){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,o??s??this[e]),r!==!0||o!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(s=void 0),this._$AL.set(e,s)),i===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(s){Promise.reject(s)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[i,r]of this._$Ep)this[i]=r;this._$Ep=void 0}let n=this.constructor.elementProperties;if(n.size>0)for(let[i,r]of n){let{wrapped:o}=r,a=this[i];o!==!0||this._$AL.has(i)||a===void 0||this.C(i,void 0,r,a)}}let e=!1,s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),this._$EO?.forEach(n=>n.hostUpdate?.()),this.update(s)):this._$EM()}catch(n){throw e=!1,this._$EM(),n}e&&this._$AE(s)}willUpdate(e){}_$AE(e){this._$EO?.forEach(s=>s.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(s=>this._$ET(s,this[s])),this._$EM()}updated(e){}firstUpdated(e){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[j("elementProperties")]=new Map,x[j("finalized")]=new Map,Rt?.({ReactiveElement:x}),(ce.reactiveElementVersions??=[]).push("2.1.1");var _e=globalThis,de=_e.trustedTypes,Ke=de?de.createPolicy("lit-html",{createHTML:t=>t}):void 0,et="$lit$",R=`lit$${Math.random().toFixed(9).slice(2)}$`,tt="?"+R,Ct=`<${tt}>`,T=document,V=()=>T.createComment(""),K=t=>t===null||typeof t!="object"&&typeof t!="function",xe=Array.isArray,Lt=t=>xe(t)||typeof t?.[Symbol.iterator]=="function",Se=`[
2
+ \f\r]`,G=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Je=/-->/g,Qe=/>/g,U=RegExp(`>|${Se}(?:([^\\s"'>=/]+)(${Se}*=${Se}*(?:[^
3
+ \f\r"'\`<>=]|("|')|))|$)`,"g"),Ze=/'/g,Xe=/"/g,st=/^(?:script|style|textarea|title)$/i,ke=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),ds=ke(1),ls=ke(2),us=ke(3),W=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),Ye=new WeakMap,P=T.createTreeWalker(T,129);function nt(t,e){if(!xe(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return Ke!==void 0?Ke.createHTML(e):e}var Mt=(t,e)=>{let s=t.length-1,n=[],i,r=e===2?"<svg>":e===3?"<math>":"",o=G;for(let a=0;a<s;a++){let c=t[a],u,l,p=-1,g=0;for(;g<c.length&&(o.lastIndex=g,l=o.exec(c),l!==null);)g=o.lastIndex,o===G?l[1]==="!--"?o=Je:l[1]!==void 0?o=Qe:l[2]!==void 0?(st.test(l[2])&&(i=RegExp("</"+l[2],"g")),o=U):l[3]!==void 0&&(o=U):o===U?l[0]===">"?(o=i??G,p=-1):l[1]===void 0?p=-2:(p=o.lastIndex-l[2].length,u=l[1],o=l[3]===void 0?U:l[3]==='"'?Xe:Ze):o===Xe||o===Ze?o=U:o===Je||o===Qe?o=G:(o=U,i=void 0);let h=o===U&&t[a+1].startsWith("/>")?" ":"";r+=o===G?c+Ct:p>=0?(n.push(u),c.slice(0,p)+et+c.slice(p)+R+h):c+R+(p===-2?a:h)}return[nt(t,r+(t[s]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),n]},J=class t{constructor({strings:e,_$litType$:s},n){let i;this.parts=[];let r=0,o=0,a=e.length-1,c=this.parts,[u,l]=Mt(e,s);if(this.el=t.createElement(u,n),P.currentNode=this.el.content,s===2||s===3){let p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(i=P.nextNode())!==null&&c.length<a;){if(i.nodeType===1){if(i.hasAttributes())for(let p of i.getAttributeNames())if(p.endsWith(et)){let g=l[o++],h=i.getAttribute(p).split(R),v=/([.?@])?(.*)/.exec(g);c.push({type:1,index:r,name:v[2],strings:h,ctor:v[1]==="."?ve:v[1]==="?"?Ee:v[1]==="@"?Ae:O}),i.removeAttribute(p)}else p.startsWith(R)&&(c.push({type:6,index:r}),i.removeAttribute(p));if(st.test(i.tagName)){let p=i.textContent.split(R),g=p.length-1;if(g>0){i.textContent=de?de.emptyScript:"";for(let h=0;h<g;h++)i.append(p[h],V()),P.nextNode(),c.push({type:2,index:++r});i.append(p[g],V())}}}else if(i.nodeType===8)if(i.data===tt)c.push({type:2,index:r});else{let p=-1;for(;(p=i.data.indexOf(R,p+1))!==-1;)c.push({type:7,index:r}),p+=R.length-1}r++}}static createElement(e,s){let n=T.createElement("template");return n.innerHTML=e,n}};function I(t,e,s=t,n){if(e===W)return e;let i=n!==void 0?s._$Co?.[n]:s._$Cl,r=K(e)?void 0:e._$litDirective$;return i?.constructor!==r&&(i?._$AO?.(!1),r===void 0?i=void 0:(i=new r(t),i._$AT(t,s,n)),n!==void 0?(s._$Co??=[])[n]=i:s._$Cl=i),i!==void 0&&(e=I(t,i._$AS(t,e.values),i,n)),e}var we=class{constructor(e,s){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=s}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:s},parts:n}=this._$AD,i=(e?.creationScope??T).importNode(s,!0);P.currentNode=i;let r=P.nextNode(),o=0,a=0,c=n[0];for(;c!==void 0;){if(o===c.index){let u;c.type===2?u=new Q(r,r.nextSibling,this,e):c.type===1?u=new c.ctor(r,c.name,c.strings,this,e):c.type===6&&(u=new $e(r,this,e)),this._$AV.push(u),c=n[++a]}o!==c?.index&&(r=P.nextNode(),o++)}return P.currentNode=T,i}p(e){let s=0;for(let n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(e,n,s),s+=n.strings.length-2):n._$AI(e[s])),s++}},Q=class t{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,s,n,i){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=e,this._$AB=s,this._$AM=n,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,s=this._$AM;return s!==void 0&&e?.nodeType===11&&(e=s.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,s=this){e=I(this,e,s),K(e)?e===E||e==null||e===""?(this._$AH!==E&&this._$AR(),this._$AH=E):e!==this._$AH&&e!==W&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Lt(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!==E&&K(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){let{values:s,_$litType$:n}=e,i=typeof n=="number"?this._$AC(e):(n.el===void 0&&(n.el=J.createElement(nt(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===i)this._$AH.p(s);else{let r=new we(i,this),o=r.u(this.options);r.p(s),this.T(o),this._$AH=r}}_$AC(e){let s=Ye.get(e.strings);return s===void 0&&Ye.set(e.strings,s=new J(e)),s}k(e){xe(this._$AH)||(this._$AH=[],this._$AR());let s=this._$AH,n,i=0;for(let r of e)i===s.length?s.push(n=new t(this.O(V()),this.O(V()),this,this.options)):n=s[i],n._$AI(r),i++;i<s.length&&(this._$AR(n&&n._$AB.nextSibling,i),s.length=i)}_$AR(e=this._$AA.nextSibling,s){for(this._$AP?.(!1,!0,s);e!==this._$AB;){let n=e.nextSibling;e.remove(),e=n}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},O=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,s,n,i,r){this.type=1,this._$AH=E,this._$AN=void 0,this.element=e,this.name=s,this._$AM=i,this.options=r,n.length>2||n[0]!==""||n[1]!==""?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=E}_$AI(e,s=this,n,i){let r=this.strings,o=!1;if(r===void 0)e=I(this,e,s,0),o=!K(e)||e!==this._$AH&&e!==W,o&&(this._$AH=e);else{let a=e,c,u;for(e=r[0],c=0;c<r.length-1;c++)u=I(this,a[n+c],s,c),u===W&&(u=this._$AH[c]),o||=!K(u)||u!==this._$AH[c],u===E?e=E:e!==E&&(e+=(u??"")+r[c+1]),this._$AH[c]=u}o&&!i&&this.j(e)}j(e){e===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},ve=class extends O{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===E?void 0:e}},Ee=class extends O{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==E)}},Ae=class extends O{constructor(e,s,n,i,r){super(e,s,n,i,r),this.type=5}_$AI(e,s=this){if((e=I(this,e,s,0)??E)===W)return;let n=this._$AH,i=e===E&&n!==E||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,r=e!==E&&(n===E||i);i&&this.element.removeEventListener(this.name,this,n),r&&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)}},$e=class{constructor(e,s,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=s,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){I(this,e)}};var Ut=_e.litHtmlPolyfillSupport;Ut?.(J,Q),(_e.litHtmlVersions??=[]).push("3.3.1");var z=(t,e,s)=>{let n=s?.renderBefore??e,i=n._$litPart$;if(i===void 0){let r=s?.renderBefore??null;n._$litPart$=i=new Q(e.insertBefore(V(),r),r,void 0,s??{})}return i._$AI(t),i};var Re=globalThis,q=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=z(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}};q._$litElement$=!0,q.finalized=!0,Re.litElementHydrateSupport?.({LitElement:q});var Pt=Re.litElementPolyfillSupport;Pt?.({LitElement:q});(Re.litElementVersions??=[]).push("4.2.1");var it={mode:"static",preset:"default",autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(t,e,...s){console[t](e,...s)}};async function rt(t,e={}){return e={...{title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}},...e},new Promise(n=>{let i=document.createElement("dialog");it.options?.liquidGlassEffects&&i.classList.add("liquid-glass"),e.size&&i.classList.add(`dialog-${e.size}`),e.type&&i.classList.add(`dialog-${e.type}`),e.class&&(Array.isArray(e.class)?i.classList.add(...e.class):i.classList.add(e.class)),e.maxHeight&&i.style.setProperty("--dialog-max-height",e.maxHeight);let r=Object.entries(e.buttons).map(([a,c])=>{let u=c.primary?"btn-primary btn-sm":"btn-outline btn-sm";return`<button type="${c.cancel?"button":"submit"}" class="${u}" value="${a}">${c.name}</button>`});if(e.useForm){let a=document.createElement("div");typeof t=="object"&&t._$litType$?z(t,a):typeof t=="string"?a.textContent=t:z(t,a);let c=a.querySelector("form");if(c){i.innerHTML=`
3172
4
  <header>
3173
5
  <h2>${e.title}</h2>
3174
6
  </header>
3175
- `;let l=document.createElement("article");for(l.className="dialog-body";s.firstChild;)l.appendChild(s.firstChild);s.appendChild(l);let d=document.createElement("footer");d.innerHTML=a.join(""),s.appendChild(d),r.appendChild(s)}else r.innerHTML=`
7
+ `;let u=document.createElement("article");for(u.className="dialog-body";c.firstChild;)u.appendChild(c.firstChild);c.appendChild(u);let l=document.createElement("footer");l.innerHTML=r.join(""),c.appendChild(l),i.appendChild(c)}else i.innerHTML=`
3176
8
  <header>
3177
9
  <h2>${e.title}</h2>
3178
10
  </header>
3179
11
  <article id="msg-container"></article>
3180
12
  <footer>
3181
- ${a.join("")}
13
+ ${r.join("")}
3182
14
  </footer>
3183
- `,r.querySelector("#msg-container").appendChild(c)}else{r.innerHTML=`
15
+ `,i.querySelector("#msg-container").appendChild(a)}else{i.innerHTML=`
3184
16
  <form method="dialog">
3185
17
  <header>
3186
18
  <h2>${e.title}</h2>
@@ -3189,28 +21,10 @@ export const ${e}CSS = \`${o}\`;
3189
21
  <article id="msg-container"></article>
3190
22
 
3191
23
  <footer>
3192
- ${a.join("")}
24
+ ${r.join("")}
3193
25
  </footer>
3194
26
  </form>
3195
- `;let c=r.querySelector("#msg-container");typeof n=="object"&&n._$litType$?O(n,c):typeof n=="string"?c.textContent=n:O(n,c)}r.addEventListener("click",c=>{c.target.closest('button[value="cancel"]')&&(r.close(),o(!1))});let i=()=>{let c=r.querySelector("form");c?c.addEventListener("submit",s=>{s.preventDefault();let l;e.useForm&&s.submitter.value==="ok"?(console.log("Found form:",c),console.log("Form elements:",c?Array.from(c.elements):"no form"),l=new FormData(c),console.log("FormData entries:",Array.from(l.entries()))):l=s.submitter.value==="ok",r.close(),o(l)}):requestAnimationFrame(i)};i(),r.addEventListener("close",()=>{setTimeout(()=>r.remove(),200)}),document.body.appendChild(r),typeof e.rendered=="function"&&e.rendered(r),r.showModal()})}async function qt(){let n=document.querySelector("pds-toaster");return n||(n=document.createElement("pds-toaster"),document.body.appendChild(n),await customElements.whenDefined("pds-toaster")),n}async function F(n,e={}){return(await qt()).toast(n,e)}F.success=async function(n,e={}){return F(n,{...e,type:"success"})};F.error=async function(n,e={}){return F(n,{...e,type:"error"})};F.warning=async function(n,e={}){return F(n,{...e,type:"warning"})};F.info=async function(n,e={}){return F(n,{...e,type:"information"})};var he=class{constructor(e){this.pds=e,this.intents={color:["color","colours","shade","tint","hue","foreground","background","text","fill","bg","fg"],spacing:["spacing","space","gap","padding","margin","distance","rhythm"],typography:["font","text","type","typography","heading","body","size","weight","family"],border:["border","outline","stroke","edge","frame"],radius:["radius","rounded","corner","curve","round"],shadow:["shadow","elevation","depth","glow","drop-shadow"],component:["component","element","widget"],utility:["utility","class","helper","css"],layout:["layout","container","grid","flex","group","arrange","organize"],pattern:["pattern","example","template","structure"],interaction:["hover","focus","active","disabled","pressed","selected","checked"]},this.entities={button:["button","btn","cta"],input:["input","field","textbox","text-field","form-control"],card:["card","panel"],badge:["badge","pill","tag","chip"],surface:["surface","background","layer","container"],icon:["icon","svg","glyph","symbol"],link:["link","anchor","hyperlink"],nav:["nav","navigation","menu"],modal:["modal","dialog","popup","overlay"],drawer:["drawer","sidebar","panel"],tab:["tab","tabstrip"],toast:["toast","notification","alert","message"]},this.questionWords=["what","which","how","where","when","show","find","get","give","tell"]}async search(e){if(!e||e.length<2)return[];let t=e.toLowerCase().trim(),o=this.tokenize(t),r=this.analyzeQuery(o,t),a=[];r.intents.has("color")&&a.push(...this.queryColors(r,t)),(r.intents.has("utility")||r.intents.has("border")||r.intents.has("layout")||t.includes("class"))&&a.push(...this.queryUtilities(r,t)),(r.intents.has("component")||r.entities.size>0)&&a.push(...this.queryComponents(r,t)),(r.intents.has("layout")||r.intents.has("pattern"))&&a.push(...this.queryPatterns(r,t)),r.intents.has("typography")&&a.push(...this.queryTypography(r,t)),r.intents.has("spacing")&&a.push(...this.querySpacing(r,t));let i=new Map;for(let c of a){let s=c.value;(!i.has(s)||i.get(s).score<c.score)&&i.set(s,c)}return Array.from(i.values()).sort((c,s)=>s.score-c.score).slice(0,10)}tokenize(e){return e.toLowerCase().replace(/[?!.]/g,"").split(/\s+/).filter(t=>t.length>0)}analyzeQuery(e,t){let o={intents:new Set,entities:new Set,modifiers:new Set,isQuestion:!1,tokens:e,fullText:t};o.isQuestion=this.questionWords.some(r=>e.includes(r));for(let[r,a]of Object.entries(this.intents))a.some(i=>e.includes(i)||t.includes(i))&&o.intents.add(r);for(let[r,a]of Object.entries(this.entities))a.some(i=>e.includes(i)||t.includes(i))&&o.entities.add(r);return(e.includes("hover")||t.includes("hover"))&&o.modifiers.add("hover"),(e.includes("focus")||t.includes("focus"))&&o.modifiers.add("focus"),(e.includes("active")||t.includes("active"))&&o.modifiers.add("active"),(e.includes("disabled")||t.includes("disabled"))&&o.modifiers.add("disabled"),o}queryColors(e,t){let o=[],r=this.pds.compiled;if(!r?.tokens?.colors)return o;let a=r.tokens.colors,i=Array.from(e.entities),c=Array.from(e.modifiers);if(c.includes("focus")&&e.intents.has("border")&&i.includes("input")&&o.push({text:"Focus border color: var(--color-primary-500)",value:"--color-primary-500",icon:"palette",category:"Color Token",score:100,cssVar:"var(--color-primary-500)",description:"Primary color used for focus states on form inputs"}),(t.includes("foreground")||t.includes("text"))&&(t.includes("surface")||e.entities.has("surface"))&&(o.push({text:"Text on surface: var(--surface-text)",value:"--surface-text",icon:"palette",category:"Surface Token",score:95,cssVar:"var(--surface-text)",description:"Default text color for current surface"}),o.push({text:"Secondary text: var(--surface-text-secondary)",value:"--surface-text-secondary",icon:"palette",category:"Surface Token",score:90,cssVar:"var(--surface-text-secondary)",description:"Secondary/muted text on surface"})),t.includes("primary")||t.includes("accent")||t.includes("secondary")){let s=t.includes("primary")?"primary":t.includes("accent")?"accent":"secondary";for(let l of[500,600,700]){let d=`--color-${s}-${l}`;o.push({text:`${s.charAt(0).toUpperCase()+s.slice(1)} ${l}: var(${d})`,value:d,icon:"palette",category:"Color Scale",score:80-(l-500)/100,cssVar:`var(${d})`,description:`${s} color scale shade ${l}`})}}if(i.includes("button")&&e.intents.has("color")){let s=c[0];s?o.push({text:`Button ${s} fill: var(--primary-fill-${s})`,value:`--primary-fill-${s}`,icon:"palette",category:"Interactive Token",score:92,description:`Button background color in ${s} state`}):o.push({text:"Button fill: var(--primary-fill)",value:"--primary-fill",icon:"palette",category:"Interactive Token",score:88,description:"Default button background color"})}return o}queryUtilities(e,t){let o=[],r=this.pds.ontology;if(!r?.utilities)return o;let a=r.utilities,i=[];for(let c of Object.values(a))if(typeof c=="object")for(let s of Object.values(c))Array.isArray(s)&&i.push(...s);return e.intents.has("border")&&i.filter(s=>s.includes("border")||s.includes("outline")).forEach(s=>{let l=80;t.includes("gradient")&&s.includes("gradient")&&(l=95),t.includes("glow")&&s.includes("glow")&&(l=95),o.push({text:`${s} - Border utility class`,value:s,icon:"code",category:"Utility Class",score:l,code:`<div class="${s}">...</div>`,description:this.describeUtility(s)})}),e.intents.has("layout")&&i.filter(s=>s.includes("flex")||s.includes("grid")||s.includes("items-")||s.includes("justify-")||s.includes("gap-")).forEach(s=>{o.push({text:`${s} - Layout utility`,value:s,icon:"layout",category:"Utility Class",score:85,code:`<div class="${s}">...</div>`,description:this.describeUtility(s)})}),t.includes("group")&&e.entities.has("button")&&o.push({text:".btn-group - Group buttons together",value:".btn-group",icon:"code",category:"Utility Class",score:90,code:`<div class="btn-group">
3196
- <button class="btn-primary">One</button>
3197
- <button class="btn-primary">Two</button>
3198
- </div>`,description:"Container for grouped buttons with connected styling"}),o}queryComponents(e,t){let o=[],r=this.pds.ontology;return!r?.components&&!r?.primitives||(r.components&&r.components.forEach(a=>{let i=this.scoreMatch(t,a.name+" "+a.id);i>50&&o.push({text:`<${a.id}> - ${a.name}`,value:a.id,icon:"brackets-curly",category:"Web Component",score:i,code:`<${a.id}></${a.id}>`,description:a.description||`${a.name} web component`})}),r.primitives&&r.primitives.forEach(a=>{let i=this.scoreMatch(t,a.name+" "+a.id);if(i>50){let c=a.selectors?.[0]||a.id;o.push({text:`${c} - ${a.name}`,value:a.id,icon:"tag",category:"Primitive",score:i-5,code:this.generatePrimitiveExample(a),description:a.description||`${a.name} primitive element`})}}),t.includes("icon")&&(t.includes("only")||t.includes("button"))&&o.push({text:'Icon-only button: <button class="btn-icon">',value:"btn-icon",icon:"star",category:"Pattern",score:95,code:`<button class="btn-icon btn-primary">
3199
- <pds-icon icon="heart"></pds-icon>
3200
- </button>`,description:"Button with only an icon, no text label"})),o}queryPatterns(e,t){let o=[],r=this.pds.ontology;return r?.layoutPatterns&&(r.layoutPatterns.forEach(a=>{let i=this.scoreMatch(t,a.name+" "+a.id+" "+(a.description||""));if(i>50){let c=a.selectors?.[0]||`.${a.id}`;o.push({text:`${a.name} - ${a.description||"Layout pattern"}`,value:a.id,icon:"layout",category:"Layout Pattern",score:i,code:`<div class="${c.replace(".","")}">
3201
- <!-- content -->
3202
- </div>`,description:a.description||a.name})}}),(t.includes("container")||t.includes("group"))&&(o.push({text:"Card - Container for grouping content",value:"card",icon:"layout",category:"Primitive",score:88,code:`<article class="card">
3203
- <header>
3204
- <h3>Title</h3>
3205
- </header>
3206
- <p>Content...</p>
3207
- </article>`,description:"Card container with optional header, body, and footer"}),o.push({text:"Section - Semantic container for grouping",value:"section",icon:"layout",category:"Pattern",score:85,code:`<section>
3208
- <h2>Section Title</h2>
3209
- <!-- content -->
3210
- </section>`,description:"Semantic section element for content grouping"}))),o}queryTypography(e,t){let o=[],r=this.pds.compiled;if(!r?.tokens?.typography)return o;let a=r.tokens.typography;return(t.includes("heading")||t.includes("title"))&&o.push({text:"Heading font: var(--font-family-heading)",value:"--font-family-heading",icon:"text-aa",category:"Typography Token",score:85,cssVar:"var(--font-family-heading)",description:"Font family for headings"}),(t.includes("body")||t.includes("text"))&&o.push({text:"Body font: var(--font-family-body)",value:"--font-family-body",icon:"text-aa",category:"Typography Token",score:85,cssVar:"var(--font-family-body)",description:"Font family for body text"}),o}querySpacing(e,t){let o=[],r=this.pds.compiled;if(!r?.tokens?.spacing)return o;let a=r.tokens.spacing;for(let[i,c]of Object.entries(a))["2","4","6","8"].includes(i)&&o.push({text:`Spacing ${i}: var(--spacing-${i})`,value:`--spacing-${i}`,icon:"ruler",category:"Spacing Token",score:75,cssVar:`var(--spacing-${i})`,description:`Spacing value: ${c}`});return o}scoreMatch(e,t){let o=e.toLowerCase(),r=t.toLowerCase(),a=0;if(o===r)return 100;r.includes(o)&&(a+=80);let i=this.tokenize(o),c=this.tokenize(r),s=i.filter(l=>c.includes(l)).length;return a+=s/i.length*40,r.startsWith(o)&&(a+=20),Math.min(100,a)}generatePrimitiveExample(e){let t=e.selectors?.[0]||e.id;return t.includes("button")||e.id==="button"?'<button class="btn-primary">Click me</button>':t.includes("card")||e.id==="card"?`<article class="card">
3211
- <h3>Title</h3>
3212
- <p>Content</p>
3213
- </article>`:t.includes("badge")||e.id==="badge"?'<span class="badge">New</span>':`<${t}>Content</${t}>`}describeUtility(e){return e.includes("border-gradient")?"Apply animated gradient border effect":e.includes("border-glow")?"Apply glowing border effect":e.includes("flex")?"Flexbox container utility":e.includes("grid")?"Grid container utility":e.includes("gap-")?"Set gap between flex/grid children":e.includes("items-")?"Align items in flex container":e.includes("justify-")?"Justify content in flex container":e===".btn-group"?"Group buttons with connected styling":"Utility class for styling"}};var _e={};Ue(_e,{deepMerge:()=>ut,isObject:()=>me});function me(n){return n&&typeof n=="object"&&!Array.isArray(n)}function ut(n,e){let t={...n};return me(n)&&me(e)&&Object.keys(e).forEach(o=>{me(e[o])?o in n?t[o]=ut(n[o],e[o]):Object.assign(t,{[o]:e[o]}):Object.assign(t,{[o]:e[o]})}),t}var Gt=[{selector:".accordion",description:"Ensures only one <details> element can be open at a time within the accordion.",demoHtml:`
27
+ `;let a=i.querySelector("#msg-container");typeof t=="object"&&t._$litType$?z(t,a):typeof t=="string"?a.textContent=t:z(t,a)}i.addEventListener("click",a=>{a.target.closest('button[value="cancel"]')&&(i.close(),n(!1))});let o=()=>{let a=i.querySelector("form");a?a.addEventListener("submit",c=>{c.preventDefault();let u;e.useForm&&c.submitter.value==="ok"?(console.log("Found form:",a),console.log("Form elements:",a?Array.from(a.elements):"no form"),u=new FormData(a),console.log("FormData entries:",Array.from(u.entries()))):u=c.submitter.value==="ok",i.close(),n(u)}):requestAnimationFrame(o)};o(),i.addEventListener("close",()=>{setTimeout(()=>i.remove(),200)}),document.body.appendChild(i),typeof e.rendered=="function"&&e.rendered(i),i.showModal()})}async function Tt(){let t=document.querySelector("pds-toaster");return t||(t=document.createElement("pds-toaster"),document.body.appendChild(t),await customElements.whenDefined("pds-toaster")),t}async function _(t,e={}){return(await Tt()).toast(t,e)}_.success=async function(t,e={}){return _(t,{...e,type:"success"})};_.error=async function(t,e={}){return _(t,{...e,type:"error"})};_.warning=async function(t,e={}){return _(t,{...e,type:"warning"})};_.info=async function(t,e={}){return _(t,{...e,type:"information"})};var Wt=[{selector:".accordion",description:"Ensures only one <details> element can be open at a time within the accordion.",demoHtml:`
3214
28
  <div class="accordion">
3215
29
  <details>
3216
30
  <summary>Section 1</summary>
@@ -3264,17 +78,12 @@ export const ${e}CSS = \`${o}\`;
3264
78
  <button class="btn-primary btn-working">
3265
79
  <span>Saving</span>
3266
80
  </button>
3267
- `.trim()}];function Vt(n){n.dataset.enhancedAccordion||(n.dataset.enhancedAccordion="true",n.addEventListener("toggle",e=>{e.target.open&&e.target.parentElement===n&&n.querySelectorAll(":scope > details[open]").forEach(t=>{t!==e.target&&(t.open=!1)})},!0))}function Kt(n){if(n.dataset.enhancedDropdown)return;n.dataset.enhancedDropdown="true";let e=n.querySelector("menu");if(!e)return;let t=n.querySelector("[data-dropdown-toggle]")||n.querySelector("button");t&&!t.hasAttribute("type")&&t.setAttribute("type","button"),e.id||(e.id=`dropdown-${Math.random().toString(36).slice(2,9)}`),e.setAttribute("role",e.getAttribute("role")||"menu"),e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),t&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-controls",e.id),t.setAttribute("aria-expanded","false"));let o=()=>{let c=(n.getAttribute("data-mode")||"auto").toLowerCase();if(c==="up"||c==="down")return c;let s=n.getBoundingClientRect(),l=Math.max(0,window.innerHeight-s.bottom);return Math.max(0,s.top)>l?"up":"down"},r=()=>{n.dataset.dropdownDirection=o(),e.setAttribute("aria-hidden","false"),t?.setAttribute("aria-expanded","true")},a=()=>{e.setAttribute("aria-hidden","true"),t?.setAttribute("aria-expanded","false")},i=()=>{e.getAttribute("aria-hidden")==="false"?a():r()};t?.addEventListener("click",c=>{c.preventDefault(),c.stopPropagation(),i()}),document.addEventListener("click",c=>{n.contains(c.target)||a()}),n.addEventListener("keydown",c=>{c.key==="Escape"&&(a(),t?.focus())}),n.addEventListener("focusout",c=>{(!c.relatedTarget||!n.contains(c.relatedTarget))&&a()})}function Zt(n){if(n.dataset.enhancedToggle)return;n.dataset.enhancedToggle="true";let e=n.querySelector('input[type="checkbox"]');if(!e)return;n.hasAttribute("tabindex")||n.setAttribute("tabindex","0"),n.setAttribute("role","switch"),n.setAttribute("aria-checked",e.checked?"true":"false");let t=document.createElement("span");t.className="toggle-switch",t.setAttribute("role","presentation"),t.setAttribute("aria-hidden","true");let o=document.createElement("span");o.className="toggle-knob",t.appendChild(o),n.insertBefore(t,e.nextSibling);let r=()=>{n.setAttribute("aria-checked",e.checked?"true":"false")},a=()=>{e.disabled||(e.checked=!e.checked,r(),e.dispatchEvent(new Event("change",{bubbles:!0})))};n.addEventListener("click",i=>{i.preventDefault(),a()}),n.addEventListener("keydown",i=>{(i.key===" "||i.key==="Enter")&&(i.preventDefault(),a())}),e.addEventListener("change",r)}function Jt(n){if(n.dataset.enhancedRange)return;let e=n.closest("label"),t=e?.classList.contains("range-output"),o=n.id||`range-${Math.random().toString(36).substring(2,11)}`,r=`${o}-output`;if(n.id=o,t){let a=e.querySelector("span");if(a&&!a.classList.contains("range-output-wrapper")){let i=document.createElement("span");i.className="range-output-wrapper",i.style.display="flex",i.style.justifyContent="space-between",i.style.alignItems="center";let c=document.createElement("span");c.textContent=a.textContent,i.appendChild(c);let s=document.createElement("output");s.id=r,s.setAttribute("for",o),s.style.color="var(--surface-text-secondary, var(--color-text-secondary))",s.style.fontSize="0.875rem",s.textContent=n.value,i.appendChild(s),a.textContent="",a.appendChild(i);let l=()=>{s.textContent=n.value};n.addEventListener("input",l)}}else{let a=n.closest(".range-container");a||(a=document.createElement("div"),a.className="range-container",n.parentNode?.insertBefore(a,n),a.appendChild(n)),a.style.position="relative";let i=document.createElement("output");i.id=r,i.setAttribute("for",o),i.className="range-bubble",i.setAttribute("aria-live","polite"),a.appendChild(i);let c=()=>{let d=parseFloat(n.min)||0,p=parseFloat(n.max)||100,g=parseFloat(n.value),h=(g-d)/(p-d);i.style.left=`calc(${h*100}% )`,i.textContent=String(g)},s=()=>i.classList.add("visible"),l=()=>i.classList.remove("visible");n.addEventListener("input",c),n.addEventListener("pointerdown",s),n.addEventListener("pointerup",l),n.addEventListener("pointerleave",l),n.addEventListener("focus",s),n.addEventListener("blur",l),c()}n.dataset.enhancedRange="1"}function Qt(n){if(n.dataset.enhancedRequired)return;n.dataset.enhancedRequired="true";let e=t=>{let o=t.closest("label");if(!o||o.querySelector(".required-asterisk"))return;let r=document.createElement("span");r.classList.add("required-asterisk"),r.textContent="*",r.style.marginLeft="4px",o.querySelector("span").appendChild(r);let a=t.closest("form");if(a&&!a.querySelector(".required-legend")){let i=document.createElement("small");i.classList.add("required-legend"),i.textContent="* Required fields",a.insertBefore(i,a.querySelector(".form-actions")||a.lastElementChild)}};n.querySelectorAll("[required]").forEach(t=>{e(t)})}function Yt(n){if(n.dataset.enhancedOpenGroup)return;n.dataset.enhancedOpenGroup="true",n.classList.add("flex","flex-wrap","buttons");let e=document.createElement("input");e.type="text",e.placeholder="Add item...",e.classList.add("input-text","input-sm"),e.style.width="auto";let t=n.querySelector('input[type="radio"], input[type="checkbox"]');n.appendChild(e),e.addEventListener("keydown",o=>{if(o.key==="Enter"||o.key==="Tab"){let r=e.value.trim();if(r){o.preventDefault();let a=t.type==="radio"?"radio":"checkbox",i=`open-group-${Math.random().toString(36).substring(2,11)}`,c=document.createElement("label"),s=document.createElement("span");s.setAttribute("data-label",""),s.textContent=r;let l=document.createElement("input");l.type=a,l.name=t.name||n.getAttribute("data-name")||"open-group",l.value=r,l.id=i,c.appendChild(s),c.appendChild(l),n.insertBefore(c,e),e.value=""}}else if(o.key==="Backspace"&&e.value===""){o.preventDefault();let r=n.querySelectorAll("label");r.length>0&&r[r.length-1].remove()}})}function Xt(n){if(n.dataset.enhancedBtnWorking)return;n.dataset.enhancedBtnWorking="true";let e=null,t=!1;new MutationObserver(r=>{r.forEach(a=>{if(a.attributeName==="class"){let i=n.classList.contains("btn-working"),c=n.querySelector("pds-icon");if(i)if(c)e||(e=c.getAttribute("icon")),c.setAttribute("icon","circle-notch");else{let s=document.createElement("pds-icon");s.setAttribute("icon","circle-notch"),s.setAttribute("size","sm"),n.insertBefore(s,n.firstChild),t=!0}else a.oldValue?.includes("btn-working")&&c&&(t?(c.remove(),t=!1):e&&(c.setAttribute("icon",e),e=null))}})}).observe(n,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0})}var er=new Map([[".accordion",Vt],["nav[data-dropdown]",Kt],["label[data-toggle]",Zt],['input[type="range"]',Jt],["form[data-required]",Qt],["fieldset[role=group][data-open]",Yt],["button, a[class*='btn-']",Xt]]),gt=Gt.map(n=>({...n,run:er.get(n.selector)||(()=>{})}));var mt="pds",tr=/^([a-z][a-z0-9+\-.]*:)?\/\//i,ht=/^[a-z]:/i;function re(n=""){return n.endsWith("/")?n:`${n}/`}function rr(n="",e=mt){let t=n.replace(/\/+$/,"");return new RegExp(`(?:^|/)${e}$`,"i").test(t)?t:`${t}/${e}`}function or(n){return n.replace(/^\.\/+/,"")}function ar(n){return ht.test(n)?n.replace(ht,"").replace(/^\/+/,""):n}function nr(n){return n.startsWith("public/")?n.substring(7):n}function ft(n,e={}){let t=e.segment||mt,o=e.defaultRoot||`/assets/${t}/`,r=n?.public&&n.public?.root||n?.static&&n.static?.root||null;if(!r||typeof r!="string")return re(o);let a=r.trim();return a?(a=a.replace(/\\/g,"/"),a=rr(a,t),a=re(a),tr.test(a)?a:(a=or(a),a=ar(a),a.startsWith("/")||(a=nr(a),a.startsWith("/")||(a=`/${a}`),a=a.replace(/\/+/g,(i,c)=>c===0?i:"/")),re(a))):re(o)}function bt(n){let e=n.replace(/['"]/g,"").trim();if(["system-ui","-apple-system","sans-serif","serif","monospace","cursive","fantasy","ui-sans-serif","ui-serif","ui-monospace","ui-rounded"].includes(e.toLowerCase()))return!0;let r=document.createElement("canvas").getContext("2d");if(!r)return!1;let a="mmmmmmmmmmlli",i="72px",c="monospace";r.font=`${i} ${c}`;let s=r.measureText(a).width;r.font=`${i} "${e}", ${c}`;let l=r.measureText(a).width;return s!==l}function ir(n){return n?n.split(",").map(o=>o.trim())[0].replace(/['"]/g,"").trim():null}async function sr(n,e={}){if(!n)return Promise.resolve();let{weights:t=[400,500,600,700],italic:o=!1}=e,r=ir(n);if(!r||bt(r))return Promise.resolve();let a=encodeURIComponent(r);return document.querySelector(`link[href*="fonts.googleapis.com"][href*="${a}"]`)?(console.log(`Font "${r}" is already loading or loaded`),Promise.resolve()):(console.log(`Loading font "${r}" from Google Fonts...`),new Promise((c,s)=>{let l=document.createElement("link");l.rel="stylesheet";let d=o?`ital,wght@0,${t.join(";0,")};1,${t.join(";1,")}`:`wght@${t.join(";")}`;l.href=`https://fonts.googleapis.com/css2?family=${a}:${d}&display=swap`,l.setAttribute("data-font-loader",r),l.onload=()=>{console.log(`Successfully loaded font "${r}"`),c()},l.onerror=()=>{console.warn(`Failed to load font "${r}" from Google Fonts`),s(new Error(`Failed to load font: ${r}`))},document.head.appendChild(l),setTimeout(()=>{bt(r)||console.warn(`Font "${r}" did not load within timeout`),c()},5e3)}))}async function yt(n){if(!n)return Promise.resolve();let e=new Set;n.fontFamilyHeadings&&e.add(n.fontFamilyHeadings),n.fontFamilyBody&&e.add(n.fontFamilyBody),n.fontFamilyMono&&e.add(n.fontFamilyMono);let t=Array.from(e).map(o=>sr(o).catch(r=>{console.warn(`Could not load font: ${o}`,r)}));await Promise.all(t)}var Pe=class extends EventTarget{},f=new Pe;f.initializing=!1;f.currentPreset=null;f.Generator=A;f.registry=Z;f.ontology=Ie;f.adoptLayers=qe;f.adoptPrimitives=He;f.createStylesheet=Ge;f.isLiveMode=()=>Z.isLive;f.enums=u;f.ask=pt;f.toast=F;f.common=_e;f.presets=L;f.findComponentForElement=Oe;f.query=async function(n){return await new he(f).search(n)};function kt(n){let e=typeof CustomEvent=="function";try{let t=e?new CustomEvent("pds:ready",{detail:n}):new Event("pds:ready");f.dispatchEvent(t)}catch{}if(typeof document<"u")if(e){let t={detail:n,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:ready",t))}catch{}try{document.dispatchEvent(new CustomEvent("pds-ready",t))}catch{}}else{try{document.dispatchEvent(new Event("pds:ready"))}catch{}try{document.dispatchEvent(new Event("pds-ready"))}catch{}}}Object.defineProperty(f,"currentConfig",{value:null,writable:!0,enumerable:!0,configurable:!1});Object.defineProperty(f,"compiled",{get(){return f.registry?.isLive&&A.instance?A.instance.compiled:null},enumerable:!0,configurable:!1});typeof window<"u"&&(window.PDS=f);typeof document<"u"&&f.addEventListener("pds:ready",n=>{let e=n.detail?.mode;e&&(document.documentElement.classList.add(`pds-${e}`),e==="live"&&document.documentElement.classList.add("pds-ready"))});var Re="pure-ds-theme",I=null,oe=null;function St(n){try{if(typeof document>"u")return;let e="light";n?n==="system"?e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e=n:e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",document.documentElement.setAttribute("data-theme",e)}catch{}}function $t(n){try{if(I&&oe){try{typeof I.removeEventListener=="function"?I.removeEventListener("change",oe):typeof I.removeListener=="function"&&I.removeListener(oe)}catch{}I=null,oe=null}if(n==="system"&&typeof window<"u"&&window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=o=>{let r=o?.matches===void 0?e.matches:o.matches;try{let a=r?"dark":"light";document.documentElement.setAttribute("data-theme",a),f.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:a,source:"system"}}))}catch{}};I=e,oe=t,typeof e.addEventListener=="function"?e.addEventListener("change",t):typeof e.addListener=="function"&&e.addListener(t)}}catch{}}Object.defineProperty(f,"theme",{get(){try{return typeof window>"u"?null:localStorage.getItem(Re)||null}catch{return null}},set(n){try{if(typeof window>"u")return;n==null?localStorage.removeItem(Re):localStorage.setItem(Re,n),St(n),$t(n),f.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:n,source:"api"}}))}catch{}}});f.defaultEnhancers=gt;function Et(n={},e={}){let t=Number(e.minContrast||4.5),o=c=>{let s=String(c||"").replace("#",""),l=s.length===3?s.split("").map(p=>p+p).join(""):s,d=parseInt(l||"0",16);return{r:d>>16&255,g:d>>8&255,b:d&255}},r=c=>{let{r:s,g:l,b:d}=o(c),p=[s/255,l/255,d/255].map(g=>g<=.03928?g/12.92:Math.pow((g+.055)/1.055,2.4));return .2126*p[0]+.7152*p[1]+.0722*p[2]},a=(c,s)=>{if(!c||!s)return 0;let l=r(c),d=r(s),p=Math.max(l,d),g=Math.min(l,d);return(p+.05)/(g+.05)},i=[];try{let s=new f.Generator({design:structuredClone(n)}).tokens.colors,l={surfaceBg:s.surface?.base,surfaceText:s.gray?.[900]||"#000000",primaryFill:s.interactive?.light?.fill||s.primary?.[600],primaryText:s.interactive?.light?.text||s.primary?.[600]},d=a(l.primaryFill,"#ffffff");d<t&&i.push({path:"/colors/primary",message:`Primary button contrast too low in light theme (${d.toFixed(2)} < ${t}). Choose a darker primary.`,ratio:d,min:t,context:"light/btn-primary"});let p=a(l.surfaceBg,l.surfaceText);p<t&&i.push({path:"/colors/background",message:`Base text contrast on surface (light) is too low (${p.toFixed(2)} < ${t}). Adjust background or secondary (gray).`,ratio:p,min:t,context:"light/surface-text"});let g=a(l.primaryText,l.surfaceBg);g<t&&i.push({path:"/colors/primary",message:`Primary text on surface is too low for outline/link styles (light) (${g.toFixed(2)} < ${t}). Choose a darker primary or lighter surface.`,ratio:g,min:t,context:"light/outline"});let h=s.dark;if(h){let w={surfaceBg:h.surface?.base||s.surface?.inverse,primaryFill:s.interactive?.dark?.fill||h.primary?.[600],primaryText:s.interactive?.dark?.text||h.primary?.[600]},m=a(w.primaryFill,"#ffffff");m<t&&i.push({path:"/colors/darkMode/primary",message:`Primary button contrast too low in dark theme (${m.toFixed(2)} < ${t}). Override darkMode.primary or pick a brighter hue.`,ratio:m,min:t,context:"dark/btn-primary"});let y=a(w.primaryText,w.surfaceBg);y<t&&i.push({path:"/colors/darkMode/primary",message:`Primary text on surface is too low for outline/link styles (dark) (${y.toFixed(2)} < ${t}). Override darkMode.primary/background.`,ratio:y,min:t,context:"dark/outline"})}}catch(c){i.push({path:"/",message:`Validation failed: ${String(c?.message||c)}`,ratio:0,min:0})}return{ok:i.length===0,issues:i}}f.validateDesign=Et;function lr(n=[],e={}){let t=[],o=Array.isArray(n)?n:n&&typeof n=="object"?Object.values(n):[];for(let r of o){let a,i=null;if(typeof r=="string"){let l=String(r).toLowerCase(),d=L?.[l]||Object.values(L||{}).find(p=>ae(p.name)===l||String(p.name||"").toLowerCase()===l);if(!d){t.push({name:r,ok:!1,issues:[{path:"/",message:`Preset not found: ${r}`,ratio:0,min:0}]});continue}a=d.name||l,i=structuredClone(d)}else if(r&&typeof r=="object")if(a=r.name||r.preset||void 0,"preset"in r||"design"in r){let l=String(r.preset||"default").toLowerCase(),d=L?.[l]||Object.values(L||{}).find(g=>ae(g.name)===l||String(g.name||"").toLowerCase()===l);if(!d){t.push({name:a,ok:!1,issues:[{path:"/",message:`Preset not found: ${r.preset}`,ratio:0,min:0}]});continue}let p=structuredClone(d);r.design&&typeof r.design=="object"&&(p=De(p,structuredClone(r.design))),i=p}else i=r;if(!i){t.push({name:a,ok:!1,issues:[{path:"/",message:"Invalid design entry",ratio:0,min:0}]});continue}let{ok:c,issues:s}=Et(i,e);t.push({name:a,ok:c,issues:s})}return{ok:t.every(r=>r.ok),results:t}}f.validateDesigns=lr;function zt({manageTheme:n,themeStorageKey:e}){let t="light",o=null;if(n&&typeof window<"u"){try{o=localStorage.getItem(e)||null}catch{o=null}try{St(o),$t(o)}catch{}o?o==="system"?t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t=o:t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return{resolvedTheme:t,storedTheme:o}}function De(n={},e={}){if(!e||typeof e!="object")return n;let t=Array.isArray(n)?[...n]:{...n};for(let[o,r]of Object.entries(e))r&&typeof r=="object"&&!Array.isArray(r)?t[o]=De(t[o]&&typeof t[o]=="object"?t[o]:{},r):t[o]=r;return t}function ae(n=""){return String(n).toLowerCase().replace(/&/g," and ").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function ie(n){if(n==null)return n;if(typeof n=="function")return;if(typeof n!="object")return n;if(Array.isArray(n))return n.map(t=>ie(t)).filter(t=>t!==void 0);let e={};for(let t in n)if(n.hasOwnProperty(t)){let o=n[t];if(typeof o!="function"){let r=ie(o);r!==void 0&&(e[t]=r)}}return e}var dr=/^[a-z][a-z0-9+\-.]*:\/\//i,ne=(()=>{try{return import.meta.url}catch{return}})();function fe(n,e={}){if(!n||dr.test(n))return n;let{preferModule:t=!0}=e,o=()=>{if(!ne)return null;try{return new URL(n,ne).href}catch{return null}},r=()=>{if(typeof window>"u"||!window.location?.origin)return null;try{return new URL(n,window.location.origin).href}catch{return null}};return(t?o()||r():r()||o())||n}var be=n=>typeof n=="string"&&n.length&&!n.endsWith("/")?`${n}/`:n,wt=(()=>{if(ne)try{let n=new URL(ne);if(/\/public\/assets\/js\//.test(n.pathname))return new URL("../pds/",ne).href}catch{return}})();function Ct(n){let e=!!(n?.public?.root||n?.static?.root),t=ft(n);return!e&&wt&&(t=wt),be(fe(t))}function At(n={},e={}){let t=typeof n=="object"&&("colors"in n||"typography"in n||"spatialRhythm"in n||"shape"in n||"behavior"in n||"layout"in n||"advanced"in n||"a11y"in n||"components"in n||"icons"in n),o=n&&n.enhancers;o&&!Array.isArray(o)&&(o=Object.values(o));let r=o??e.enhancers??[],a=n&&n.preset,i=n&&n.design,c="preset"in(n||{})||"design"in(n||{})||"enhancers"in(n||{}),s,l=null;if(c){let d=String(a||"default").toLowerCase(),p=L?.[d]||Object.values(L||{}).find(M=>ae(M.name)===d||String(M.name||"").toLowerCase()===d);if(!p)throw new Error(`PDS preset not found: "${a||"default"}"`);l={id:p.id||ae(p.name),name:p.name||p.id||String(d)};let g=structuredClone(p);if(i&&typeof i=="object"){let M=ie(i);g=De(g,structuredClone(M))}let{mode:h,autoDefine:w,applyGlobalStyles:m,manageTheme:y,themeStorageKey:k,preloadStyles:_,criticalLayers:E,preset:K,design:S,enhancers:C,log:z,...D}=n;s={...D,design:g,preset:l.name,log:z||ce}}else if(t){let{log:d,...p}=n;s={design:structuredClone(p),log:d||ce}}else{let d=L?.default||Object.values(L||{}).find(p=>ae(p.name)==="default");if(!d)throw new Error("PDS default preset not available");l={id:d.id||"default",name:d.name||"Default"},s={design:structuredClone(d),preset:l.name,log:ce}}return{generatorConfig:s,enhancers:r,presetInfo:l}}async function Mt(n){let{autoDefineBaseURL:e="/auto-define/",autoDefinePreload:t=[],autoDefineMapper:o=null,enhancers:r=[],autoDefineOverrides:a=null,autoDefinePreferModule:i=!0}=n,c=(()=>{let l=new Map;return(f.defaultEnhancers||[]).forEach(d=>l.set(d.selector,d)),(r||[]).forEach(d=>l.set(d.selector,d)),Array.from(l.values())})(),s=null;if(typeof window<"u"&&typeof document<"u"){let l=null;try{let m=await Promise.resolve().then(()=>(xt(),vt));l=m?.AutoDefiner||m?.default?.AutoDefiner||m?.default||null}catch(m){console.warn("AutoDefiner not available:",m?.message||m)}let d=m=>{switch(m){case"pds-tabpanel":return"pds-tabstrip.js";default:return`${m}.js`}},{mapper:p,...g}=a&&typeof a=="object"?a:{},w={baseURL:e&&be(fe(e,{preferModule:i})),predefine:t,scanExisting:!0,observeShadows:!0,patchAttachShadow:!0,debounceMs:16,enhancers:c,onError:(m,y)=>{if(typeof m=="string"&&m.startsWith("pds-")){let _=["pds-form","pds-drawer"].includes(m),E=y?.message?.includes("#pds/lit")||y?.message?.includes("Failed to resolve module specifier");_&&E?console.error(`\u274C PDS component <${m}> requires Lit but #pds/lit is not in import map.
81
+ `.trim()}];function zt(t){t.dataset.enhancedAccordion||(t.dataset.enhancedAccordion="true",t.addEventListener("toggle",e=>{e.target.open&&e.target.parentElement===t&&t.querySelectorAll(":scope > details[open]").forEach(s=>{s!==e.target&&(s.open=!1)})},!0))}function Dt(t){if(t.dataset.enhancedDropdown)return;t.dataset.enhancedDropdown="true";let e=t.querySelector("menu");if(!e)return;let s=t.querySelector("[data-dropdown-toggle]")||t.querySelector("button");s&&!s.hasAttribute("type")&&s.setAttribute("type","button"),e.id||(e.id=`dropdown-${Math.random().toString(36).slice(2,9)}`),e.setAttribute("role",e.getAttribute("role")||"menu"),e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),s&&(s.setAttribute("aria-haspopup","true"),s.setAttribute("aria-controls",e.id),s.setAttribute("aria-expanded","false"));let n=()=>{let a=(t.getAttribute("data-mode")||"auto").toLowerCase();if(a==="up"||a==="down")return a;let c=t.getBoundingClientRect(),u=Math.max(0,window.innerHeight-c.bottom);return Math.max(0,c.top)>u?"up":"down"},i=()=>{t.dataset.dropdownDirection=n(),e.setAttribute("aria-hidden","false"),s?.setAttribute("aria-expanded","true")},r=()=>{e.setAttribute("aria-hidden","true"),s?.setAttribute("aria-expanded","false")},o=()=>{e.getAttribute("aria-hidden")==="false"?r():i()};s?.addEventListener("click",a=>{a.preventDefault(),a.stopPropagation(),o()}),document.addEventListener("click",a=>{t.contains(a.target)||r()}),t.addEventListener("keydown",a=>{a.key==="Escape"&&(r(),s?.focus())}),t.addEventListener("focusout",a=>{(!a.relatedTarget||!t.contains(a.relatedTarget))&&r()})}function Ft(t){if(t.dataset.enhancedToggle)return;t.dataset.enhancedToggle="true";let e=t.querySelector('input[type="checkbox"]');if(!e)return;t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("role","switch"),t.setAttribute("aria-checked",e.checked?"true":"false");let s=document.createElement("span");s.className="toggle-switch",s.setAttribute("role","presentation"),s.setAttribute("aria-hidden","true");let n=document.createElement("span");n.className="toggle-knob",s.appendChild(n),t.insertBefore(s,e.nextSibling);let i=()=>{t.setAttribute("aria-checked",e.checked?"true":"false")},r=()=>{e.disabled||(e.checked=!e.checked,i(),e.dispatchEvent(new Event("change",{bubbles:!0})))};t.addEventListener("click",o=>{o.preventDefault(),r()}),t.addEventListener("keydown",o=>{(o.key===" "||o.key==="Enter")&&(o.preventDefault(),r())}),e.addEventListener("change",i)}function Ht(t){if(t.dataset.enhancedRange)return;let e=t.closest("label"),s=e?.classList.contains("range-output"),n=t.id||`range-${Math.random().toString(36).substring(2,11)}`,i=`${n}-output`;if(t.id=n,s){let r=e.querySelector("span");if(r&&!r.classList.contains("range-output-wrapper")){let o=document.createElement("span");o.className="range-output-wrapper",o.style.display="flex",o.style.justifyContent="space-between",o.style.alignItems="center";let a=document.createElement("span");a.textContent=r.textContent,o.appendChild(a);let c=document.createElement("output");c.id=i,c.setAttribute("for",n),c.style.color="var(--surface-text-secondary, var(--color-text-secondary))",c.style.fontSize="0.875rem",c.textContent=t.value,o.appendChild(c),r.textContent="",r.appendChild(o);let u=()=>{c.textContent=t.value};t.addEventListener("input",u)}}else{let r=t.closest(".range-container");r||(r=document.createElement("div"),r.className="range-container",t.parentNode?.insertBefore(r,t),r.appendChild(t)),r.style.position="relative";let o=document.createElement("output");o.id=i,o.setAttribute("for",n),o.className="range-bubble",o.setAttribute("aria-live","polite"),r.appendChild(o);let a=()=>{let l=parseFloat(t.min)||0,p=parseFloat(t.max)||100,g=parseFloat(t.value),h=(g-l)/(p-l);o.style.left=`calc(${h*100}% )`,o.textContent=String(g)},c=()=>o.classList.add("visible"),u=()=>o.classList.remove("visible");t.addEventListener("input",a),t.addEventListener("pointerdown",c),t.addEventListener("pointerup",u),t.addEventListener("pointerleave",u),t.addEventListener("focus",c),t.addEventListener("blur",u),a()}t.dataset.enhancedRange="1"}function Bt(t){if(t.dataset.enhancedRequired)return;t.dataset.enhancedRequired="true";let e=s=>{let n=s.closest("label");if(!n||n.querySelector(".required-asterisk"))return;let i=document.createElement("span");i.classList.add("required-asterisk"),i.textContent="*",i.style.marginLeft="4px",n.querySelector("span").appendChild(i);let r=s.closest("form");if(r&&!r.querySelector(".required-legend")){let o=document.createElement("small");o.classList.add("required-legend"),o.textContent="* Required fields",r.insertBefore(o,r.querySelector(".form-actions")||r.lastElementChild)}};t.querySelectorAll("[required]").forEach(s=>{e(s)})}function Nt(t){if(t.dataset.enhancedOpenGroup)return;t.dataset.enhancedOpenGroup="true",t.classList.add("flex","flex-wrap","buttons");let e=document.createElement("input");e.type="text",e.placeholder="Add item...",e.classList.add("input-text","input-sm"),e.style.width="auto";let s=t.querySelector('input[type="radio"], input[type="checkbox"]');t.appendChild(e),e.addEventListener("keydown",n=>{if(n.key==="Enter"||n.key==="Tab"){let i=e.value.trim();if(i){n.preventDefault();let r=s.type==="radio"?"radio":"checkbox",o=`open-group-${Math.random().toString(36).substring(2,11)}`,a=document.createElement("label"),c=document.createElement("span");c.setAttribute("data-label",""),c.textContent=i;let u=document.createElement("input");u.type=r,u.name=s.name||t.getAttribute("data-name")||"open-group",u.value=i,u.id=o,a.appendChild(c),a.appendChild(u),t.insertBefore(a,e),e.value=""}}else if(n.key==="Backspace"&&e.value===""){n.preventDefault();let i=t.querySelectorAll("label");i.length>0&&i[i.length-1].remove()}})}function It(t){if(t.dataset.enhancedBtnWorking)return;t.dataset.enhancedBtnWorking="true";let e=null,s=!1;new MutationObserver(i=>{i.forEach(r=>{if(r.attributeName==="class"){let o=t.classList.contains("btn-working"),a=t.querySelector("pds-icon");if(o)if(a)e||(e=a.getAttribute("icon")),a.setAttribute("icon","circle-notch");else{let c=document.createElement("pds-icon");c.setAttribute("icon","circle-notch"),c.setAttribute("size","sm"),t.insertBefore(c,t.firstChild),s=!0}else r.oldValue?.includes("btn-working")&&a&&(s?(a.remove(),s=!1):e&&(a.setAttribute("icon",e),e=null))}})}).observe(t,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0})}var Ot=new Map([[".accordion",zt],["nav[data-dropdown]",Dt],["label[data-toggle]",Ft],['input[type="range"]',Ht],["form[data-required]",Bt],["fieldset[role=group][data-open]",Nt],["button, a[class*='btn-']",It]]),Ce=Wt.map(t=>({...t,run:Ot.get(t.selector)||(()=>{})}));var at="pds",qt=/^([a-z][a-z0-9+\-.]*:)?\/\//i,ot=/^[a-z]:/i;function Z(t=""){return t.endsWith("/")?t:`${t}/`}function jt(t="",e=at){let s=t.replace(/\/+$/,"");return new RegExp(`(?:^|/)${e}$`,"i").test(s)?s:`${s}/${e}`}function Gt(t){return t.replace(/^\.\/+/,"")}function Vt(t){return ot.test(t)?t.replace(ot,"").replace(/^\/+/,""):t}function Kt(t){return t.startsWith("public/")?t.substring(7):t}function Le(t,e={}){let s=e.segment||at,n=e.defaultRoot||`/assets/${s}/`,i=t?.public&&t.public?.root||t?.static&&t.static?.root||null;if(!i||typeof i!="string")return Z(n);let r=i.trim();return r?(r=r.replace(/\\/g,"/"),r=jt(r,s),r=Z(r),qt.test(r)?r:(r=Gt(r),r=Vt(r),r.startsWith("/")||(r=Kt(r),r.startsWith("/")||(r=`/${r}`),r=r.replace(/\/+/g,(o,a)=>a===0?o:"/")),Z(r))):Z(n)}var Qt=/^[a-z][a-z0-9+\-.]*:\/\//i,X=(()=>{try{return import.meta.url}catch{return}})(),le=t=>typeof t=="string"&&t.length&&!t.endsWith("/")?`${t}/`:t;function ue(t,e={}){if(!t||Qt.test(t))return t;let{preferModule:s=!0}=e,n=()=>{if(!X)return null;try{return new URL(t,X).href}catch{return null}},i=()=>{if(typeof window>"u"||!window.location?.origin)return null;try{return new URL(t,window.location.origin).href}catch{return null}};return(s?n()||i():i()||n())||t}var lt=(()=>{if(X)try{let t=new URL(X);if(/\/public\/assets\/js\//.test(t.pathname))return new URL("../pds/",X).href}catch{return}})();function ut(t={},e={}){if(!e||typeof e!="object")return t;let s=Array.isArray(t)?[...t]:{...t};for(let[n,i]of Object.entries(e))i&&typeof i=="object"&&!Array.isArray(i)?s[n]=ut(s[n]&&typeof s[n]=="object"?s[n]:{},i):s[n]=i;return s}function Ue(t=""){return String(t).toLowerCase().replace(/&/g," and ").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function Y(t){if(t==null)return t;if(typeof t=="function")return;if(typeof t!="object")return t;if(Array.isArray(t))return t.map(s=>Y(s)).filter(s=>s!==void 0);let e={};for(let s in t)if(t.hasOwnProperty(s)){let n=t[s];if(typeof n!="function"){let i=Y(n);i!==void 0&&(e[s]=i)}}return e}function pt(t={},e={},{presets:s,defaultLog:n}){let i=typeof t=="object"&&("colors"in t||"typography"in t||"spatialRhythm"in t||"shape"in t||"behavior"in t||"layout"in t||"advanced"in t||"a11y"in t||"components"in t||"icons"in t),r=t&&t.enhancers;r&&!Array.isArray(r)&&(r=Object.values(r));let o=r??e.enhancers??[],a=t&&t.preset,c=t&&t.design,u="preset"in(t||{})||"design"in(t||{})||"enhancers"in(t||{}),l,p=null;if(u){let g=String(a||"default").toLowerCase(),h=s?.[g]||Object.values(s||{}).find(M=>Ue(M.name)===g||String(M.name||"").toLowerCase()===g);if(!h)throw new Error(`PDS preset not found: "${a||"default"}"`);p={id:h.id||Ue(h.name),name:h.name||h.id||String(g)};let v=structuredClone(h);if(c&&typeof c=="object"){let M=Y(c);v=ut(v,structuredClone(M))}let{mode:k,autoDefine:b,applyGlobalStyles:A,manageTheme:F,themeStorageKey:w,preloadStyles:C,criticalLayers:H,managerURL:fe,manager:te,preset:ze,design:L,enhancers:se,log:ne,...ie}=t;l={...ie,design:v,preset:p.name,log:ne||n}}else if(i){let{log:g,...h}=t;l={design:structuredClone(h),log:g||n}}else{let g=s?.default||Object.values(s||{}).find(h=>Ue(h.name)==="default");if(!g)throw new Error("PDS default preset not available");p={id:g.id||"default",name:g.name||"Default"},l={design:structuredClone(g),preset:p.name,log:n}}return{generatorConfig:l,enhancers:o,presetInfo:p}}function ht({manageTheme:t,themeStorageKey:e,applyResolvedTheme:s,setupSystemListenerIfNeeded:n}){let i="light",r=null;if(t&&typeof window<"u"){try{r=localStorage.getItem(e)||null}catch{r=null}try{s?.(r),n?.(r)}catch{}r?r==="system"?i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":i=r:i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return{resolvedTheme:i,storedTheme:r}}function Pe(t,{resolvePublicAssetURL:e}){let s=!!(t?.public?.root||t?.static?.root),n=e(t);return!s&&lt&&(n=lt),le(ue(n))}async function ft(t,{baseEnhancers:e=[]}={}){let{autoDefineBaseURL:s="/auto-define/",autoDefinePreload:n=[],autoDefineMapper:i=null,enhancers:r=[],autoDefineOverrides:o=null,autoDefinePreferModule:a=!0}=t,c=(()=>{let l=new Map;return(e||[]).forEach(p=>l.set(p.selector,p)),(r||[]).forEach(p=>l.set(p.selector,p)),Array.from(l.values())})(),u=null;if(typeof window<"u"&&typeof document<"u"){let l=null;try{let b=await Promise.resolve().then(()=>(dt(),ct));l=b?.AutoDefiner||b?.default?.AutoDefiner||b?.default||null}catch(b){console.warn("AutoDefiner not available:",b?.message||b)}let p=b=>{switch(b){case"pds-tabpanel":return"pds-tabstrip.js";default:return`${b}.js`}},{mapper:g,...h}=o&&typeof o=="object"?o:{},k={baseURL:s&&le(ue(s,{preferModule:a})),predefine:n,scanExisting:!0,observeShadows:!0,patchAttachShadow:!0,debounceMs:16,enhancers:c,onError:(b,A)=>{if(typeof b=="string"&&b.startsWith("pds-")){let w=["pds-form","pds-drawer"].includes(b),C=A?.message?.includes("#pds/lit")||A?.message?.includes("Failed to resolve module specifier");w&&C?console.error(`\u274C PDS component <${b}> requires Lit but #pds/lit is not in import map.
3268
82
  Add this to your HTML <head>:
3269
83
  <script type="importmap">
3270
84
  { "imports": { "#pds/lit": "./path/to/lit.js" } }
3271
85
  <\/script>
3272
- See: https://github.com/pure-ds/core#lit-components`):console.warn(`\u26A0\uFE0F PDS component <${m}> not found. Assets may not be installed.`)}else console.error(`\u274C Auto-define error for <${m}>:`,y)},...g,mapper:m=>{if(customElements.get(m))return null;if(typeof o=="function")try{let y=o(m);return y===void 0?d(m):y}catch(y){return console.warn("Custom autoDefine.mapper error; falling back to default:",y?.message||y),d(m)}return d(m)}};l&&(s=new l(w),t.length>0&&typeof l.define=="function"&&await l.define(...t,{baseURL:e,mapper:w.mapper,onError:w.onError}))}return{autoDefiner:s,mergedEnhancers:c}}async function pr(n){if(!n||typeof n!="object")throw new Error("PDS.start({ mode: 'live', ... }) requires a valid configuration object");if(typeof document<"u"&&document.adoptedStyleSheets){let c=`
3273
- html { opacity: 0; }
3274
- html.pds-ready { opacity: 1; transition: opacity 0.3s ease-in; }
3275
- `;try{if(!document.adoptedStyleSheets.some(l=>l._pdsFouc)){let l=new CSSStyleSheet;l.replaceSync(c),l._pdsFouc=!0,document.adoptedStyleSheets=[l,...document.adoptedStyleSheets]}}catch(s){if(console.warn("Constructable stylesheets not supported, using <style> tag fallback:",s),!document.head.querySelector("style[data-pds-fouc]")){let d=document.createElement("style");d.setAttribute("data-pds-fouc",""),d.textContent=c,document.head.insertBefore(d,document.head.firstChild)}}}let e=n.applyGlobalStyles??!0,t=n.manageTheme??!0,o=n.themeStorageKey??"pure-ds-theme",r=n.preloadStyles??!1,a=n.criticalLayers??["tokens","primitives"],i=n&&n.autoDefine||null;try{let{resolvedTheme:c,storedTheme:s}=zt({manageTheme:t,themeStorageKey:o}),l=At(n,{}),d=l.enhancers,{log:p,...g}=l.generatorConfig,h=structuredClone(g);h.log=p,t&&(h.theme=c);let w=new f.Generator(h);if(h.design?.typography)try{await yt(h.design.typography)}catch(S){h?.log?.("warn","Failed to load some fonts from Google Fonts:",S)}if(r&&typeof window<"u"&&document.head)try{let S=a.map(C=>{try{return w.css?.[C]||""}catch(z){return h?.log?.("warn",`Failed to generate critical CSS for layer "${C}":`,z),""}}).filter(C=>C.trim()).join(`
3276
- `);if(S){let C=document.head.querySelector("style[data-pds-critical]");C&&C.remove();let z=document.createElement("style");z.setAttribute("data-pds-critical",""),z.textContent=S;let D=document.head.querySelector('meta[charset], meta[name="viewport"]');D?D.parentNode.insertBefore(z,D.nextSibling):document.head.insertBefore(z,document.head.firstChild)}}catch(S){h?.log?.("warn","Failed to preload critical styles:",S)}f.registry.setLiveMode(),l.presetInfo?.name?h?.log?.("log",`PDS live with preset "${l.presetInfo.name}"`):h?.log?.("log","PDS live with custom config"),e&&(await f.Generator.applyStyles(),typeof window<"u"&&setTimeout(()=>{let S=document.head.querySelector("style[data-pds-critical]");S&&S.remove();let C=document.head.querySelector("style[data-pds-preload]");C&&C.remove();let z=document.getElementById("pds-runtime-stylesheet");z&&z.remove()},100));let m=Ct(n),y;i&&i.baseURL?y=be(fe(i.baseURL,{preferModule:!1})):y=`${m}components/`;let k=null,_=[];try{let S=await Mt({autoDefineBaseURL:y,autoDefinePreload:i&&Array.isArray(i.predefine)&&i.predefine||[],autoDefineMapper:i&&typeof i.mapper=="function"&&i.mapper||null,enhancers:d,autoDefineOverrides:i||null,autoDefinePreferModule:!(i&&i.baseURL)});k=S.autoDefiner,_=S.mergedEnhancers||[]}catch(S){h?.log?.("error","\u274C Failed to initialize AutoDefiner/Enhancers:",S)}let E=w?.options||h,K=ie(n);return f.currentConfig=Object.freeze({mode:"live",...structuredClone(K),design:structuredClone(l.generatorConfig.design),preset:l.generatorConfig.preset,theme:c,enhancers:_}),kt({mode:"live",generator:w,config:E,theme:c,autoDefiner:k}),{generator:w,config:E,theme:c,autoDefiner:k}}catch(c){throw f.dispatchEvent(new CustomEvent("pds:error",{detail:{error:c}})),c}}async function ur(n){let e=n&&n.mode||"live",{mode:t,...o}=n||{};return e==="static"?gr(o):pr(o)}f.start=ur;async function gr(n){if(!n||typeof n!="object")throw new Error("PDS.start({ mode: 'static', ... }) requires a valid configuration object");let e=n.applyGlobalStyles??!0,t=n.manageTheme??!0,o=n.themeStorageKey??"pure-ds-theme",r=n.staticPaths??{},a=Ct(n),i=n&&n.autoDefine||null,c;i&&i.baseURL?c=be(fe(i.baseURL,{preferModule:!1})):c=`${a}components/`;let s=i&&Array.isArray(i.predefine)&&i.predefine||[],l=i&&typeof i.mapper=="function"&&i.mapper||null;try{let{resolvedTheme:d}=zt({manageTheme:t,themeStorageKey:o}),p=At(n,{}),g=p.enhancers;if(r={...{tokens:`${a}styles/pds-tokens.css.js`,primitives:`${a}styles/pds-primitives.css.js`,components:`${a}styles/pds-components.css.js`,utilities:`${a}styles/pds-utilities.css.js`,styles:`${a}styles/pds-styles.css.js`},...r},f.registry.setStaticMode(r),e&&typeof document<"u")try{let k=await f.registry.getStylesheet("styles");if(k){k._pds=!0;let _=(document.adoptedStyleSheets||[]).filter(E=>E._pds!==!0);document.adoptedStyleSheets=[..._,k]}}catch(k){console.warn("Failed to apply static styles:",k)}let w=null,m=[];try{let k=await Mt({autoDefineBaseURL:c,autoDefinePreload:s,autoDefineMapper:l,enhancers:g,autoDefineOverrides:i||null,autoDefinePreferModule:!(i&&i.baseURL)});w=k.autoDefiner,m=k.mergedEnhancers||[]}catch(k){console.error("\u274C Failed to initialize AutoDefiner/Enhancers (static):",k)}let y=ie(n);return f.currentConfig=Object.freeze({mode:"static",...structuredClone(y),design:structuredClone(p.generatorConfig.design),preset:p.generatorConfig.preset,theme:d,enhancers:m}),kt({mode:"static",config:p.generatorConfig,theme:d,autoDefiner:w}),{config:p.generatorConfig,theme:d,autoDefiner:w}}catch(d){throw f.dispatchEvent(new CustomEvent("pds:error",{detail:{error:d}})),d}}async function hr(n,e={}){let{storageKey:t="pure-ds-theme",persist:o=!0}=e;if(!["light","dark","system"].includes(n))throw new Error(`Invalid theme "${n}". Must be "light", "dark", or "system".`);if(typeof window>"u")return n==="system"?"light":n;let r=n;if(n==="system"&&(r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),document.documentElement.setAttribute("data-theme",r),o&&localStorage.setItem(t,n),f.registry.isLive&&A.instance)try{let a=A.instance;if(a&&a.configure){let i={...a.config,theme:r};a.configure(i),await f.Generator.applyStyles()}}catch(a){console.warn("Failed to update styles for new theme:",a)}return f.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:r,requested:n,source:"programmatic"}})),r}f.setTheme=hr;function mr(n,e={}){if(typeof window>"u"||!document.head||!n)return;let{theme:t,layers:o=["tokens"]}=e;try{let r=t||"light";(t==="system"||!t)&&(r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),document.documentElement.setAttribute("data-theme",r);let a=n.design?{...n,theme:r}:{design:n,theme:r},i=new f.Generator(a),c=o.map(s=>{try{return i.css?.[s]||""}catch{return""}}).filter(s=>s.trim()).join(`
3277
- `);if(c){let s=document.head.querySelector("style[data-pds-preload]");s&&s.remove();let l=document.createElement("style");l.setAttribute("data-pds-preload",""),l.textContent=c,document.head.insertBefore(l,document.head.firstChild)}}catch(r){console.warn("PDS preload failed:",r)}}f.preloadCritical=mr;export{f as PDS,Et as validateDesign};
86
+ See: https://github.com/pure-ds/core#lit-components`):console.warn(`\u26A0\uFE0F PDS component <${b}> not found. Assets may not be installed.`)}else console.error(`\u274C Auto-define error for <${b}>:`,A)},...h,mapper:b=>{if(customElements.get(b))return null;if(typeof i=="function")try{let A=i(b);return A===void 0?p(b):A}catch(A){return console.warn("Custom autoDefine.mapper error; falling back to default:",A?.message||A),p(b)}return p(b)}};l&&(u=new l(k),n.length>0&&typeof l.define=="function"&&await l.define(...n,{baseURL:s,mapper:k.mapper,onError:k.onError}))}return{autoDefiner:u,mergedEnhancers:c}}var We=class extends EventTarget{},S=new We;S.initializing=!1;S.currentPreset=null;S.registry=N;S.adoptLayers=He;S.adoptPrimitives=Fe;S.createStylesheet=Be;S.isLiveMode=()=>N.isLive;S.ask=rt;S.toast=_;function St(t){let e=typeof CustomEvent=="function";try{let s=e?new CustomEvent("pds:ready",{detail:t}):new Event("pds:ready");S.dispatchEvent(s)}catch{}if(typeof document<"u")if(e){let s={detail:t,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:ready",s))}catch{}try{document.dispatchEvent(new CustomEvent("pds-ready",s))}catch{}}else{try{document.dispatchEvent(new Event("pds:ready"))}catch{}try{document.dispatchEvent(new Event("pds-ready"))}catch{}}}Object.defineProperty(S,"currentConfig",{value:null,writable:!0,enumerable:!0,configurable:!1});typeof window<"u"&&(window.PDS=S);var Te="pure-ds-theme",D=null,ee=null;function pe(t){try{if(typeof document>"u")return;let e="light";t?t==="system"?e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e=t:e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",document.documentElement.setAttribute("data-theme",e)}catch{}}function he(t){try{if(D&&ee){try{typeof D.removeEventListener=="function"?D.removeEventListener("change",ee):typeof D.removeListener=="function"&&D.removeListener(ee)}catch{}D=null,ee=null}if(t==="system"&&typeof window<"u"&&window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),s=n=>{let i=n?.matches===void 0?e.matches:n.matches;try{let r=i?"dark":"light";document.documentElement.setAttribute("data-theme",r),S.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:r,source:"system"}}))}catch{}};D=e,ee=s,typeof e.addEventListener=="function"?e.addEventListener("change",s):typeof e.addListener=="function"&&e.addListener(s)}}catch{}}Object.defineProperty(S,"theme",{get(){try{return typeof window>"u"?null:localStorage.getItem(Te)||null}catch{return null}},set(t){try{if(typeof window>"u")return;t==null?localStorage.removeItem(Te):localStorage.setItem(Te,t),pe(t),he(t),S.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:t,source:"api"}}))}catch{}}});S._applyResolvedTheme=pe;S._setupSystemListenerIfNeeded=he;S.defaultEnhancers=Ce;async function Xt(t){let e=t&&t.mode||"live",{mode:s,...n}=t||{};if(e==="static")return Yt(n);let i=Pe(n,{resolvePublicAssetURL:Le}),r=n?.managerURL||n?.public?.managerURL||n?.manager?.url||new URL("core/pds-manager.js",i).href||new URL("./pds-manager.js",import.meta.url).href,{startLive:o}=await import(r);return o(S,n,{emitReady:St,applyResolvedTheme:pe,setupSystemListenerIfNeeded:he})}S.start=Xt;async function Yt(t){if(!t||typeof t!="object")throw new Error("PDS.start({ mode: 'static', ... }) requires a valid configuration object");let e=t.applyGlobalStyles??!0,s=t.manageTheme??!0,n=t.themeStorageKey??"pure-ds-theme",i=t.staticPaths??{},r=Pe(t,{resolvePublicAssetURL:Le}),o=t&&t.autoDefine||null,a;o&&o.baseURL?a=le(ue(o.baseURL,{preferModule:!1})):a=`${r}components/`;let c=o&&Array.isArray(o.predefine)&&o.predefine||[],u=o&&typeof o.mapper=="function"&&o.mapper||null;try{let{resolvedTheme:l}=ht({manageTheme:s,themeStorageKey:n,applyResolvedTheme:pe,setupSystemListenerIfNeeded:he}),{presets:p,defaultLog:g}=await Promise.resolve().then(()=>(bt(),gt)),h=pt(t,{},{presets:p,defaultLog:g}),v=h.enhancers;if(i={...{tokens:`${r}styles/pds-tokens.css.js`,primitives:`${r}styles/pds-primitives.css.js`,components:`${r}styles/pds-components.css.js`,utilities:`${r}styles/pds-utilities.css.js`,styles:`${r}styles/pds-styles.css.js`},...i},S.registry.setStaticMode(i),e&&typeof document<"u")try{let w=await S.registry.getStylesheet("styles");if(w){w._pds=!0;let C=(document.adoptedStyleSheets||[]).filter(H=>H._pds!==!0);document.adoptedStyleSheets=[...C,w]}}catch(w){console.warn("Failed to apply static styles:",w)}let b=null,A=[];try{let w=await ft({autoDefineBaseURL:a,autoDefinePreload:c,autoDefineMapper:u,enhancers:v,autoDefineOverrides:o||null,autoDefinePreferModule:!(o&&o.baseURL)},{baseEnhancers:Ce});b=w.autoDefiner,A=w.mergedEnhancers||[]}catch(w){console.error("\u274C Failed to initialize AutoDefiner/Enhancers (static):",w)}let F=Y(t);return S.currentConfig=Object.freeze({mode:"static",...structuredClone(F),design:structuredClone(h.generatorConfig.design),preset:h.generatorConfig.preset,theme:l,enhancers:A}),St({mode:"static",config:h.generatorConfig,theme:l,autoDefiner:b}),{config:h.generatorConfig,theme:l,autoDefiner:b}}catch(l){throw S.dispatchEvent(new CustomEvent("pds:error",{detail:{error:l}})),l}}export{S as PDS};
3278
87
  /*! Bundled license information:
3279
88
 
3280
89
  @lit/reactive-element/css-tag.js: