@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.
- package/dist/types/pds.d.ts +34 -11
- package/dist/types/public/assets/auto-definer-XWHRBQPU.d.ts +9 -0
- package/dist/types/public/assets/auto-definer-XWHRBQPU.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-746HIXIK.d.ts +52 -0
- package/dist/types/public/assets/chunk-746HIXIK.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-APJV5T3J.d.ts +106 -0
- package/dist/types/public/assets/chunk-APJV5T3J.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-BEPKFFM7.d.ts +398 -0
- package/dist/types/public/assets/chunk-BEPKFFM7.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-ISS7UH5H.d.ts +2424 -0
- package/dist/types/public/assets/chunk-ISS7UH5H.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-RUPLQUDG.d.ts +582 -0
- package/dist/types/public/assets/chunk-RUPLQUDG.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-USML4NYF.d.ts +18 -0
- package/dist/types/public/assets/chunk-USML4NYF.d.ts.map +1 -0
- package/dist/types/public/assets/chunk-Z47A3HLT.d.ts +3 -0
- package/dist/types/public/assets/chunk-Z47A3HLT.d.ts.map +1 -0
- package/dist/types/public/assets/js/auto-definer-HZLD2XF4.d.ts +9 -0
- package/dist/types/public/assets/js/auto-definer-HZLD2XF4.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-6A6DFAIG.d.ts +88 -0
- package/dist/types/public/assets/js/chunk-6A6DFAIG.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-746HIXIK.d.ts +52 -0
- package/dist/types/public/assets/js/chunk-746HIXIK.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-A3TZGIYX.d.ts +4 -0
- package/dist/types/public/assets/js/chunk-A3TZGIYX.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-BEPKFFM7.d.ts +398 -0
- package/dist/types/public/assets/js/chunk-BEPKFFM7.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-OTTRJ5MB.d.ts +1695 -0
- package/dist/types/public/assets/js/chunk-OTTRJ5MB.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-RBPKHG76.d.ts +747 -0
- package/dist/types/public/assets/js/chunk-RBPKHG76.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-RUPLQUDG.d.ts +582 -0
- package/dist/types/public/assets/js/chunk-RUPLQUDG.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-SMD2R3CX.d.ts +68 -0
- package/dist/types/public/assets/js/chunk-SMD2R3CX.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunk-Y73DA2D5.d.ts +15 -0
- package/dist/types/public/assets/js/chunk-Y73DA2D5.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/auto-definer-X7MSXKTU.d.ts +9 -0
- package/dist/types/public/assets/js/chunks/auto-definer-X7MSXKTU.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/chunk-7BDQH5CT.d.ts +485 -0
- package/dist/types/public/assets/js/chunks/chunk-7BDQH5CT.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/chunk-MWB3S7NG.d.ts +3 -0
- package/dist/types/public/assets/js/chunks/chunk-MWB3S7NG.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/chunk-WIMLORAU.d.ts +5 -0
- package/dist/types/public/assets/js/chunks/chunk-WIMLORAU.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/chunk-WN4Y2ELN.d.ts +833 -0
- package/dist/types/public/assets/js/chunks/chunk-WN4Y2ELN.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/chunk-XQOUIBLO.d.ts +1687 -0
- package/dist/types/public/assets/js/chunks/chunk-XQOUIBLO.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/font-loader-VN5SRNOD.d.ts +5 -0
- package/dist/types/public/assets/js/chunks/font-loader-VN5SRNOD.d.ts.map +1 -0
- package/dist/types/public/assets/js/chunks/pds-live-validation-BQPWN5JG.d.ts +38 -0
- package/dist/types/public/assets/js/chunks/pds-live-validation-BQPWN5JG.d.ts.map +1 -0
- package/dist/types/public/assets/js/common-WIAC4WAJ.d.ts +4 -0
- package/dist/types/public/assets/js/common-WIAC4WAJ.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-config-WEBAXXSM.d.ts +4 -0
- package/dist/types/public/assets/js/pds-config-WEBAXXSM.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-core/pds-generator.d.ts +700 -0
- package/dist/types/public/assets/js/pds-core/pds-generator.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-core/pds-utilities.d.ts +27 -0
- package/dist/types/public/assets/js/pds-core/pds-utilities.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-enums-DCBZHS64.d.ts +3 -0
- package/dist/types/public/assets/js/pds-enums-DCBZHS64.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-gen.d.ts +106 -0
- package/dist/types/public/assets/js/pds-gen.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-live.d.ts +11 -0
- package/dist/types/public/assets/js/pds-live.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-manager.d.ts +1047 -0
- package/dist/types/public/assets/js/pds-manager.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-ontology-2DICJXHO.d.ts +9 -0
- package/dist/types/public/assets/js/pds-ontology-2DICJXHO.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-query-B54LBKKR.d.ts +70 -0
- package/dist/types/public/assets/js/pds-query-B54LBKKR.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds.d.ts +1 -18
- package/dist/types/public/assets/js/pds.d.ts.map +1 -1
- package/dist/types/public/assets/pds-ontology-ZO6TJHO3.d.ts +9 -0
- package/dist/types/public/assets/pds-ontology-ZO6TJHO3.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-config.d.ts +757 -0
- package/dist/types/src/js/common/pds-core/pds-config.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-enhancers.d.ts +28 -0
- package/dist/types/src/js/common/pds-core/pds-enhancers.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-enums.d.ts +87 -0
- package/dist/types/src/js/common/pds-core/pds-enums.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-generator.d.ts +700 -0
- package/dist/types/src/js/common/pds-core/pds-generator.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-ontology.d.ts +380 -0
- package/dist/types/src/js/common/pds-core/pds-ontology.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-paths.d.ts +37 -0
- package/dist/types/src/js/common/pds-core/pds-paths.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-query.d.ts +102 -0
- package/dist/types/src/js/common/pds-core/pds-query.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-registry.d.ts +35 -0
- package/dist/types/src/js/common/pds-core/pds-registry.d.ts.map +1 -0
- package/dist/types/src/js/common/pds-core/pds-utilities.d.ts +27 -0
- package/dist/types/src/js/common/pds-core/pds-utilities.d.ts.map +1 -0
- package/dist/types/src/js/pds-core/pds-generator.d.ts +38 -46
- package/dist/types/src/js/pds-core/pds-generator.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-live.d.ts +39 -0
- package/dist/types/src/js/pds-core/pds-live.d.ts.map +1 -0
- package/dist/types/src/js/pds-core/pds-runtime.d.ts +39 -0
- package/dist/types/src/js/pds-core/pds-runtime.d.ts.map +1 -0
- package/dist/types/src/js/pds-core/pds-start-helpers.d.ts +60 -0
- package/dist/types/src/js/pds-core/pds-start-helpers.d.ts.map +1 -0
- package/dist/types/src/js/pds-core/pds-utilities.d.ts +27 -0
- package/dist/types/src/js/pds-core/pds-utilities.d.ts.map +1 -0
- package/dist/types/src/js/pds-gen.d.ts +48 -0
- package/dist/types/src/js/pds-gen.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-runtime.d.ts +7 -0
- package/dist/types/src/js/pds-live-runtime.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-validation.d.ts +44 -0
- package/dist/types/src/js/pds-live-validation.d.ts.map +1 -0
- package/dist/types/src/js/pds-live.d.ts +11 -0
- package/dist/types/src/js/pds-live.d.ts.map +1 -0
- package/dist/types/src/js/pds-manager.d.ts +2 -0
- package/dist/types/src/js/pds-manager.d.ts.map +1 -0
- package/dist/types/src/js/pds.d.ts +6 -33
- package/dist/types/src/js/pds.d.ts.map +1 -1
- package/package.json +11 -12
- package/packages/pds-cli/bin/{generate-css-data.mjs → generate-css-data.js} +563 -563
- package/packages/pds-cli/bin/{generate-manifest.mjs → generate-manifest.js} +352 -352
- package/packages/pds-cli/bin/{pds-build-icons.mjs → pds-build-icons.js} +152 -152
- package/packages/pds-cli/bin/{pds-dx.mjs → pds-dx.js} +114 -114
- package/packages/pds-cli/bin/{pds-init-config.mjs → pds-init-config.js} +34 -34
- package/packages/pds-cli/bin/{pds-setup-copilot.mjs → pds-setup-copilot.js} +106 -106
- package/packages/pds-cli/bin/{pds-static.mjs → pds-static.js} +597 -581
- package/packages/pds-cli/bin/{pds.mjs → pds.js} +127 -127
- package/packages/pds-cli/bin/postinstall.mjs +522 -563
- package/packages/pds-cli/bin/{sync-assets.mjs → sync-assets.js} +251 -251
- package/packages/pds-cli/lib/{asset-roots.mjs → asset-roots.js} +47 -47
- package/packages/pds-cli/lib/{fs-writer.mjs → fs-writer.js} +75 -75
- package/public/assets/js/app.js +95 -118
- package/public/assets/js/pds-manager.js +3251 -0
- package/public/assets/js/pds.js +10 -3201
- package/readme.md +2014 -2016
- package/src/js/pds-core/pds-enhancers.js +518 -518
- package/src/js/pds-core/pds-enums.js +86 -86
- package/src/js/pds-core/pds-generator.js +255 -185
- package/src/js/pds-core/pds-live.js +434 -0
- package/src/js/pds-core/pds-paths.js +109 -109
- package/src/js/pds-core/pds-registry.js +79 -79
- package/src/js/pds-core/pds-runtime.js +184 -0
- package/src/js/pds-core/pds-start-helpers.js +405 -0
- package/src/js/pds.d.ts +34 -11
- package/src/js/pds.js +43 -1182
- package/getting-started.md +0 -626
- package/src/js/pds-core/pds.d.ts +0 -129
package/public/assets/js/pds.js
CHANGED
|
@@ -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
|
-
|
|
3
|
-
|
|
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
|
|
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
|
-
${
|
|
13
|
+
${r.join("")}
|
|
3182
14
|
</footer>
|
|
3183
|
-
`,
|
|
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
|
-
${
|
|
24
|
+
${r.join("")}
|
|
3193
25
|
</footer>
|
|
3194
26
|
</form>
|
|
3195
|
-
`;let
|
|
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&<&&(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 <${
|
|
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:
|