@pure-ds/core 0.6.10 → 0.7.1
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/.github/copilot-instructions.md +6 -1
- package/custom-elements.json +803 -16
- package/dist/types/pds.d.ts +1 -0
- package/dist/types/public/assets/js/pds-ask.d.ts +2 -0
- package/dist/types/public/assets/js/pds-ask.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-auto-definer.d.ts +14 -0
- package/dist/types/public/assets/js/pds-auto-definer.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-autocomplete.d.ts +79 -0
- package/dist/types/public/assets/js/pds-autocomplete.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-enhancers.d.ts +7 -0
- package/dist/types/public/assets/js/pds-enhancers.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds-manager.d.ts +98 -1
- package/dist/types/public/assets/js/pds-manager.d.ts.map +1 -1
- package/dist/types/public/assets/js/pds-toast.d.ts +8 -0
- package/dist/types/public/assets/js/pds-toast.d.ts.map +1 -0
- package/dist/types/public/assets/js/pds.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-drawer.d.ts +1 -143
- package/dist/types/public/assets/pds/components/pds-drawer.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-form.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-icon.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-live-converter.d.ts +8 -0
- package/dist/types/public/assets/pds/components/pds-live-converter.d.ts.map +1 -0
- package/dist/types/public/assets/pds/components/pds-live-importer.d.ts +2 -0
- package/dist/types/public/assets/pds/components/pds-live-importer.d.ts.map +1 -0
- package/dist/types/public/assets/pds/components/pds-live-template-canvas.d.ts +2 -0
- package/dist/types/public/assets/pds/components/pds-live-template-canvas.d.ts.map +1 -0
- package/dist/types/public/assets/pds/components/pds-omnibox.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-richtext.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-scrollrow.d.ts +1 -63
- package/dist/types/public/assets/pds/components/pds-scrollrow.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-splitpanel.d.ts +1 -89
- package/dist/types/public/assets/pds/components/pds-splitpanel.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-theme.d.ts +1 -22
- package/dist/types/public/assets/pds/components/pds-theme.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-toaster.d.ts +1 -1
- package/dist/types/public/assets/pds/components/pds-toaster.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-treeview.d.ts +37 -0
- package/dist/types/public/assets/pds/components/pds-treeview.d.ts.map +1 -0
- package/dist/types/public/assets/pds/components/pds-upload.d.ts.map +1 -1
- package/dist/types/src/js/common/ask.d.ts.map +1 -1
- package/dist/types/src/js/common/toast.d.ts +8 -0
- package/dist/types/src/js/common/toast.d.ts.map +1 -1
- package/dist/types/src/js/pds-ask.d.ts +2 -0
- package/dist/types/src/js/pds-ask.d.ts.map +1 -0
- package/dist/types/src/js/pds-auto-definer.d.ts +2 -0
- package/dist/types/src/js/pds-auto-definer.d.ts.map +1 -0
- package/dist/types/src/js/pds-autocomplete.d.ts +2 -0
- package/dist/types/src/js/pds-autocomplete.d.ts.map +1 -0
- package/dist/types/src/js/pds-core/pds-enhancers.d.ts.map +1 -1
- 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 +2 -1
- package/dist/types/src/js/pds-core/pds-live.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-start-helpers.d.ts.map +1 -1
- package/dist/types/src/js/pds-enhancers.d.ts +2 -0
- package/dist/types/src/js/pds-enhancers.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-manager/conversion-service.d.ts +66 -0
- package/dist/types/src/js/pds-live-manager/conversion-service.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-manager/import-contract.d.ts +15 -0
- package/dist/types/src/js/pds-live-manager/import-contract.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-manager/import-history-service.d.ts +32 -0
- package/dist/types/src/js/pds-live-manager/import-history-service.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-manager/import-service.d.ts +21 -0
- package/dist/types/src/js/pds-live-manager/import-service.d.ts.map +1 -0
- package/dist/types/src/js/pds-live-manager/template-service.d.ts +17 -0
- package/dist/types/src/js/pds-live-manager/template-service.d.ts.map +1 -0
- package/dist/types/src/js/pds-manager.d.ts +4 -0
- package/dist/types/src/js/pds-toast.d.ts +2 -0
- package/dist/types/src/js/pds-toast.d.ts.map +1 -0
- package/dist/types/src/js/pds.d.ts.map +1 -1
- package/package.json +11 -5
- package/packages/pds-cli/README.md +60 -0
- package/packages/pds-cli/bin/pds-import.js +176 -0
- package/packages/pds-cli/bin/pds-static.js +27 -1
- package/packages/pds-cli/bin/postinstall.mjs +17 -8
- package/packages/pds-cli/bin/templates/bootstrap/pds.config.js +1 -5
- package/packages/pds-cli/bin/templates/bootstrap/public/index.html +2 -1
- package/packages/pds-cli/bin/templates/starter-templates.js +1 -3
- package/public/assets/js/app.js +9 -163
- package/public/assets/js/pds-ask.js +25 -0
- package/public/assets/js/pds-auto-definer.js +1 -0
- package/public/assets/js/pds-autocomplete.js +7 -0
- package/public/assets/js/pds-enhancers.js +1 -0
- package/public/assets/js/pds-manager.js +370 -267
- package/public/assets/js/pds-toast.js +1 -0
- package/public/assets/js/pds.js +2 -32
- package/public/assets/pds/components/pds-calendar.js +2 -2
- package/public/assets/pds/components/pds-drawer.js +1 -1
- package/public/assets/pds/components/pds-form.js +7 -6
- package/public/assets/pds/components/pds-icon.js +12 -9
- package/public/assets/pds/components/pds-live-converter.js +47 -0
- package/public/assets/pds/components/pds-live-edit.js +758 -44
- package/public/assets/pds/components/pds-live-importer.js +773 -0
- package/public/assets/pds/components/pds-live-template-canvas.js +172 -0
- package/public/assets/pds/components/pds-omnibox.js +147 -3
- package/public/assets/pds/components/pds-richtext.js +2 -0
- package/public/assets/pds/components/pds-scrollrow.js +61 -2
- package/public/assets/pds/components/pds-splitpanel.js +3 -1
- package/public/assets/pds/components/pds-theme.js +2 -0
- package/public/assets/pds/components/pds-toaster.js +52 -5
- package/public/assets/pds/components/pds-treeview.js +974 -0
- package/public/assets/pds/components/pds-upload.js +2 -0
- package/public/assets/pds/core/pds-ask.js +25 -0
- package/public/assets/pds/core/pds-auto-definer.js +1 -0
- package/public/assets/pds/core/pds-autocomplete.js +7 -0
- package/public/assets/pds/core/pds-enhancers.js +1 -0
- package/public/assets/pds/core/pds-manager.js +3646 -0
- package/public/assets/pds/core/pds-toast.js +1 -0
- package/public/assets/pds/core.js +2 -0
- package/public/assets/pds/custom-elements.json +803 -16
- package/public/assets/pds/pds-css-complete.json +7 -2
- package/public/assets/pds/templates/commerce-scroll-explorer.html +115 -0
- package/public/assets/pds/templates/content-brand-showcase.html +110 -0
- package/public/assets/pds/templates/feedback-ops-dashboard.html +91 -0
- package/public/assets/pds/templates/release-readiness-radar.html +69 -0
- package/public/assets/pds/templates/support-command-center.html +92 -0
- package/public/assets/pds/templates/templates.json +53 -0
- package/public/assets/pds/templates/workspace-settings-lab.html +131 -0
- package/public/assets/pds/vscode-custom-data.json +54 -4
- package/readme.md +38 -1
- package/src/js/pds-core/pds-config.js +9 -9
- package/src/js/pds-core/pds-enhancers.js +146 -0
- package/src/js/pds-core/pds-generator.js +170 -29
- package/src/js/pds-core/pds-live.js +456 -13
- package/src/js/pds-core/pds-start-helpers.js +5 -1
- package/src/js/pds-live-manager/conversion-service.js +3135 -0
- package/src/js/pds-live-manager/import-contract.js +57 -0
- package/src/js/pds-live-manager/import-history-service.js +145 -0
- package/src/js/pds-live-manager/import-service.js +255 -0
- package/src/js/pds-live-manager/tailwind-conversion-rules.json +383 -0
- package/src/js/pds-live-manager/template-service.js +170 -0
- package/src/js/pds.d.ts +1 -0
- package/src/js/pds.js +192 -12
|
@@ -0,0 +1,3646 @@
|
|
|
1
|
+
var Zr=Object.defineProperty;var _e=(r,e)=>()=>(r&&(e=r(r=0)),e);var De=(r,e)=>{for(var t in e)Zr(r,t,{get:e[t],enumerable:!0})};var Gt={};De(Gt,{enums:()=>y});var y,$e=_e(()=>{y={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"},IconSizes:{xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64,"3xl":96}}});var ar={};De(ar,{default:()=>pn,findComponentForElement:()=>an,getAllSelectors:()=>sn,getAllTags:()=>dn,getByCategory:()=>cn,ontology:()=>D,searchOntology:()=>ln});function ae(r,e){if(!r||!e)return!1;try{return r.matches(e)}catch{return!1}}function or(r,e){if(!r||!e||!r.closest)return null;try{return r.closest(e)}catch{return null}}function an(r,{maxDepth:e=5}={}){if(!r||r.closest&&r.closest(".showcase-toc"))return null;let t=r,n=0;for(;t&&n<e;){if(n++,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(ae(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 o=t.closest?t.closest("label"):null;if(o&&o.querySelector&&o.querySelector("input,select,textarea"))return{element:o,componentType:"form-control",displayName:"label with input"};for(let a of PDS.ontology.primitives){for(let i of a.selectors||[]){let s=String(i||"").trim();if(s.includes("*")){if(s.startsWith(".")){let d=s.slice(1).replace(/\*/g,"");if(t.classList&&Array.from(t.classList).some(u=>u.startsWith(d)))return{element:t,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags};let p=t.parentElement,l=0;for(;p&&l<e;){if(p.classList&&Array.from(p.classList).some(u=>u.startsWith(d))&&p.tagName!=="DS-SHOWCASE")return{element:p,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags};p=p.parentElement,l++}continue}continue}if(ae(t,s))return{element:t,componentType:"pds-primitive",displayName:a.name||a.id,id:a.id,tags:a.tags};let c=or(t,s);if(c&&c.tagName!=="DS-SHOWCASE")return{element:c,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 s of a.selectors||[])if(typeof s=="string"&&s.includes("*")&&s.startsWith(".")){let c=s.slice(1).replace(/\*/g,"");if(i.some(d=>d.startsWith(c)))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 s=String(i||"").trim();if(s.includes("*")){if(s.startsWith(".")){let d=s.slice(1).replace(/\*/g,"");if(t.classList&&Array.from(t.classList).some(p=>p.startsWith(d)))return{element:t,componentType:"layout-pattern",displayName:a.name||a.id,id:a.id,tags:a.tags}}continue}if(ae(t,s))return{element:t,componentType:"layout-pattern",displayName:a.name||a.id,id:a.id,tags:a.tags};let c=or(t,s);if(c&&c.tagName!=="DS-SHOWCASE")return{element:c,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(s=>s.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(ae(t,"pds-icon")||t.closest&&t.closest("pds-icon")){let a=ae(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(ae(t,"nav[data-dropdown]")||t.closest&&t.closest("nav[data-dropdown]"))return{element:ae(t,"nav[data-dropdown]")?t:t.closest("nav[data-dropdown]"),componentType:"navigation",displayName:"dropdown menu",id:"dropdown"};t=t.parentElement}return null}function sn(){let r=[];for(let e of PDS.ontology.primitives)r.push(...e.selectors||[]);for(let e of PDS.ontology.components)r.push(...e.selectors||[]);for(let e of PDS.ontology.layoutPatterns||[])r.push(...e.selectors||[]);return Array.from(new Set(r))}function ln(r,e={}){let t=r.toLowerCase(),n=[],o=(a,i)=>{for(let s of a)(s.id?.toLowerCase().includes(t)||s.name?.toLowerCase().includes(t)||s.description?.toLowerCase().includes(t)||s.tags?.some(d=>d.toLowerCase().includes(t))||s.category?.toLowerCase().includes(t)||s.selectors?.some(d=>d.toLowerCase().includes(t)))&&n.push({...s,type:i})};return(!e.type||e.type==="primitive")&&o(D.primitives,"primitive"),(!e.type||e.type==="component")&&o(D.components,"component"),(!e.type||e.type==="layout")&&o(D.layoutPatterns,"layout"),(!e.type||e.type==="enhancement")&&o(D.enhancements,"enhancement"),n}function cn(r){let e=r.toLowerCase();return{primitives:D.primitives.filter(t=>t.category===e),components:D.components.filter(t=>t.category===e),layouts:D.layoutPatterns.filter(t=>t.category===e)}}function dn(){let r=new Set;return D.primitives.forEach(e=>e.tags?.forEach(t=>r.add(t))),D.components.forEach(e=>e.tags?.forEach(t=>r.add(t))),D.layoutPatterns.forEach(e=>e.tags?.forEach(t=>r.add(t))),D.enhancements.forEach(e=>e.tags?.forEach(t=>r.add(t))),Array.from(r).sort()}var D,pn,vt=_e(()=>{D={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:"callout",name:"Callout",description:"Contextual information and notification messages",selectors:[".callout",".callout-info",".callout-success",".callout-warning",".callout-danger",".callout-error",".callout-dismissible"],tags:["feedback","message","notification","status","information"],category:"feedback"},{id:"empty-state",name:"Empty State",description:"Empty state layout for missing data or onboarding",selectors:[".empty-state"],tags:["empty","no-data","zero","placeholder","onboarding","state"],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-fab",name:"FAB",description:"Floating Action Button with expandable satellite actions",selectors:["pds-fab"],tags:["button","action","floating","interactive"],category:"action"},{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-live-edit",name:"Live Edit",description:"Contextual live editing for PDS design settings",selectors:["pds-live-edit"],tags:["editor","live","config","tooling"],category:"tooling"},{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:"color-input",selector:"label[data-color]",description:"Enhanced color input with swatch shell and hex output",tags:["color","input","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:["callout","badge","empty-state"],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"]},action:{description:"Interactive actions and buttons",primitives:["button"],components:["pds-fab"]}},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"],empty:["empty-state","placeholder","zero","no-data","onboarding","callout","card","icon","button"],"empty state":["empty-state","empty","no-data","zero","onboarding"],"no data":["empty-state","empty","zero","placeholder"],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","pds-fab","floating"],btn:["button","interactive","action","pds-fab"],fab:["pds-fab","floating","button","action","menu"],floating:["fab","pds-fab","button","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"],callout:["notification","feedback","message","status","toast","information","alert","warning","error","info","success","danger"],alert:["callout","notification","feedback","message","status","toast","modal","dialog","pds-ask","confirm","warning","error","info","success","danger"],notification:["callout","toast","pds-toaster","feedback","message","popup","alert"],toast:["pds-toaster","notification","callout","feedback","popup","snackbar","alert"],feedback:["callout","notification","toast","status","badge","validation","error","success","alert"],message:["callout","notification","feedback","dialog","toast","alert"],status:["badge","callout","indicator","feedback","state","alert"],error:["callout","danger","validation","feedback","warning","alert"],success:["callout","feedback","badge","status","check","alert"],warning:["callout","caution","feedback","status","alert"],info:["callout","information","feedback","status","alert"],danger:["callout","error","feedback","destructive","delete","alert"],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"]}};pn=D});var Tt={};De(Tt,{PDSQuery:()=>Et});var Et,At=_e(()=>{Et=class{constructor(e){this.pds=e,this.intents={color:["color","colours","shade","tint","hue","foreground","background","text","fill","bg","fg"],spacing:["spacing","space","gap","padding","margin","distance","rhythm"],typography:["font","text","type","typography","heading","body","size","weight","family"],border:["border","outline","stroke","edge","frame"],radius:["radius","rounded","corner","curve","round"],shadow:["shadow","elevation","depth","glow","drop-shadow"],component:["component","element","widget"],utility:["utility","class","helper","css"],layout:["layout","container","grid","flex","group","arrange","organize"],pattern:["pattern","example","template","structure"],interaction:["hover","focus","active","disabled","pressed","selected","checked"]},this.entities={button:["button","btn","cta"],input:["input","field","textbox","text-field","form-control"],card:["card","panel"],badge:["badge","pill","tag","chip"],surface:["surface","background","layer","container"],icon:["icon","svg","glyph","symbol"],link:["link","anchor","hyperlink"],nav:["nav","navigation","menu"],modal:["modal","dialog","popup","overlay"],drawer:["drawer","sidebar","panel"],tab:["tab","tabstrip"],toast:["toast","notification","callout","message","alert"]},this.questionWords=["what","which","how","where","when","show","find","get","give","tell"]}async search(e){if(!e||e.length<2)return[];let t=e.toLowerCase().trim(),n=this.tokenize(t),o=this.analyzeQuery(n,t),a=[];o.intents.has("color")&&a.push(...this.queryColors(o,t)),(o.intents.has("utility")||o.intents.has("border")||o.intents.has("layout")||t.includes("class"))&&a.push(...this.queryUtilities(o,t)),(o.intents.has("component")||o.entities.size>0)&&a.push(...this.queryComponents(o,t)),(o.intents.has("layout")||o.intents.has("pattern"))&&a.push(...this.queryPatterns(o,t)),o.intents.has("typography")&&a.push(...this.queryTypography(o,t)),o.intents.has("spacing")&&a.push(...this.querySpacing(o,t));let i=new Map;for(let s of a){let c=s.value;(!i.has(c)||i.get(c).score<s.score)&&i.set(c,s)}return Array.from(i.values()).sort((s,c)=>c.score-s.score).slice(0,10)}tokenize(e){return e.toLowerCase().replace(/[?!.]/g,"").split(/\s+/).filter(t=>t.length>0)}analyzeQuery(e,t){let n={intents:new Set,entities:new Set,modifiers:new Set,isQuestion:!1,tokens:e,fullText:t};n.isQuestion=this.questionWords.some(o=>e.includes(o));for(let[o,a]of Object.entries(this.intents))a.some(i=>e.includes(i)||t.includes(i))&&n.intents.add(o);for(let[o,a]of Object.entries(this.entities))a.some(i=>e.includes(i)||t.includes(i))&&n.entities.add(o);return(e.includes("hover")||t.includes("hover"))&&n.modifiers.add("hover"),(e.includes("focus")||t.includes("focus"))&&n.modifiers.add("focus"),(e.includes("active")||t.includes("active"))&&n.modifiers.add("active"),(e.includes("disabled")||t.includes("disabled"))&&n.modifiers.add("disabled"),n}queryColors(e,t){let n=[],o=this.pds.compiled;if(!o?.tokens?.colors)return n;let a=o.tokens.colors,i=Array.from(e.entities),s=Array.from(e.modifiers);if(s.includes("focus")&&e.intents.has("border")&&i.includes("input")&&n.push({text:"Focus border color: var(--color-primary-500)",value:"--color-primary-500",icon:"palette",category:"Color Token",score:100,cssVar:"var(--color-primary-500)",description:"Primary color used for focus states on form inputs"}),(t.includes("foreground")||t.includes("text"))&&(t.includes("surface")||e.entities.has("surface"))&&(n.push({text:"Text on surface: var(--surface-text)",value:"--surface-text",icon:"palette",category:"Surface Token",score:95,cssVar:"var(--surface-text)",description:"Default text color for current surface"}),n.push({text:"Secondary text: var(--surface-text-secondary)",value:"--surface-text-secondary",icon:"palette",category:"Surface Token",score:90,cssVar:"var(--surface-text-secondary)",description:"Secondary/muted text on surface"})),t.includes("primary")||t.includes("accent")||t.includes("secondary")){let c=t.includes("primary")?"primary":t.includes("accent")?"accent":"secondary";for(let d of[500,600,700]){let p=`--color-${c}-${d}`;n.push({text:`${c.charAt(0).toUpperCase()+c.slice(1)} ${d}: var(${p})`,value:p,icon:"palette",category:"Color Scale",score:80-(d-500)/100,cssVar:`var(${p})`,description:`${c} color scale shade ${d}`})}}if(i.includes("button")&&e.intents.has("color")){let c=s[0];c?n.push({text:`Button ${c} fill: var(--primary-fill-${c})`,value:`--primary-fill-${c}`,icon:"palette",category:"Interactive Token",score:92,description:`Button background color in ${c} state`}):n.push({text:"Button fill: var(--primary-fill)",value:"--primary-fill",icon:"palette",category:"Interactive Token",score:88,description:"Default button background color"})}return n}queryUtilities(e,t){let n=[],o=this.pds.ontology;if(!o?.utilities)return n;let a=o.utilities,i=[];for(let s of Object.values(a))if(typeof s=="object")for(let c of Object.values(s))Array.isArray(c)&&i.push(...c);return e.intents.has("border")&&i.filter(c=>c.includes("border")||c.includes("outline")).forEach(c=>{let d=80;t.includes("gradient")&&c.includes("gradient")&&(d=95),t.includes("glow")&&c.includes("glow")&&(d=95),n.push({text:`${c} - Border utility class`,value:c,icon:"code",category:"Utility Class",score:d,code:`<div class="${c}">...</div>`,description:this.describeUtility(c)})}),e.intents.has("layout")&&i.filter(c=>c.includes("flex")||c.includes("grid")||c.includes("items-")||c.includes("justify-")||c.includes("gap-")).forEach(c=>{n.push({text:`${c} - Layout utility`,value:c,icon:"layout",category:"Utility Class",score:85,code:`<div class="${c}">...</div>`,description:this.describeUtility(c)})}),t.includes("group")&&e.entities.has("button")&&n.push({text:".btn-group - Group buttons together",value:".btn-group",icon:"code",category:"Utility Class",score:90,code:`<div class="btn-group">
|
|
2
|
+
<button class="btn-primary">One</button>
|
|
3
|
+
<button class="btn-primary">Two</button>
|
|
4
|
+
</div>`,description:"Container for grouped buttons with connected styling"}),n}queryComponents(e,t){let n=[],o=this.pds.ontology;return!o?.components&&!o?.primitives||(o.components&&o.components.forEach(a=>{let i=this.scoreMatch(t,a.name+" "+a.id);i>50&&n.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`})}),o.primitives&&o.primitives.forEach(a=>{let i=this.scoreMatch(t,a.name+" "+a.id);if(i>50){let s=a.selectors?.[0]||a.id;n.push({text:`${s} - ${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"))&&n.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">
|
|
5
|
+
<pds-icon icon="heart"></pds-icon>
|
|
6
|
+
</button>`,description:"Button with only an icon, no text label"})),n}queryPatterns(e,t){let n=[],o=this.pds.ontology;return o?.layoutPatterns&&(o.layoutPatterns.forEach(a=>{let i=this.scoreMatch(t,a.name+" "+a.id+" "+(a.description||""));if(i>50){let s=a.selectors?.[0]||`.${a.id}`;n.push({text:`${a.name} - ${a.description||"Layout pattern"}`,value:a.id,icon:"layout",category:"Layout Pattern",score:i,code:`<div class="${s.replace(".","")}">
|
|
7
|
+
<!-- content -->
|
|
8
|
+
</div>`,description:a.description||a.name})}}),(t.includes("container")||t.includes("group"))&&(n.push({text:"Card - Container for grouping content",value:"card",icon:"layout",category:"Primitive",score:88,code:`<article class="card">
|
|
9
|
+
<header>
|
|
10
|
+
<h3>Title</h3>
|
|
11
|
+
</header>
|
|
12
|
+
<p>Content...</p>
|
|
13
|
+
</article>`,description:"Card container with optional header, body, and footer"}),n.push({text:"Section - Semantic container for grouping",value:"section",icon:"layout",category:"Pattern",score:85,code:`<section>
|
|
14
|
+
<h2>Section Title</h2>
|
|
15
|
+
<!-- content -->
|
|
16
|
+
</section>`,description:"Semantic section element for content grouping"}))),n}queryTypography(e,t){let n=[],o=this.pds.compiled;if(!o?.tokens?.typography)return n;let a=o.tokens.typography;return(t.includes("heading")||t.includes("title"))&&n.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"))&&n.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"}),n}querySpacing(e,t){let n=[],o=this.pds.compiled;if(!o?.tokens?.spacing)return n;let a=o.tokens.spacing;for(let[i,s]of Object.entries(a))["2","4","6","8"].includes(i)&&n.push({text:`Spacing ${i}: var(--spacing-${i})`,value:`--spacing-${i}`,icon:"ruler",category:"Spacing Token",score:75,cssVar:`var(--spacing-${i})`,description:`Spacing value: ${s}`});return n}scoreMatch(e,t){let n=e.toLowerCase(),o=t.toLowerCase(),a=0;if(n===o)return 100;o.includes(n)&&(a+=80);let i=this.tokenize(n),s=this.tokenize(o),c=i.filter(d=>s.includes(d)).length;return a+=c/i.length*40,o.startsWith(n)&&(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">
|
|
17
|
+
<h3>Title</h3>
|
|
18
|
+
<p>Content</p>
|
|
19
|
+
</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 Ye={};De(Ye,{deepMerge:()=>br,fragmentFromTemplateLike:()=>Ln,isObject:()=>Je,parseHTML:()=>Lt});function Je(r){return r&&typeof r=="object"&&!Array.isArray(r)}function br(r,e){let t={...r};return Je(r)&&Je(e)&&Object.keys(e).forEach(n=>{Je(e[n])?n in r?t[n]=br(r[n],e[n]):Object.assign(t,{[n]:e[n]}):Object.assign(t,{[n]:e[n]})}),t}function Ln(r){let e=Array.isArray(r?.strings)?r.strings:[],t=Array.isArray(r?.values)?r.values:[],n=new Set,o=[],a=/(\s)(\.[\w-]+)=\s*$/;for(let l=0;l<e.length;l+=1){let u=e[l]??"",g=u.match(a);if(g&&l<t.length){let b=g[2].slice(1),f=`pds-val-${l}`;u=u.replace(a,`$1data-pds-prop="${b}:${f}"`),n.add(l)}o.push(u),l<t.length&&!n.has(l)&&o.push(`<!--pds-val-${l}-->`)}let i=document.createElement("template");i.innerHTML=o.join("");let s=(l,u)=>{let g=l.parentNode;if(!g)return;if(u==null){g.removeChild(l);return}let h=b=>{if(b!=null){if(b instanceof Node){g.insertBefore(b,l);return}if(Array.isArray(b)){b.forEach(f=>h(f));return}g.insertBefore(document.createTextNode(String(b)),l)}};h(u),g.removeChild(l)},c=document.createTreeWalker(i.content,NodeFilter.SHOW_COMMENT),d=[];for(;c.nextNode();){let l=c.currentNode;l?.nodeValue?.startsWith("pds-val-")&&d.push(l)}return d.forEach(l=>{let u=Number(l.nodeValue.replace("pds-val-",""));s(l,t[u])}),i.content.querySelectorAll("*").forEach(l=>{let u=l.getAttribute("data-pds-prop");if(!u)return;let[g,h]=u.split(":"),b=Number(String(h).replace("pds-val-",""));g&&Number.isInteger(b)&&(l[g]=t[b]),l.removeAttribute("data-pds-prop")}),i.content}function Lt(r){return new DOMParser().parseFromString(r,"text/html").body.childNodes}var Rt=_e(()=>{});$e();var pe="any",Me={type:"object",allowUnknown:!1,properties:{id:{type:"string",minLength:1,maxLength:64},name:{type:"string",minLength:1,maxLength:80},tags:{type:"array",uniqueItems:!0,items:{type:"string"}},themes:{type:"array",uniqueItems:!0,items:{type:"string",oneOf:[{const:"light",title:"Light"},{const:"dark",title:"Dark"},{const:"system",title:"System"}]}},description:{type:"string",maxLength:500},options:{type:"object",allowUnknown:!0,properties:{liquidGlassEffects:{type:"boolean"},backgroundMesh:{type:"number"}}},form:{type:"object",allowUnknown:!0,properties:{options:{type:"object",allowUnknown:!0,properties:{widgets:{type:"object",allowUnknown:!1,properties:{booleans:{type:"string"},numbers:{type:"string"},selects:{type:"string"}}},layouts:{type:"object",allowUnknown:!1,properties:{fieldsets:{type:"string"},arrays:{type:"string"}}},enhancements:{type:"object",allowUnknown:!1,properties:{icons:{type:"boolean"},datalists:{type:"boolean"},rangeOutput:{type:"boolean"},colorInput:{type:"boolean"}}},validation:{type:"object",allowUnknown:!1,properties:{showErrors:{type:"boolean"},validateOnChange:{type:"boolean"}}}}}}},colors:{type:"object",allowUnknown:!1,properties:{primary:{type:"string",relations:{tokens:["--color-primary-*","--color-primary-fill","--color-primary-text","--background-mesh-*"]}},secondary:{type:"string",relations:{tokens:["--color-secondary-*","--color-gray-*","--background-mesh-*"]}},accent:{type:"string",relations:{tokens:["--color-accent-*","--background-mesh-*"]}},background:{type:"string",relations:{tokens:["--color-surface-*","--color-surface-translucent-*","--surface-*-bg","--surface-*-text","--surface-*-text-secondary","--surface-*-text-muted","--surface-*-icon","--surface-*-icon-subtle","--surface-*-shadow","--surface-*-border"]}},success:{type:["string","null"],relations:{tokens:["--color-success-*"]}},warning:{type:["string","null"],relations:{tokens:["--color-warning-*"]}},danger:{type:["string","null"],relations:{tokens:["--color-danger-*"]}},info:{type:["string","null"],relations:{tokens:["--color-info-*"]}},gradientStops:{type:"number"},elevationOpacity:{type:"number",relations:{tokens:["--surface-*-shadow"]}},darkMode:{type:"object",allowUnknown:!1,properties:{background:{type:"string",relations:{theme:"dark",tokens:["--color-surface-*","--color-surface-translucent-*","--surface-*-bg","--surface-*-text","--surface-*-text-secondary","--surface-*-text-muted","--surface-*-icon","--surface-*-icon-subtle","--surface-*-shadow","--surface-*-border"]}},primary:{type:"string",relations:{theme:"dark",tokens:["--color-primary-*","--color-primary-fill","--color-primary-text"]}},secondary:{type:"string",relations:{theme:"dark",tokens:["--color-secondary-*","--color-gray-*"]}},accent:{type:"string",relations:{theme:"dark",tokens:["--color-accent-*"]}}}}}},typography:{type:"object",allowUnknown:!1,properties:{fontFamilyHeadings:{type:"string",relations:{tokens:["--font-family-headings"]}},fontFamilyBody:{type:"string",relations:{tokens:["--font-family-body"]}},fontFamilyMono:{type:"string",relations:{tokens:["--font-family-mono"]}},baseFontSize:{type:"number",relations:{tokens:["--font-size-*"]}},fontScale:{type:"number",relations:{tokens:["--font-size-*"]}},fontWeightLight:{type:["string","number"],relations:{tokens:["--font-weight-light"]}},fontWeightNormal:{type:["string","number"],relations:{tokens:["--font-weight-normal"]}},fontWeightMedium:{type:["string","number"],relations:{tokens:["--font-weight-medium"]}},fontWeightSemibold:{type:["string","number"],relations:{tokens:["--font-weight-semibold"]}},fontWeightBold:{type:["string","number"],relations:{tokens:["--font-weight-bold"]}},lineHeightTight:{type:["string","number"],relations:{tokens:["--font-line-height-tight"]}},lineHeightNormal:{type:["string","number"],relations:{tokens:["--font-line-height-normal"]}},lineHeightRelaxed:{type:["string","number"],relations:{tokens:["--font-line-height-relaxed"]}},letterSpacingTight:{type:"number"},letterSpacingNormal:{type:"number"},letterSpacingWide:{type:"number"}}},spatialRhythm:{type:"object",allowUnknown:!1,properties:{baseUnit:{type:"number",relations:{tokens:["--spacing-*"]}},scaleRatio:{type:"number"},maxSpacingSteps:{type:"number",relations:{tokens:["--spacing-*"]}},containerPadding:{type:"number"},inputPadding:{type:"number",relations:{rules:[{selectors:["input","textarea","select"],properties:["padding"]}]}},buttonPadding:{type:"number",relations:{rules:[{selectors:["button",".btn"],properties:["padding"]}]}},sectionSpacing:{type:"number",relations:{rules:[{selectors:["section"],properties:["margin","padding"]}]}}}},shape:{type:"object",allowUnknown:!1,properties:{radiusSize:{type:["string","number"],relations:{tokens:["--radius-*"]}},customRadius:{type:["string","number","null"]},borderWidth:{type:["string","number"],relations:{tokens:["--border-width-*"]}}}},behavior:{type:"object",allowUnknown:!1,properties:{transitionSpeed:{type:["string","number"],relations:{tokens:["--transition-*"]}},animationEasing:{type:"string"},customTransitionSpeed:{type:["number","null"]},customEasing:{type:["string","null"]},focusRingWidth:{type:"number",relations:{rules:[{selectors:[":focus-visible"],properties:["outline-width","box-shadow"]}]}},focusRingOpacity:{type:"number",relations:{rules:[{selectors:[":focus-visible"],properties:["box-shadow","outline-color"]}]}},hoverOpacity:{type:"number"}}},layout:{type:"object",allowUnknown:!1,properties:{maxWidth:{type:["number","string"],relations:{tokens:["--layout-max-width","--layout-max-width-*"]}},maxWidths:{type:"object",allowUnknown:!1,properties:{sm:{type:["number","string"],relations:{tokens:["--layout-max-width-sm"]}},md:{type:["number","string"],relations:{tokens:["--layout-max-width-md"]}},lg:{type:["number","string"],relations:{tokens:["--layout-max-width-lg"]}},xl:{type:["number","string"],relations:{tokens:["--layout-max-width-xl"]}}}},containerPadding:{type:["number","string"],relations:{tokens:["--layout-container-padding"]}},breakpoints:{type:"object",allowUnknown:!1,properties:{sm:{type:"number"},md:{type:"number"},lg:{type:"number"},xl:{type:"number"}}},gridColumns:{type:"number"},gridGutter:{type:"number"},densityCompact:{type:"number"},densityNormal:{type:"number"},densityComfortable:{type:"number"},buttonMinHeight:{type:"number"},inputMinHeight:{type:"number"},baseShadowOpacity:{type:"number",relations:{tokens:["--shadow-*"]}},darkMode:{type:"object",allowUnknown:!1,properties:{baseShadowOpacity:{type:"number",relations:{theme:"dark",tokens:["--shadow-*"]}}}},utilities:{type:"object",allowUnknown:!0,properties:{grid:{type:"boolean"},flex:{type:"boolean"},spacing:{type:"boolean"},container:{type:"boolean"}}},gridSystem:{type:"object",allowUnknown:!0,properties:{columns:{type:"array",items:{type:"number"}},autoFitBreakpoints:{type:"object",allowUnknown:!1,properties:{sm:{type:"string"},md:{type:"string"},lg:{type:"string"},xl:{type:"string"}}},enableGapUtilities:{type:"boolean"}}},containerMaxWidth:{type:["number","string"]}}},layers:{type:"object",allowUnknown:!1,properties:{baseShadowOpacity:{type:"number",relations:{tokens:["--shadow-*"]}},shadowBlurMultiplier:{type:"number",relations:{tokens:["--shadow-*"]}},shadowOffsetMultiplier:{type:"number",relations:{tokens:["--shadow-*"]}},shadowDepth:{type:"string"},blurLight:{type:"number"},blurMedium:{type:"number"},blurHeavy:{type:"number"},baseZIndex:{type:"number",relations:{tokens:["--z-*"]}},zIndexStep:{type:"number",relations:{tokens:["--z-*"]}},zIndexBase:{type:"number"},zIndexDropdown:{type:"number"},zIndexSticky:{type:"number"},zIndexFixed:{type:"number"},zIndexModal:{type:"number"},zIndexPopover:{type:"number"},zIndexTooltip:{type:"number"},zIndexNotification:{type:"number"},darkMode:{type:"object",allowUnknown:!1,properties:{baseShadowOpacity:{type:"number",relations:{theme:"dark",tokens:["--shadow-*"]}}}}}},advanced:{type:"object",allowUnknown:!0,properties:{linkStyle:{type:"string"},colorDerivation:{type:"string"}}},a11y:{type:"object",allowUnknown:!0,properties:{minTouchTarget:{type:["string","number"]},prefersReducedMotion:{type:"boolean"},focusStyle:{type:"string"}}},icons:{type:"object",allowUnknown:!1,properties:{set:{type:"string"},weight:{type:"string"},defaultSize:{type:"number",relations:{tokens:["--icon-size"]}},sizes:{type:"object",allowUnknown:!0,properties:{xs:{type:["number","string"]},sm:{type:["number","string"]},md:{type:["number","string"]},lg:{type:["number","string"]},xl:{type:["number","string"]},"2xl":{type:["number","string"]}}},spritePath:{type:"string"},externalPath:{type:"string"},include:{type:"object",allowUnknown:!0,properties:{navigation:{type:"array",items:{type:"string"}},actions:{type:"array",items:{type:"string"}},communication:{type:"array",items:{type:"string"}},content:{type:"array",items:{type:"string"}},status:{type:"array",items:{type:"string"}},time:{type:"array",items:{type:"string"}},commerce:{type:"array",items:{type:"string"}},formatting:{type:"array",items:{type:"string"}},system:{type:"array",items:{type:"string"}}}}}},components:{type:"object",allowUnknown:!0},debug:{type:"boolean"}}},Xr={type:"object",allowUnknown:!0,properties:{mode:{type:"string"},preset:{type:"string"},design:Me,enhancers:{type:["object","array"]},applyGlobalStyles:{type:"boolean"},manageTheme:{type:"boolean"},themeStorageKey:{type:"string"},preloadStyles:{type:"boolean"},criticalLayers:{type:"array",items:{type:"string"}},autoDefine:{type:"object",allowUnknown:!1,properties:{predefine:{type:"array",items:{type:"string"}},mapper:{type:pe},enhancers:{type:["object","array"]},scanExisting:{type:"boolean"},observeShadows:{type:"boolean"},patchAttachShadow:{type:"boolean"},debounceMs:{type:"number"},onError:{type:pe},baseURL:{type:"string"}}},managerURL:{type:"string"},manager:{type:pe},liveEdit:{type:"boolean"},log:{type:pe}}};function Ce(r){return r===null?"null":Array.isArray(r)?"array":typeof r}function en(r,e){if(e===pe)return!0;let t=Ce(r);return Array.isArray(e)?e.includes(t):t===e}function We(r,e,t,n){if(!e)return;let o=e.type||pe;if(!en(r,o)){n.push({path:t,expected:o,actual:Ce(r),message:`Expected ${o} but got ${Ce(r)}`});return}if(o==="array"&&e.items&&Array.isArray(r)&&r.forEach((a,i)=>{We(a,e.items,`${t}[${i}]`,n)}),o==="object"&&r&&typeof r=="object"){let a=e.properties||{};for(let[i,s]of Object.entries(r)){if(!Object.prototype.hasOwnProperty.call(a,i)){e.allowUnknown||n.push({path:`${t}.${i}`,expected:"known property",actual:"unknown",message:`Unknown property "${i}"`});continue}We(s,a[i],`${t}.${i}`,n)}}}function ft(r,e="",t={}){if(!r||typeof r!="object")return t;if(r.relations&&e&&(t[e]=r.relations),r.type==="object"&&r.properties&&Object.entries(r.properties).forEach(([n,o])=>{let a=e?`${e}.${n}`:n;ft(o,a,t)}),r.type==="array"&&r.items){let n=`${e}[]`;ft(r.items,n,t)}return t}var Zt=ft(Me,""),Xt=Me,tn={"colors.primary":{widget:"input-color"},"colors.secondary":{widget:"input-color"},"colors.accent":{widget:"input-color"},"colors.background":{widget:"input-color"},"colors.success":{widget:"input-color"},"colors.warning":{widget:"input-color"},"colors.danger":{widget:"input-color"},"colors.info":{widget:"input-color"},"colors.gradientStops":{min:2,max:8,step:1,widget:"range"},"colors.elevationOpacity":{min:0,max:1,step:.01,widget:"range"},"colors.darkMode.background":{widget:"input-color"},"colors.darkMode.primary":{widget:"input-color"},"colors.darkMode.secondary":{widget:"input-color"},"colors.darkMode.accent":{widget:"input-color"},description:{widget:"textarea",maxLength:500,rows:4,placeholder:"Summarize the visual and interaction intent"},"typography.fontFamilyHeadings":{widget:"font-family-omnibox",icon:"text-aa",placeholder:"Heading font stack"},"typography.fontFamilyBody":{widget:"font-family-omnibox",icon:"text-aa",placeholder:"Body font stack"},"typography.fontFamilyMono":{widget:"font-family-omnibox",icon:"text-aa",placeholder:"Monospace font stack"},"typography.baseFontSize":{min:8,max:32,step:1,widget:"input-range"},"typography.fontScale":{min:1,max:2,step:.01,widget:"range"},"typography.fontWeightLight":{min:100,max:800,step:100,widget:"input-range"},"typography.fontWeightNormal":{min:100,max:800,step:100,widget:"input-range"},"typography.fontWeightMedium":{min:100,max:800,step:100,widget:"input-range"},"typography.fontWeightSemibold":{min:100,max:800,step:100,widget:"input-range"},"typography.fontWeightBold":{min:100,max:800,step:100,widget:"input-range"},"typography.lineHeightTight":{min:.75,max:3,step:.001,widget:"input-range"},"typography.lineHeightNormal":{min:.75,max:3,step:.001,widget:"input-range"},"typography.lineHeightRelaxed":{min:.75,max:3,step:.001,widget:"input-range"},"typography.letterSpacingTight":{min:-.1,max:.1,step:.001,widget:"range"},"typography.letterSpacingNormal":{min:-.1,max:.1,step:.001,widget:"range"},"typography.letterSpacingWide":{min:-.1,max:.1,step:.001,widget:"range"},"spatialRhythm.baseUnit":{min:1,max:16,step:1,widget:"range"},"spatialRhythm.scaleRatio":{min:1,max:2,step:.01,widget:"range"},"spatialRhythm.maxSpacingSteps":{min:4,max:64,step:1,widget:"range"},"spatialRhythm.containerPadding":{min:0,max:8,step:.05,widget:"range"},"spatialRhythm.inputPadding":{min:0,max:4,step:.05,widget:"range"},"spatialRhythm.buttonPadding":{min:0,max:4,step:.05,widget:"range"},"spatialRhythm.sectionSpacing":{min:0,max:8,step:.05,widget:"range"},"shape.radiusSize":{oneOf:Object.entries(y.RadiusSizes).map(([r,e])=>({const:e,title:r}))},"shape.borderWidth":{widget:"select",oneOf:Object.entries(y.BorderWidths).map(([r,e])=>({const:e,title:r}))},"shape.customRadius":{min:0,max:64,step:1,widget:"range"},"behavior.transitionSpeed":{oneOf:Object.entries(y.TransitionSpeeds).map(([r,e])=>({const:e,title:r}))},"behavior.animationEasing":{enum:Object.values(y.AnimationEasings)},"behavior.customTransitionSpeed":{min:0,max:1e3,step:10,widget:"range"},"behavior.focusRingWidth":{min:0,max:8,step:1,widget:"range"},"behavior.focusRingOpacity":{min:0,max:1,step:.01,widget:"range"},"behavior.hoverOpacity":{min:0,max:1,step:.01,widget:"range"},"layout.gridColumns":{min:1,max:24,step:1,widget:"range"},"layout.gridGutter":{min:0,max:8,step:.05,widget:"range"},"layout.maxWidth":{widget:"input-text",placeholder:"e.g. 1200 or 1200px"},"layout.maxWidths.sm":{widget:"input-text",placeholder:"e.g. 640 or 640px"},"layout.maxWidths.md":{widget:"input-text",placeholder:"e.g. 768 or 768px"},"layout.maxWidths.lg":{widget:"input-text",placeholder:"e.g. 1024 or 1024px"},"layout.maxWidths.xl":{widget:"input-text",placeholder:"e.g. 1280 or 1280px"},"layout.containerMaxWidth":{widget:"input-text",placeholder:"e.g. 1400px"},"layout.containerPadding":{widget:"input-text",placeholder:"e.g. var(--spacing-6)"},"layout.breakpoints.sm":{min:320,max:2560,step:1,widget:"input-number"},"layout.breakpoints.md":{min:480,max:3200,step:1,widget:"input-number"},"layout.breakpoints.lg":{min:640,max:3840,step:1,widget:"input-number"},"layout.breakpoints.xl":{min:768,max:5120,step:1,widget:"input-number"},"layout.baseShadowOpacity":{min:0,max:1,step:.01,widget:"range"},"layout.darkMode.baseShadowOpacity":{min:0,max:1,step:.01,widget:"range"},"layout.densityCompact":{min:.5,max:2,step:.05,widget:"range"},"layout.densityNormal":{min:.5,max:2,step:.05,widget:"range"},"layout.densityComfortable":{min:.5,max:2,step:.05,widget:"range"},"layout.buttonMinHeight":{min:24,max:96,step:1,widget:"range"},"layout.inputMinHeight":{min:24,max:96,step:1,widget:"range"},"layers.baseShadowOpacity":{min:0,max:1,step:.01,widget:"range"},"layers.shadowBlurMultiplier":{min:0,max:8,step:.1,widget:"range"},"layers.shadowOffsetMultiplier":{min:0,max:8,step:.1,widget:"range"},"layers.blurLight":{min:0,max:48,step:1,widget:"range"},"layers.blurMedium":{min:0,max:64,step:1,widget:"range"},"layers.blurHeavy":{min:0,max:96,step:1,widget:"range"},"layers.baseZIndex":{min:0,max:1e4,step:10,widget:"range"},"layers.zIndexStep":{min:1,max:100,step:1,widget:"range"},"layers.darkMode.baseShadowOpacity":{min:0,max:1,step:.01,widget:"range"},"advanced.linkStyle":{enum:Object.values(y.LinkStyles)},"a11y.minTouchTarget":{oneOf:Object.entries(y.TouchTargetSizes).map(([r,e])=>({const:e,title:r}))},"a11y.focusStyle":{enum:Object.values(y.FocusStyles)},"icons.defaultSize":{min:8,max:128,step:1,widget:"range",icon:"sparkle"}};function Vt(r=[]){return r.join(".")}function Jt(r=[]){return`/${r.join("/")}`}function rn(r,e=[]){if(!(!r||typeof r!="object"))return e.reduce((t,n)=>{if(t!=null&&typeof t=="object")return t[n]},r)}function Yt(r,e,t=[]){if(r!=null)return r;let n=rn(e,t);return n??void 0}function ze(r=""){return String(r).replace(/([a-z])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").replace(/\s+/g," ").trim().replace(/^./,e=>e.toUpperCase())}function er(r,e){if(!r)return"string";let t=r.type||"string";if(Array.isArray(t)){let n=Ce(e);return n!=="undefined"&&t.includes(n)?n:t.includes("string")?"string":t.find(o=>o!=="null")||t[0]||"string"}return t}function mt(r,e,t=[]){return!r||!e||!Array.isArray(t)||t.forEach(n=>{e[n]!==void 0&&(r[n]=e[n])}),r}function Qt(r,e){return Array.isArray(e?.oneOf)&&e.oneOf.length?e.oneOf:Array.isArray(e?.enum)&&e.enum.length?e.enum.map(t=>({const:t,title:ze(t)})):Array.isArray(r?.oneOf)&&r.oneOf.length?r.oneOf:Array.isArray(r?.enum)&&r.enum.length?r.enum.map(t=>({const:t,title:ze(t)})):null}function nn(r){return r&&(r==="range"?"input-range":r)}function on(r,e){if(!Array.isArray(e)||!e.length)return r;let t=new Set;for(let n of e)!n||n.const===void 0||t.add(Ce(n.const));if(!t.size)return r;if(t.size===1){let n=Array.from(t)[0];if(n==="number")return"number";if(n==="string")return"string";if(n==="boolean")return"boolean"}return r}function Kt(r,e,t){let n=er(e,t),o=r.toLowerCase(),a={label:ze(r.split(".").slice(-1)[0]||r)};n==="boolean"&&(a.widget="toggle"),n==="number"&&(a.widget="range",o.includes("opacity")?(a.min=0,a.max=1,a.step=.01):o.includes("lineheight")?(a.min=.75,a.max=3,a.step=.001,a.widget="input-range"):o.includes("fontweight")?(a.min=100,a.max=800,a.step=100,a.widget="input-range"):o.endsWith("basefontsize")?(a.min=8,a.max=32,a.step=1,a.widget="input-range"):o.includes("scale")||o.includes("ratio")?(a.min=1,a.max=2,a.step=.01):(a.min=0,a.max=Math.max(10,Number.isFinite(Number(t))?Number(t)*4:100),a.step=1)),n==="string"&&r.startsWith("colors.")&&(a.widget="input-color"),n==="string"&&o==="description"&&(a.widget="textarea",a.maxLength=500,a.rows=4);let i=tn[r]||{},s={...a,...i};return s.widget&&(s.widget=nn(s.widget)),s}function tr(r,e,t,n,o,a){if(!r||typeof r!="object")return null;let i=Yt(e,a,t),s=er(r,i);if(s==="object"&&r.properties){let m={type:"object",properties:{}};t.length>0&&(m.title=ze(t[t.length-1]));let x={};for(let[w,S]of Object.entries(r.properties)){let A=e&&typeof e=="object"&&!Array.isArray(e)?e[w]:void 0,k=tr(S,A,[...t,w],n,o,a);k&&(m.properties[w]=k.schema,k.hasValue&&(x[w]=k.value))}return Object.keys(m.properties).length?{schema:m,value:x,hasValue:Object.keys(x).length>0}:null}if(s==="array"){let m=Vt(t),x=Kt(m,r,e);o[m]=x;let w=Yt(e,a,t),S=r.items?.type||"string",A=Array.isArray(S)?S[0]:S,k={type:A},T=Qt(r?.items,null);if(T&&(k.oneOf=T),A==="string"&&Array.isArray(w)&&w.length>0){let $=w.find(v=>typeof v=="string"&&v.trim().length>0);$&&(k.examples=[$])}mt(k,r?.items,["minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","minLength","maxLength","pattern","format","minItems","maxItems","uniqueItems","description","default"]);let R={type:"array",items:k};mt(R,r,["minItems","maxItems","uniqueItems","description","default"]);let M=Jt(t),z={},P=Array.isArray(k.oneOf)&&k.oneOf.length>0;if(A==="string"&&P&&(z["ui:widget"]=R.maxItems===1?"radio":"checkbox-group"),A==="string"&&Array.isArray(w)&&w.length>0){let $=w.filter(v=>typeof v=="string"&&v.trim().length>0).slice(0,5).join(", ");$&&(z["ui:placeholder"]=$)}return Object.keys(z).length&&(n[M]={...n[M]||{},...z}),{schema:R,value:Array.isArray(e)?e:[],hasValue:Array.isArray(e)}}let c=Vt(t),d=Kt(c,r,i);o[c]=d;let p=Qt(r,d),g={type:on(s==="null"?"string":s,p),title:d.label||ze(t[t.length-1]||c)};p&&(g.oneOf=p),mt(g,r,["minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","minLength","maxLength","pattern","format","description","default"]),typeof d.maxLength=="number"&&g.maxLength===void 0&&(g.maxLength=d.maxLength),(g.type==="number"||g.type==="integer")&&typeof d.min=="number"&&g.minimum===void 0&&(g.minimum=d.min),(g.type==="number"||g.type==="integer")&&typeof d.max=="number"&&g.maximum===void 0&&(g.maximum=d.max),(g.type==="number"||g.type==="integer")&&typeof d.step=="number"&&g.multipleOf===void 0&&(g.multipleOf=d.step);let h=i;h!==void 0&&(g.examples=[h]);let b=Jt(t),f={};return d.widget&&(f["ui:widget"]=d.widget),d.icon&&(f["ui:icon"]=d.icon),typeof d.min=="number"&&(f["ui:min"]=d.min),typeof d.max=="number"&&(f["ui:max"]=d.max),typeof d.step=="number"&&(f["ui:step"]=d.step),d.placeholder&&(f["ui:placeholder"]=d.placeholder),typeof d.rows=="number"&&(f["ui:options"]={...f["ui:options"]||{},rows:d.rows}),d.widget==="input-range"&&h!==void 0&&(f["ui:allowUnset"]=!0),(typeof d.min=="number"||typeof d.max=="number"||typeof d.step=="number")&&(f["ui:options"]={...f["ui:options"]||{},...typeof d.min=="number"?{min:d.min}:{},...typeof d.max=="number"?{max:d.max}:{},...typeof d.step=="number"?{step:d.step}:{}}),Object.keys(f).length&&(n[b]=f),{schema:g,value:e,hasValue:e!==void 0}}function ue(r={}){let e={},t={"/colors":{"ui:layout":"flex","ui:layoutOptions":{wrap:!0,gap:"sm"}},"/colors/darkMode":{"ui:layout":"flex","ui:layoutOptions":{wrap:!0,gap:"sm"}}},n=Q?.default&&typeof Q.default=="object"?Q.default:null,o=tr(Me,r,[],t,e,n);return{schema:o?.schema||{type:"object",properties:{}},uiSchema:t,values:o?.value||{},metadata:e}}function Ee(r={}){return ue(r).metadata}function ht(r,{log:e,context:t="PDS config"}={}){if(!r||typeof r!="object")return[];let n=[];return We(r,Me,"design",n),n.length&&typeof e=="function"&&n.forEach(o=>{e("warn",`[${t}] ${o.message} at ${o.path}`)}),n}function bt(r,{log:e,context:t="PDS config"}={}){if(!r||typeof r!="object")return[];let n=[];return We(r,Xr,"config",n),n.length&&typeof e=="function"&&n.forEach(o=>{e("warn",`[${t}] ${o.message} at ${o.path}`)}),n}var Q={"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.35,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:y.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:y.RadiusSizes.small,borderWidth:y.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.318,fontFamilyHeadings:"'Space Grotesk', system-ui, sans-serif",fontFamilyBody:"'Space Grotesk', system-ui, sans-serif"},spatialRhythm:{baseUnit:4,scaleRatio:1.5},shape:{radiusSize:y.RadiusSizes.xlarge,borderWidth:y.BorderWidths.medium},behavior:{transitionSpeed:y.TransitionSpeeds.fast}},"paper-and-ink":{id:"paper-and-ink",name:"Paper & Ink",tags:["app","featured"],themes:["light"],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:y.RadiusSizes.none,borderWidth:y.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.3,fontFamilyHeadings:"'Quicksand', 'Comfortaa', sans-serif",fontFamilyBody:"'Quicksand', 'Comfortaa', sans-serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.5},shape:{radiusSize:y.RadiusSizes.xxlarge,borderWidth:y.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:y.RadiusSizes.none,borderWidth:y.BorderWidths.thick},behavior:{transitionSpeed:y.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:y.RadiusSizes.medium,borderWidth:y.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.3,fontFamilyHeadings:"'Playfair Display', 'Georgia', serif",fontFamilyBody:"'Crimson Text', 'Garamond', serif",fontWeightNormal:400,fontWeightSemibold:600},spatialRhythm:{baseUnit:4,scaleRatio:1.3},shape:{radiusSize:y.RadiusSizes.small,borderWidth:y.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:y.RadiusSizes.medium,borderWidth:y.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:y.RadiusSizes.small,borderWidth:y.BorderWidths.thick},behavior:{transitionSpeed:y.TransitionSpeeds.fast,focusRingWidth:4}},"pastel-play":{id:"pastel-play",name:"Pastel Play",themes:["light"],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:y.LineHeights.relaxed},spatialRhythm:{baseUnit:6,scaleRatio:1.4},shape:{radiusSize:y.RadiusSizes.xxlarge,borderWidth:y.BorderWidths.thin},behavior:{transitionSpeed:y.TransitionSpeeds.slow,animationEasing:y.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:"#0c0c0c",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:y.RadiusSizes.none,borderWidth:y.BorderWidths.thick},behavior:{transitionSpeed:y.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.35,fontFamilyHeadings:"'Merriweather', Georgia, serif",fontFamilyBody:"'Noto Sans', system-ui, -apple-system, sans-serif"},spatialRhythm:{baseUnit:6,scaleRatio:1.35},shape:{radiusSize:y.RadiusSizes.large,borderWidth:y.BorderWidths.medium},behavior:{transitionSpeed:y.TransitionSpeeds.normal,animationEasing:y.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:y.LineHeights.tight},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerPadding:1.25,sectionSpacing:2.5},shape:{radiusSize:y.RadiusSizes.large,borderWidth:y.BorderWidths.thin},layers:{shadowDepth:"medium",blurMedium:12},behavior:{transitionSpeed:y.TransitionSpeeds.fast,animationEasing:y.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:y.LineHeights.relaxed},spatialRhythm:{baseUnit:4,scaleRatio:1.25,containerPadding:1.5,sectionSpacing:3},shape:{radiusSize:y.RadiusSizes.medium,borderWidth:y.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:8},behavior:{transitionSpeed:y.TransitionSpeeds.normal,animationEasing:y.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:y.RadiusSizes.small,borderWidth:y.BorderWidths.medium},behavior:{transitionSpeed:y.TransitionSpeeds.fast,animationEasing:y.AnimationEasings["ease-out"],focusRingWidth:3},a11y:{minTouchTarget:y.TouchTargetSizes.comfortable,focusStyle:y.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,sectionSpacing:2.5},shape:{radiusSize:y.RadiusSizes.medium,borderWidth:y.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:6},behavior:{transitionSpeed:y.TransitionSpeeds.fast,animationEasing:y.AnimationEasings["ease-in-out"],focusRingWidth:3,focusRingOpacity:.4},a11y:{minTouchTarget:y.TouchTargetSizes.standard,focusStyle:y.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:y.LineHeights.relaxed},spatialRhythm:{baseUnit:4,scaleRatio:1.25,sectionSpacing:1.5},shape:{radiusSize:y.RadiusSizes.medium,borderWidth:y.BorderWidths.thin},behavior:{transitionSpeed:y.TransitionSpeeds.fast,animationEasing:y.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:y.LineHeights.tight},spatialRhythm:{baseUnit:4,scaleRatio:1.2,containerPadding:1.5,sectionSpacing:2},shape:{radiusSize:y.RadiusSizes.small,borderWidth:y.BorderWidths.thin},layers:{shadowDepth:"light",blurLight:4},behavior:{transitionSpeed:y.TransitionSpeeds.fast,animationEasing:y.AnimationEasings["ease-in-out"],focusRingWidth:2},layout:{densityCompact:.85,gridColumns:12}}};Q.default={id:"default",name:"Default",tags:["app","featured"],description:"Fresh and modern design system with balanced aesthetics and usability",options:{liquidGlassEffects:!1,backgroundMesh:0},form:{options:{widgets:{booleans:"toggle",numbers:"input",selects:"standard"},layouts:{fieldsets:"default",arrays:"default"},enhancements:{icons:!0,datalists:!0,rangeOutput:!0,colorInput:!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:y.FontWeights.light,fontWeightNormal:y.FontWeights.normal,fontWeightMedium:y.FontWeights.medium,fontWeightSemibold:y.FontWeights.semibold,fontWeightBold:y.FontWeights.bold,lineHeightTight:y.LineHeights.tight,lineHeightNormal:y.LineHeights.normal,lineHeightRelaxed:y.LineHeights.relaxed,letterSpacingTight:-.025,letterSpacingNormal:0,letterSpacingWide:.025},spatialRhythm:{baseUnit:4,scaleRatio:1.25,maxSpacingSteps:32,containerPadding:1,inputPadding:.75,buttonPadding:1,sectionSpacing:2},layers:{baseShadowOpacity:.1,darkMode:{baseShadowOpacity:.25},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:y.RadiusSizes.large,borderWidth:y.BorderWidths.medium,customRadius:null},behavior:{transitionSpeed:y.TransitionSpeeds.normal,animationEasing:y.AnimationEasings["ease-out"],customTransitionSpeed:null,customEasing:null,focusRingWidth:3,focusRingOpacity:.3,hoverOpacity:.8},layout:{gridColumns:12,gridGutter:1,baseShadowOpacity:.1,darkMode:{baseShadowOpacity:.25},breakpoints:{sm:640,md:768,lg:1024,xl:1280},densityCompact:.8,densityNormal:1,densityComfortable:1.2,buttonMinHeight:30,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:y.LinkStyles.inline,colorDerivation:"hsl"},a11y:{minTouchTarget:y.TouchTargetSizes.standard,prefersReducedMotion:!0,focusStyle:y.FocusStyles.ring},icons:{set:"phosphor",weight:"regular",defaultSize:24,externalPath:"/assets/img/icons/",sizes:y.IconSizes,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:"/assets/pds/icons/pds-icons.svg"},debug:!1};var rr=Ee(Q.default),nr=ue(Q.default);function yt(r="log",e,...t){if(this?.debug||this?.design?.debug||!1||r==="error"||r==="warn"){let o=console[r]||console.log;t.length>0?o(e,...t):o(e)}}$e();vt();var G=class r{static#m;static get instance(){return this.#m}#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),r.#m=this,this.tokens=this.generateTokens(),this.options.debug&&this.options.log?.("debug","Generated tokens:",this.tokens),this.#Se(),typeof CSSStyleSheet<"u"?this.#Ee():this.options.debug&&this.options.log?.("debug","[Generator] Skipping browser features (CSSStyleSheet not available)")}generateTokens(){let e=this.options.design||{},t=this.#M(e),n=e.layers||{},o=this.#h(n,t.light),a=this.#C(o),i=t.dark!=null?this.#C(this.#h(n,t.dark)):null;return{colors:this.#E(e.colors||{},t),spacing:this.generateSpacingTokens(e.spatialRhythm||{}),radius:this.#O(e.shape||{}),borderWidths:this.#_(e.shape||{}),typography:this.generateTypographyTokens(e.typography||{}),shadows:a,darkShadows:i,layout:this.#D(e.layout||{}),transitions:this.#W(e.behavior||{}),zIndex:this.#H(e.layers||{}),icons:this.#U(e.icons||{})}}#M(e={}){let t=e.layout||{},n=e.layers||{};return{light:this.#f(t.baseShadowOpacity??n.baseShadowOpacity),dark:this.#f(t.darkMode?.baseShadowOpacity??n.darkMode?.baseShadowOpacity)}}#f(e){let t=Number(e);if(Number.isFinite(t))return Math.min(Math.max(t,0),1)}#h(e={},t){let n={...e};return t!=null&&(n.baseShadowOpacity=t),n}#E(e,t={}){let{primary:n="#3b82f6",secondary:o="#64748b",accent:a="#ec4899",background:i="#ffffff",success:s=null,warning:c="#FFBF00",danger:d=null,info:p=null,darkMode:l={}}=e,u={primary:this.#r(n),secondary:this.#r(o),accent:this.#r(a),success:this.#r(s||this.#T(n)),warning:this.#r(c||a),danger:this.#r(d||this.#A(n)),info:this.#r(p||n),gray:this.#b(o),surface:this.#y(i)};return u.surface.fieldset=this.#L(u.surface),u.surfaceSmart=this.#S(u.surface,t),u.dark=this.#F(u,i,l),u.dark&&u.dark.surface&&(u.dark.surfaceSmart=this.#S(u.dark.surface,t)),u.interactive={light:{fill:this.#k(u.primary,4.5),text:u.primary[600]},dark:{fill:this.#k(u.dark.primary,4.5),text:this.#j(u.dark.primary,u.dark.surface.base,4.5)}},u}#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))}}#T(e){let t=this.#a(e);return this.#t(120,Math.max(t.s,60),45)}#A(e){let t=this.#a(e);return this.#t(0,Math.max(t.s,70),50)}#b(e){let t=this.#a(e),n=t.h,o=Math.min(t.s,10);return{50:this.#t(n,o,98),100:this.#t(n,o,95),200:this.#t(n,o,88),300:this.#t(n,o,78),400:this.#t(n,o,60),500:e,600:this.#t(n,Math.min(o+5,15),45),700:this.#t(n,Math.min(o+8,18),35),800:this.#t(n,Math.min(o+10,20),20),900:this.#t(n,Math.min(o+12,22),10)}}#y(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.#v(e),hover:"color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-primary) 8%);"}}#L(e){return{base:e.subtle,subtle:e.elevated,elevated:e.sunken,sunken:this.#R(e.sunken,.05),overlay:e.elevated}}#R(e,t=.05){let n=this.#a(e),o=Math.max(n.l-n.l*t,5);return this.#t(n.h,n.s,o)}#v(e){let t=this.#a(e);if(t.l>50){let n=Math.min(t.s+5,25),o=Math.max(12-(t.l-50)*.1,8);return this.#t(t.h,n,o)}else{let n=Math.max(t.s-10,5),o=Math.min(85+(50-t.l)*.3,95);return this.#t(t.h,n,o)}}#F(e,t="#ffffff",n={}){let o=n.background?n.background:this.#v(t),a=this.#y(o),i=n.primary?this.#r(n.primary):this.#i(e.primary);return{surface:{...a,fieldset:this.#N(a)},primary:i,secondary:n.secondary?this.#r(n.secondary):this.#i(e.secondary),accent:n.accent?this.#r(n.accent):this.#i(e.accent),gray:n.secondary?this.#b(n.secondary):e.gray,success:this.#i(e.success),info:this.#i(e.info),warning:this.#i(e.warning),danger:this.#i(e.danger)}}#c(e){let t=String(e||"").replace("#",""),n=t.length===3?t.split("").map(a=>a+a).join(""):t,o=parseInt(n,16);return{r:o>>16&255,g:o>>8&255,b:o&255}}#p(e){let{r:t,g:n,b:o}=this.#c(e),a=[t/255,n/255,o/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]}#d(e,t){let n=this.#p(e),o=this.#p(t),a=Math.max(n,o),i=Math.min(n,o);return(a+.05)/(i+.05)}#x(e,t=4.5){if(!e)return"#000000";let n="#ffffff",o="#000000",a=this.#d(e,n);if(a>=t)return n;let i=this.#d(e,o);return i>=t||i>a?o:n}#w(e,t=1){let{r:n,g:o,b:a}=this.#c(e);return`rgba(${n}, ${o}, ${a}, ${t})`}#P(e,t,n=.5){let o=this.#c(e),a=this.#c(t),i=Math.round(o.r+(a.r-o.r)*n),s=Math.round(o.g+(a.g-o.g)*n),c=Math.round(o.b+(a.b-o.b)*n);return this.#I(i,s,c)}#I(e,t,n){let o=a=>{let i=Math.max(0,Math.min(255,Math.round(a))).toString(16);return i.length===1?"0"+i:i};return`#${o(e)}${o(t)}${o(n)}`}#N(e){return{base:e.elevated,subtle:e.overlay,elevated:this.#$(e.elevated,.08),sunken:e.elevated,overlay:this.#$(e.overlay,.05)}}#j(e={},t="#000000",n=4.5){let o=["600","700","800","500","400","900","300","200"],a={shade:null,color:null,ratio:0};for(let i of o){let s=e?.[i];if(!s||typeof s!="string")continue;let c=this.#d(s,t);if(c>a.ratio&&(a={shade:i,color:s,ratio:c}),c>=n)return s}return a.color||e?.["600"]||e?.["500"]}#k(e={},t=4.5){let n=["600","700","800","500","400","900"],o={shade:null,color:null,ratio:0};for(let a of n){let i=e?.[a];if(!i||typeof i!="string")continue;let s=this.#d(i,"#ffffff");if(s>o.ratio&&(o={shade:a,color:i,ratio:s}),s>=t)return i}return o.color||e?.["600"]||e?.["500"]}#S(e,t={}){let n={},o=t.light??.1,a=t.dark??.25;return Object.entries(e).forEach(([i,s])=>{if(!s||typeof s!="string"||!s.startsWith("#"))return;let c=this.#p(s)<.5,d=this.#x(s,4.5),p=this.#x(s,3),l=this.#P(d,s,.4),u=d,g=l,h=c?"#ffffff":"#000000",b=c?a:o,f=this.#w(h,b),m=c?"#ffffff":"#000000",x=c?.15:.1,w=this.#w(m,x);n[i]={bg:s,text:d,textSecondary:p,textMuted:l,icon:u,iconSubtle:g,shadow:f,border:w,scheme:c?"dark":"light"}}),n}#$(e,t=.05){let n=this.#a(e),o=Math.min(n.l+(100-n.l)*t,95);return this.#t(n.h,n.s,o)}#i(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(([o,a])=>{let i=e[a.source];t[o]=this.#B(i,a.dimFactor)}),t}#B(e,t=.8){let n=this.#a(e),o=Math.max(n.s*t,5),a=Math.max(n.l*t,5);return this.#t(n.h,o,a)}generateSpacingTokens(e){let{baseUnit:t=4,scaleRatio:n=1.25,maxSpacingSteps:o=12}=e,a=Number.isFinite(Number(t))?Number(t):4,i=Math.min(Number.isFinite(Number(o))?Number(o):12,12),s={0:"0"};for(let c=1;c<=i;c++)s[c]=`${a*c}px`;return s}#O(e){let{radiusSize:t="medium",customRadius:n=null}=e,o;n!=null?o=n:typeof t=="number"?o=t:typeof t=="string"?o=y.RadiusSizes[t]??y.RadiusSizes.medium:o=y.RadiusSizes.medium;let a=Number.isFinite(Number(o))?Number(o):y.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"}}#_(e){let{borderWidth:t="medium"}=e,n;typeof t=="number"?n=t:typeof t=="string"?n=y.BorderWidths[t]??y.BorderWidths.medium:n=y.BorderWidths.medium;let o=Number.isFinite(Number(n))?Number(n):y.BorderWidths.medium,a=i=>`${Math.max(1,Math.ceil(i))}px`;return{hairline:a(o*.25),thin:a(o*.5),medium:a(o),thick:a(o*1.5)}}generateTypographyTokens(e){let{fontFamilyHeadings:t="system-ui, -apple-system, sans-serif",fontFamilyBody:n="system-ui, -apple-system, sans-serif",fontFamilyMono:o='ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',baseFontSize:a=16,fontScale:i=1.25,fontWeightLight:s=y.FontWeights.light,fontWeightNormal:c=y.FontWeights.normal,fontWeightMedium:d=y.FontWeights.medium,fontWeightSemibold:p=y.FontWeights.semibold,fontWeightBold:l=y.FontWeights.bold,lineHeightTight:u=y.LineHeights.tight,lineHeightNormal:g=y.LineHeights.normal,lineHeightRelaxed:h=y.LineHeights.relaxed}=e,b=Number.isFinite(Number(a))?Number(a):16,f=Number.isFinite(Number(i))?Number(i):1.25;return{fontFamily:{headings:t,body:n,mono:o},fontSize:{xs:`${Math.round(b/Math.pow(f,2))}px`,sm:`${Math.round(b/f)}px`,base:`${b}px`,lg:`${Math.round(b*f)}px`,xl:`${Math.round(b*Math.pow(f,2))}px`,"2xl":`${Math.round(b*Math.pow(f,3))}px`,"3xl":`${Math.round(b*Math.pow(f,4))}px`,"4xl":`${Math.round(b*Math.pow(f,5))}px`},fontWeight:{light:s?.toString()||"300",normal:c?.toString()||"400",medium:d?.toString()||"500",semibold:p?.toString()||"600",bold:l?.toString()||"700"},lineHeight:{tight:u?.toString()||"1.25",normal:g?.toString()||"1.5",relaxed:h?.toString()||"1.75"}}}#C(e){let{baseShadowOpacity:t=.1,shadowBlurMultiplier:n=1,shadowOffsetMultiplier:o=1}=e,a=`rgba(0, 0, 0, ${t})`,i=`rgba(0, 0, 0, ${t*.5})`;return{sm:`0 ${1*o}px ${2*n}px 0 ${i}`,base:`0 ${1*o}px ${3*n}px 0 ${a}, 0 ${1*o}px ${2*n}px 0 ${i}`,md:`0 ${4*o}px ${6*n}px ${-1*o}px ${a}, 0 ${2*o}px ${4*n}px ${-1*o}px ${i}`,lg:`0 ${10*o}px ${15*n}px ${-3*o}px ${a}, 0 ${4*o}px ${6*n}px ${-2*o}px ${i}`,xl:`0 ${20*o}px ${25*n}px ${-5*o}px ${a}, 0 ${10*o}px ${10*n}px ${-5*o}px ${i}`,inner:`inset 0 ${2*o}px ${4*n}px 0 ${i}`}}#D(e){let{containerPadding:t=16,breakpoints:n={sm:640,md:768,lg:1024,xl:1280}}=e,o=this.#u(e,"maxWidth"),a=e.maxWidth,i=this.#z(e,{emitFallbacks:!1});return{maxWidth:o?this.#n(a,"1200px"):void 0,maxWidthSm:i.sm,maxWidthMd:i.md,maxWidthLg:i.lg,maxWidthXl:i.xl,minHeight:"100vh",containerPadding:this.#n(t,"16px"),breakpoints:{sm:this.#n(n.sm,"640px"),md:this.#n(n.md,"768px"),lg:this.#n(n.lg,"1024px"),xl:this.#n(n.xl,"1280px")},pageMargin:"120px",sectionGap:"160px",containerGap:"200px",heroSpacing:"240px",footerSpacing:"160px"}}#z(e={},t={}){let{emitFallbacks:n=!0}=t,o={sm:640,md:768,lg:1024,xl:1280},{maxWidths:a={},containerPadding:i=16,breakpoints:s=o}=e||{},c=this.#u(e,"maxWidth"),d=["sm","md","lg","xl"].some(f=>this.#u(a,f));if(!n&&!c&&!d)return{sm:void 0,md:void 0,lg:void 0,xl:void 0};let p=e?.maxWidth,l=this.#s(i,16),u=this.#s(p,o.xl),g={sm:this.#s(s.sm,o.sm),md:this.#s(s.md,o.md),lg:this.#s(s.lg,o.lg),xl:this.#s(s.xl,o.xl)},h=f=>f?Math.max(320,f-l*2):u,b={sm:Math.min(u,h(g.sm)),md:Math.min(u,h(g.md)),lg:Math.min(u,h(g.lg)),xl:Math.max(320,u)};return{sm:this.#n(a.sm,`${b.sm}px`),md:this.#n(a.md,`${b.md}px`),lg:this.#n(a.lg,`${b.lg}px`),xl:this.#n(a.xl,`${b.xl}px`)}}#u(e,t){if(!e||typeof e!="object"||!Object.prototype.hasOwnProperty.call(e,t))return!1;let n=e[t];return!(n==null||typeof n=="string"&&n.trim().length===0)}#n(e,t){return typeof e=="number"&&Number.isFinite(e)?`${e}px`:typeof e=="string"&&e.trim().length>0?e:t}#s(e,t){if(typeof e=="number"&&Number.isFinite(e))return e;if(typeof e=="string"){let n=parseFloat(e);if(Number.isFinite(n))return n}return t}#W(e){let{transitionSpeed:t=y.TransitionSpeeds.normal,animationEasing:n=y.AnimationEasings["ease-out"]}=e,o;return typeof t=="number"?o=t:typeof t=="string"&&y.TransitionSpeeds[t]?o=y.TransitionSpeeds[t]:o=y.TransitionSpeeds.normal,{fast:`${Math.round(o*.6)}ms`,normal:`${o}ms`,slow:`${Math.round(o*1.4)}ms`}}#H(e){let{baseZIndex:t=1e3,zIndexStep:n=10}=e;return{dropdown:t.toString(),sticky:(t+n*2).toString(),fixed:(t+n*3).toString(),modal:(t+n*4).toString(),drawer:(t+n*5).toString(),popover:(t+n*6).toString(),tooltip:(t+n*7).toString(),notification:(t+n*8).toString()}}#U(e){let{set:t="phosphor",weight:n="regular",defaultSize:o=24,sizes:a={xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64},spritePath:i="/assets/pds/icons/pds-icons.svg",externalPath:s="/assets/img/icons/"}=e;return{set:t,weight:n,defaultSize:`${o}px`,sizes:Object.fromEntries(Object.entries(a).map(([c,d])=>[c,`${d}px`])),spritePath:i,externalPath:s}}#q(e){let t=[];t.push(` /* Colors */
|
|
20
|
+
`);let n=(o,a="")=>{Object.entries(o).forEach(([i,s])=>{typeof s=="object"&&s!==null?n(s,`${a}${i}-`):typeof s=="string"&&t.push(` --color-${a}${i}: ${s};
|
|
21
|
+
`)})};return Object.entries(e).forEach(([o,a])=>{o!=="dark"&&o!=="surfaceSmart"&&o!=="interactive"&&typeof a=="object"&&a!==null&&n(a,`${o}-`)}),e.surfaceSmart&&(t.push(` /* Smart Surface Tokens (context-aware) */
|
|
22
|
+
`),Object.entries(e.surfaceSmart).forEach(([o,a])=>{t.push(` --surface-${o}-bg: ${a.bg};
|
|
23
|
+
`),t.push(` --surface-${o}-text: ${a.text};
|
|
24
|
+
`),t.push(` --surface-${o}-text-secondary: ${a.textSecondary};
|
|
25
|
+
`),t.push(` --surface-${o}-text-muted: ${a.textMuted};
|
|
26
|
+
`),t.push(` --surface-${o}-icon: ${a.icon};
|
|
27
|
+
`),t.push(` --surface-${o}-icon-subtle: ${a.iconSubtle};
|
|
28
|
+
`),t.push(` --surface-${o}-shadow: ${a.shadow};
|
|
29
|
+
`),t.push(` --surface-${o}-border: ${a.border};
|
|
30
|
+
`)}),t.push(`
|
|
31
|
+
`)),t.push(` /* Semantic Text Colors */
|
|
32
|
+
`),t.push(` --color-text-primary: var(--color-gray-900);
|
|
33
|
+
`),t.push(` --color-text-secondary: var(--color-gray-600);
|
|
34
|
+
`),t.push(` --color-text-muted: var(--color-gray-600);
|
|
35
|
+
`),t.push(` --color-border: var(--color-gray-300);
|
|
36
|
+
`),t.push(` --color-input-bg: var(--color-surface-base);
|
|
37
|
+
`),t.push(` --color-input-disabled-bg: var(--color-gray-50);
|
|
38
|
+
`),t.push(` --color-input-disabled-text: var(--color-gray-500);
|
|
39
|
+
`),t.push(` --color-code-bg: var(--color-gray-100);
|
|
40
|
+
`),e.interactive&&e.interactive.light&&(t.push(` /* Interactive Colors - optimized for specific use cases */
|
|
41
|
+
`),t.push(` --color-primary-fill: ${e.interactive.light.fill}; /* For button backgrounds with white text */
|
|
42
|
+
`),t.push(` --color-primary-text: ${e.interactive.light.text}; /* For links and outline buttons on light surfaces */
|
|
43
|
+
`)),t.push(` /* Translucent Surface Tokens */
|
|
44
|
+
`),t.push(` --color-surface-translucent-25: color-mix(in oklab, var(--color-surface-subtle) 25%, transparent 75%);
|
|
45
|
+
`),t.push(` --color-surface-translucent-50: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
|
|
46
|
+
`),t.push(` --color-surface-translucent-75: color-mix(in oklab, var(--color-surface-subtle) 75%, transparent 25%);
|
|
47
|
+
`),t.push(` /* Backdrop tokens - used for modal dialogs, drawers, overlays */
|
|
48
|
+
|
|
49
|
+
--backdrop-bg: linear-gradient(
|
|
50
|
+
135deg,
|
|
51
|
+
rgba(255, 255, 255, 0.2),
|
|
52
|
+
rgba(255, 255, 255, 0.1)
|
|
53
|
+
);
|
|
54
|
+
--backdrop-blur: 10px;
|
|
55
|
+
--backdrop-saturate: 150%;
|
|
56
|
+
--backdrop-brightness: 0.9;
|
|
57
|
+
--backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)) brightness(var(--backdrop-brightness));
|
|
58
|
+
--backdrop-opacity: 1;
|
|
59
|
+
|
|
60
|
+
/* Legacy alias for backwards compatibility */
|
|
61
|
+
--backdrop-background: var(--backdrop-bg);
|
|
62
|
+
`),t.push(this.#G(e)),`${t.join("")}
|
|
63
|
+
`}#G(e){let t=e.primary?.[500]||"#3b82f6",n=e.secondary?.[500]||"#8b5cf6",o=e.accent?.[500]||"#f59e0b";return`
|
|
64
|
+
/* Mesh Gradient Backgrounds */
|
|
65
|
+
--background-mesh-01: radial-gradient(at 27% 37%, color-mix(in oklab, ${t} 25%, transparent) 0px, transparent 50%),
|
|
66
|
+
radial-gradient(at 97% 21%, color-mix(in oklab, ${n} 22%, transparent) 0px, transparent 50%),
|
|
67
|
+
radial-gradient(at 52% 99%, color-mix(in oklab, ${o} 18%, transparent) 0px, transparent 50%),
|
|
68
|
+
radial-gradient(at 10% 29%, color-mix(in oklab, ${t} 15%, transparent) 0px, transparent 50%);
|
|
69
|
+
|
|
70
|
+
--background-mesh-02: radial-gradient(at 40% 20%, color-mix(in oklab, ${n} 24%, transparent) 0px, transparent 50%),
|
|
71
|
+
radial-gradient(at 80% 0%, color-mix(in oklab, ${t} 20%, transparent) 0px, transparent 50%),
|
|
72
|
+
radial-gradient(at 0% 50%, color-mix(in oklab, ${o} 17%, transparent) 0px, transparent 50%),
|
|
73
|
+
radial-gradient(at 80% 100%, color-mix(in oklab, ${n} 15%, transparent) 0px, transparent 50%);
|
|
74
|
+
|
|
75
|
+
--background-mesh-03: radial-gradient(at 15% 50%, color-mix(in oklab, ${o} 21%, transparent) 0px, transparent 50%),
|
|
76
|
+
radial-gradient(at 85% 30%, color-mix(in oklab, ${t} 23%, transparent) 0px, transparent 50%),
|
|
77
|
+
radial-gradient(at 50% 80%, color-mix(in oklab, ${n} 18%, transparent) 0px, transparent 50%),
|
|
78
|
+
radial-gradient(at 90% 90%, color-mix(in oklab, ${o} 16%, transparent) 0px, transparent 50%);
|
|
79
|
+
|
|
80
|
+
--background-mesh-04: radial-gradient(at 70% 15%, color-mix(in oklab, ${t} 19%, transparent) 0px, transparent 50%),
|
|
81
|
+
radial-gradient(at 20% 80%, color-mix(in oklab, ${n} 22%, transparent) 0px, transparent 50%),
|
|
82
|
+
radial-gradient(at 90% 60%, color-mix(in oklab, ${o} 17%, transparent) 0px, transparent 50%),
|
|
83
|
+
radial-gradient(at 30% 40%, color-mix(in oklab, ${t} 16%, transparent) 0px, transparent 50%);
|
|
84
|
+
|
|
85
|
+
--background-mesh-05: radial-gradient(at 50% 50%, color-mix(in oklab, ${t} 23%, transparent) 0px, transparent 50%),
|
|
86
|
+
radial-gradient(at 10% 10%, color-mix(in oklab, ${o} 20%, transparent) 0px, transparent 50%),
|
|
87
|
+
radial-gradient(at 90% 10%, color-mix(in oklab, ${n} 18%, transparent) 0px, transparent 50%),
|
|
88
|
+
radial-gradient(at 50% 90%, color-mix(in oklab, ${o} 15%, transparent) 0px, transparent 50%);
|
|
89
|
+
`}#V(e){let t=[` /* Spacing */
|
|
90
|
+
`];return Object.entries(e).forEach(([n,o])=>{n!=null&&n!=="NaN"&&o!==void 0&&!o.includes("NaN")&&t.push(` --spacing-${n}: ${o};
|
|
91
|
+
`)}),`${t.join("")}
|
|
92
|
+
`}#J(e){let t=[` /* Border Radius */
|
|
93
|
+
`];return Object.entries(e).forEach(([n,o])=>{t.push(` --radius-${n}: ${o};
|
|
94
|
+
`)}),`${t.join("")}
|
|
95
|
+
`}#Y(e){let t=[` /* Border Widths */
|
|
96
|
+
`];return Object.entries(e).forEach(([n,o])=>{t.push(` --border-width-${n}: ${o};
|
|
97
|
+
`)}),`${t.join("")}
|
|
98
|
+
`}#Q(e){let t=[` /* Typography */
|
|
99
|
+
`];return Object.entries(e).forEach(([n,o])=>{let a=n.replace(/^font/,"").replace(/^(.)/,i=>i.toLowerCase()).replace(/([A-Z])/g,"-$1").toLowerCase();Object.entries(o).forEach(([i,s])=>{let c=i.replace(/([A-Z])/g,"-$1").toLowerCase();t.push(` --font-${a}-${c}: ${s};
|
|
100
|
+
`)})}),`${t.join("")}
|
|
101
|
+
`}#g(e){let t=[` /* Shadows */
|
|
102
|
+
`];return Object.entries(e).forEach(([n,o])=>{t.push(` --shadow-${n}: ${o};
|
|
103
|
+
`)}),`${t.join("")}
|
|
104
|
+
`}#K(e){let t=[` /* Layout */
|
|
105
|
+
`];return Object.entries(e).forEach(([n,o])=>{let a=n.replace(/([A-Z])/g,"-$1").toLowerCase();o!=null&&n!=="breakpoints"&&t.push(` --layout-${a}: ${o};
|
|
106
|
+
`)}),`${t.join("")}
|
|
107
|
+
`}#Z(e){let t=[` /* Transitions */
|
|
108
|
+
`];return Object.entries(e).forEach(([n,o])=>{t.push(` --transition-${n}: ${o};
|
|
109
|
+
`)}),`${t.join("")}
|
|
110
|
+
`}#X(e){let t=[` /* Z-Index */
|
|
111
|
+
`];return Object.entries(e).forEach(([n,o])=>{t.push(` --z-${n}: ${o};
|
|
112
|
+
`)}),`${t.join("")}
|
|
113
|
+
`}#ee(e){let t=[` /* Icon System */
|
|
114
|
+
`];return t.push(` --icon-set: ${e.set};
|
|
115
|
+
`),t.push(` --icon-weight: ${e.weight};
|
|
116
|
+
`),t.push(` --icon-size: ${e.defaultSize};
|
|
117
|
+
`),Object.entries(e.sizes).forEach(([n,o])=>{t.push(` --icon-size-${n}: ${o};
|
|
118
|
+
`)}),`${t.join("")}
|
|
119
|
+
`}#te(e,t){if(!e?.dark)return"";let n=[],o=(l,u="")=>{Object.entries(l).forEach(([g,h])=>{typeof h=="object"&&h!==null?o(h,`${u}${g}-`):typeof h=="string"&&n.push(` --color-${u}${g}: ${h};
|
|
120
|
+
`)})};Object.entries(e.dark).forEach(([l,u])=>{l!=="surfaceSmart"&&typeof u=="object"&&u!==null&&o(u,`${l}-`)});let a=[];e.dark.surfaceSmart&&(a.push(` /* Smart Surface Tokens (dark mode, context-aware) */
|
|
121
|
+
`),Object.entries(e.dark.surfaceSmart).forEach(([l,u])=>{a.push(` --surface-${l}-bg: ${u.bg};
|
|
122
|
+
`),a.push(` --surface-${l}-text: ${u.text};
|
|
123
|
+
`),a.push(` --surface-${l}-text-secondary: ${u.textSecondary};
|
|
124
|
+
`),a.push(` --surface-${l}-text-muted: ${u.textMuted};
|
|
125
|
+
`),a.push(` --surface-${l}-icon: ${u.icon};
|
|
126
|
+
`),a.push(` --surface-${l}-icon-subtle: ${u.iconSubtle};
|
|
127
|
+
`),a.push(` --surface-${l}-shadow: ${u.shadow};
|
|
128
|
+
`),a.push(` --surface-${l}-border: ${u.border};
|
|
129
|
+
`)}),a.push(`
|
|
130
|
+
`));let i=` --color-text-primary: var(--color-gray-100);
|
|
131
|
+
--color-text-secondary: var(--color-gray-300);
|
|
132
|
+
--color-text-muted: var(--color-gray-600);
|
|
133
|
+
--color-border: var(--color-gray-700);
|
|
134
|
+
--color-input-bg: var(--color-gray-800);
|
|
135
|
+
--color-input-disabled-bg: var(--color-gray-900);
|
|
136
|
+
--color-input-disabled-text: var(--color-gray-600);
|
|
137
|
+
--color-code-bg: var(--color-gray-800);
|
|
138
|
+
`,s=` /* Backdrop tokens - dark mode */
|
|
139
|
+
--backdrop-bg: linear-gradient(
|
|
140
|
+
135deg,
|
|
141
|
+
rgba(0, 0, 0, 0.6),
|
|
142
|
+
rgba(0, 0, 0, 0.4)
|
|
143
|
+
);
|
|
144
|
+
--backdrop-blur: 10px;
|
|
145
|
+
--backdrop-saturate: 120%;
|
|
146
|
+
--backdrop-brightness: 0.7;
|
|
147
|
+
--backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)) brightness(var(--backdrop-brightness));
|
|
148
|
+
--backdrop-opacity: 1;
|
|
149
|
+
|
|
150
|
+
/* Legacy alias for backwards compatibility */
|
|
151
|
+
--backdrop-background: var(--backdrop-bg);
|
|
152
|
+
`,c=this.#oe(e),d=t?[this.#g(t)]:[];return`html[data-theme="dark"] {
|
|
153
|
+
${[...n,...a,...d,i,s,c].join("")}}
|
|
154
|
+
`}#re(e,t){if(!e?.dark)return"";let n=[],o=(u,g="")=>{Object.entries(u).forEach(([h,b])=>{typeof b=="object"&&b!==null?o(b,`${g}${h}-`):typeof b=="string"&&n.push(` --color-${g}${h}: ${b};
|
|
155
|
+
`)})};Object.entries(e.dark).forEach(([u,g])=>{u!=="surfaceSmart"&&typeof g=="object"&&g!==null&&o(g,`${u}-`)});let a=[];e.dark.surfaceSmart&&(a.push(` /* Smart Surface Tokens (dark mode, context-aware) */
|
|
156
|
+
`),Object.entries(e.dark.surfaceSmart).forEach(([u,g])=>{a.push(` --surface-${u}-bg: ${g.bg};
|
|
157
|
+
`),a.push(` --surface-${u}-text: ${g.text};
|
|
158
|
+
`),a.push(` --surface-${u}-text-secondary: ${g.textSecondary};
|
|
159
|
+
`),a.push(` --surface-${u}-text-muted: ${g.textMuted};
|
|
160
|
+
`),a.push(` --surface-${u}-icon: ${g.icon};
|
|
161
|
+
`),a.push(` --surface-${u}-icon-subtle: ${g.iconSubtle};
|
|
162
|
+
`),a.push(` --surface-${u}-shadow: ${g.shadow};
|
|
163
|
+
`),a.push(` --surface-${u}-border: ${g.border};
|
|
164
|
+
`)}),a.push(`
|
|
165
|
+
`));let i=[];e.interactive&&e.interactive.dark&&(i.push(` /* Interactive Colors - optimized for specific use cases (dark mode) */
|
|
166
|
+
`),i.push(` --color-primary-fill: ${e.interactive.dark.fill}; /* For button backgrounds with white text */
|
|
167
|
+
`),i.push(` --color-primary-text: ${e.interactive.dark.text}; /* For links and outline buttons on dark surfaces */
|
|
168
|
+
`));let s=[` --color-text-primary: var(--color-gray-100);
|
|
169
|
+
`,` --color-text-secondary: var(--color-gray-300);
|
|
170
|
+
`,` --color-text-muted: var(--color-gray-600);
|
|
171
|
+
`,` --color-border: var(--color-gray-700);
|
|
172
|
+
`,` --color-input-bg: var(--color-gray-800);
|
|
173
|
+
`,` --color-input-disabled-bg: var(--color-gray-900);
|
|
174
|
+
`,` --color-input-disabled-text: var(--color-gray-600);
|
|
175
|
+
`,` --color-code-bg: var(--color-gray-800);
|
|
176
|
+
`,...i].join(""),c=` /* Backdrop tokens - dark mode */
|
|
177
|
+
--backdrop-bg: linear-gradient(
|
|
178
|
+
135deg,
|
|
179
|
+
rgba(0, 0, 0, 0.6),
|
|
180
|
+
rgba(0, 0, 0, 0.4)
|
|
181
|
+
);
|
|
182
|
+
--backdrop-blur: 10px;
|
|
183
|
+
--backdrop-saturate: 120%;
|
|
184
|
+
--backdrop-brightness: 0.7;
|
|
185
|
+
--backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)) brightness(var(--backdrop-brightness));
|
|
186
|
+
--backdrop-opacity: 1;
|
|
187
|
+
|
|
188
|
+
/* Legacy alias for backwards compatibility */
|
|
189
|
+
--backdrop-background: var(--backdrop-bg);
|
|
190
|
+
`,d=this.#ne(e),p=t?[this.#g(t)]:[];return`
|
|
191
|
+
html[data-theme="dark"] {
|
|
192
|
+
${[...n,...a,...p,s,c,d].join("")} }
|
|
193
|
+
`}#ne(e){let t=e.dark||e,n=t.primary?.[400]||"#60a5fa",o=t.secondary?.[400]||"#a78bfa",a=t.accent?.[400]||"#fbbf24";return` /* Mesh Gradient Variables (Dark Mode) */
|
|
194
|
+
--background-mesh-01: radial-gradient(at 27% 37%, color-mix(in oklab, ${n} 20%, transparent) 0px, transparent 50%),
|
|
195
|
+
radial-gradient(at 97% 21%, color-mix(in oklab, ${o} 16%, transparent) 0px, transparent 50%),
|
|
196
|
+
radial-gradient(at 52% 99%, color-mix(in oklab, ${a} 13%, transparent) 0px, transparent 50%),
|
|
197
|
+
radial-gradient(at 10% 29%, color-mix(in oklab, ${n} 10%, transparent) 0px, transparent 50%);
|
|
198
|
+
|
|
199
|
+
--background-mesh-02: radial-gradient(at 40% 20%, color-mix(in oklab, ${o} 18%, transparent) 0px, transparent 50%),
|
|
200
|
+
radial-gradient(at 80% 0%, color-mix(in oklab, ${n} 14%, transparent) 0px, transparent 50%),
|
|
201
|
+
radial-gradient(at 0% 50%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
|
|
202
|
+
radial-gradient(at 80% 100%, color-mix(in oklab, ${o} 10%, transparent) 0px, transparent 50%);
|
|
203
|
+
|
|
204
|
+
--background-mesh-03: radial-gradient(at 15% 50%, color-mix(in oklab, ${a} 15%, transparent) 0px, transparent 50%),
|
|
205
|
+
radial-gradient(at 85% 30%, color-mix(in oklab, ${n} 17%, transparent) 0px, transparent 50%),
|
|
206
|
+
radial-gradient(at 50% 80%, color-mix(in oklab, ${o} 13%, transparent) 0px, transparent 50%),
|
|
207
|
+
radial-gradient(at 90% 90%, color-mix(in oklab, ${a} 11%, transparent) 0px, transparent 50%);
|
|
208
|
+
|
|
209
|
+
--background-mesh-04: radial-gradient(at 70% 15%, color-mix(in oklab, ${n} 14%, transparent) 0px, transparent 50%),
|
|
210
|
+
radial-gradient(at 20% 80%, color-mix(in oklab, ${o} 16%, transparent) 0px, transparent 50%),
|
|
211
|
+
radial-gradient(at 90% 60%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
|
|
212
|
+
radial-gradient(at 30% 40%, color-mix(in oklab, ${n} 11%, transparent) 0px, transparent 50%);
|
|
213
|
+
|
|
214
|
+
--background-mesh-05: radial-gradient(at 50% 50%, color-mix(in oklab, ${n} 17%, transparent) 0px, transparent 50%),
|
|
215
|
+
radial-gradient(at 10% 10%, color-mix(in oklab, ${a} 14%, transparent) 0px, transparent 50%),
|
|
216
|
+
radial-gradient(at 90% 10%, color-mix(in oklab, ${o} 13%, transparent) 0px, transparent 50%),
|
|
217
|
+
radial-gradient(at 50% 90%, color-mix(in oklab, ${a} 10%, transparent) 0px, transparent 50%);
|
|
218
|
+
`}#oe(e){let t=e.dark||e,n=t.primary?.[400]||"#60a5fa",o=t.secondary?.[400]||"#a78bfa",a=t.accent?.[400]||"#fbbf24";return`
|
|
219
|
+
/* Mesh Gradient Backgrounds (Dark Mode) */
|
|
220
|
+
--background-mesh-01: radial-gradient(at 27% 37%, color-mix(in oklab, ${n} 20%, transparent) 0px, transparent 50%),
|
|
221
|
+
radial-gradient(at 97% 21%, color-mix(in oklab, ${o} 16%, transparent) 0px, transparent 50%),
|
|
222
|
+
radial-gradient(at 52% 99%, color-mix(in oklab, ${a} 13%, transparent) 0px, transparent 50%),
|
|
223
|
+
radial-gradient(at 10% 29%, color-mix(in oklab, ${n} 10%, transparent) 0px, transparent 50%);
|
|
224
|
+
|
|
225
|
+
--background-mesh-02: radial-gradient(at 40% 20%, color-mix(in oklab, ${o} 18%, transparent) 0px, transparent 50%),
|
|
226
|
+
radial-gradient(at 80% 0%, color-mix(in oklab, ${n} 14%, transparent) 0px, transparent 50%),
|
|
227
|
+
radial-gradient(at 0% 50%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
|
|
228
|
+
radial-gradient(at 80% 100%, color-mix(in oklab, ${o} 10%, transparent) 0px, transparent 50%);
|
|
229
|
+
|
|
230
|
+
--background-mesh-03: radial-gradient(at 15% 50%, color-mix(in oklab, ${a} 15%, transparent) 0px, transparent 50%),
|
|
231
|
+
radial-gradient(at 85% 30%, color-mix(in oklab, ${n} 17%, transparent) 0px, transparent 50%),
|
|
232
|
+
radial-gradient(at 50% 80%, color-mix(in oklab, ${o} 13%, transparent) 0px, transparent 50%),
|
|
233
|
+
radial-gradient(at 90% 90%, color-mix(in oklab, ${a} 11%, transparent) 0px, transparent 50%);
|
|
234
|
+
|
|
235
|
+
--background-mesh-04: radial-gradient(at 70% 15%, color-mix(in oklab, ${n} 14%, transparent) 0px, transparent 50%),
|
|
236
|
+
radial-gradient(at 20% 80%, color-mix(in oklab, ${o} 16%, transparent) 0px, transparent 50%),
|
|
237
|
+
radial-gradient(at 90% 60%, color-mix(in oklab, ${a} 12%, transparent) 0px, transparent 50%),
|
|
238
|
+
radial-gradient(at 30% 40%, color-mix(in oklab, ${n} 11%, transparent) 0px, transparent 50%);
|
|
239
|
+
|
|
240
|
+
--background-mesh-05: radial-gradient(at 50% 50%, color-mix(in oklab, ${n} 17%, transparent) 0px, transparent 50%),
|
|
241
|
+
radial-gradient(at 10% 10%, color-mix(in oklab, ${a} 14%, transparent) 0px, transparent 50%),
|
|
242
|
+
radial-gradient(at 90% 10%, color-mix(in oklab, ${o} 13%, transparent) 0px, transparent 50%),
|
|
243
|
+
radial-gradient(at 50% 90%, color-mix(in oklab, ${a} 10%, transparent) 0px, transparent 50%);
|
|
244
|
+
`}#ae(){return`/* Callout dark mode adjustments */
|
|
245
|
+
html[data-theme="dark"] {
|
|
246
|
+
.callout-success { background-color: var(--color-success-50); border-color: var(--color-success-500); color: var(--color-success-900); }
|
|
247
|
+
.callout-info { background-color: var(--color-info-50); border-color: var(--color-info-500); color: var(--color-info-900); }
|
|
248
|
+
.callout-warning { background-color: var(--color-warning-50); border-color: var(--color-warning-500); color: var(--color-warning-900); }
|
|
249
|
+
.callout-danger, .callout-error { background-color: var(--color-danger-50); border-color: var(--color-danger-500); color: var(--color-danger-900); }
|
|
250
|
+
img, video { opacity: 0.8; transition: opacity var(--transition-normal); }
|
|
251
|
+
img:hover, video:hover { opacity: 1; }
|
|
252
|
+
}`}#ie(){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 */
|
|
253
|
+
body {
|
|
254
|
+
background: var(--background-mesh-0${Math.max(1,Math.min(5,Math.floor(t)))});
|
|
255
|
+
background-attachment: fixed;
|
|
256
|
+
}`}catch(e){return this.options.debug&&this.options.log?.("error","Error in generateBodyBackgroundMeshRule:",e),""}}#se(){try{return this.options?.design?.options?.liquidGlassEffects?`/* Liquid glass utility (opt-in via options.liquidGlassEffects) */
|
|
257
|
+
.liquid-glass {
|
|
258
|
+
border-radius: var(--radius-lg);
|
|
259
|
+
/* Subtle translucent fill blended with surface */
|
|
260
|
+
background: color-mix(in oklab, var(--color-surface-subtle) 45%, transparent);
|
|
261
|
+
|
|
262
|
+
background-image: linear-gradient(
|
|
263
|
+
135deg,
|
|
264
|
+
rgba(255,255,255,0.35),
|
|
265
|
+
rgba(255,255,255,0.12)
|
|
266
|
+
);
|
|
267
|
+
/* Frosted glass blur + saturation */
|
|
268
|
+
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
|
269
|
+
backdrop-filter: blur(12px) saturate(140%);
|
|
270
|
+
/* Soft inner highlight and outer depth */
|
|
271
|
+
box-shadow:
|
|
272
|
+
inset 0 1px 0 rgba(255,255,255,0.6),
|
|
273
|
+
inset 0 -40px 80px rgba(255,255,255,0.12),
|
|
274
|
+
0 10px 30px rgba(0,0,0,0.10);
|
|
275
|
+
/* Glossy border with slight light and dark edges */
|
|
276
|
+
border: var(--border-width-thin) solid color-mix(in oklab, var(--color-primary-500) 22%, transparent);
|
|
277
|
+
outline: 1px solid color-mix(in oklab, #ffffff 18%, transparent);
|
|
278
|
+
outline-offset: -1px;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
html[data-theme="dark"] .liquid-glass {
|
|
282
|
+
background: color-mix(in oklab, var(--color-surface-inverse) 45%, transparent);
|
|
283
|
+
background-image: linear-gradient(
|
|
284
|
+
135deg,
|
|
285
|
+
color-mix(in oklab, var(--color-primary-300) 40%, transparent),
|
|
286
|
+
color-mix(in oklab, var(--color-surface-overlay) 48%, transparent)
|
|
287
|
+
);
|
|
288
|
+
box-shadow:
|
|
289
|
+
inset 0 1px 0 rgba(255,255,255,0.12),
|
|
290
|
+
inset 0 -40px 80px rgba(0,0,0,0.55),
|
|
291
|
+
0 18px 38px rgba(0,0,0,0.65);
|
|
292
|
+
border: var(--border-width-thin) solid color-mix(in oklab, var(--color-primary-300) 26%, transparent);
|
|
293
|
+
outline: 1px solid color-mix(in oklab, #ffffff 16%, transparent);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Fallback when backdrop-filter isn't supported */
|
|
297
|
+
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
|
298
|
+
.liquid-glass {
|
|
299
|
+
/* Strengthen fill a bit to compensate for lack of blur */
|
|
300
|
+
background: color-mix(in oklab, var(--color-surface-subtle) 70%, rgba(255,255,255,0.4));
|
|
301
|
+
box-shadow:
|
|
302
|
+
inset 0 1px 0 rgba(255,255,255,0.6),
|
|
303
|
+
0 10px 24px rgba(0,0,0,0.08);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
html[data-theme="dark"] .liquid-glass {
|
|
307
|
+
background: color-mix(in oklab, var(--color-surface-inverse) 70%, transparent);
|
|
308
|
+
box-shadow:
|
|
309
|
+
inset 0 1px 0 rgba(255,255,255,0.1),
|
|
310
|
+
0 18px 32px rgba(0,0,0,0.58);
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
`:""}catch{return""}}#le(){return`/* ============================================================================
|
|
314
|
+
Border Gradient Utilities
|
|
315
|
+
Card outlines with gradient borders and glow effects
|
|
316
|
+
============================================================================ */
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
/* Gradient border utility - premium/promo card style */
|
|
320
|
+
.border-gradient {
|
|
321
|
+
border: var(--border-width-medium) solid transparent;
|
|
322
|
+
background:
|
|
323
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
324
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
325
|
+
var(--color-primary-400),
|
|
326
|
+
var(--color-accent-400)
|
|
327
|
+
) border-box;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* Gradient border variants - different color combinations */
|
|
331
|
+
.border-gradient-primary {
|
|
332
|
+
border: var(--border-width-medium) solid transparent;
|
|
333
|
+
background:
|
|
334
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
335
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
336
|
+
var(--color-primary-300),
|
|
337
|
+
var(--color-primary-600)
|
|
338
|
+
) border-box;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.border-gradient-accent {
|
|
342
|
+
border: var(--border-width-medium) solid transparent;
|
|
343
|
+
background:
|
|
344
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
345
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
346
|
+
var(--color-accent-300),
|
|
347
|
+
var(--color-accent-600)
|
|
348
|
+
) border-box;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.border-gradient-secondary {
|
|
352
|
+
border: var(--border-width-medium) solid transparent;
|
|
353
|
+
background:
|
|
354
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
355
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
356
|
+
var(--color-secondary-300),
|
|
357
|
+
var(--color-secondary-600)
|
|
358
|
+
) border-box;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* Gradient border with different strengths/thickness */
|
|
362
|
+
.border-gradient-soft {
|
|
363
|
+
border: var(--border-width-thin) solid transparent;
|
|
364
|
+
background:
|
|
365
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
366
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
367
|
+
var(--color-primary-400),
|
|
368
|
+
var(--color-accent-400)
|
|
369
|
+
) border-box;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.border-gradient-medium {
|
|
373
|
+
border: var(--border-width-medium) solid transparent;
|
|
374
|
+
background:
|
|
375
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
376
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
377
|
+
var(--color-primary-400),
|
|
378
|
+
var(--color-accent-400)
|
|
379
|
+
) border-box;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.border-gradient-strong {
|
|
383
|
+
border: var(--border-width-thick) solid transparent;
|
|
384
|
+
background:
|
|
385
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
386
|
+
linear-gradient(var(--gradient-angle, 135deg),
|
|
387
|
+
var(--color-primary-400),
|
|
388
|
+
var(--color-accent-400)
|
|
389
|
+
) border-box;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* Glow effect utility - for callouts and active states */
|
|
393
|
+
.border-glow {
|
|
394
|
+
box-shadow: 0 0 12px var(--color-primary-500);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.border-glow-sm {
|
|
398
|
+
box-shadow: 0 0 6px var(--color-primary-500);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.border-glow-lg {
|
|
402
|
+
box-shadow: 0 0 20px var(--color-primary-500);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/* Combined gradient + glow for premium effects */
|
|
406
|
+
.border-gradient-glow {
|
|
407
|
+
border: var(--border-width-medium) solid transparent;
|
|
408
|
+
background:
|
|
409
|
+
linear-gradient(var(--border-gradient-fill, var(--color-surface-base)), var(--border-gradient-fill, var(--color-surface-base))) padding-box,
|
|
410
|
+
linear-gradient(135deg,
|
|
411
|
+
var(--color-primary-400),
|
|
412
|
+
var(--color-accent-400)
|
|
413
|
+
) border-box;
|
|
414
|
+
box-shadow: 0 0 12px var(--color-primary-500);
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
/* Semantic glow variants */
|
|
418
|
+
.border-glow-primary {
|
|
419
|
+
box-shadow: 0 0 12px var(--color-primary-500);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.border-glow-accent {
|
|
423
|
+
box-shadow: 0 0 12px var(--color-accent-500);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.border-glow-success {
|
|
427
|
+
box-shadow: 0 0 12px var(--color-success-500);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.border-glow-warning {
|
|
431
|
+
box-shadow: 0 0 12px var(--color-warning-500);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.border-glow-danger {
|
|
435
|
+
box-shadow: 0 0 12px var(--color-danger-500);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
`}#ce(){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()) */
|
|
439
|
+
|
|
440
|
+
:where(blockquote) {
|
|
441
|
+
margin: 0 0 var(--spacing-4) 0;
|
|
442
|
+
padding: var(--spacing-6) var(--spacing-8);
|
|
443
|
+
border-left: calc(var(--border-width-thick) + var(--border-width-thin)) solid var(--color-primary-500);
|
|
444
|
+
background-color: var(--color-surface-elevated);
|
|
445
|
+
border-radius: var(--radius-none);
|
|
446
|
+
font-size: var(--font-size-lg);
|
|
447
|
+
line-height: var(--line-height-relaxed);
|
|
448
|
+
color: var(--color-text-primary);
|
|
449
|
+
|
|
450
|
+
:where(p):last-child {
|
|
451
|
+
margin-bottom: 0;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
:where(cite) {
|
|
455
|
+
display: block;
|
|
456
|
+
margin-top: var(--spacing-4);
|
|
457
|
+
font-size: var(--font-size-base);
|
|
458
|
+
font-style: normal;
|
|
459
|
+
color: var(--color-primary-500);
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
:where(hr) {
|
|
464
|
+
margin: var(--spacing-8) 0;
|
|
465
|
+
border: none;
|
|
466
|
+
border-top: var(--border-width-thin) solid var(--color-border);
|
|
467
|
+
height: 0;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/* Labeled horizontal rule: <hr data-content="OR"> */
|
|
471
|
+
:where(hr[data-content]) {
|
|
472
|
+
position: relative;
|
|
473
|
+
border: none;
|
|
474
|
+
text-align: center;
|
|
475
|
+
height: auto;
|
|
476
|
+
overflow: visible;
|
|
477
|
+
|
|
478
|
+
&::before {
|
|
479
|
+
content: "";
|
|
480
|
+
position: absolute;
|
|
481
|
+
left: 0;
|
|
482
|
+
top: 50%;
|
|
483
|
+
width: 100%;
|
|
484
|
+
height: 1px;
|
|
485
|
+
background: linear-gradient(to right, transparent, var(--color-border), transparent);
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
&::after {
|
|
489
|
+
content: attr(data-content);
|
|
490
|
+
position: relative;
|
|
491
|
+
display: inline-block;
|
|
492
|
+
padding: 0 var(--spacing-3);
|
|
493
|
+
background-color: var(--color-surface-base);
|
|
494
|
+
color: var(--color-text-muted);
|
|
495
|
+
font-size: var(--font-size-sm);
|
|
496
|
+
line-height: var(--font-line-height-normal);
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
:where(dl) {
|
|
501
|
+
margin: 0 0 var(--spacing-4) 0;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
:where(dt) {
|
|
505
|
+
font-weight: var(--font-weight-semibold);
|
|
506
|
+
color: var(--color-text-primary);
|
|
507
|
+
margin-top: var(--spacing-3);
|
|
508
|
+
|
|
509
|
+
&:first-child {
|
|
510
|
+
margin-top: 0;
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
:where(dd) {
|
|
515
|
+
margin: var(--spacing-1) 0 var(--spacing-3) var(--spacing-6);
|
|
516
|
+
color: var(--color-text-secondary);
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
:where(nav), :where(header), :where(footer) {
|
|
520
|
+
display: block;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
:where(header), :where(footer) {
|
|
524
|
+
width: 100%;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
/* Headings within header elements have tight spacing for intro content */
|
|
528
|
+
:where(header) > :where(h1, h2, h3, h4, h5, h6) {
|
|
529
|
+
margin: 0;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
:where(article), :where(section), :where(aside) {
|
|
533
|
+
display: block;
|
|
534
|
+
margin-bottom: var(--spacing-6);
|
|
535
|
+
|
|
536
|
+
& > *:last-child {
|
|
537
|
+
margin-bottom: 0;
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
:where(mark) {
|
|
542
|
+
background-color: var(--color-warning-200);
|
|
543
|
+
color: var(--color-warning-900);
|
|
544
|
+
padding: 0 var(--spacing-1);
|
|
545
|
+
border-radius: var(--radius-sm);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
:where(kbd) {
|
|
549
|
+
display: inline-block;
|
|
550
|
+
padding: var(--spacing-1) var(--spacing-2);
|
|
551
|
+
font-family: var(--font-family-mono);
|
|
552
|
+
font-size: var(--font-size-sm);
|
|
553
|
+
color: var(--color-text-primary);
|
|
554
|
+
background-color: var(--color-surface-elevated);
|
|
555
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
556
|
+
border-radius: var(--radius-sm);
|
|
557
|
+
box-shadow: 0 2px 0 0 var(--color-border);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
:where(abbr[title]) {
|
|
561
|
+
text-decoration: underline dotted;
|
|
562
|
+
cursor: help;
|
|
563
|
+
text-decoration-thickness: 1px;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
:where(time) {
|
|
567
|
+
font-variant-numeric: tabular-nums;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
:where(address) {
|
|
571
|
+
font-style: normal;
|
|
572
|
+
line-height: var(--font-line-height-relaxed);
|
|
573
|
+
margin: 0 0 var(--spacing-4) 0;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
:where(details):not(.accordion *) {
|
|
577
|
+
margin: 0 0 var(--spacing-2) 0;
|
|
578
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
579
|
+
border-radius: var(--radius-md);
|
|
580
|
+
background-color: var(--color-surface-base);
|
|
581
|
+
|
|
582
|
+
&[open] :where(summary) {
|
|
583
|
+
border-bottom: var(--border-width-thin) solid var(--color-border);
|
|
584
|
+
background-color: var(--color-surface-subtle);
|
|
585
|
+
|
|
586
|
+
&::after {
|
|
587
|
+
transform: rotate(270deg);
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
& > *:not(:where(summary)) {
|
|
592
|
+
padding: var(--spacing-4);
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
:where(summary) {
|
|
597
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
598
|
+
cursor: pointer;
|
|
599
|
+
border-radius: var(--radius-md);
|
|
600
|
+
font-weight: var(--font-weight-medium);
|
|
601
|
+
user-select: none;
|
|
602
|
+
list-style: none;
|
|
603
|
+
display: flex;
|
|
604
|
+
align-items: center;
|
|
605
|
+
justify-content: space-between;
|
|
606
|
+
transition: background-color var(--transition-fast);
|
|
607
|
+
|
|
608
|
+
&::-webkit-details-marker {
|
|
609
|
+
display: none;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
&::after {
|
|
613
|
+
content: "\u203A";
|
|
614
|
+
display: inline-block;
|
|
615
|
+
transform: rotate(90deg);
|
|
616
|
+
transition: transform var(--transition-fast);
|
|
617
|
+
font-size: var(--font-size-xl);
|
|
618
|
+
font-weight: var(--font-weight-bold);
|
|
619
|
+
color: var(--color-text-secondary);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
&:hover {
|
|
623
|
+
background-color: var(--color-surface-subtle);
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
/* Dialog styles moved to #generateDialogStyles() */
|
|
628
|
+
|
|
629
|
+
`}#de(){let{shape:e={},spatialRhythm:t={},inputPadding:n,buttonPadding:o,focusRingWidth:a,focusRingOpacity:i,borderWidthThin:s,sectionSpacing:c,buttonMinHeight:d,inputMinHeight:p}=this.options.design,l=typeof e.borderWidth=="number"?e.borderWidth:typeof e.borderWidth=="string"?y.BorderWidths[e.borderWidth]??null:null,u=t.inputPadding??n??.75,g=t.buttonPadding??o??1,h=a||3,b=s||l||y.BorderWidths.thin,f=t.sectionSpacing??c??2,m=d||30;return`/* Mobile-First Form Styles - Generated from Design Config */
|
|
630
|
+
form {
|
|
631
|
+
margin: 0;
|
|
632
|
+
width: 100%;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
fieldset {
|
|
636
|
+
margin: 0;
|
|
637
|
+
width: 100%;
|
|
638
|
+
|
|
639
|
+
/* Unified styling for radio groups and checkbox groups */
|
|
640
|
+
&[role="radiogroup"],
|
|
641
|
+
&[role="group"] {
|
|
642
|
+
display: flex;
|
|
643
|
+
flex-direction: column;
|
|
644
|
+
gap: var(--spacing-2);
|
|
645
|
+
padding: 0;
|
|
646
|
+
background-color: transparent;
|
|
647
|
+
|
|
648
|
+
label {
|
|
649
|
+
display: flex;
|
|
650
|
+
align-items: center;
|
|
651
|
+
gap: var(--spacing-3);
|
|
652
|
+
padding: var(--spacing-1) 0;
|
|
653
|
+
cursor: pointer;
|
|
654
|
+
min-height: auto;
|
|
655
|
+
border: none;
|
|
656
|
+
background: none;
|
|
657
|
+
font-weight: var(--font-weight-normal);
|
|
658
|
+
margin-bottom: 0;
|
|
659
|
+
|
|
660
|
+
&:hover {
|
|
661
|
+
color: var(--color-primary-700);
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
input[type="checkbox"]{
|
|
666
|
+
border-radius: var(--radius-xs);
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
input[type="radio"],
|
|
670
|
+
input[type="checkbox"] {
|
|
671
|
+
position: static;
|
|
672
|
+
opacity: 1;
|
|
673
|
+
width: var(--spacing-5);
|
|
674
|
+
height: var(--spacing-5);
|
|
675
|
+
min-height: var(--spacing-5);
|
|
676
|
+
padding: var(--spacing-2);
|
|
677
|
+
margin: 0;
|
|
678
|
+
cursor: pointer;
|
|
679
|
+
flex-shrink: 0;
|
|
680
|
+
accent-color: var(--color-primary-600);
|
|
681
|
+
|
|
682
|
+
&:focus-visible {
|
|
683
|
+
outline: none;
|
|
684
|
+
|
|
685
|
+
box-shadow:
|
|
686
|
+
0 0 0 2px var(--color-primary-500),
|
|
687
|
+
0 0 0 4px color-mix(in srgb,
|
|
688
|
+
var(--color-primary-500) 40%,
|
|
689
|
+
transparent
|
|
690
|
+
);
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
&:checked {
|
|
694
|
+
background-color: var(--color-primary-600);
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
|
|
703
|
+
|
|
704
|
+
/* Nested legend scaling: reduce font-size for deeper sub-forms */
|
|
705
|
+
fieldset > legend { font-size: var(--font-size-lg); }
|
|
706
|
+
fieldset fieldset > legend { font-size: var(--font-size-base); }
|
|
707
|
+
fieldset fieldset fieldset > legend { font-size: var(--font-size-sm); }
|
|
708
|
+
|
|
709
|
+
.form-container {
|
|
710
|
+
display: grid;
|
|
711
|
+
gap: var(--spacing-6);
|
|
712
|
+
width: 100%;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.fields {
|
|
716
|
+
display: grid;
|
|
717
|
+
gap: var(--spacing-4);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
label {
|
|
721
|
+
display: block;
|
|
722
|
+
font-weight: var(--font-weight-medium);
|
|
723
|
+
color: var(--color-text-primary);
|
|
724
|
+
font-size: var(--font-size-sm);
|
|
725
|
+
line-height: var(--font-line-height-normal);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
[data-label] {
|
|
729
|
+
display: block;
|
|
730
|
+
font-weight: var(--font-weight-medium);
|
|
731
|
+
color: var(--color-text-primary);
|
|
732
|
+
font-size: var(--font-size-sm);
|
|
733
|
+
margin-bottom: var(--spacing-2);
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
[data-open]{
|
|
737
|
+
[data-label]{
|
|
738
|
+
margin-bottom: 0;
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.field-description {
|
|
743
|
+
font-size: var(--font-size-xs);
|
|
744
|
+
color: var(--color-text-secondary);
|
|
745
|
+
margin-top: var(--spacing-1);
|
|
746
|
+
line-height: var(--font-line-height-relaxed);
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
input, textarea, select {
|
|
750
|
+
&:focus {
|
|
751
|
+
outline: none;
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
input, textarea, select {
|
|
756
|
+
width: 100%;
|
|
757
|
+
min-height: ${p||40}px;
|
|
758
|
+
padding: calc(var(--spacing-1) * ${u}) var(--spacing-4);
|
|
759
|
+
border: var(--border-width-medium) solid var(--color-border);
|
|
760
|
+
border-radius: var(--radius-md);
|
|
761
|
+
font-family: var(--font-family-body);
|
|
762
|
+
font-size: var(--font-size-base);
|
|
763
|
+
line-height: var(--font-line-height-normal);
|
|
764
|
+
background-color: var(--color-input-bg);
|
|
765
|
+
color: var(--color-text-primary);
|
|
766
|
+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
|
|
767
|
+
touch-action: manipulation;
|
|
768
|
+
appearance: none;
|
|
769
|
+
-webkit-appearance: none;
|
|
770
|
+
|
|
771
|
+
&:focus {
|
|
772
|
+
border-color: var(--color-primary-500);
|
|
773
|
+
background-color: var(--color-surface-base);
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
&:disabled {
|
|
777
|
+
background-color: var(--color-input-disabled-bg);
|
|
778
|
+
color: var(--color-input-disabled-text);
|
|
779
|
+
border-color: var(--color-border);
|
|
780
|
+
cursor: not-allowed;
|
|
781
|
+
opacity: 0.6;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
&:invalid {
|
|
785
|
+
border-color: var(--color-danger-500);
|
|
786
|
+
|
|
787
|
+
&:focus {
|
|
788
|
+
box-shadow: 0 0 0 ${h}px color-mix(in oklab, var(--color-danger-500) ${Math.round((i||.3)*100)}%, transparent);
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
input[type="range"] {
|
|
794
|
+
padding: 0;
|
|
795
|
+
background: transparent;
|
|
796
|
+
min-height: auto;
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
/* Make range visually match other inputs */
|
|
800
|
+
input[type="range"] {
|
|
801
|
+
-webkit-appearance: none;
|
|
802
|
+
appearance: none;
|
|
803
|
+
height: var(--input-min-height, 40px); /* align control height with inputs */
|
|
804
|
+
width: 100%;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
/* Track and thumb styling - using CSS nesting to reduce repetition */
|
|
808
|
+
input[type="range"] {
|
|
809
|
+
/* WebKit track */
|
|
810
|
+
&::-webkit-slider-runnable-track {
|
|
811
|
+
height: var(--range-track-height, 8px);
|
|
812
|
+
background: var(--color-input-bg);
|
|
813
|
+
border-radius: var(--radius-full);
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
/* WebKit thumb */
|
|
817
|
+
&::-webkit-slider-thumb {
|
|
818
|
+
-webkit-appearance: none;
|
|
819
|
+
appearance: none;
|
|
820
|
+
width: var(--range-thumb-size, 28px);
|
|
821
|
+
height: var(--range-thumb-size, 28px);
|
|
822
|
+
margin-top: calc((var(--range-track-height, 8px) - var(--range-thumb-size, 28px)) / 2);
|
|
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
|
+
cursor: grab;
|
|
827
|
+
border: var(--border-width-thin) solid color-mix(in srgb, var(--color-primary-500) 30%, var(--color-border));
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
/* Mozilla track */
|
|
831
|
+
&::-moz-range-track {
|
|
832
|
+
height: var(--range-track-height, 8px);
|
|
833
|
+
background: var(--color-input-bg);
|
|
834
|
+
border-radius: var(--radius-full);
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
/* Mozilla thumb */
|
|
838
|
+
&::-moz-range-thumb {
|
|
839
|
+
width: var(--range-thumb-size, 28px);
|
|
840
|
+
height: var(--range-thumb-size, 28px);
|
|
841
|
+
background: color-mix(in srgb, var(--color-primary-500) 15%, var(--color-surface-base));
|
|
842
|
+
border-radius: 50%;
|
|
843
|
+
box-shadow: var(--shadow-sm);
|
|
844
|
+
border: var(--border-width-thin) solid color-mix(in srgb, var(--color-primary-500) 30%, var(--color-border));
|
|
845
|
+
transform: translateY(calc((var(--range-track-height, 8px) - var(--range-thumb-size, 28px)) / 2));
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
/* Hover and focus states for WebKit */
|
|
849
|
+
&:hover::-webkit-slider-thumb,
|
|
850
|
+
&:focus-visible::-webkit-slider-thumb {
|
|
851
|
+
cursor: grabbing;
|
|
852
|
+
background: var(--color-primary-500);
|
|
853
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
854
|
+
border-color: var(--color-primary-600);
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
/* Active state for WebKit */
|
|
858
|
+
&:active::-webkit-slider-thumb {
|
|
859
|
+
background: var(--color-primary-600);
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
/* Hover and focus states for Mozilla */
|
|
863
|
+
&:hover::-moz-range-thumb,
|
|
864
|
+
&:focus-visible::-moz-range-thumb {
|
|
865
|
+
background: var(--color-primary-500);
|
|
866
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
867
|
+
border-color: var(--color-primary-600);
|
|
868
|
+
cursor: grabbing;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
/* Active state for Mozilla */
|
|
872
|
+
&:active::-moz-range-thumb {
|
|
873
|
+
background: var(--color-primary-600);
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
/* Focus style for container to match input focus */
|
|
878
|
+
.range-container:focus-within {
|
|
879
|
+
border-color: var(--color-primary-500);
|
|
880
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
input[type="range"]:active::-moz-range-thumb {
|
|
884
|
+
background: var(--color-primary-600);
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
input[type="color"] {
|
|
888
|
+
-webkit-appearance: none;
|
|
889
|
+
appearance: none;
|
|
890
|
+
padding: 0;
|
|
891
|
+
width: calc(var(--spacing-8) + var(--spacing-1));
|
|
892
|
+
height: calc(var(--spacing-8) + var(--spacing-1));
|
|
893
|
+
min-height: auto;
|
|
894
|
+
border-radius: var(--radius-sm);
|
|
895
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
896
|
+
overflow: hidden;
|
|
897
|
+
cursor: pointer;
|
|
898
|
+
background: transparent;
|
|
899
|
+
|
|
900
|
+
&::-webkit-color-swatch-wrapper {
|
|
901
|
+
padding: 0;
|
|
902
|
+
border-radius: inherit;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
&::-webkit-color-swatch {
|
|
906
|
+
border: none;
|
|
907
|
+
border-radius: inherit;
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
&::-moz-color-swatch {
|
|
911
|
+
border: none;
|
|
912
|
+
border-radius: inherit;
|
|
913
|
+
}
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
/* Button-style checkbox inputs outside of fieldsets */
|
|
917
|
+
.checkbox-container input[type="checkbox"] {
|
|
918
|
+
appearance: none;
|
|
919
|
+
-webkit-appearance: none;
|
|
920
|
+
-moz-appearance: none;
|
|
921
|
+
position: absolute;
|
|
922
|
+
opacity: 0;
|
|
923
|
+
width: 0;
|
|
924
|
+
height: 0;
|
|
925
|
+
margin: 0;
|
|
926
|
+
padding: 0;
|
|
927
|
+
pointer-events: none;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
label:has(input[type="checkbox"]):not(fieldset label):not(label[data-toggle]),
|
|
931
|
+
input[type="checkbox"] + label:not(fieldset label):not(label[data-toggle]) {
|
|
932
|
+
display: inline-flex;
|
|
933
|
+
align-items: center;
|
|
934
|
+
justify-content: center;
|
|
935
|
+
min-height: calc(${m}px * 0.75);
|
|
936
|
+
padding: calc(var(--spacing-1) * ${g*.6}) calc(var(--spacing-4) * 0.85);
|
|
937
|
+
border: var(--border-width-medium) solid var(--color-border);
|
|
938
|
+
border-radius: var(--radius-md);
|
|
939
|
+
font-family: var(--font-family-body);
|
|
940
|
+
font-size: var(--font-size-sm);
|
|
941
|
+
font-weight: var(--font-weight-medium);
|
|
942
|
+
line-height: 1.2;
|
|
943
|
+
cursor: pointer;
|
|
944
|
+
transition: all var(--transition-fast);
|
|
945
|
+
text-decoration: none;
|
|
946
|
+
touch-action: manipulation;
|
|
947
|
+
user-select: none;
|
|
948
|
+
background-color: transparent;
|
|
949
|
+
color: var(--color-text-primary);
|
|
950
|
+
margin: 0;
|
|
951
|
+
flex: 0 1 auto;
|
|
952
|
+
white-space: nowrap;
|
|
953
|
+
|
|
954
|
+
&:hover {
|
|
955
|
+
background-color: var(--color-surface-subtle);
|
|
956
|
+
border-color: var(--color-primary-500);
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
label:has(input[type="checkbox"]:checked):not(fieldset label):not(label[data-toggle]),
|
|
961
|
+
input[type="checkbox"]:checked + label:not(fieldset label):not(label[data-toggle]) {
|
|
962
|
+
background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
|
|
963
|
+
color: var(--color-primary-700);
|
|
964
|
+
border-color: var(--color-primary-500);
|
|
965
|
+
border-width: var(--border-width-medium);
|
|
966
|
+
font-weight: var(--font-weight-semibold);
|
|
967
|
+
|
|
968
|
+
&:hover {
|
|
969
|
+
background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
|
|
970
|
+
border-color: var(--color-primary-600);
|
|
971
|
+
}
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
label:has(input[type="checkbox"]:focus):not(fieldset label):not(label[data-toggle]),
|
|
975
|
+
input[type="checkbox"]:focus + label:not(fieldset label):not(label[data-toggle]) {
|
|
976
|
+
outline: none;
|
|
977
|
+
box-shadow: 0 0 0 ${h}px color-mix(in oklab, var(--color-primary-500) ${Math.round((i||.3)*100)}%, transparent);
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
label:has(input[type="checkbox"]:disabled):not(fieldset label):not(label[data-toggle]),
|
|
981
|
+
input[type="checkbox"]:disabled + label:not(fieldset label):not(label[data-toggle]) {
|
|
982
|
+
background-color: var(--color-input-disabled-bg);
|
|
983
|
+
color: var(--color-input-disabled-text);
|
|
984
|
+
border-color: var(--color-border);
|
|
985
|
+
cursor: not-allowed;
|
|
986
|
+
opacity: 0.6;
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
label:has(input[type="checkbox"]:checked:disabled):not(fieldset label):not(label[data-toggle]),
|
|
990
|
+
input[type="checkbox"]:checked:disabled + label:not(fieldset label):not(label[data-toggle]) {
|
|
991
|
+
background-color: var(--color-input-disabled-bg);
|
|
992
|
+
color: var(--color-input-disabled-text);
|
|
993
|
+
border-color: var(--color-border);
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
/* Keep default checkbox/radio for inputs NOT in special containers */
|
|
997
|
+
input[type="checkbox"]:not(fieldset input[type="checkbox"]):not(.checkbox-container input[type="checkbox"]),
|
|
998
|
+
input[type="radio"]:not(fieldset input[type="radio"]) {
|
|
999
|
+
width: var(--spacing-5);
|
|
1000
|
+
height: var(--spacing-5);
|
|
1001
|
+
min-height: var(--spacing-5);
|
|
1002
|
+
margin-right: var(--spacing-2);
|
|
1003
|
+
cursor: pointer;
|
|
1004
|
+
position: static;
|
|
1005
|
+
opacity: 1;
|
|
1006
|
+
appearance: auto;
|
|
1007
|
+
-webkit-appearance: auto;
|
|
1008
|
+
|
|
1009
|
+
&:disabled {
|
|
1010
|
+
cursor: not-allowed;
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
/* Button-style radio and checkbox groups with .buttons class */
|
|
1015
|
+
fieldset[role="radiogroup"].buttons,
|
|
1016
|
+
fieldset[role="group"].buttons {
|
|
1017
|
+
flex-direction: row;
|
|
1018
|
+
flex-wrap: wrap;
|
|
1019
|
+
gap: var(--spacing-3);
|
|
1020
|
+
|
|
1021
|
+
input[type="radio"],
|
|
1022
|
+
input[type="checkbox"] {
|
|
1023
|
+
appearance: none;
|
|
1024
|
+
-webkit-appearance: none;
|
|
1025
|
+
-moz-appearance: none;
|
|
1026
|
+
position: absolute;
|
|
1027
|
+
opacity: 0;
|
|
1028
|
+
width: 0;
|
|
1029
|
+
height: 0;
|
|
1030
|
+
margin: 0;
|
|
1031
|
+
padding: 0;
|
|
1032
|
+
pointer-events: none;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
label {
|
|
1036
|
+
display: inline-flex;
|
|
1037
|
+
align-items: center;
|
|
1038
|
+
justify-content: center;
|
|
1039
|
+
min-height: calc(${m}px * 0.75);
|
|
1040
|
+
padding: calc(var(--spacing-1) * ${g*.6}) calc(var(--spacing-4) * 0.85);
|
|
1041
|
+
border: var(--border-width-medium) solid var(--color-border);
|
|
1042
|
+
border-radius: var(--radius-md);
|
|
1043
|
+
font-family: var(--font-family-body);
|
|
1044
|
+
font-size: var(--font-size-sm);
|
|
1045
|
+
font-weight: var(--font-weight-medium);
|
|
1046
|
+
line-height: 1.2;
|
|
1047
|
+
cursor: pointer;
|
|
1048
|
+
transition: all var(--transition-fast);
|
|
1049
|
+
text-decoration: none;
|
|
1050
|
+
touch-action: manipulation;
|
|
1051
|
+
user-select: none;
|
|
1052
|
+
background-color: transparent;
|
|
1053
|
+
color: var(--color-text-primary);
|
|
1054
|
+
margin: 0;
|
|
1055
|
+
flex: 0 1 auto;
|
|
1056
|
+
white-space: nowrap;
|
|
1057
|
+
|
|
1058
|
+
&:hover {
|
|
1059
|
+
background-color: var(--color-surface-subtle);
|
|
1060
|
+
border-color: var(--color-primary-500);
|
|
1061
|
+
color: var(--color-text-primary);
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
&:has([disabled]){
|
|
1065
|
+
pointer-events: none;
|
|
1066
|
+
}
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
label:has(input[type="radio"]:checked),
|
|
1070
|
+
label:has(input[type="checkbox"]:checked) {
|
|
1071
|
+
background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
|
|
1072
|
+
border-color: var(--color-primary-500);
|
|
1073
|
+
border-width: var(--border-width-medium);
|
|
1074
|
+
font-weight: var(--font-weight-semibold);
|
|
1075
|
+
|
|
1076
|
+
&:hover {
|
|
1077
|
+
background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
|
|
1078
|
+
border-color: var(--color-primary-600);
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
label:has(input[type="radio"]:focus),
|
|
1083
|
+
label:has(input[type="checkbox"]:focus) {
|
|
1084
|
+
outline: none;
|
|
1085
|
+
box-shadow: 0 0 0 ${h}px color-mix(in oklab, var(--color-primary-500) ${Math.round((i||.3)*100)}%, transparent);
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
label:has(input[type="radio"]:disabled),
|
|
1089
|
+
label:has(input[type="checkbox"]:disabled) {
|
|
1090
|
+
background-color: var(--color-input-disabled-bg);
|
|
1091
|
+
color: var(--color-input-disabled-text);
|
|
1092
|
+
border-color: var(--color-border);
|
|
1093
|
+
cursor: not-allowed;
|
|
1094
|
+
opacity: 0.6;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
label:has(input[type="radio"]:checked:disabled),
|
|
1098
|
+
label:has(input[type="checkbox"]:checked:disabled) {
|
|
1099
|
+
background-color: var(--color-input-disabled-bg);
|
|
1100
|
+
color: var(--color-input-disabled-text);
|
|
1101
|
+
border-color: var(--color-border);
|
|
1102
|
+
}
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
/* Toggle switches - enhanced checkboxes with data-toggle attribute */
|
|
1106
|
+
label[data-toggle] {
|
|
1107
|
+
display: inline-flex;
|
|
1108
|
+
align-items: normal;
|
|
1109
|
+
gap: var(--spacing-3);
|
|
1110
|
+
cursor: pointer;
|
|
1111
|
+
user-select: none;
|
|
1112
|
+
padding: 0;
|
|
1113
|
+
background: transparent;
|
|
1114
|
+
border: none;
|
|
1115
|
+
min-height: auto;
|
|
1116
|
+
font-weight: var(--font-weight-normal);
|
|
1117
|
+
|
|
1118
|
+
/* Hide the original checkbox in toggle switches */
|
|
1119
|
+
input[type="checkbox"] {
|
|
1120
|
+
display: none;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
/* Toggle switch container */
|
|
1124
|
+
.toggle-switch {
|
|
1125
|
+
position: relative;
|
|
1126
|
+
display: inline-block;
|
|
1127
|
+
width: 44px;
|
|
1128
|
+
height: 24px;
|
|
1129
|
+
background-color: var(--color-gray-300);
|
|
1130
|
+
border-radius: var(--radius-full);
|
|
1131
|
+
transition: background-color 200ms ease;
|
|
1132
|
+
cursor: pointer;
|
|
1133
|
+
flex-shrink: 0;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
/* Toggle switch knob */
|
|
1137
|
+
.toggle-knob {
|
|
1138
|
+
position: absolute;
|
|
1139
|
+
top: 2px;
|
|
1140
|
+
left: 2px;
|
|
1141
|
+
width: 20px;
|
|
1142
|
+
height: 20px;
|
|
1143
|
+
background-color: #ffffff;
|
|
1144
|
+
border-radius: 50%;
|
|
1145
|
+
transition: left 200ms ease;
|
|
1146
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
/* Icons in toggle knob (opt-in via .with-icons class) */
|
|
1150
|
+
&.with-icons .toggle-knob::before {
|
|
1151
|
+
content: "\u2715";
|
|
1152
|
+
position: absolute;
|
|
1153
|
+
inset: 0;
|
|
1154
|
+
display: flex;
|
|
1155
|
+
align-items: center;
|
|
1156
|
+
justify-content: center;
|
|
1157
|
+
font-size: 12px;
|
|
1158
|
+
font-weight: bold;
|
|
1159
|
+
color: var(--color-gray-600);
|
|
1160
|
+
transition: opacity 200ms ease;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
&.with-icons:has(input[type="checkbox"]:checked) .toggle-knob::before {
|
|
1164
|
+
content: "\u2713";
|
|
1165
|
+
color: var(--color-primary-600);
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
/* Toggle switch when checked - using :has() selector */
|
|
1169
|
+
&:has(input[type="checkbox"]:checked) .toggle-switch {
|
|
1170
|
+
background-color: var(--color-primary-fill);
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
|
|
1174
|
+
/* Toggle knob when checked - always moves to the right */
|
|
1175
|
+
&:has(input[type="checkbox"]:checked) .toggle-knob {
|
|
1176
|
+
left: 22px;
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
/* Focus state for toggle switch */
|
|
1180
|
+
&:has(input[type="checkbox"]:focus) .toggle-switch {
|
|
1181
|
+
outline: 2px solid var(--color-primary-500);
|
|
1182
|
+
outline-offset: 2px;
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
/* Focus visible state when label is focused via keyboard */
|
|
1186
|
+
&:focus-visible .toggle-switch {
|
|
1187
|
+
outline: 2px solid var(--color-primary-500);
|
|
1188
|
+
outline-offset: 2px;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
/* Remove default outline on label itself */
|
|
1192
|
+
&:focus {
|
|
1193
|
+
outline: none;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
/* Disabled state */
|
|
1197
|
+
&:has(input[type="checkbox"]:disabled) {
|
|
1198
|
+
cursor: not-allowed;
|
|
1199
|
+
opacity: 0.6;
|
|
1200
|
+
|
|
1201
|
+
.toggle-switch {
|
|
1202
|
+
opacity: 0.5;
|
|
1203
|
+
cursor: not-allowed;
|
|
1204
|
+
}
|
|
1205
|
+
}
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
/* Color input enhancement shell - applied by enhanceColorInput on label[data-color] */
|
|
1209
|
+
label[data-color] {
|
|
1210
|
+
display: grid;
|
|
1211
|
+
gap: var(--spacing-2);
|
|
1212
|
+
|
|
1213
|
+
.color-control {
|
|
1214
|
+
display: inline-flex;
|
|
1215
|
+
align-items: center;
|
|
1216
|
+
gap: var(--spacing-3);
|
|
1217
|
+
width: fit-content;
|
|
1218
|
+
min-height: var(--input-min-height, 40px);
|
|
1219
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
1220
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1221
|
+
border-radius: var(--radius-md);
|
|
1222
|
+
background: var(--color-surface-base);
|
|
1223
|
+
color: var(--color-text-primary);
|
|
1224
|
+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
.color-control .color-swatch {
|
|
1228
|
+
position: relative;
|
|
1229
|
+
display: inline-flex;
|
|
1230
|
+
width: calc(var(--spacing-8) + var(--spacing-1));
|
|
1231
|
+
height: calc(var(--spacing-8) + var(--spacing-1));
|
|
1232
|
+
border-radius: var(--radius-sm);
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.color-control output {
|
|
1236
|
+
margin: 0;
|
|
1237
|
+
min-width: 8ch;
|
|
1238
|
+
font-family: var(--font-family-mono);
|
|
1239
|
+
font-size: var(--font-size-sm);
|
|
1240
|
+
line-height: var(--font-line-height-tight);
|
|
1241
|
+
color: var(--color-text-secondary);
|
|
1242
|
+
text-transform: lowercase;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
.color-control[data-unset="1"] output {
|
|
1246
|
+
font-style: italic;
|
|
1247
|
+
color: var(--color-text-muted);
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
.color-control input[type="color"] {
|
|
1251
|
+
width: calc(var(--spacing-8) + var(--spacing-1));
|
|
1252
|
+
height: calc(var(--spacing-8) + var(--spacing-1));
|
|
1253
|
+
border-radius: var(--radius-sm);
|
|
1254
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1255
|
+
background: transparent;
|
|
1256
|
+
padding: 0;
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
.color-control input[type="color"]::-webkit-color-swatch {
|
|
1260
|
+
border: none;
|
|
1261
|
+
border-radius: calc(var(--radius-sm) - var(--border-width-thin));
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
.color-control input[type="color"]::-moz-color-swatch {
|
|
1265
|
+
border: none;
|
|
1266
|
+
border-radius: calc(var(--radius-sm) - var(--border-width-thin));
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1269
|
+
.color-control .color-swatch[data-unset="1"]::after {
|
|
1270
|
+
content: "";
|
|
1271
|
+
position: absolute;
|
|
1272
|
+
inset: 0;
|
|
1273
|
+
border-radius: var(--radius-sm);
|
|
1274
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1275
|
+
background-color: color-mix(in oklab, var(--color-surface-subtle) 78%, var(--color-text-primary) 22%);
|
|
1276
|
+
background-image:
|
|
1277
|
+
linear-gradient(
|
|
1278
|
+
45deg,
|
|
1279
|
+
color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 25%,
|
|
1280
|
+
transparent 25%,
|
|
1281
|
+
transparent 75%,
|
|
1282
|
+
color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 75%,
|
|
1283
|
+
color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%)
|
|
1284
|
+
),
|
|
1285
|
+
linear-gradient(
|
|
1286
|
+
45deg,
|
|
1287
|
+
color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 25%,
|
|
1288
|
+
transparent 25%,
|
|
1289
|
+
transparent 75%,
|
|
1290
|
+
color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%) 75%,
|
|
1291
|
+
color-mix(in oklab, var(--color-surface-base) 88%, var(--color-text-primary) 12%)
|
|
1292
|
+
);
|
|
1293
|
+
background-size: calc(var(--spacing-2) * 1.25) calc(var(--spacing-2) * 1.25);
|
|
1294
|
+
background-position:
|
|
1295
|
+
0 0,
|
|
1296
|
+
calc(var(--spacing-2) * 0.625) calc(var(--spacing-2) * 0.625);
|
|
1297
|
+
pointer-events: none;
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
.color-control .color-swatch[data-unset="1"] input[type="color"] {
|
|
1301
|
+
opacity: 0;
|
|
1302
|
+
}
|
|
1303
|
+
|
|
1304
|
+
&:focus-within .color-control {
|
|
1305
|
+
border-color: var(--color-primary-500);
|
|
1306
|
+
box-shadow: 0 0 0 ${h}px color-mix(in oklab, var(--color-primary-500) ${Math.round((i||.3)*100)}%, transparent);
|
|
1307
|
+
}
|
|
1308
|
+
|
|
1309
|
+
&:has(input[type="color"]:disabled) .color-control {
|
|
1310
|
+
background: var(--color-input-disabled-bg);
|
|
1311
|
+
color: var(--color-input-disabled-text);
|
|
1312
|
+
cursor: not-allowed;
|
|
1313
|
+
}
|
|
1314
|
+
}
|
|
1315
|
+
|
|
1316
|
+
input[type="file"] {
|
|
1317
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
1318
|
+
cursor: pointer;
|
|
1319
|
+
}
|
|
1320
|
+
|
|
1321
|
+
/* Textareas */
|
|
1322
|
+
textarea {
|
|
1323
|
+
min-height: calc(var(--spacing-4) * 5);
|
|
1324
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
1325
|
+
resize: vertical;
|
|
1326
|
+
line-height: var(--font-line-height-relaxed);
|
|
1327
|
+
}
|
|
1328
|
+
|
|
1329
|
+
/* Select dropdowns */
|
|
1330
|
+
select {
|
|
1331
|
+
cursor: pointer;
|
|
1332
|
+
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");
|
|
1333
|
+
background-position: right var(--spacing-2) center;
|
|
1334
|
+
background-repeat: no-repeat;
|
|
1335
|
+
background-size: 1.5em 1.5em;
|
|
1336
|
+
padding-right: var(--spacing-8);
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
/* Button styling */
|
|
1340
|
+
button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
|
|
1341
|
+
display: inline-flex;
|
|
1342
|
+
gap: var(--spacing-1);
|
|
1343
|
+
align-items: center;
|
|
1344
|
+
justify-content: center;
|
|
1345
|
+
min-height: ${m}px;
|
|
1346
|
+
padding: calc(var(--spacing-1) * ${g}) var(--spacing-6);
|
|
1347
|
+
border: var(--border-width-medium) solid transparent;
|
|
1348
|
+
border-radius: var(--radius-md);
|
|
1349
|
+
font-family: var(--font-family-body);
|
|
1350
|
+
font-size: var(--font-size-base);
|
|
1351
|
+
font-weight: var(--font-weight-medium);
|
|
1352
|
+
line-height: 1;
|
|
1353
|
+
cursor: pointer;
|
|
1354
|
+
transition: all var(--transition-fast);
|
|
1355
|
+
text-decoration: none;
|
|
1356
|
+
touch-action: manipulation;
|
|
1357
|
+
user-select: none;
|
|
1358
|
+
background-color: var(--color-surface-base);
|
|
1359
|
+
color: var(--color-text-primary);
|
|
1360
|
+
border-color: var(--color-border);
|
|
1361
|
+
|
|
1362
|
+
/* Only apply generic hover to non-variant buttons */
|
|
1363
|
+
&:hover:not(.btn-primary):not(.btn-secondary):not(.btn-outline) {
|
|
1364
|
+
background-color: var(--color-surface-elevated);
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
&:focus {
|
|
1368
|
+
outline: none;
|
|
1369
|
+
box-shadow: 0 0 0 ${h}px color-mix(in oklab, var(--color-primary-500) ${Math.round((i||.3)*100)}%, transparent);
|
|
1370
|
+
}
|
|
1371
|
+
|
|
1372
|
+
&:disabled {
|
|
1373
|
+
background-color: var(--color-input-disabled-bg);
|
|
1374
|
+
color: var(--color-input-disabled-text);
|
|
1375
|
+
border-color: var(--color-input-disabled-bg);
|
|
1376
|
+
cursor: not-allowed;
|
|
1377
|
+
opacity: 0.6;
|
|
1378
|
+
}
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
.btn-primary {
|
|
1382
|
+
background-color: var(--color-primary-fill);
|
|
1383
|
+
color: white;
|
|
1384
|
+
border-color: var(--color-primary-fill);
|
|
1385
|
+
|
|
1386
|
+
&:hover {
|
|
1387
|
+
background-color: color-mix(in oklab, var(--color-primary-fill) 90%, black 10%);
|
|
1388
|
+
border-color: color-mix(in oklab, var(--color-primary-fill) 90%, black 10%);
|
|
1389
|
+
color: white;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
&:active {
|
|
1393
|
+
background-color: color-mix(in oklab, var(--color-primary-fill) 80%, black 20%);
|
|
1394
|
+
border-color: color-mix(in oklab, var(--color-primary-fill) 80%, black 20%);
|
|
1395
|
+
color: white;
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
&:focus {
|
|
1399
|
+
box-shadow: 0 0 0 ${h}px color-mix(in oklab, var(--color-primary-500) ${Math.round((i||.3)*100)}%, transparent);
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
&:disabled {
|
|
1403
|
+
background-color: var(--color-input-disabled-bg);
|
|
1404
|
+
color: var(--color-input-disabled-text);
|
|
1405
|
+
border-color: var(--color-input-disabled-bg);
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
|
|
1409
|
+
.btn-secondary {
|
|
1410
|
+
background-color: var(--color-surface-base);
|
|
1411
|
+
color: var(--color-text-primary);
|
|
1412
|
+
border-color: var(--color-border);
|
|
1413
|
+
|
|
1414
|
+
&:hover {
|
|
1415
|
+
background-color: var(--color-surface-elevated);
|
|
1416
|
+
}
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
.btn-outline {
|
|
1420
|
+
background-color: transparent;
|
|
1421
|
+
color: var(--color-primary-500);
|
|
1422
|
+
border-color: var(--color-primary-500);
|
|
1423
|
+
|
|
1424
|
+
&:hover {
|
|
1425
|
+
background-color: var(--color-primary-500);
|
|
1426
|
+
color: var(--color-primary-contrast, #ffffff);
|
|
1427
|
+
border-color: var(--color-primary-500);
|
|
1428
|
+
|
|
1429
|
+
pds-icon {
|
|
1430
|
+
color: var(--color-primary-contrast, #ffffff);
|
|
1431
|
+
}
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
&:active {
|
|
1435
|
+
background-color: color-mix(in oklab, var(--color-primary-500) 80%, black 20%);
|
|
1436
|
+
border-color: color-mix(in oklab, var(--color-primary-500) 80%, black 20%);
|
|
1437
|
+
color: var(--color-primary-contrast, #ffffff);
|
|
1438
|
+
|
|
1439
|
+
pds-icon {
|
|
1440
|
+
color: var(--color-primary-contrast, #ffffff);
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
&:disabled {
|
|
1445
|
+
background-color: transparent;
|
|
1446
|
+
color: var(--color-input-disabled-text);
|
|
1447
|
+
border-color: var(--color-input-disabled-bg);
|
|
1448
|
+
}
|
|
1449
|
+
}
|
|
1450
|
+
|
|
1451
|
+
.btn-sm {
|
|
1452
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
1453
|
+
font-size: var(--font-size-sm);
|
|
1454
|
+
min-height: calc(${m}px * 0.8);
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
.btn-xs {
|
|
1458
|
+
padding: var(--spacing-1) var(--spacing-2);
|
|
1459
|
+
font-size: var(--font-size-xs);
|
|
1460
|
+
min-height: calc(${m}px * 0.6);
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1463
|
+
|
|
1464
|
+
.btn-lg {
|
|
1465
|
+
padding: var(--spacing-4) var(--spacing-8);
|
|
1466
|
+
font-size: var(--font-size-lg);
|
|
1467
|
+
min-height: calc(${m}px * 1.2);
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1470
|
+
/* Working/loading state for buttons */
|
|
1471
|
+
button.btn-working,
|
|
1472
|
+
a.btn-working {
|
|
1473
|
+
cursor: wait;
|
|
1474
|
+
pointer-events: none;
|
|
1475
|
+
opacity: 0.6;
|
|
1476
|
+
|
|
1477
|
+
pds-icon:first-child {
|
|
1478
|
+
animation: pds-spin 0.8s linear infinite;
|
|
1479
|
+
}
|
|
1480
|
+
}
|
|
1481
|
+
|
|
1482
|
+
@keyframes pds-spin {
|
|
1483
|
+
to { transform: rotate(360deg); }
|
|
1484
|
+
}
|
|
1485
|
+
|
|
1486
|
+
/* Skeleton loading animation */
|
|
1487
|
+
.skeleton {
|
|
1488
|
+
background: linear-gradient(
|
|
1489
|
+
90deg,
|
|
1490
|
+
color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-primary) 8%) 0%,
|
|
1491
|
+
color-mix(in oklab, var(--color-surface-base) 85%, var(--color-text-primary) 15%) 50%,
|
|
1492
|
+
color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-primary) 8%) 100%
|
|
1493
|
+
);
|
|
1494
|
+
background-size: 200% 100%;
|
|
1495
|
+
animation: pds-skeleton 1.5s ease-in-out infinite;
|
|
1496
|
+
border-radius: var(--radius-sm);
|
|
1497
|
+
|
|
1498
|
+
&::before {
|
|
1499
|
+
content: '\\00a0';
|
|
1500
|
+
}
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
@keyframes pds-skeleton {
|
|
1504
|
+
0% { background-position: 200% 0; }
|
|
1505
|
+
100% { background-position: -200% 0; }
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1508
|
+
/* Empty State */
|
|
1509
|
+
.empty-state {
|
|
1510
|
+
margin: auto;
|
|
1511
|
+
text-align: center;
|
|
1512
|
+
display: flex;
|
|
1513
|
+
flex-direction: column;
|
|
1514
|
+
align-items: center;
|
|
1515
|
+
gap: var(--spacing-4);
|
|
1516
|
+
color: var(--color-text-secondary);
|
|
1517
|
+
padding: var(--spacing-6) var(--spacing-4);
|
|
1518
|
+
background-color: var(--color-surface-subtle);
|
|
1519
|
+
max-width: var(--layout-max-width-md, 736px);
|
|
1520
|
+
border-radius: var(--radius-md);
|
|
1521
|
+
nav {
|
|
1522
|
+
margin-top: var(--spacing-4);
|
|
1523
|
+
display: flex;
|
|
1524
|
+
gap: var(--spacing-3);
|
|
1525
|
+
}
|
|
1526
|
+
pds-icon {
|
|
1527
|
+
color: var(--color-text-muted);
|
|
1528
|
+
}
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
/* clip lines */
|
|
1532
|
+
|
|
1533
|
+
[data-clip] {
|
|
1534
|
+
display: -webkit-box;
|
|
1535
|
+
-webkit-box-orient: vertical;
|
|
1536
|
+
overflow: hidden;
|
|
1537
|
+
-webkit-line-clamp: attr(data-clip number, 3);
|
|
1538
|
+
line-clamp: attr(data-clip number, 3);
|
|
1539
|
+
position: relative;
|
|
1540
|
+
padding-inline-end: var(--spacing-6);
|
|
1541
|
+
--clip-more-bg: var(--color-surface-base);
|
|
1542
|
+
max-height: var(--clip-max-height-closed, calc(var(--spacing-12) * 3));
|
|
1543
|
+
transition: max-height var(--transition-fast), padding-inline-end var(--transition-fast);
|
|
1544
|
+
overflow: hidden;
|
|
1545
|
+
|
|
1546
|
+
/* optional visual \u201Cmore\u201D hint*/
|
|
1547
|
+
&:not([data-clip-open="true"])[data-clip-more]::after{
|
|
1548
|
+
content: attr(data-clip-more);
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
&:not([data-clip-open="true"]):not([data-clip-more])::after{
|
|
1552
|
+
content: "more...";
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
/* optional visual \u201Cless\u201D hint*/
|
|
1556
|
+
&[data-clip-open="true"][data-clip-less]::after{
|
|
1557
|
+
content: attr(data-clip-less);
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
&[data-clip-open="true"]:not([data-clip-less])::after{
|
|
1561
|
+
content: "less...";
|
|
1562
|
+
}
|
|
1563
|
+
|
|
1564
|
+
&::after{
|
|
1565
|
+
position: absolute;
|
|
1566
|
+
inset-block-end: 0;
|
|
1567
|
+
inset-inline-end: 0;
|
|
1568
|
+
display: inline-flex;
|
|
1569
|
+
align-items: center;
|
|
1570
|
+
padding: var
|
|
1571
|
+
padding-inline-start: var(--spacing-2);
|
|
1572
|
+
cursor: pointer;
|
|
1573
|
+
opacity: .7;
|
|
1574
|
+
transition: opacity var(--transition-fast), transform var(--transition-fast);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
&[data-clip-open="true"] {
|
|
1578
|
+
-webkit-line-clamp: unset;
|
|
1579
|
+
line-clamp: unset;
|
|
1580
|
+
max-height: var(--clip-max-height-open, calc(var(--spacing-12) * 20));
|
|
1581
|
+
padding-inline-end: var(--spacing-6);
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
&[data-clip-open="true"]::after{
|
|
1585
|
+
opacity: .9;
|
|
1586
|
+
transform: translateY(calc(var(--spacing-1) * -1));
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
|
|
1592
|
+
|
|
1593
|
+
/* Form utility classes */
|
|
1594
|
+
.range-container {
|
|
1595
|
+
display: flex;
|
|
1596
|
+
align-items: center;
|
|
1597
|
+
gap: var(--spacing-3);
|
|
1598
|
+
width: 100%;
|
|
1599
|
+
background: var(--color-input-bg);
|
|
1600
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1601
|
+
border-radius: var(--radius-md);
|
|
1602
|
+
min-height: var(--input-min-height, 40px);
|
|
1603
|
+
position: relative;
|
|
1604
|
+
|
|
1605
|
+
input[type="range"] {
|
|
1606
|
+
border: none;
|
|
1607
|
+
}
|
|
1608
|
+
}
|
|
1609
|
+
|
|
1610
|
+
.range-bubble {
|
|
1611
|
+
position: absolute;
|
|
1612
|
+
top: calc(-1 * (var(--range-thumb-size, 28px) + var(--spacing-2)));
|
|
1613
|
+
transform: translateX(-50%);
|
|
1614
|
+
min-width: calc(var(--range-thumb-size, 28px) * 0.8);
|
|
1615
|
+
padding: var(--spacing-1) var(--spacing-2);
|
|
1616
|
+
border-radius: var(--radius-md);
|
|
1617
|
+
background: var(--color-surface-base);
|
|
1618
|
+
color: var(--color-text-primary);
|
|
1619
|
+
text-align: center;
|
|
1620
|
+
font-size: var(--font-size-sm);
|
|
1621
|
+
box-shadow: var(--shadow-md);
|
|
1622
|
+
opacity: 0;
|
|
1623
|
+
pointer-events: none;
|
|
1624
|
+
transition: opacity 150ms ease, transform 150ms ease;
|
|
1625
|
+
|
|
1626
|
+
&.visible {
|
|
1627
|
+
opacity: 1;
|
|
1628
|
+
}
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
/* Anchor bubble to the thumb position using left (set by enhancer)
|
|
1632
|
+
and center with translateX(-50%). */
|
|
1633
|
+
|
|
1634
|
+
/* Array field styling */
|
|
1635
|
+
.array-list {
|
|
1636
|
+
display: flex;
|
|
1637
|
+
flex-direction: column;
|
|
1638
|
+
gap: var(--spacing-4);
|
|
1639
|
+
margin-bottom: var(--spacing-4);
|
|
1640
|
+
}
|
|
1641
|
+
|
|
1642
|
+
.array-item {
|
|
1643
|
+
position: relative;
|
|
1644
|
+
padding: var(--spacing-4);
|
|
1645
|
+
border: var(--border-width-medium) solid var(--color-border);
|
|
1646
|
+
border-radius: var(--radius-md);
|
|
1647
|
+
background-color: var(--color-surface-base);
|
|
1648
|
+
|
|
1649
|
+
.array-controls {
|
|
1650
|
+
padding-top: var(--spacing-3);
|
|
1651
|
+
border-top: var(--border-width-medium) solid var(--color-border);
|
|
1652
|
+
margin-top: var(--spacing-4);
|
|
1653
|
+
}
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.array-controls {
|
|
1657
|
+
display: flex;
|
|
1658
|
+
gap: var(--spacing-2);
|
|
1659
|
+
margin-top: var(--spacing-3);
|
|
1660
|
+
flex-wrap: wrap;
|
|
1661
|
+
|
|
1662
|
+
button {
|
|
1663
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
1664
|
+
font-size: var(--font-size-sm);
|
|
1665
|
+
min-height: auto;
|
|
1666
|
+
}
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
.range-value {
|
|
1670
|
+
min-width: var(--spacing-16);
|
|
1671
|
+
text-align: right;
|
|
1672
|
+
font-weight: var(--font-weight-medium);
|
|
1673
|
+
font-size: var(--font-size-sm);
|
|
1674
|
+
color: var(--color-text-primary);
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
.checkbox-container {
|
|
1678
|
+
display: flex;
|
|
1679
|
+
flex-direction: row;
|
|
1680
|
+
align-items: center;
|
|
1681
|
+
gap: var(--spacing-2);
|
|
1682
|
+
flex-wrap: wrap;
|
|
1683
|
+
|
|
1684
|
+
input[type="checkbox"],
|
|
1685
|
+
input[type="radio"] {
|
|
1686
|
+
position: absolute;
|
|
1687
|
+
opacity: 0;
|
|
1688
|
+
}
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
`}#pe(){let{layout:e={}}=this.options.design,t=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280};return`/* Table Styles - Mobile First */
|
|
1692
|
+
|
|
1693
|
+
table {
|
|
1694
|
+
width: 100%;
|
|
1695
|
+
border-collapse: collapse;
|
|
1696
|
+
margin: 0 0 var(--spacing-6) 0;
|
|
1697
|
+
background-color: var(--color-surface-base);
|
|
1698
|
+
border-radius: var(--radius-md);
|
|
1699
|
+
overflow: hidden;
|
|
1700
|
+
font-size: var(--font-size-sm);
|
|
1701
|
+
|
|
1702
|
+
@media (min-width: ${t.sm}px) {
|
|
1703
|
+
font-size: var(--font-size-base);
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1707
|
+
.table-responsive {
|
|
1708
|
+
@media (max-width: ${t.sm-1}px) {
|
|
1709
|
+
overflow-x: auto;
|
|
1710
|
+
-webkit-overflow-scrolling: touch;
|
|
1711
|
+
margin: 0 0 var(--spacing-6) 0;
|
|
1712
|
+
|
|
1713
|
+
table {
|
|
1714
|
+
min-width: 600px;
|
|
1715
|
+
margin: 0;
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
thead {
|
|
1721
|
+
background-color: var(--color-surface-subtle);
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1724
|
+
th {
|
|
1725
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
1726
|
+
text-align: left;
|
|
1727
|
+
font-weight: var(--font-weight-semibold);
|
|
1728
|
+
color: var(--color-text-primary);
|
|
1729
|
+
border-bottom: var(--border-width-medium) solid var(--color-border);
|
|
1730
|
+
}
|
|
1731
|
+
|
|
1732
|
+
td {
|
|
1733
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
1734
|
+
color: var(--color-text-secondary);
|
|
1735
|
+
border-bottom: var(--border-width-thin) solid var(--color-border);
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
tbody {
|
|
1739
|
+
tr {
|
|
1740
|
+
transition: background-color var(--transition-fast);
|
|
1741
|
+
|
|
1742
|
+
&:hover {
|
|
1743
|
+
background-color: var(--color-surface-subtle);
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1746
|
+
&:last-child td {
|
|
1747
|
+
border-bottom: none;
|
|
1748
|
+
}
|
|
1749
|
+
}
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1752
|
+
.table-striped {
|
|
1753
|
+
tbody tr:nth-child(even) {
|
|
1754
|
+
background-color: var(--color-surface-subtle);
|
|
1755
|
+
}
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
.table-bordered {
|
|
1759
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1760
|
+
|
|
1761
|
+
th, td {
|
|
1762
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1763
|
+
}
|
|
1764
|
+
}
|
|
1765
|
+
|
|
1766
|
+
.table-compact {
|
|
1767
|
+
th, td {
|
|
1768
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
1769
|
+
}
|
|
1770
|
+
}
|
|
1771
|
+
|
|
1772
|
+
`}#ue(){return`/* Callout/Notification Styles */
|
|
1773
|
+
|
|
1774
|
+
.callout {
|
|
1775
|
+
padding: var(--spacing-4);
|
|
1776
|
+
border-radius: var(--radius-md);
|
|
1777
|
+
margin: 0 0 var(--spacing-4) 0;
|
|
1778
|
+
border-left: calc(var(--border-width-thick) + var(--border-width-thin)) solid;
|
|
1779
|
+
display: flex;
|
|
1780
|
+
align-items: flex-start;
|
|
1781
|
+
gap: var(--spacing-3);
|
|
1782
|
+
font-size: var(--font-size-sm);
|
|
1783
|
+
line-height: var(--font-line-height-relaxed);
|
|
1784
|
+
background-color: red;
|
|
1785
|
+
|
|
1786
|
+
& > *:last-child {
|
|
1787
|
+
margin-bottom: 0;
|
|
1788
|
+
}
|
|
1789
|
+
}
|
|
1790
|
+
/* Variants: success/info/warning/danger mapped to tokens */
|
|
1791
|
+
.callout-success {
|
|
1792
|
+
background-color: var(--color-success-50);
|
|
1793
|
+
border-color: var(--color-success-600);
|
|
1794
|
+
color: var(--color-success-900);
|
|
1795
|
+
}
|
|
1796
|
+
.callout-info {
|
|
1797
|
+
background-color: var(--color-info-50);
|
|
1798
|
+
border-color: var(--color-info-600);
|
|
1799
|
+
color: var(--color-info-900);
|
|
1800
|
+
}
|
|
1801
|
+
.callout-warning {
|
|
1802
|
+
background-color: var(--color-warning-50);
|
|
1803
|
+
border-color: var(--color-warning-600);
|
|
1804
|
+
color: var(--color-warning-900);
|
|
1805
|
+
}
|
|
1806
|
+
.callout-danger,
|
|
1807
|
+
.callout-error {
|
|
1808
|
+
background-color: var(--color-danger-50);
|
|
1809
|
+
border-color: var(--color-danger-600);
|
|
1810
|
+
color: var(--color-danger-900);
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1813
|
+
.callout-title {
|
|
1814
|
+
font-weight: var(--font-weight-semibold);
|
|
1815
|
+
margin: 0 0 var(--spacing-2) 0;
|
|
1816
|
+
font-size: var(--font-size-base);
|
|
1817
|
+
}
|
|
1818
|
+
|
|
1819
|
+
.callout-icon {
|
|
1820
|
+
flex-shrink: 0;
|
|
1821
|
+
display: flex;
|
|
1822
|
+
align-items: center;
|
|
1823
|
+
justify-content: center;
|
|
1824
|
+
|
|
1825
|
+
pds-icon {
|
|
1826
|
+
flex-shrink: 0;
|
|
1827
|
+
}
|
|
1828
|
+
}
|
|
1829
|
+
|
|
1830
|
+
.callout-dismissible {
|
|
1831
|
+
padding-right: var(--spacing-12);
|
|
1832
|
+
position: relative;
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1835
|
+
.callout-close {
|
|
1836
|
+
position: absolute;
|
|
1837
|
+
top: var(--spacing-3);
|
|
1838
|
+
right: var(--spacing-3);
|
|
1839
|
+
background: none;
|
|
1840
|
+
border: none;
|
|
1841
|
+
font-size: var(--font-size-xl);
|
|
1842
|
+
line-height: 1;
|
|
1843
|
+
opacity: 0.6;
|
|
1844
|
+
cursor: pointer;
|
|
1845
|
+
padding: var(--spacing-1);
|
|
1846
|
+
transition: opacity var(--transition-fast);
|
|
1847
|
+
|
|
1848
|
+
&:hover {
|
|
1849
|
+
opacity: 1;
|
|
1850
|
+
}
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
`}#ge(){return`/* Accordion (details/summary) */
|
|
1854
|
+
|
|
1855
|
+
:where(.accordion details) {
|
|
1856
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
1857
|
+
border-radius: var(--radius-md);
|
|
1858
|
+
background: var(--color-surface-base);
|
|
1859
|
+
margin: 0 0 var(--spacing-3) 0;
|
|
1860
|
+
overflow: hidden;
|
|
1861
|
+
|
|
1862
|
+
&[open] {
|
|
1863
|
+
overflow: visible;
|
|
1864
|
+
|
|
1865
|
+
& > summary::after {
|
|
1866
|
+
transform: rotate(45deg);
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
&::details-content {
|
|
1870
|
+
block-size: auto;
|
|
1871
|
+
overflow: visible;
|
|
1872
|
+
}
|
|
1873
|
+
}
|
|
1874
|
+
|
|
1875
|
+
/* Modern approach: animate block-size with ::details-content */
|
|
1876
|
+
&::details-content {
|
|
1877
|
+
block-size: 0;
|
|
1878
|
+
overflow: hidden;
|
|
1879
|
+
transition: block-size var(--transition-normal) ease, content-visibility var(--transition-normal);
|
|
1880
|
+
transition-behavior: allow-discrete;
|
|
1881
|
+
}
|
|
1882
|
+
|
|
1883
|
+
/* Content padding (works for both approaches) */
|
|
1884
|
+
& > :not(summary) > * {
|
|
1885
|
+
padding-inline: var(--spacing-4);
|
|
1886
|
+
padding-block: var(--spacing-3);
|
|
1887
|
+
}
|
|
1888
|
+
}
|
|
1889
|
+
|
|
1890
|
+
:where(.accordion summary) {
|
|
1891
|
+
cursor: pointer;
|
|
1892
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
1893
|
+
list-style: none;
|
|
1894
|
+
display: flex;
|
|
1895
|
+
align-items: center;
|
|
1896
|
+
gap: var(--spacing-2);
|
|
1897
|
+
border-radius: inherit;
|
|
1898
|
+
transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
1899
|
+
|
|
1900
|
+
&::-webkit-details-marker {
|
|
1901
|
+
display: none;
|
|
1902
|
+
}
|
|
1903
|
+
|
|
1904
|
+
&:hover {
|
|
1905
|
+
background-color: var(--color-surface-subtle);
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
&:focus {
|
|
1909
|
+
outline: none;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
&:focus-visible {
|
|
1913
|
+
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 30%, transparent);
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
/* Chevron indicator */
|
|
1917
|
+
&::after {
|
|
1918
|
+
content: "";
|
|
1919
|
+
margin-inline-start: auto;
|
|
1920
|
+
inline-size: 0.7em;
|
|
1921
|
+
block-size: 0.7em;
|
|
1922
|
+
border-inline-end: 2px solid currentColor;
|
|
1923
|
+
border-block-end: 2px solid currentColor;
|
|
1924
|
+
transform: rotate(-45deg);
|
|
1925
|
+
transition: transform var(--transition-normal);
|
|
1926
|
+
}
|
|
1927
|
+
}
|
|
1928
|
+
|
|
1929
|
+
/* Fallback: grid trick for browsers without ::details-content support */
|
|
1930
|
+
@supports not selector(::details-content) {
|
|
1931
|
+
:where(.accordion details) {
|
|
1932
|
+
& > :not(summary) {
|
|
1933
|
+
display: grid;
|
|
1934
|
+
grid-template-rows: 0fr;
|
|
1935
|
+
transition: grid-template-rows var(--transition-normal) ease;
|
|
1936
|
+
overflow: hidden;
|
|
1937
|
+
|
|
1938
|
+
& > * {
|
|
1939
|
+
min-block-size: 0;
|
|
1940
|
+
}
|
|
1941
|
+
}
|
|
1942
|
+
|
|
1943
|
+
&[open] > :not(summary) {
|
|
1944
|
+
grid-template-rows: 1fr;
|
|
1945
|
+
overflow: visible;
|
|
1946
|
+
}
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
`}#me(){return`/* Badge/Pill Styles */
|
|
1950
|
+
|
|
1951
|
+
.badge {
|
|
1952
|
+
display: inline-flex;
|
|
1953
|
+
align-items: center;
|
|
1954
|
+
justify-content: center;
|
|
1955
|
+
padding: var(--spacing-1) var(--spacing-2);
|
|
1956
|
+
font-size: var(--font-size-xs);
|
|
1957
|
+
font-weight: var(--font-weight-semibold);
|
|
1958
|
+
line-height: 1;
|
|
1959
|
+
border-radius: var(--radius-full);
|
|
1960
|
+
white-space: nowrap;
|
|
1961
|
+
vertical-align: middle;
|
|
1962
|
+
background-color: var(--color-gray-200);
|
|
1963
|
+
color: var(--color-gray-800);
|
|
1964
|
+
}
|
|
1965
|
+
|
|
1966
|
+
.badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
|
|
1967
|
+
.badge-primary { background-color: var(--color-primary-600); }
|
|
1968
|
+
.badge-secondary { background-color: var(--color-secondary-600); }
|
|
1969
|
+
.badge-success { background-color: var(--color-success-600); }
|
|
1970
|
+
.badge-info { background-color: var(--color-info-600); }
|
|
1971
|
+
.badge-warning { background-color: var(--color-warning-600); }
|
|
1972
|
+
.badge-danger { background-color: var(--color-danger-600); }
|
|
1973
|
+
|
|
1974
|
+
.badge-outline {
|
|
1975
|
+
background-color: transparent;
|
|
1976
|
+
border: var(--border-width-thin) solid currentColor;
|
|
1977
|
+
&.badge-primary { color: var(--color-text-primary); }
|
|
1978
|
+
&.badge-secondary { color: var(--color-secondary-600); }
|
|
1979
|
+
&.badge-success { color: var(--color-success-600); }
|
|
1980
|
+
&.badge-info { color: var(--color-info-600); }
|
|
1981
|
+
&.badge-warning { color: var(--color-warning-600); }
|
|
1982
|
+
&.badge-danger { color: var(--color-danger-600); }
|
|
1983
|
+
}
|
|
1984
|
+
|
|
1985
|
+
.badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }
|
|
1986
|
+
.badge-lg { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
|
|
1987
|
+
.pill { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); }
|
|
1988
|
+
|
|
1989
|
+
`}#fe(){let{layout:e={},behavior:t={}}=this.options.design;return`/* ============================================================================
|
|
1990
|
+
Dialog Primitive
|
|
1991
|
+
Native <dialog> element with PDS integration
|
|
1992
|
+
============================================================================ */
|
|
1993
|
+
|
|
1994
|
+
/* Dialog base styles */
|
|
1995
|
+
dialog {
|
|
1996
|
+
position: fixed;
|
|
1997
|
+
left: 50%;
|
|
1998
|
+
top: 50%;
|
|
1999
|
+
width: min(600px, calc(100vw - var(--spacing-8)));
|
|
2000
|
+
max-width: min(600px, calc(100vw - var(--spacing-8)));
|
|
2001
|
+
max-height: calc(100dvh - var(--spacing-8));
|
|
2002
|
+
margin: 0;
|
|
2003
|
+
padding: 0;
|
|
2004
|
+
border: none;
|
|
2005
|
+
border-radius: var(--radius-lg);
|
|
2006
|
+
|
|
2007
|
+
/* Surface styling - elevated overlay */
|
|
2008
|
+
background-color: var(--surface-overlay-bg);
|
|
2009
|
+
color: var(--surface-overlay-text);
|
|
2010
|
+
box-shadow: 0 8px 32px var(--surface-overlay-shadow);
|
|
2011
|
+
|
|
2012
|
+
/* Smooth transitions */
|
|
2013
|
+
opacity: 0;
|
|
2014
|
+
transform: translate(-50%, -50%) scale(0.95);
|
|
2015
|
+
transition:
|
|
2016
|
+
opacity var(--transition-normal) ease,
|
|
2017
|
+
transform var(--transition-normal) ease;
|
|
2018
|
+
|
|
2019
|
+
|
|
2020
|
+
}
|
|
2021
|
+
|
|
2022
|
+
/* Open state */
|
|
2023
|
+
dialog[open] {
|
|
2024
|
+
opacity: 1;
|
|
2025
|
+
transform: translate(-50%, -50%) scale(1);
|
|
2026
|
+
animation: pds-dialog-enter var(--transition-normal) ease;
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
@keyframes pds-dialog-enter {
|
|
2030
|
+
from {
|
|
2031
|
+
opacity: 0;
|
|
2032
|
+
transform: translate(-50%, -50%) scale(0.95);
|
|
2033
|
+
}
|
|
2034
|
+
to {
|
|
2035
|
+
opacity: 1;
|
|
2036
|
+
transform: translate(-50%, -50%) scale(1);
|
|
2037
|
+
}
|
|
2038
|
+
}
|
|
2039
|
+
|
|
2040
|
+
/* Safari fallback: disable scale animation to avoid dialog clipping bugs */
|
|
2041
|
+
dialog.dialog-no-scale-animation {
|
|
2042
|
+
transform: translate(-50%, -50%);
|
|
2043
|
+
transition: opacity var(--transition-normal) ease;
|
|
2044
|
+
}
|
|
2045
|
+
|
|
2046
|
+
dialog.dialog-no-scale-animation[open] {
|
|
2047
|
+
transform: translate(-50%, -50%);
|
|
2048
|
+
animation: pds-dialog-fade-enter var(--transition-normal) ease;
|
|
2049
|
+
}
|
|
2050
|
+
|
|
2051
|
+
@keyframes pds-dialog-fade-enter {
|
|
2052
|
+
from { opacity: 0; }
|
|
2053
|
+
to { opacity: 1; }
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
/* Backdrop styling */
|
|
2057
|
+
dialog::backdrop {
|
|
2058
|
+
background: var(--backdrop-bg);
|
|
2059
|
+
backdrop-filter: var(--backdrop-filter);
|
|
2060
|
+
opacity: 0;
|
|
2061
|
+
transition: opacity var(--transition-normal) ease;
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
dialog[open]::backdrop {
|
|
2065
|
+
opacity: var(--backdrop-opacity, 1);
|
|
2066
|
+
animation: pds-dialog-backdrop-enter var(--transition-normal) ease;
|
|
2067
|
+
}
|
|
2068
|
+
|
|
2069
|
+
@keyframes pds-dialog-backdrop-enter {
|
|
2070
|
+
from { opacity: 0; }
|
|
2071
|
+
to { opacity: var(--backdrop-opacity, 1); }
|
|
2072
|
+
}
|
|
2073
|
+
|
|
2074
|
+
/* Dialog - constrain max height to 90vh, support custom maxHeight via CSS variable */
|
|
2075
|
+
dialog {
|
|
2076
|
+
max-height: var(--dialog-max-height, 90vh);
|
|
2077
|
+
display: flex;
|
|
2078
|
+
flex-direction: column;
|
|
2079
|
+
overflow: hidden; /* Prevent dialog itself from scrolling - let .dialog-body handle it */
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
/* Form structure - use flexbox instead of contents */
|
|
2083
|
+
dialog form {
|
|
2084
|
+
display: flex;
|
|
2085
|
+
flex-direction: column;
|
|
2086
|
+
flex: 1;
|
|
2087
|
+
min-height: 0; /* Allow flex child to shrink */
|
|
2088
|
+
margin: 0;
|
|
2089
|
+
}
|
|
2090
|
+
|
|
2091
|
+
/* Dialog fields - to open pds-form subforms */
|
|
2092
|
+
.dialog-field {
|
|
2093
|
+
margin-top: var(--spacing-3);
|
|
2094
|
+
}
|
|
2095
|
+
|
|
2096
|
+
/* Dialog header */
|
|
2097
|
+
dialog {
|
|
2098
|
+
header,
|
|
2099
|
+
form > header {
|
|
2100
|
+
display: flex;
|
|
2101
|
+
align-items: center;
|
|
2102
|
+
justify-content: space-between;
|
|
2103
|
+
gap: var(--spacing-4);
|
|
2104
|
+
padding: var(--spacing-6);
|
|
2105
|
+
border-bottom: var(--border-width-thin) solid var(--surface-overlay-border);
|
|
2106
|
+
flex-shrink: 0;
|
|
2107
|
+
|
|
2108
|
+
h2,
|
|
2109
|
+
h3 {
|
|
2110
|
+
margin: 0;
|
|
2111
|
+
font-size: var(--font-size-lg);
|
|
2112
|
+
font-weight: var(--font-weight-semibold);
|
|
2113
|
+
color: var(--surface-overlay-text);
|
|
2114
|
+
flex: 1;
|
|
2115
|
+
}
|
|
2116
|
+
|
|
2117
|
+
/* Close button in header */
|
|
2118
|
+
button[value="cancel"],
|
|
2119
|
+
.dialog-close {
|
|
2120
|
+
background: none;
|
|
2121
|
+
border: none;
|
|
2122
|
+
padding: var(--spacing-2);
|
|
2123
|
+
border-radius: var(--radius-sm);
|
|
2124
|
+
cursor: pointer;
|
|
2125
|
+
color: var(--surface-overlay-icon);
|
|
2126
|
+
transition: background-color var(--transition-fast);
|
|
2127
|
+
display: inline-flex;
|
|
2128
|
+
align-items: center;
|
|
2129
|
+
justify-content: center;
|
|
2130
|
+
|
|
2131
|
+
&:hover {
|
|
2132
|
+
background-color: var(--color-surface-subtle);
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
&:focus-visible {
|
|
2136
|
+
outline: 2px solid var(--color-focus-ring);
|
|
2137
|
+
outline-offset: 2px;
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
/* Dialog body - scrollable content */
|
|
2143
|
+
article,
|
|
2144
|
+
form > article,
|
|
2145
|
+
.dialog-body {
|
|
2146
|
+
flex: 1 1 auto;
|
|
2147
|
+
min-height: 0; /* Critical: allow flex child to shrink and scroll */
|
|
2148
|
+
padding: var(--spacing-3) var(--spacing-6);
|
|
2149
|
+
overflow-y: auto;
|
|
2150
|
+
overflow-x: hidden;
|
|
2151
|
+
}
|
|
2152
|
+
|
|
2153
|
+
/* Dialog footer - actions */
|
|
2154
|
+
footer,
|
|
2155
|
+
form > footer {
|
|
2156
|
+
display: flex;
|
|
2157
|
+
flex-direction: row;
|
|
2158
|
+
gap: var(--spacing-3);
|
|
2159
|
+
justify-content: flex-end;
|
|
2160
|
+
align-items: center;
|
|
2161
|
+
padding: var(--spacing-6);
|
|
2162
|
+
border-top: var(--border-width-thin) solid var(--surface-overlay-border);
|
|
2163
|
+
flex-shrink: 0;
|
|
2164
|
+
}
|
|
2165
|
+
}
|
|
2166
|
+
|
|
2167
|
+
/* Dialog size modifiers */
|
|
2168
|
+
dialog.dialog-sm { width: min(400px, calc(100vw - var(--spacing-8))); max-width: min(400px, calc(100vw - var(--spacing-8))); }
|
|
2169
|
+
dialog.dialog-lg { width: min(800px, calc(100vw - var(--spacing-8))); max-width: min(800px, calc(100vw - var(--spacing-8))); }
|
|
2170
|
+
dialog.dialog-xl { width: min(1200px, calc(100vw - var(--spacing-8))); max-width: min(1200px, calc(100vw - var(--spacing-8))); }
|
|
2171
|
+
dialog.dialog-full { width: calc(100vw - var(--spacing-8)); max-width: calc(100vw - var(--spacing-8)); max-height: calc(100dvh - var(--spacing-8)); }
|
|
2172
|
+
|
|
2173
|
+
/* Mobile responsiveness - maximize on mobile */
|
|
2174
|
+
@media (max-width: ${(e.breakpoints||{sm:640,md:768,lg:1024,xl:1280}).sm-1}px) {
|
|
2175
|
+
dialog,
|
|
2176
|
+
dialog.dialog-no-scale-animation,
|
|
2177
|
+
dialog.dialog-no-scale-animation[open] {
|
|
2178
|
+
left: 0 !important;
|
|
2179
|
+
top: 0 !important;
|
|
2180
|
+
}
|
|
2181
|
+
|
|
2182
|
+
dialog.dialog-no-scale-animation,
|
|
2183
|
+
dialog.dialog-no-scale-animation[open] {
|
|
2184
|
+
transform: none !important;
|
|
2185
|
+
}
|
|
2186
|
+
|
|
2187
|
+
dialog[open] {
|
|
2188
|
+
left: 0 !important;
|
|
2189
|
+
top: 0 !important;
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
dialog {
|
|
2193
|
+
max-width: 100vw;
|
|
2194
|
+
width: 100vw;
|
|
2195
|
+
height: 100dvh;
|
|
2196
|
+
max-height: 100dvh;
|
|
2197
|
+
--dialog-max-height: 100dvh; /* Override custom maxHeight on mobile */
|
|
2198
|
+
border-radius: 0;
|
|
2199
|
+
margin: 0;
|
|
2200
|
+
transform: scale(0.98);
|
|
2201
|
+
}
|
|
2202
|
+
dialog[open] {
|
|
2203
|
+
transform: scale(1);
|
|
2204
|
+
animation: pds-dialog-enter-mobile var(--transition-normal) ease;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
dialog.dialog-no-scale-animation {
|
|
2208
|
+
transition: opacity var(--transition-normal) ease;
|
|
2209
|
+
}
|
|
2210
|
+
dialog.dialog-no-scale-animation[open] {
|
|
2211
|
+
animation: pds-dialog-fade-enter var(--transition-normal) ease;
|
|
2212
|
+
}
|
|
2213
|
+
@keyframes pds-dialog-enter-mobile {
|
|
2214
|
+
from {
|
|
2215
|
+
opacity: 0;
|
|
2216
|
+
transform: scale(0.98);
|
|
2217
|
+
}
|
|
2218
|
+
to {
|
|
2219
|
+
opacity: 1;
|
|
2220
|
+
transform: scale(1);
|
|
2221
|
+
}
|
|
2222
|
+
}
|
|
2223
|
+
dialog header, dialog form > header, dialog article, dialog form > article, dialog footer, dialog form > footer { padding: var(--spacing-4); }
|
|
2224
|
+
}
|
|
2225
|
+
|
|
2226
|
+
/* Reduced motion support */
|
|
2227
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2228
|
+
dialog, dialog::backdrop { transition-duration: 0.01s !important; }
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
html:has(dialog[open]:modal) {
|
|
2232
|
+
overflow: hidden;
|
|
2233
|
+
scrollbar-gutter: stable;
|
|
2234
|
+
}
|
|
2235
|
+
|
|
2236
|
+
|
|
2237
|
+
`}#he(){let{layout:e={}}=this.options.design;return`/* Tab Strip Component */
|
|
2238
|
+
|
|
2239
|
+
/* Tab navigation */
|
|
2240
|
+
|
|
2241
|
+
pds-tabstrip {
|
|
2242
|
+
margin-top: var(--spacing-6);
|
|
2243
|
+
|
|
2244
|
+
& > nav {
|
|
2245
|
+
display: flex;
|
|
2246
|
+
gap: var(--spacing-1);
|
|
2247
|
+
border-bottom: var(--border-width-medium) solid var(--color-border);
|
|
2248
|
+
margin-bottom: var(--spacing-6);
|
|
2249
|
+
position: relative;
|
|
2250
|
+
overflow-x: auto;
|
|
2251
|
+
overflow-y: hidden;
|
|
2252
|
+
scrollbar-width: none; /* Firefox */
|
|
2253
|
+
-ms-overflow-style: none; /* IE/Edge */
|
|
2254
|
+
|
|
2255
|
+
&::-webkit-scrollbar {
|
|
2256
|
+
display: none; /* Chrome/Safari */
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
/* Tab links */
|
|
2260
|
+
& > a {
|
|
2261
|
+
position: relative;
|
|
2262
|
+
display: inline-flex;
|
|
2263
|
+
align-items: center;
|
|
2264
|
+
gap: var(--spacing-2);
|
|
2265
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
2266
|
+
font-family: var(--font-family-body);
|
|
2267
|
+
font-size: var(--font-size-base);
|
|
2268
|
+
font-weight: var(--font-weight-medium);
|
|
2269
|
+
color: var(--color-text-secondary);
|
|
2270
|
+
text-decoration: none;
|
|
2271
|
+
white-space: nowrap;
|
|
2272
|
+
border: none;
|
|
2273
|
+
background: transparent;
|
|
2274
|
+
cursor: pointer;
|
|
2275
|
+
transition: color var(--transition-fast);
|
|
2276
|
+
border-bottom: var(--border-width-medium) solid transparent;
|
|
2277
|
+
margin-bottom: calc(-1 * var(--border-width-medium)); /* Overlap the nav border */
|
|
2278
|
+
|
|
2279
|
+
&:hover {
|
|
2280
|
+
color: var(--color-text-primary);
|
|
2281
|
+
background-color: var(--color-surface-hover);
|
|
2282
|
+
}
|
|
2283
|
+
|
|
2284
|
+
&:focus-visible {
|
|
2285
|
+
outline: var(--focus-ring-width, 2px) solid var(--color-primary-500);
|
|
2286
|
+
outline-offset: -2px;
|
|
2287
|
+
border-radius: var(--radius-sm);
|
|
2288
|
+
z-index: 1;
|
|
2289
|
+
}
|
|
2290
|
+
|
|
2291
|
+
/* Active tab */
|
|
2292
|
+
&[aria-current="page"] {
|
|
2293
|
+
color: var(--color-primary-600);
|
|
2294
|
+
font-weight: var(--font-weight-semibold);
|
|
2295
|
+
border-bottom-color: var(--color-primary-600);
|
|
2296
|
+
|
|
2297
|
+
&:hover {
|
|
2298
|
+
color: var(--color-primary-700);
|
|
2299
|
+
border-bottom-color: var(--color-primary-700);
|
|
2300
|
+
background-color: var(--color-primary-50);
|
|
2301
|
+
}
|
|
2302
|
+
}
|
|
2303
|
+
}
|
|
2304
|
+
}
|
|
2305
|
+
|
|
2306
|
+
/* Tab panel */
|
|
2307
|
+
& > pds-tabpanel {
|
|
2308
|
+
display: block;
|
|
2309
|
+
margin-top: var(--spacing-4);
|
|
2310
|
+
|
|
2311
|
+
&[data-tabpanel] {
|
|
2312
|
+
animation: tabFadeIn var(--transition-normal) ease-out;
|
|
2313
|
+
padding: var(--spacing-4) 0;
|
|
2314
|
+
|
|
2315
|
+
&[hidden] {
|
|
2316
|
+
display: none;
|
|
2317
|
+
}
|
|
2318
|
+
}
|
|
2319
|
+
}
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
@keyframes tabFadeIn {
|
|
2323
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
2324
|
+
to { opacity: 1; transform: translateY(0); }
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
/* Mobile responsive */
|
|
2328
|
+
@media (max-width: ${(e.breakpoints||{sm:640,md:768,lg:1024,xl:1280}).sm-1}px) {
|
|
2329
|
+
pds-tabstrip > nav { gap: var(--spacing-1); }
|
|
2330
|
+
pds-tabstrip > nav > a { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
|
|
2331
|
+
pds-tabstrip > pds-tabpanel[data-tabpanel] { padding: var(--spacing-3) 0; }
|
|
2332
|
+
}
|
|
2333
|
+
|
|
2334
|
+
`}#be(){return`/* Custom Scrollbars */
|
|
2335
|
+
::-webkit-scrollbar { width: 12px; height: 12px; }
|
|
2336
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
2337
|
+
::-webkit-scrollbar-thumb {
|
|
2338
|
+
background: var(--color-secondary-300);
|
|
2339
|
+
border-radius: var(--radius-full);
|
|
2340
|
+
border: var(--border-width-thick) solid transparent;
|
|
2341
|
+
background-clip: padding-box;
|
|
2342
|
+
transition: background-color var(--transition-fast);
|
|
2343
|
+
&:hover { background: var(--color-secondary-400); border: var(--border-width-medium) solid transparent; background-clip: padding-box; }
|
|
2344
|
+
&:active { background: var(--color-secondary-500); border: var(--border-width-medium) solid transparent; background-clip: padding-box; }
|
|
2345
|
+
@media (prefers-color-scheme: dark) {
|
|
2346
|
+
background: var(--color-secondary-600);
|
|
2347
|
+
&:hover { background: var(--color-secondary-500); }
|
|
2348
|
+
&:active { background: var(--color-secondary-400); }
|
|
2349
|
+
}
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2352
|
+
* {
|
|
2353
|
+
scrollbar-width: thin;
|
|
2354
|
+
scrollbar-color: var(--color-secondary-300) transparent;
|
|
2355
|
+
@media (prefers-color-scheme: dark) { scrollbar-color: var(--color-secondary-600) transparent; }
|
|
2356
|
+
}
|
|
2357
|
+
*:hover { scrollbar-color: var(--color-secondary-400) transparent; }
|
|
2358
|
+
@media (prefers-color-scheme: dark) { *:hover { scrollbar-color: var(--color-secondary-500) transparent; } }
|
|
2359
|
+
|
|
2360
|
+
`}#ye(){let{layout:e={}}=this.options.design,t=e.buttonMinHeight||30;return`/* Icon System */
|
|
2361
|
+
|
|
2362
|
+
pds-icon {
|
|
2363
|
+
display: inline-flex;
|
|
2364
|
+
align-items: center;
|
|
2365
|
+
justify-content: center;
|
|
2366
|
+
flex-shrink: 0;
|
|
2367
|
+
vertical-align: middle;
|
|
2368
|
+
pointer-events: none;
|
|
2369
|
+
}
|
|
2370
|
+
|
|
2371
|
+
/* Icon size utilities */
|
|
2372
|
+
.icon-xs, pds-icon[size="xs"] { width: var(--icon-size-xs); height: var(--icon-size-xs); }
|
|
2373
|
+
.icon-sm, pds-icon[size="sm"] { width: var(--icon-size-sm); height: var(--icon-size-sm); }
|
|
2374
|
+
.icon-md, pds-icon[size="md"] { width: var(--icon-size-md); height: var(--icon-size-md); }
|
|
2375
|
+
.icon-lg, pds-icon[size="lg"] { width: var(--icon-size-lg); height: var(--icon-size-lg); }
|
|
2376
|
+
.icon-xl, pds-icon[size="xl"] { width: var(--icon-size-xl); height: var(--icon-size-xl); }
|
|
2377
|
+
.icon-2xl, pds-icon[size="2xl"] { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }
|
|
2378
|
+
.icon-32xl, pds-icon[size="3xl"] { width: var(--icon-size-3xl); height: var(--icon-size-3xl); }
|
|
2379
|
+
|
|
2380
|
+
|
|
2381
|
+
/* Icon color utilities */
|
|
2382
|
+
.icon-primary, pds-icon.primary { color: var(--color-primary-600); }
|
|
2383
|
+
.icon-secondary, pds-icon.secondary { color: var(--color-secondary-600); }
|
|
2384
|
+
.icon-accent, pds-icon.accent { color: var(--color-accent-600); }
|
|
2385
|
+
.icon-success, pds-icon.success { color: var(--color-success-600); }
|
|
2386
|
+
.icon-warning, pds-icon.warning { color: var(--color-warning-600); }
|
|
2387
|
+
.icon-danger, pds-icon.danger { color: var(--color-danger-600); }
|
|
2388
|
+
.icon-info, pds-icon.info { color: var(--color-info-600); }
|
|
2389
|
+
.icon-muted, pds-icon.muted { color: var(--color-text-muted); }
|
|
2390
|
+
.icon-subtle, pds-icon.subtle { color: var(--color-text-subtle); }
|
|
2391
|
+
|
|
2392
|
+
/* Icon with text combinations */
|
|
2393
|
+
.icon-text { display: inline-flex; align-items: center; gap: var(--spacing-2); }
|
|
2394
|
+
.icon-text-start { flex-direction: row; }
|
|
2395
|
+
.icon-text-end { flex-direction: row-reverse; }
|
|
2396
|
+
|
|
2397
|
+
/* Button icon utilities */
|
|
2398
|
+
button, a {
|
|
2399
|
+
pds-icon {
|
|
2400
|
+
flex-shrink: 0;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
&.icon-only {
|
|
2404
|
+
padding: var(--spacing-2);
|
|
2405
|
+
min-width: ${t}px;
|
|
2406
|
+
width: ${t}px;
|
|
2407
|
+
height: ${t}px;
|
|
2408
|
+
display: inline-flex;
|
|
2409
|
+
align-items: center;
|
|
2410
|
+
justify-content: center;
|
|
2411
|
+
}
|
|
2412
|
+
|
|
2413
|
+
&.btn-sm.icon-only {
|
|
2414
|
+
min-width: calc(${t}px * 0.8);
|
|
2415
|
+
width: calc(${t}px * 0.8);
|
|
2416
|
+
height: calc(${t}px * 0.8);
|
|
2417
|
+
}
|
|
2418
|
+
|
|
2419
|
+
&.btn-xs.icon-only {
|
|
2420
|
+
min-width: calc(${t}px * 0.6);
|
|
2421
|
+
width: calc(${t}px * 0.6);
|
|
2422
|
+
height: calc(${t}px * 0.6);
|
|
2423
|
+
}
|
|
2424
|
+
|
|
2425
|
+
&.btn-lg.icon-only {
|
|
2426
|
+
min-width: calc(${t}px * 1.2);
|
|
2427
|
+
width: calc(${t}px * 1.2);
|
|
2428
|
+
height: calc(${t}px * 1.2);
|
|
2429
|
+
}
|
|
2430
|
+
}
|
|
2431
|
+
|
|
2432
|
+
/* Icon in inputs */
|
|
2433
|
+
.input-icon, .input-icon-end {
|
|
2434
|
+
position: relative;
|
|
2435
|
+
display: flex;
|
|
2436
|
+
align-items: center;
|
|
2437
|
+
pds-icon { position: absolute; color: var(--color-text-muted); pointer-events: none; width: var(--icon-size-md); height: var(--icon-size-md); }
|
|
2438
|
+
}
|
|
2439
|
+
.input-icon {
|
|
2440
|
+
pds-icon { left: var(--spacing-3); }
|
|
2441
|
+
input { padding-left: calc(var(--icon-size-md) + var(--spacing-6)); width: 100%; }
|
|
2442
|
+
}
|
|
2443
|
+
.input-icon-end {
|
|
2444
|
+
pds-icon { left: unset; right: var(--spacing-3); }
|
|
2445
|
+
input { padding-left: var(--spacing-4); padding-right: calc(var(--icon-size-md) + var(--spacing-6)); width: 100%; }
|
|
2446
|
+
}
|
|
2447
|
+
|
|
2448
|
+
`}#ve(){return`/* Dropdown Component */
|
|
2449
|
+
|
|
2450
|
+
/* Basic dropdown host */
|
|
2451
|
+
nav[data-dropdown] {
|
|
2452
|
+
position: relative;
|
|
2453
|
+
display: inline-block;
|
|
2454
|
+
padding: 0;
|
|
2455
|
+
|
|
2456
|
+
& > :last-child {
|
|
2457
|
+
position: absolute;
|
|
2458
|
+
padding: var(--spacing-2);
|
|
2459
|
+
margin: 0;
|
|
2460
|
+
background: var(--color-surface-overlay);
|
|
2461
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
2462
|
+
border-radius: var(--radius-md);
|
|
2463
|
+
box-shadow: var(--shadow-lg);
|
|
2464
|
+
top: 100%;
|
|
2465
|
+
bottom: auto;
|
|
2466
|
+
left: 0;
|
|
2467
|
+
right: auto;
|
|
2468
|
+
margin-top: var(--spacing-2);
|
|
2469
|
+
--dropdown-transition-duration: var(--transition-fast, 160ms);
|
|
2470
|
+
min-width: var(--dropdown-min-width, 12rem);
|
|
2471
|
+
width: max-content;
|
|
2472
|
+
inline-size: max-content;
|
|
2473
|
+
max-width: none;
|
|
2474
|
+
max-inline-size: none;
|
|
2475
|
+
opacity: 0;
|
|
2476
|
+
visibility: hidden;
|
|
2477
|
+
display: none;
|
|
2478
|
+
pointer-events: none;
|
|
2479
|
+
transform-origin: top center;
|
|
2480
|
+
z-index: var(--z-dropdown, 1050);
|
|
2481
|
+
max-height: min(60vh, 24rem);
|
|
2482
|
+
overflow-x: hidden;
|
|
2483
|
+
overflow-y: auto;
|
|
2484
|
+
transition:
|
|
2485
|
+
opacity var(--dropdown-transition-duration) ease,
|
|
2486
|
+
visibility 0s linear var(--dropdown-transition-duration),
|
|
2487
|
+
display 0s linear var(--dropdown-transition-duration);
|
|
2488
|
+
transition-behavior: allow-discrete;
|
|
2489
|
+
}
|
|
2490
|
+
|
|
2491
|
+
& > :last-child[aria-hidden="false"] {
|
|
2492
|
+
display: inline-block;
|
|
2493
|
+
opacity: 1;
|
|
2494
|
+
visibility: visible;
|
|
2495
|
+
pointer-events: auto;
|
|
2496
|
+
transition:
|
|
2497
|
+
opacity var(--dropdown-transition-duration) ease,
|
|
2498
|
+
visibility 0s linear 0s,
|
|
2499
|
+
display 0s linear 0s;
|
|
2500
|
+
}
|
|
2501
|
+
|
|
2502
|
+
menu {
|
|
2503
|
+
list-style: none;
|
|
2504
|
+
}
|
|
2505
|
+
|
|
2506
|
+
menu li {
|
|
2507
|
+
padding: var(--spacing-1) 0;
|
|
2508
|
+
|
|
2509
|
+
& + li {
|
|
2510
|
+
border-top: var(--border-width-thin) solid var(--color-border);
|
|
2511
|
+
margin-top: var(--spacing-2);
|
|
2512
|
+
}
|
|
2513
|
+
|
|
2514
|
+
&:has(> hr) {
|
|
2515
|
+
border-top: none;
|
|
2516
|
+
margin-top: 0;
|
|
2517
|
+
padding: 0;
|
|
2518
|
+
|
|
2519
|
+
& + li {
|
|
2520
|
+
border-top: none;
|
|
2521
|
+
margin-top: 0;
|
|
2522
|
+
}
|
|
2523
|
+
}
|
|
2524
|
+
|
|
2525
|
+
& > hr {
|
|
2526
|
+
border: none;
|
|
2527
|
+
border-top: var(--border-width-thick) solid var(--color-border);
|
|
2528
|
+
margin: var(--spacing-2) 0;
|
|
2529
|
+
}
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
menu a {
|
|
2533
|
+
display: flex;
|
|
2534
|
+
color: var(--color-text-primary);
|
|
2535
|
+
text-decoration: none;
|
|
2536
|
+
align-items: center;
|
|
2537
|
+
gap: var(--spacing-2);
|
|
2538
|
+
|
|
2539
|
+
&.danger {
|
|
2540
|
+
color: var(--color-danger-600);
|
|
2541
|
+
}
|
|
2542
|
+
}
|
|
2543
|
+
|
|
2544
|
+
&.align-right,
|
|
2545
|
+
&[data-align="right"],
|
|
2546
|
+
&[data-align="end"],
|
|
2547
|
+
&[data-dropdown-align="right"],
|
|
2548
|
+
&[data-dropdown-align="end"] {
|
|
2549
|
+
& > :last-child {
|
|
2550
|
+
left: auto;
|
|
2551
|
+
right: 0;
|
|
2552
|
+
}
|
|
2553
|
+
}
|
|
2554
|
+
|
|
2555
|
+
&[data-mode="up"],
|
|
2556
|
+
&[data-dropdown-direction="up"] {
|
|
2557
|
+
& > :last-child {
|
|
2558
|
+
top: auto;
|
|
2559
|
+
bottom: 100%;
|
|
2560
|
+
margin-top: 0;
|
|
2561
|
+
margin-bottom: var(--spacing-2);
|
|
2562
|
+
transform-origin: bottom center;
|
|
2563
|
+
}
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
&[data-mode="down"],
|
|
2567
|
+
&[data-dropdown-direction="down"] {
|
|
2568
|
+
& > :last-child {
|
|
2569
|
+
top: 100%;
|
|
2570
|
+
bottom: auto;
|
|
2571
|
+
margin-top: var(--spacing-2);
|
|
2572
|
+
margin-bottom: 0;
|
|
2573
|
+
transform-origin: top center;
|
|
2574
|
+
}
|
|
2575
|
+
}
|
|
2576
|
+
|
|
2577
|
+
&[data-mode="auto"]:not([data-dropdown-direction]) > :last-child {
|
|
2578
|
+
top: 100%;
|
|
2579
|
+
bottom: auto;
|
|
2580
|
+
margin-top: var(--spacing-2);
|
|
2581
|
+
margin-bottom: 0;
|
|
2582
|
+
transform-origin: top center;
|
|
2583
|
+
}
|
|
2584
|
+
|
|
2585
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2586
|
+
& > :last-child {
|
|
2587
|
+
transition-duration: 0.01s !important;
|
|
2588
|
+
}
|
|
2589
|
+
}
|
|
2590
|
+
}
|
|
2591
|
+
|
|
2592
|
+
@starting-style {
|
|
2593
|
+
nav[data-dropdown] > :last-child[aria-hidden="false"] {
|
|
2594
|
+
opacity: 0;
|
|
2595
|
+
}
|
|
2596
|
+
}
|
|
2597
|
+
`}#xe(){let{layout:e={}}=this.options.design,t=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280},n=e.gridSystem||{},o=n.columns||[1,2,3,4,6],a=n.autoFitBreakpoints||{sm:"150px",md:"250px",lg:"350px",xl:"450px"},i=this.#z(e),s=[`
|
|
2598
|
+
/* ============================================================================
|
|
2599
|
+
Layout Utilities
|
|
2600
|
+
Modern grid and flex system for building responsive layouts
|
|
2601
|
+
============================================================================ */
|
|
2602
|
+
|
|
2603
|
+
/* Container */
|
|
2604
|
+
.container {
|
|
2605
|
+
display: block;
|
|
2606
|
+
width: 100%;
|
|
2607
|
+
max-width: ${e.containerMaxWidth||"1400px"};
|
|
2608
|
+
margin: 0 auto;
|
|
2609
|
+
padding: ${e.containerPadding||"var(--spacing-6)"};
|
|
2610
|
+
}
|
|
2611
|
+
|
|
2612
|
+
/* Grid System */
|
|
2613
|
+
.grid {
|
|
2614
|
+
display: grid;
|
|
2615
|
+
gap: var(--spacing-4);
|
|
2616
|
+
}
|
|
2617
|
+
|
|
2618
|
+
`];for(let c of o)s.push(`.grid-cols-${c} { grid-template-columns: repeat(${c}, 1fr); }
|
|
2619
|
+
`);s.push(`
|
|
2620
|
+
/* Auto-fit grids (responsive) */
|
|
2621
|
+
`);for(let[c,d]of Object.entries(a))s.push(`.grid-auto-${c} { grid-template-columns: repeat(auto-fit, minmax(${d}, 1fr)); }
|
|
2622
|
+
`);return s.push(`
|
|
2623
|
+
/* Gap utilities */
|
|
2624
|
+
.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); }
|
|
2625
|
+
|
|
2626
|
+
`),s.push(`
|
|
2627
|
+
/* Flexbox System */
|
|
2628
|
+
.flex { display: flex; }
|
|
2629
|
+
.flex-wrap { flex-wrap: wrap; }
|
|
2630
|
+
.flex-col { flex-direction: column; }
|
|
2631
|
+
.flex-row { flex-direction: row; }
|
|
2632
|
+
.grow { flex: 1 1 0%; }
|
|
2633
|
+
|
|
2634
|
+
/* Alignment utilities */
|
|
2635
|
+
.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; }
|
|
2636
|
+
.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; }
|
|
2637
|
+
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
|
|
2638
|
+
|
|
2639
|
+
/* Text overflow utility */
|
|
2640
|
+
.truncate {
|
|
2641
|
+
overflow: hidden;
|
|
2642
|
+
text-overflow: ellipsis;
|
|
2643
|
+
white-space: nowrap;
|
|
2644
|
+
}
|
|
2645
|
+
|
|
2646
|
+
/* Required Legend Utility */
|
|
2647
|
+
:where(.required-legend) {
|
|
2648
|
+
display: block;
|
|
2649
|
+
margin: var(--spacing-3) 0;
|
|
2650
|
+
color: var(--color-text-muted);
|
|
2651
|
+
}
|
|
2652
|
+
|
|
2653
|
+
/* Max-width utilities */
|
|
2654
|
+
.max-w-sm { max-width: var(--layout-max-width-sm, ${i.sm}); } .max-w-md { max-width: var(--layout-max-width-md, ${i.md}); } .max-w-lg { max-width: var(--layout-max-width-lg, ${i.lg}); } .max-w-xl { max-width: var(--layout-max-width-xl, ${i.xl}); }
|
|
2655
|
+
|
|
2656
|
+
/* Stack utilities - vertical rhythm for stacked elements */
|
|
2657
|
+
[class^="stack-"], [class*=" stack-"] {
|
|
2658
|
+
display: flex;
|
|
2659
|
+
flex-direction: column;
|
|
2660
|
+
}
|
|
2661
|
+
.stack-xs { gap: var(--spacing-1); }
|
|
2662
|
+
.stack-sm { gap: var(--spacing-2); }
|
|
2663
|
+
.stack-md { gap: var(--spacing-4); }
|
|
2664
|
+
.stack-lg { gap: var(--spacing-6); }
|
|
2665
|
+
.stack-xl { gap: var(--spacing-8); }
|
|
2666
|
+
|
|
2667
|
+
/* Section spacing - for major content blocks */
|
|
2668
|
+
.section { padding-block: var(--spacing-8); }
|
|
2669
|
+
.section-lg { padding-block: var(--spacing-12); }
|
|
2670
|
+
|
|
2671
|
+
/* Responsive helpers */
|
|
2672
|
+
@media (max-width: ${t.md-1}px) {
|
|
2673
|
+
.mobile-stack { flex-direction: column; }
|
|
2674
|
+
.mobile-stack > * { width: 100%; }
|
|
2675
|
+
}
|
|
2676
|
+
|
|
2677
|
+
/* ============================================================================
|
|
2678
|
+
Backdrop Utilities
|
|
2679
|
+
Reusable backdrop layer for modal components (dialogs, drawers, overlays)
|
|
2680
|
+
============================================================================ */
|
|
2681
|
+
|
|
2682
|
+
/* Base backdrop class for modal overlays */
|
|
2683
|
+
.backdrop {
|
|
2684
|
+
position: fixed;
|
|
2685
|
+
inset: 0;
|
|
2686
|
+
background: var(--backdrop-bg);
|
|
2687
|
+
backdrop-filter: var(--backdrop-filter);
|
|
2688
|
+
opacity: 0;
|
|
2689
|
+
pointer-events: none;
|
|
2690
|
+
transition: opacity 0.2s ease;
|
|
2691
|
+
z-index: var(--z-modal, 1040);
|
|
2692
|
+
|
|
2693
|
+
&.active {
|
|
2694
|
+
opacity: var(--backdrop-opacity, 1);
|
|
2695
|
+
pointer-events: auto;
|
|
2696
|
+
}
|
|
2697
|
+
}
|
|
2698
|
+
|
|
2699
|
+
/* Backdrop variants */
|
|
2700
|
+
.backdrop-light { --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)); --backdrop-brightness: 1.1; }
|
|
2701
|
+
.backdrop-dark { --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); --backdrop-brightness: 0.6; }
|
|
2702
|
+
.backdrop-blur-sm { --backdrop-blur: 5px; } .backdrop-blur-md { --backdrop-blur: 10px; } .backdrop-blur-lg { --backdrop-blur: 20px; }
|
|
2703
|
+
`),s.join("")}#we(){return`/* Media Element Utilities */
|
|
2704
|
+
|
|
2705
|
+
/* Gallery images */
|
|
2706
|
+
.img-gallery {
|
|
2707
|
+
width: 100%;
|
|
2708
|
+
height: auto;
|
|
2709
|
+
aspect-ratio: 1;
|
|
2710
|
+
object-fit: cover;
|
|
2711
|
+
border-radius: var(--radius-sm);
|
|
2712
|
+
}
|
|
2713
|
+
|
|
2714
|
+
/* Responsive images with different radius sizes */
|
|
2715
|
+
.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); }
|
|
2716
|
+
|
|
2717
|
+
/* Inline images */
|
|
2718
|
+
.img-inline {
|
|
2719
|
+
display: inline;
|
|
2720
|
+
vertical-align: middle;
|
|
2721
|
+
border-radius: var(--radius-xs);
|
|
2722
|
+
margin: 0 var(--spacing-1);
|
|
2723
|
+
max-width: 60px;
|
|
2724
|
+
height: auto;
|
|
2725
|
+
}
|
|
2726
|
+
|
|
2727
|
+
/* Video specific utilities */
|
|
2728
|
+
.video-responsive {
|
|
2729
|
+
width: 100%;
|
|
2730
|
+
max-width: 600px;
|
|
2731
|
+
height: auto;
|
|
2732
|
+
border-radius: var(--radius-md);
|
|
2733
|
+
}
|
|
2734
|
+
|
|
2735
|
+
/* Figure utilities */
|
|
2736
|
+
.figure-responsive {
|
|
2737
|
+
width: 100%;
|
|
2738
|
+
height: auto;
|
|
2739
|
+
}
|
|
2740
|
+
|
|
2741
|
+
`}#ke(){let{layout:e={},a11y:t={}}=this.options.design,n=e.breakpoints||{sm:640,md:768,lg:1024,xl:1280},o=t.minTouchTarget||y.TouchTargetSizes.standard;return`/* Mobile-First Responsive Design */
|
|
2742
|
+
|
|
2743
|
+
/* Small devices (${n.sm}px and up) */
|
|
2744
|
+
@media (min-width: ${n.sm}px) {
|
|
2745
|
+
.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; }
|
|
2746
|
+
}
|
|
2747
|
+
|
|
2748
|
+
/* Medium devices (${n.md}px and up) */
|
|
2749
|
+
@media (min-width: ${n.md}px) {
|
|
2750
|
+
.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; }
|
|
2751
|
+
}
|
|
2752
|
+
|
|
2753
|
+
/* Large devices (${n.lg}px and up) */
|
|
2754
|
+
@media (min-width: ${n.lg}px) {
|
|
2755
|
+
.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; }
|
|
2756
|
+
}
|
|
2757
|
+
|
|
2758
|
+
/* Touch device optimizations */
|
|
2759
|
+
@media (hover: none) and (pointer: coarse) {
|
|
2760
|
+
/* Touch devices - larger touch targets for interactive elements */
|
|
2761
|
+
button:not(.icon-only), a:not(.icon-only), select, textarea,
|
|
2762
|
+
input:not([type="radio"]):not([type="checkbox"]) {
|
|
2763
|
+
min-height: ${o}px;
|
|
2764
|
+
min-width: ${o}px;
|
|
2765
|
+
}
|
|
2766
|
+
|
|
2767
|
+
/* Radio and checkbox inputs: keep reasonable size but ensure label tap area is large */
|
|
2768
|
+
input[type="radio"],
|
|
2769
|
+
input[type="checkbox"] {
|
|
2770
|
+
/* Keep native size - labels provide the touch target */
|
|
2771
|
+
min-height: unset;
|
|
2772
|
+
min-width: unset;
|
|
2773
|
+
}
|
|
2774
|
+
|
|
2775
|
+
/* Ensure labels with radio/checkbox have adequate touch targets */
|
|
2776
|
+
/* Exclude button-style fieldsets which already have proper sizing */
|
|
2777
|
+
label:has(input[type="radio"]):not(fieldset.buttons label),
|
|
2778
|
+
label:has(input[type="checkbox"]):not(fieldset.buttons label),
|
|
2779
|
+
fieldset[role="radiogroup"]:not(.buttons) label,
|
|
2780
|
+
fieldset[role="group"]:not(.buttons) label {
|
|
2781
|
+
min-height: ${o}px;
|
|
2782
|
+
display: inline-flex;
|
|
2783
|
+
align-items: center;
|
|
2784
|
+
padding: var(--spacing-2) 0;
|
|
2785
|
+
}
|
|
2786
|
+
|
|
2787
|
+
/* Disable hover effects
|
|
2788
|
+
on touch devices */
|
|
2789
|
+
.card {
|
|
2790
|
+
&:hover {
|
|
2791
|
+
box-shadow: var(--shadow-base);
|
|
2792
|
+
}
|
|
2793
|
+
}
|
|
2794
|
+
|
|
2795
|
+
a {
|
|
2796
|
+
&:hover {
|
|
2797
|
+
color: var(--color-primary-600);
|
|
2798
|
+
}
|
|
2799
|
+
}
|
|
2800
|
+
}
|
|
2801
|
+
|
|
2802
|
+
/* Reduced motion */
|
|
2803
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2804
|
+
*, *::before, *::after {
|
|
2805
|
+
animation-duration: 0.01ms !important;
|
|
2806
|
+
animation-iteration-count: 1 !important;
|
|
2807
|
+
transition-duration: 0.01ms !important;
|
|
2808
|
+
scroll-behavior: auto !important;
|
|
2809
|
+
}
|
|
2810
|
+
}
|
|
2811
|
+
|
|
2812
|
+
/* High contrast mode */
|
|
2813
|
+
@media (prefers-contrast: high) {
|
|
2814
|
+
:root {
|
|
2815
|
+
--color-primary-600: #0000ff;
|
|
2816
|
+
--color-primary-700: #0000cc;
|
|
2817
|
+
}
|
|
2818
|
+
|
|
2819
|
+
button, input, textarea, select {
|
|
2820
|
+
border-width: var(--border-width-medium);
|
|
2821
|
+
}
|
|
2822
|
+
}
|
|
2823
|
+
|
|
2824
|
+
/* Print styles */
|
|
2825
|
+
@media print {
|
|
2826
|
+
*, *::before, *::after {
|
|
2827
|
+
background: transparent !important;
|
|
2828
|
+
color: black !important;
|
|
2829
|
+
box-shadow: none !important;
|
|
2830
|
+
}
|
|
2831
|
+
|
|
2832
|
+
a, a:visited {
|
|
2833
|
+
text-decoration: underline;
|
|
2834
|
+
}
|
|
2835
|
+
|
|
2836
|
+
button {
|
|
2837
|
+
display: none;
|
|
2838
|
+
}
|
|
2839
|
+
|
|
2840
|
+
.mobile-hidden, .desktop-hidden {
|
|
2841
|
+
display: block !important;
|
|
2842
|
+
}
|
|
2843
|
+
}
|
|
2844
|
+
|
|
2845
|
+
`}#a(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,o=parseInt(e.slice(5,7),16)/255,a=Math.max(t,n,o),i=Math.min(t,n,o),s,c,d=(a+i)/2;if(a===i)s=c=0;else{let p=a-i;switch(c=d>.5?p/(2-a-i):p/(a+i),a){case t:s=(n-o)/p+(n<o?6:0);break;case n:s=(o-t)/p+2;break;case o:s=(t-n)/p+4;break}s/=6}return{h:s*360,s:c*100,l:d*100}}#t(e,t,n){e=e/360,t=t/100,n=n/100;let o=(d,p,l)=>(l<0&&(l+=1),l>1&&(l-=1),l<1/6?d+(p-d)*6*l:l<1/2?p:l<2/3?d+(p-d)*(2/3-l)*6:d),a,i,s;if(t===0)a=i=s=n;else{let d=n<.5?n*(1+t):n+t-n*t,p=2*n-d;a=o(p,d,e+1/3),i=o(p,d,e),s=o(p,d,e-1/3)}let c=d=>{let p=Math.round(d*255).toString(16);return p.length===1?"0"+p:p};return`#${c(a)}${c(i)}${c(s)}`}getTokens(){return this.tokens}exportCSS(){return this.layeredCSS}#Se(){this.#e={tokens:this.#$e(),primitives:this.#Ce(),components:this.#ze(),utilities:this.#Me()},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`})}#$e(){let{colors:e,spacing:t,radius:n,borderWidths:o,typography:a,shadows:i,darkShadows:s,layout:c,transitions:d,zIndex:p,icons:l}=this.tokens,u=[`@layer tokens {
|
|
2846
|
+
:root {
|
|
2847
|
+
${this.#q(e)}
|
|
2848
|
+
${this.#V(t)}
|
|
2849
|
+
${this.#J(n)}
|
|
2850
|
+
${this.#Y(o)}
|
|
2851
|
+
${this.#Q(a)}
|
|
2852
|
+
${this.#g(i)}
|
|
2853
|
+
${this.#K(c)}
|
|
2854
|
+
${this.#Z(d)}
|
|
2855
|
+
${this.#X(p)}
|
|
2856
|
+
${this.#ee(l)}
|
|
2857
|
+
}
|
|
2858
|
+
${this.#re(e,s)}
|
|
2859
|
+
}`];return u.push(`
|
|
2860
|
+
/* Non-layered dark variables fallback (ensures attribute wins) */
|
|
2861
|
+
`),u.push(this.#te(e,s)),u.join("")}#Ce(){let{advanced:e={},a11y:t={},layout:n={}}=this.options.design,o=e.tabSize||y.TabSizes.standard,a=t.minTouchTarget||y.TouchTargetSizes.standard,i=n.breakpoints||{sm:640,md:768,lg:1024,xl:1280};return`@layer primitives {
|
|
2862
|
+
/* Base HTML reset */
|
|
2863
|
+
*, *::before, *::after {
|
|
2864
|
+
box-sizing: border-box;
|
|
2865
|
+
}
|
|
2866
|
+
|
|
2867
|
+
:where(html) {
|
|
2868
|
+
interpolate-size: allow-keywords;
|
|
2869
|
+
font-family: var(--font-family-body);
|
|
2870
|
+
font-size: var(--font-size-base);
|
|
2871
|
+
line-height: var(--font-line-height-normal);
|
|
2872
|
+
color: var(--color-text-primary);
|
|
2873
|
+
background-color: var(--color-surface-base);
|
|
2874
|
+
-webkit-text-size-adjust: 100%;
|
|
2875
|
+
-webkit-font-smoothing: antialiased;
|
|
2876
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2877
|
+
tab-size: ${o};
|
|
2878
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
|
2879
|
+
}
|
|
2880
|
+
|
|
2881
|
+
:where(dialog){
|
|
2882
|
+
background-color: transparent;
|
|
2883
|
+
min-width: 320px;
|
|
2884
|
+
border: none;
|
|
2885
|
+
}
|
|
2886
|
+
|
|
2887
|
+
:where(body) {
|
|
2888
|
+
margin: 0;
|
|
2889
|
+
padding: 0;
|
|
2890
|
+
scroll-behavior: smooth;
|
|
2891
|
+
min-height: 100vh;
|
|
2892
|
+
min-height: var(--layout-min-height, 100vh);
|
|
2893
|
+
overflow-x: hidden;
|
|
2894
|
+
-webkit-overflow-scrolling: touch;
|
|
2895
|
+
}
|
|
2896
|
+
|
|
2897
|
+
:where(body.drawer-open) {
|
|
2898
|
+
/* overflow: hidden; */
|
|
2899
|
+
/* scrollbar-gutter: stable; */
|
|
2900
|
+
}
|
|
2901
|
+
|
|
2902
|
+
/* Button primitives */
|
|
2903
|
+
:where(button) {
|
|
2904
|
+
all: unset;
|
|
2905
|
+
box-sizing: border-box;
|
|
2906
|
+
font: inherit;
|
|
2907
|
+
color: var(--color-primary-contrast, white);
|
|
2908
|
+
background: var(--color-primary-600);
|
|
2909
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
2910
|
+
border: 0;
|
|
2911
|
+
border-radius: var(--radius-md);
|
|
2912
|
+
cursor: pointer;
|
|
2913
|
+
transition: opacity var(--transition-fast), background-color var(--transition-fast);
|
|
2914
|
+
display: inline-flex;
|
|
2915
|
+
align-items: center;
|
|
2916
|
+
justify-content: center;
|
|
2917
|
+
gap: var(--spacing-2);
|
|
2918
|
+
font-weight: var(--font-weight-medium);
|
|
2919
|
+
line-height: 1.5;
|
|
2920
|
+
min-height: ${a}px;
|
|
2921
|
+
touch-action: manipulation;
|
|
2922
|
+
user-select: none;
|
|
2923
|
+
}
|
|
2924
|
+
|
|
2925
|
+
:where(button):hover:not(:disabled) {
|
|
2926
|
+
opacity: 0.9;
|
|
2927
|
+
background-color: var(--color-primary-700);
|
|
2928
|
+
}
|
|
2929
|
+
|
|
2930
|
+
:where(button):focus-visible {
|
|
2931
|
+
outline: 2px solid var(--color-primary-500);
|
|
2932
|
+
outline-offset: 2px;
|
|
2933
|
+
}
|
|
2934
|
+
|
|
2935
|
+
:where(button):disabled {
|
|
2936
|
+
opacity: 0.5;
|
|
2937
|
+
cursor: not-allowed;
|
|
2938
|
+
}
|
|
2939
|
+
|
|
2940
|
+
:where(button):active:not(:disabled) {
|
|
2941
|
+
transform: scale(0.98);
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
/* Input primitives */
|
|
2945
|
+
:where(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"])),
|
|
2946
|
+
:where(select),
|
|
2947
|
+
:where(textarea) {
|
|
2948
|
+
font: inherit;
|
|
2949
|
+
color: var(--color-text-primary);
|
|
2950
|
+
background: var(--color-input-bg);
|
|
2951
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
2952
|
+
border-radius: var(--radius-md);
|
|
2953
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
2954
|
+
min-height: 40px;
|
|
2955
|
+
width: 100%;
|
|
2956
|
+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
2957
|
+
appearance: none;
|
|
2958
|
+
}
|
|
2959
|
+
|
|
2960
|
+
:where(input):focus-visible,
|
|
2961
|
+
:where(select):focus-visible,
|
|
2962
|
+
:where(textarea):focus-visible {
|
|
2963
|
+
outline: none;
|
|
2964
|
+
border-color: var(--color-primary-500);
|
|
2965
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
|
|
2966
|
+
}
|
|
2967
|
+
|
|
2968
|
+
:where(input):disabled,
|
|
2969
|
+
:where(select):disabled,
|
|
2970
|
+
:where(textarea):disabled {
|
|
2971
|
+
opacity: 0.6;
|
|
2972
|
+
cursor: not-allowed;
|
|
2973
|
+
background-color: var(--color-input-disabled-bg);
|
|
2974
|
+
}
|
|
2975
|
+
|
|
2976
|
+
/* Harmonized placeholder styling */
|
|
2977
|
+
:where(input)::placeholder,
|
|
2978
|
+
:where(textarea)::placeholder,
|
|
2979
|
+
:where(pds-richtext)::placeholder {
|
|
2980
|
+
color: var(--color-text-muted);
|
|
2981
|
+
opacity: 1;
|
|
2982
|
+
font-weight: var(--font-weight-normal);
|
|
2983
|
+
}
|
|
2984
|
+
|
|
2985
|
+
:where(textarea) {
|
|
2986
|
+
min-height: 80px;
|
|
2987
|
+
resize: vertical;
|
|
2988
|
+
}
|
|
2989
|
+
|
|
2990
|
+
/* Link primitives */
|
|
2991
|
+
:where(a) {
|
|
2992
|
+
color: var(--color-primary-text, var(--color-primary-600));
|
|
2993
|
+
text-decoration: underline;
|
|
2994
|
+
text-underline-offset: 0.2em;
|
|
2995
|
+
transition: opacity var(--transition-fast);
|
|
2996
|
+
}
|
|
2997
|
+
|
|
2998
|
+
:where(a):hover {
|
|
2999
|
+
opacity: 0.8;
|
|
3000
|
+
}
|
|
3001
|
+
|
|
3002
|
+
:where(a):focus-visible {
|
|
3003
|
+
outline: 2px solid var(--color-primary-500);
|
|
3004
|
+
outline-offset: 2px;
|
|
3005
|
+
border-radius: var(--radius-sm);
|
|
3006
|
+
}
|
|
3007
|
+
|
|
3008
|
+
/* Form primitives */
|
|
3009
|
+
:where(label) {
|
|
3010
|
+
display: block;
|
|
3011
|
+
font-weight: var(--font-weight-medium);
|
|
3012
|
+
margin-bottom: var(--spacing-2);
|
|
3013
|
+
color: var(--color-text-primary);
|
|
3014
|
+
font-size: var(--font-size-sm);
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
/* Checkbox enhancement - visually hide native input but keep accessible
|
|
3018
|
+
Excludes button-style checkboxes in fieldsets and special containers */
|
|
3019
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]) input[type="checkbox"]) {
|
|
3020
|
+
position: absolute;
|
|
3021
|
+
opacity: 0;
|
|
3022
|
+
width: 1px;
|
|
3023
|
+
height: 1px;
|
|
3024
|
+
}
|
|
3025
|
+
|
|
3026
|
+
/* Style label container for checkbox */
|
|
3027
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])) {
|
|
3028
|
+
display: inline-flex;
|
|
3029
|
+
align-items: center;
|
|
3030
|
+
gap: var(--spacing-2);
|
|
3031
|
+
cursor: pointer;
|
|
3032
|
+
user-select: none;
|
|
3033
|
+
position: relative;
|
|
3034
|
+
padding-left: calc(var(--spacing-5) + var(--spacing-3));
|
|
3035
|
+
}
|
|
3036
|
+
|
|
3037
|
+
/* Custom checkbox box using PDS tokens - works with or without span wrapper */
|
|
3038
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])::before) {
|
|
3039
|
+
content: "";
|
|
3040
|
+
position: absolute;
|
|
3041
|
+
left: 0;
|
|
3042
|
+
top: 50%;
|
|
3043
|
+
transform: translateY(-50%);
|
|
3044
|
+
width: var(--spacing-5);
|
|
3045
|
+
height: var(--spacing-5);
|
|
3046
|
+
border: var(--border-width-medium) solid var(--color-border);
|
|
3047
|
+
border-radius: var(--radius-sm);
|
|
3048
|
+
background: var(--color-surface-base);
|
|
3049
|
+
transition: all var(--transition-fast);
|
|
3050
|
+
flex-shrink: 0;
|
|
3051
|
+
}
|
|
3052
|
+
|
|
3053
|
+
/* Checkmark */
|
|
3054
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked)::after) {
|
|
3055
|
+
content: "";
|
|
3056
|
+
position: absolute;
|
|
3057
|
+
left: var(--spacing-2);
|
|
3058
|
+
top: 50%;
|
|
3059
|
+
transform: translateY(-60%) rotate(45deg);
|
|
3060
|
+
width: var(--spacing-1-5);
|
|
3061
|
+
height: var(--spacing-3);
|
|
3062
|
+
border: solid var(--color-primary-contrast, white);
|
|
3063
|
+
border-width: 0 2px 2px 0;
|
|
3064
|
+
}
|
|
3065
|
+
|
|
3066
|
+
/* Checked state */
|
|
3067
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked)::before) {
|
|
3068
|
+
background: var(--color-primary-600);
|
|
3069
|
+
border-color: var(--color-primary-600);
|
|
3070
|
+
}
|
|
3071
|
+
|
|
3072
|
+
/* Focus styles for accessibility */
|
|
3073
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:focus)::before) {
|
|
3074
|
+
outline: 2px solid var(--color-primary-500);
|
|
3075
|
+
outline-offset: 2px;
|
|
3076
|
+
}
|
|
3077
|
+
|
|
3078
|
+
/* Hover effects */
|
|
3079
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:not(:disabled)):hover::before) {
|
|
3080
|
+
border-color: var(--color-primary-600);
|
|
3081
|
+
background: var(--color-surface-subtle);
|
|
3082
|
+
}
|
|
3083
|
+
|
|
3084
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked:not(:disabled)):hover::before) {
|
|
3085
|
+
background: var(--color-primary-700);
|
|
3086
|
+
border-color: var(--color-primary-700);
|
|
3087
|
+
}
|
|
3088
|
+
|
|
3089
|
+
/* Disabled state */
|
|
3090
|
+
:where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:disabled)) {
|
|
3091
|
+
opacity: 0.5;
|
|
3092
|
+
cursor: not-allowed;
|
|
3093
|
+
}
|
|
3094
|
+
|
|
3095
|
+
:where(fieldset) {
|
|
3096
|
+
border: none;
|
|
3097
|
+
}
|
|
3098
|
+
|
|
3099
|
+
:where(legend) {
|
|
3100
|
+
display: block;
|
|
3101
|
+
font-weight: var(--font-weight-semibold);
|
|
3102
|
+
padding: 0;
|
|
3103
|
+
color: var(--color-text-primary);
|
|
3104
|
+
font-weight: var(--font-weight-semibold);
|
|
3105
|
+
color: var(--color-text-primary);
|
|
3106
|
+
margin: 0 0 var(--spacing-3) 0;
|
|
3107
|
+
border: none;
|
|
3108
|
+
line-height: var(--font-line-height-tight);
|
|
3109
|
+
font-size: var(--font-size-lg);
|
|
3110
|
+
background: transparent; /* avoid browser default notch behavior */
|
|
3111
|
+
width: auto;
|
|
3112
|
+
box-sizing: border-box;
|
|
3113
|
+
}
|
|
3114
|
+
|
|
3115
|
+
|
|
3116
|
+
/* List primitives */
|
|
3117
|
+
:where(ul, ol) {
|
|
3118
|
+
padding-left: var(--spacing-6);
|
|
3119
|
+
margin: var(--spacing-3) 0;
|
|
3120
|
+
}
|
|
3121
|
+
|
|
3122
|
+
:where(li) {
|
|
3123
|
+
margin: var(--spacing-1) 0;
|
|
3124
|
+
}
|
|
3125
|
+
|
|
3126
|
+
/* Typography primitives */
|
|
3127
|
+
:where(h1, h2, h3, h4, h5, h6) {
|
|
3128
|
+
font-family: var(--font-family-headings);
|
|
3129
|
+
font-weight: var(--font-weight-bold);
|
|
3130
|
+
line-height: var(--font-line-height-tight);
|
|
3131
|
+
margin: var(--spacing-4) 0 var(--spacing-3) 0;
|
|
3132
|
+
color: var(--color-text-primary);
|
|
3133
|
+
word-wrap: break-word;
|
|
3134
|
+
hyphens: auto;
|
|
3135
|
+
overflow-wrap: break-word;
|
|
3136
|
+
}
|
|
3137
|
+
|
|
3138
|
+
/* Mobile-first heading sizes */
|
|
3139
|
+
:where(h1) { font-size: var(--font-size-2xl); }
|
|
3140
|
+
:where(h2) { font-size: var(--font-size-xl); }
|
|
3141
|
+
:where(h3) { font-size: var(--font-size-lg); }
|
|
3142
|
+
:where(h4) { font-size: var(--font-size-base); }
|
|
3143
|
+
:where(h5) { font-size: var(--font-size-sm); }
|
|
3144
|
+
:where(h6) { font-size: var(--font-size-xs); }
|
|
3145
|
+
|
|
3146
|
+
/* Scale up on larger screens */
|
|
3147
|
+
@media (min-width: ${i.sm}px) {
|
|
3148
|
+
:where(h1) { font-size: var(--font-size-3xl); }
|
|
3149
|
+
:where(h2) { font-size: var(--font-size-2xl); }
|
|
3150
|
+
:where(h3) { font-size: var(--font-size-xl); }
|
|
3151
|
+
:where(h4) { font-size: var(--font-size-lg); }
|
|
3152
|
+
:where(h5) { font-size: var(--font-size-base); }
|
|
3153
|
+
:where(h6) { font-size: var(--font-size-sm); }
|
|
3154
|
+
}
|
|
3155
|
+
|
|
3156
|
+
:where(p) {
|
|
3157
|
+
margin: var(--spacing-3) 0;
|
|
3158
|
+
line-height: var(--font-line-height-relaxed);
|
|
3159
|
+
color: var(--color-text-primary);
|
|
3160
|
+
}
|
|
3161
|
+
|
|
3162
|
+
/* Code primitives */
|
|
3163
|
+
:where(code) {
|
|
3164
|
+
font-family: var(--font-family-mono, monospace);
|
|
3165
|
+
font-size: 0.9em;
|
|
3166
|
+
background: var(--color-surface-muted);
|
|
3167
|
+
padding: 0.2em 0.4em;
|
|
3168
|
+
border-radius: var(--radius-sm);
|
|
3169
|
+
color: var(--color-text-primary);
|
|
3170
|
+
}
|
|
3171
|
+
|
|
3172
|
+
:where(pre) {
|
|
3173
|
+
font-family: var(--font-family-mono, monospace);
|
|
3174
|
+
background: var(--color-surface-muted);
|
|
3175
|
+
padding: var(--spacing-4);
|
|
3176
|
+
border-radius: var(--radius-md);
|
|
3177
|
+
overflow-x: auto;
|
|
3178
|
+
margin: var(--spacing-4) 0;
|
|
3179
|
+
}
|
|
3180
|
+
|
|
3181
|
+
:where(pre code) {
|
|
3182
|
+
background: none;
|
|
3183
|
+
padding: 0;
|
|
3184
|
+
}
|
|
3185
|
+
|
|
3186
|
+
/* Media primitives */
|
|
3187
|
+
:where(img, video) {
|
|
3188
|
+
max-width: 100%;
|
|
3189
|
+
height: auto;
|
|
3190
|
+
border-radius: var(--radius-sm);
|
|
3191
|
+
}
|
|
3192
|
+
|
|
3193
|
+
:where(figure) {
|
|
3194
|
+
margin: 0 0 var(--spacing-6) 0;
|
|
3195
|
+
}
|
|
3196
|
+
|
|
3197
|
+
:where(figcaption) {
|
|
3198
|
+
margin-top: var(--spacing-3);
|
|
3199
|
+
font-size: var(--font-size-sm);
|
|
3200
|
+
color: var(--color-text-secondary);
|
|
3201
|
+
line-height: var(--font-line-height-relaxed);
|
|
3202
|
+
}
|
|
3203
|
+
|
|
3204
|
+
|
|
3205
|
+
:where([hidden]) {
|
|
3206
|
+
display: none !important;
|
|
3207
|
+
}
|
|
3208
|
+
}
|
|
3209
|
+
|
|
3210
|
+
`}#ze(){return`@layer components {
|
|
3211
|
+
|
|
3212
|
+
${this.#ce()}
|
|
3213
|
+
|
|
3214
|
+
${this.#de()}
|
|
3215
|
+
|
|
3216
|
+
${this.#ue()}
|
|
3217
|
+
|
|
3218
|
+
${this.#me()}
|
|
3219
|
+
|
|
3220
|
+
${this.#fe()}
|
|
3221
|
+
|
|
3222
|
+
${this.#ge()}
|
|
3223
|
+
|
|
3224
|
+
${this.#ve()}
|
|
3225
|
+
|
|
3226
|
+
${this.#he()}
|
|
3227
|
+
|
|
3228
|
+
${this.#pe()}
|
|
3229
|
+
|
|
3230
|
+
/* Card component */
|
|
3231
|
+
|
|
3232
|
+
.card {
|
|
3233
|
+
background: var(--color-surface-base);
|
|
3234
|
+
border-radius: var(--radius-md);
|
|
3235
|
+
padding: var(--spacing-4);
|
|
3236
|
+
}
|
|
3237
|
+
|
|
3238
|
+
:where(.card:has(> header):has(> footer)) {
|
|
3239
|
+
display: grid;
|
|
3240
|
+
grid-template-rows: auto 1fr auto;
|
|
3241
|
+
gap: var(--spacing-4);
|
|
3242
|
+
}
|
|
3243
|
+
|
|
3244
|
+
:where(.card > footer) {
|
|
3245
|
+
display: flex;
|
|
3246
|
+
justify-content: space-evenly;
|
|
3247
|
+
}
|
|
3248
|
+
|
|
3249
|
+
:where(.card > header > :last-child:not(:first-child)) {
|
|
3250
|
+
color: var(--color-text-muted);
|
|
3251
|
+
}
|
|
3252
|
+
|
|
3253
|
+
.card-elevated {
|
|
3254
|
+
background: var(--color-surface-elevated);
|
|
3255
|
+
box-shadow: var(--shadow-md);
|
|
3256
|
+
}
|
|
3257
|
+
|
|
3258
|
+
.card-outlined,
|
|
3259
|
+
.card-basic {
|
|
3260
|
+
background: var(--color-surface-base);
|
|
3261
|
+
border: var(--border-width-thin) solid var(--color-border);
|
|
3262
|
+
}
|
|
3263
|
+
|
|
3264
|
+
.card-interactive:hover {
|
|
3265
|
+
transform: translateY(-2px);
|
|
3266
|
+
box-shadow: var(--shadow-lg);
|
|
3267
|
+
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
|
3268
|
+
}
|
|
3269
|
+
|
|
3270
|
+
${this.#be()}
|
|
3271
|
+
|
|
3272
|
+
${this.#ae()}
|
|
3273
|
+
|
|
3274
|
+
}
|
|
3275
|
+
`}#Me(){return`@layer utilities {
|
|
3276
|
+
|
|
3277
|
+
${this.#ye()}
|
|
3278
|
+
|
|
3279
|
+
${this.#xe()}
|
|
3280
|
+
|
|
3281
|
+
/* Optional utilities/features controlled by config options */
|
|
3282
|
+
/* - Body background mesh rule (applies one of the generated mesh vars) */
|
|
3283
|
+
/* - Liquid glass utility class */
|
|
3284
|
+
${this.#ie()}
|
|
3285
|
+
${this.#se()}
|
|
3286
|
+
|
|
3287
|
+
${this.#le()}
|
|
3288
|
+
|
|
3289
|
+
/* Surface utilities */
|
|
3290
|
+
|
|
3291
|
+
.surface {
|
|
3292
|
+
background-color: var(--color-surface-base);
|
|
3293
|
+
--border-gradient-fill: var(--color-surface-base);
|
|
3294
|
+
}
|
|
3295
|
+
|
|
3296
|
+
.surface-subtle {
|
|
3297
|
+
background-color: var(--color-surface-subtle);
|
|
3298
|
+
--border-gradient-fill: var(--color-surface-subtle);
|
|
3299
|
+
}
|
|
3300
|
+
|
|
3301
|
+
.surface-elevated {
|
|
3302
|
+
background-color: var(--color-surface-elevated);
|
|
3303
|
+
--border-gradient-fill: var(--color-surface-elevated);
|
|
3304
|
+
}
|
|
3305
|
+
|
|
3306
|
+
.surface-sunken {
|
|
3307
|
+
background-color: var(--color-surface-sunken);
|
|
3308
|
+
--border-gradient-fill: var(--color-surface-sunken);
|
|
3309
|
+
}
|
|
3310
|
+
|
|
3311
|
+
.surface-overlay {
|
|
3312
|
+
background-color: var(--color-surface-overlay);
|
|
3313
|
+
--border-gradient-fill: var(--color-surface-overlay);
|
|
3314
|
+
}
|
|
3315
|
+
|
|
3316
|
+
/* Translucent semantic variants */
|
|
3317
|
+
.surface-translucent {
|
|
3318
|
+
background-color: var(--color-surface-translucent-50);
|
|
3319
|
+
--border-gradient-fill: var(--color-surface-translucent-50);
|
|
3320
|
+
}
|
|
3321
|
+
|
|
3322
|
+
.surface-translucent-25 {
|
|
3323
|
+
background-color: var(--color-surface-translucent-25);
|
|
3324
|
+
--border-gradient-fill: var(--color-surface-translucent-25);
|
|
3325
|
+
}
|
|
3326
|
+
|
|
3327
|
+
.surface-translucent-50 {
|
|
3328
|
+
background-color: var(--color-surface-translucent-50);
|
|
3329
|
+
--border-gradient-fill: var(--color-surface-translucent-50);
|
|
3330
|
+
}
|
|
3331
|
+
|
|
3332
|
+
.surface-translucent-75 {
|
|
3333
|
+
background-color: var(--color-surface-translucent-75);
|
|
3334
|
+
--border-gradient-fill: var(--color-surface-translucent-75);
|
|
3335
|
+
}
|
|
3336
|
+
|
|
3337
|
+
/* Legacy utility retained for backwards compatibility (opinionated overlay) */
|
|
3338
|
+
.surface-overlay {
|
|
3339
|
+
padding: var(--spacing-4);
|
|
3340
|
+
background-color: var(--color-surface-overlay);
|
|
3341
|
+
box-shadow: var(--shadow-lg);
|
|
3342
|
+
border-radius: var(--radius-md);
|
|
3343
|
+
}
|
|
3344
|
+
|
|
3345
|
+
|
|
3346
|
+
/*
|
|
3347
|
+
* SURFACE-INVERSE: Local Theme Context Flip
|
|
3348
|
+
*
|
|
3349
|
+
* We can't simply add .surface-inverse to the dark mode selector because that would
|
|
3350
|
+
* also apply the dark color PALETTE (grays, surfaces, etc.), which would override
|
|
3351
|
+
* --color-surface-inverse itself. Instead, we duplicate only the SEMANTIC tokens.
|
|
3352
|
+
*
|
|
3353
|
+
* Light theme .surface-inverse \u2192 dark semantic tokens
|
|
3354
|
+
* Dark theme .surface-inverse \u2192 light semantic tokens (flip back)
|
|
3355
|
+
*/
|
|
3356
|
+
|
|
3357
|
+
/* Surface-inverse visual properties (shared, uses smart surface tokens) */
|
|
3358
|
+
.surface-inverse {
|
|
3359
|
+
background-color: var(--color-surface-inverse);
|
|
3360
|
+
--border-gradient-fill: var(--color-surface-inverse);
|
|
3361
|
+
color: var(--surface-inverse-text);
|
|
3362
|
+
|
|
3363
|
+
pds-icon {
|
|
3364
|
+
color: var(--surface-inverse-icon);
|
|
3365
|
+
}
|
|
3366
|
+
|
|
3367
|
+
/* btn-primary stays vibrant in any context */
|
|
3368
|
+
& .btn-primary {
|
|
3369
|
+
background-color: var(--color-primary-500);
|
|
3370
|
+
border-color: var(--color-primary-500);
|
|
3371
|
+
color: var(--color-primary-contrast, #ffffff);
|
|
3372
|
+
|
|
3373
|
+
&:hover {
|
|
3374
|
+
background-color: var(--color-primary-400);
|
|
3375
|
+
border-color: var(--color-primary-400);
|
|
3376
|
+
}
|
|
3377
|
+
}
|
|
3378
|
+
}
|
|
3379
|
+
|
|
3380
|
+
/* Light-mode inverse: apply dark semantic tokens */
|
|
3381
|
+
html:not([data-theme="dark"]) .surface-inverse {
|
|
3382
|
+
--color-text-primary: var(--color-gray-100);
|
|
3383
|
+
--color-text-secondary: var(--color-gray-300);
|
|
3384
|
+
--color-text-muted: var(--color-gray-600);
|
|
3385
|
+
--color-border: var(--color-gray-700);
|
|
3386
|
+
--color-input-bg: var(--color-gray-800);
|
|
3387
|
+
--color-input-disabled-bg: var(--color-gray-900);
|
|
3388
|
+
--color-input-disabled-text: var(--color-gray-600);
|
|
3389
|
+
--color-code-bg: var(--color-gray-800);
|
|
3390
|
+
--color-surface-muted: rgba(255, 255, 255, 0.08);
|
|
3391
|
+
|
|
3392
|
+
& button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
|
|
3393
|
+
& .btn-secondary {
|
|
3394
|
+
background-color: rgba(255, 255, 255, 0.12);
|
|
3395
|
+
color: var(--surface-inverse-text);
|
|
3396
|
+
border-color: rgba(255, 255, 255, 0.25);
|
|
3397
|
+
|
|
3398
|
+
&:hover { background-color: rgba(255, 255, 255, 0.2); }
|
|
3399
|
+
&:active { background-color: rgba(255, 255, 255, 0.28); }
|
|
3400
|
+
}
|
|
3401
|
+
|
|
3402
|
+
& select {
|
|
3403
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
3404
|
+
color: var(--surface-inverse-text);
|
|
3405
|
+
}
|
|
3406
|
+
|
|
3407
|
+
& a:not([class*="btn"]) {
|
|
3408
|
+
color: var(--color-primary-300, #7dd3fc);
|
|
3409
|
+
}
|
|
3410
|
+
}
|
|
3411
|
+
|
|
3412
|
+
/* Dark-mode inverse: flip back to light semantic tokens */
|
|
3413
|
+
html[data-theme="dark"] .surface-inverse {
|
|
3414
|
+
--color-text-primary: var(--color-gray-900);
|
|
3415
|
+
--color-text-secondary: var(--color-gray-600);
|
|
3416
|
+
--color-text-muted: var(--color-gray-600);
|
|
3417
|
+
--color-border: var(--color-gray-300);
|
|
3418
|
+
--color-input-bg: var(--color-surface-base);
|
|
3419
|
+
--color-input-disabled-bg: var(--color-gray-50);
|
|
3420
|
+
--color-input-disabled-text: var(--color-gray-500);
|
|
3421
|
+
--color-code-bg: var(--color-gray-100);
|
|
3422
|
+
--color-surface-muted: var(--color-gray-100);
|
|
3423
|
+
|
|
3424
|
+
& button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
|
|
3425
|
+
& .btn-secondary {
|
|
3426
|
+
background-color: rgba(0, 0, 0, 0.06);
|
|
3427
|
+
color: var(--surface-inverse-text);
|
|
3428
|
+
border-color: rgba(0, 0, 0, 0.15);
|
|
3429
|
+
|
|
3430
|
+
&:hover { background-color: rgba(0, 0, 0, 0.1); }
|
|
3431
|
+
&:active { background-color: rgba(0, 0, 0, 0.15); }
|
|
3432
|
+
}
|
|
3433
|
+
|
|
3434
|
+
& select {
|
|
3435
|
+
background-color: #ffffff;
|
|
3436
|
+
color: var(--surface-inverse-text);
|
|
3437
|
+
}
|
|
3438
|
+
|
|
3439
|
+
& a:not([class*="btn"]) {
|
|
3440
|
+
color: var(--color-primary-600, #0284c7);
|
|
3441
|
+
}
|
|
3442
|
+
}
|
|
3443
|
+
|
|
3444
|
+
/* Shadow utilities */
|
|
3445
|
+
.shadow-sm {
|
|
3446
|
+
box-shadow: var(--shadow-sm);
|
|
3447
|
+
}
|
|
3448
|
+
|
|
3449
|
+
.shadow-base, .shadow {
|
|
3450
|
+
box-shadow: var(--shadow-base);
|
|
3451
|
+
}
|
|
3452
|
+
|
|
3453
|
+
.shadow-md {
|
|
3454
|
+
box-shadow: var(--shadow-md);
|
|
3455
|
+
}
|
|
3456
|
+
|
|
3457
|
+
.shadow-lg {
|
|
3458
|
+
box-shadow: var(--shadow-lg);
|
|
3459
|
+
}
|
|
3460
|
+
|
|
3461
|
+
.shadow-xl {
|
|
3462
|
+
box-shadow: var(--shadow-xl);
|
|
3463
|
+
}
|
|
3464
|
+
|
|
3465
|
+
.shadow-inner {
|
|
3466
|
+
box-shadow: var(--shadow-inner);
|
|
3467
|
+
}
|
|
3468
|
+
|
|
3469
|
+
.shadow-none {
|
|
3470
|
+
box-shadow: none;
|
|
3471
|
+
}
|
|
3472
|
+
|
|
3473
|
+
.text-muted {
|
|
3474
|
+
color: var(--color-text-muted);
|
|
3475
|
+
}
|
|
3476
|
+
|
|
3477
|
+
|
|
3478
|
+
${this.#we()}
|
|
3479
|
+
|
|
3480
|
+
${this.#ke()}
|
|
3481
|
+
|
|
3482
|
+
}
|
|
3483
|
+
`}#Ee(){this.#o={tokens:new CSSStyleSheet,primitives:new CSSStyleSheet,components:new CSSStyleSheet,utilities:new CSSStyleSheet},this.#Te()}#Te(){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}
|
|
3484
|
+
${this.#e.primitives}
|
|
3485
|
+
${this.#e.components}
|
|
3486
|
+
${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 D<"u"?D:null,enums:typeof y<"u"?y: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[n,o]of Object.entries(t))typeof o=="object"&&o!==null&&e.push({name:n,scale:o});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 n=this.options.design||{};return JSON.stringify(n).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.#l("tokens",this.#e.tokens),"pds-primitives.css.js":this.#l("primitives",this.#e.primitives),"pds-components.css.js":this.#l("components",this.#e.components),"pds-utilities.css.js":this.#l("utilities",this.#e.utilities),"pds-styles.css.js":this.#l("styles",this.layeredCSS)}}#l(e,t){let n=t.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$/g,"\\$");return`// Pure Design System - ${e}
|
|
3487
|
+
// Auto-generated - do not edit directly
|
|
3488
|
+
|
|
3489
|
+
export const ${e} = new CSSStyleSheet();
|
|
3490
|
+
${e}.replaceSync(\`${n}\`);
|
|
3491
|
+
|
|
3492
|
+
export const ${e}CSS = \`${n}\`;
|
|
3493
|
+
`}};function ir(r={},e={}){let t=Number(e.minContrast||4.5),n=Number(e.minMutedContrast||3),o=!!e.extendedChecks,a=d=>{let p=String(d||"").replace("#",""),l=p.length===3?p.split("").map(g=>g+g).join(""):p,u=parseInt(l||"0",16);return{r:u>>16&255,g:u>>8&255,b:u&255}},i=d=>{let{r:p,g:l,b:u}=a(d),g=[p/255,l/255,u/255].map(h=>h<=.03928?h/12.92:Math.pow((h+.055)/1.055,2.4));return .2126*g[0]+.7152*g[1]+.0722*g[2]},s=(d,p)=>{if(!d||!p)return 0;let l=i(d),u=i(p),g=Math.max(l,u),h=Math.min(l,u);return(g+.05)/(h+.05)},c=[];try{let p=new G({design:structuredClone(r)}).tokens.colors,l={surfaceBg:p.surface?.base,surfaceText:p.gray?.[900]||"#000000",surfaceTextSecondary:p.gray?.[700]||p.gray?.[800]||p.gray?.[900],surfaceTextMuted:p.gray?.[500]||p.gray?.[600]||p.gray?.[700],surfaceElevated:p.surface?.elevated||p.surface?.base,primaryFill:p.interactive?.light?.fill||p.primary?.[600],primaryText:p.interactive?.light?.text||p.primary?.[600],accentFill:p.accent?.[600]||p.accent?.[500],successFill:p.success?.[600]||p.success?.[500],warningFill:p.warning?.[600]||p.warning?.[500],dangerFill:p.danger?.[600]||p.danger?.[500],infoFill:p.info?.[600]||p.info?.[500]},u=m=>Math.max(s(m,"#ffffff"),s(m,"#000000")),g=s(l.primaryFill,"#ffffff");g<t&&c.push({path:"/colors/primary",message:`Primary button contrast too low in light theme (${g.toFixed(2)} < ${t}). Choose a darker primary.`,ratio:g,min:t,context:"light/btn-primary"});let h=s(l.surfaceBg,l.surfaceText);if(h<t&&c.push({path:"/colors/background",message:`Base text contrast on surface (light) is too low (${h.toFixed(2)} < ${t}). Adjust background or secondary (gray).`,ratio:h,min:t,context:"light/surface-text"}),o){let m=s(l.surfaceBg,l.surfaceTextSecondary);m<t&&c.push({path:"/colors/secondary",message:`Secondary text contrast on base surface (light) is too low (${m.toFixed(2)} < ${t}).`,ratio:m,min:t,context:"light/surface-text-secondary"});let x=s(l.surfaceBg,l.surfaceTextMuted);x<n&&c.push({path:"/colors/secondary",message:`Muted text contrast on base surface (light) is too low (${x.toFixed(2)} < ${n}).`,ratio:x,min:n,context:"light/surface-text-muted"});let w=s(l.surfaceElevated,l.surfaceText);w<t&&c.push({path:"/colors/background",message:`Elevated surface text contrast (light) is too low (${w.toFixed(2)} < ${t}).`,ratio:w,min:t,context:"light/surface-elevated-text"})}let b=s(l.primaryText,l.surfaceBg);b<t&&c.push({path:"/colors/primary",message:`Primary text on surface is too low for outline/link styles (light) (${b.toFixed(2)} < ${t}). Choose a darker primary or lighter surface.`,ratio:b,min:t,context:"light/outline"}),o&&[{path:"/colors/accent",key:"accent",value:l.accentFill},{path:"/colors/success",key:"success",value:l.successFill},{path:"/colors/warning",key:"warning",value:l.warningFill},{path:"/colors/danger",key:"danger",value:l.dangerFill},{path:"/colors/info",key:"info",value:l.infoFill}].forEach(x=>{if(!x?.value)return;let w=u(x.value);w<t&&c.push({path:x.path,message:`${x.key} fill color cannot achieve accessible text contrast (${w.toFixed(2)} < ${t}) with either white or black text.`,ratio:w,min:t,context:`light/${x.key}-fill`})});let f=p.dark;if(f){let m={surfaceBg:f.surface?.base||p.surface?.inverse,surfaceText:f.gray?.[50]||f.gray?.[100]||"#ffffff",surfaceTextMuted:f.gray?.[300]||f.gray?.[400]||f.gray?.[500],primaryFill:p.interactive?.dark?.fill||f.primary?.[600],primaryText:p.interactive?.dark?.text||f.primary?.[600]},x=s(m.primaryFill,"#ffffff");x<t&&c.push({path:"/colors/darkMode/primary",message:`Primary button contrast too low in dark theme (${x.toFixed(2)} < ${t}). Override darkMode.primary or pick a brighter hue.`,ratio:x,min:t,context:"dark/btn-primary"});let w=s(m.primaryText,m.surfaceBg);if(w<t&&c.push({path:"/colors/darkMode/primary",message:`Primary text on surface is too low for outline/link styles (dark) (${w.toFixed(2)} < ${t}). Override darkMode.primary/background.`,ratio:w,min:t,context:"dark/outline"}),o){let S=s(m.surfaceBg,m.surfaceText);S<t&&c.push({path:"/colors/darkMode/background",message:`Base text contrast on surface (dark) is too low (${S.toFixed(2)} < ${t}).`,ratio:S,min:t,context:"dark/surface-text"});let A=s(m.surfaceBg,m.surfaceTextMuted);A<n&&c.push({path:"/colors/darkMode/secondary",message:`Muted text contrast on surface (dark) is too low (${A.toFixed(2)} < ${n}).`,ratio:A,min:n,context:"dark/surface-text-muted"})}}}catch(d){c.push({path:"/",message:`Validation failed: ${String(d?.message||d)}`,ratio:0,min:0})}return{ok:c.length===0,issues:c}}var xt=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}}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:build' 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"}},ge=new xt;function un(r){try{if(typeof document>"u")return;if(typeof CSSStyleSheet<"u"&&"adoptedStyleSheets"in Document.prototype){let n=new CSSStyleSheet;n.replaceSync(r),n._pds=!0;let o=(document.adoptedStyleSheets||[]).filter(a=>a._pds!==!0);document.adoptedStyleSheets=[...o,n];return}let e="pds-runtime-stylesheet",t=document.getElementById(e);if(!t){t=document.createElement("style"),t.id=e,t.type="text/css";let n=document.head||document.getElementsByTagName("head")[0];n?n.appendChild(t):document.documentElement.appendChild(t)}t.textContent=r}catch(e){console.warn("installRuntimeStyles failed:",e)}}function sr(r){let e=r;if(!e||typeof e!="object"){console.error("[Runtime] applyStyles requires an explicit generator instance in live mode");return}let t=e.layeredCSS||e.css||"";if(!t){e.options?.log?.("warn","[Runtime] No CSS available on generator to apply");return}un(t)}async function He(r,e=[],t=null){try{let n=t?.primitivesStylesheet?t.primitivesStylesheet:await ge.getStylesheet("primitives");r.adoptedStyleSheets=[n,...e]}catch(n){let o=r.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${o}> failed to adopt primitives:`,n),r.adoptedStyleSheets=e}}async function Ue(r,e=["primitives"],t=[],n=null){try{let a=(await Promise.all(e.map(async i=>{if(n)switch(i){case"tokens":return n.tokensStylesheet;case"primitives":return n.primitivesStylesheet;case"components":return n.componentsStylesheet;case"utilities":return n.utilitiesStylesheet;default:break}return ge.getStylesheet(i)}))).filter(i=>i!==null);r.adoptedStyleSheets=[...a,...t]}catch(o){let a=r.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${a}> failed to adopt layers:`,o),r.adoptedStyleSheets=t}}function lr(r){let e=new CSSStyleSheet;return e.replaceSync(r),e}var gn=[{selector:".accordion"},{selector:"nav[data-dropdown]"},{selector:"label[data-toggle]"},{selector:"label[data-color]"},{selector:'input[type="range"]'},{selector:"form[data-required]"},{selector:"fieldset[role=group][data-open]"},{selector:"[data-clip]"},{selector:"button, a[class*='btn-']"}];function mn(r){r.dataset.enhancedAccordion||(r.dataset.enhancedAccordion="true",r.addEventListener("toggle",e=>{e.target.open&&e.target.parentElement===r&&r.querySelectorAll(":scope > details[open]").forEach(t=>{t!==e.target&&(t.open=!1)})},!0))}function fn(r){if(r.dataset.enhancedDropdown)return;r.dataset.enhancedDropdown="true";let e=r.lastElementChild;if(!e)return;let t=r.querySelector("[data-dropdown-toggle]")||r.querySelector("button");t&&!t.hasAttribute("type")&&t.setAttribute("type","button"),e.id||(e.id=`dropdown-${Math.random().toString(36).slice(2,9)}`);let n=e.tagName?.toLowerCase()==="menu",o=8;n&&!e.hasAttribute("role")&&e.setAttribute("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 a=()=>{let k=e.getAttribute("style");e.style.visibility="hidden",e.style.display="inline-block",e.style.pointerEvents="none";let T=e.getBoundingClientRect(),R=Math.max(e.offsetWidth||0,e.scrollWidth||0,T.width||0,1),M=Math.max(e.offsetHeight||0,e.scrollHeight||0,T.height||0,1);return k===null?e.removeAttribute("style"):e.setAttribute("style",k),{width:R,height:M}},i=()=>{let k=(r.getAttribute("data-direction")||r.getAttribute("data-dropdown-direction")||r.getAttribute("data-mode")||"auto").toLowerCase();if(k==="up"||k==="down")return k;let T=(t||r).getBoundingClientRect(),{height:R}=a(),M=Math.max(0,window.innerHeight-T.bottom),z=Math.max(0,T.top),P=M>=R,$=z>=R;return P&&!$?"down":$&&!P?"up":P&&$?"down":z>M?"up":"down"},s=()=>{let k=(r.getAttribute("data-align")||r.getAttribute("data-dropdown-align")||"auto").toLowerCase();if(k==="left"||k==="right"||k==="start"||k==="end")return k==="start"?"left":k==="end"?"right":k;let T=(t||r).getBoundingClientRect(),{width:R}=a(),M=Math.max(0,window.innerWidth-T.left),z=Math.max(0,T.right),P=M>=R,$=z>=R;return P&&!$?"left":$&&!P?"right":P&&$?"left":z>M?"right":"left"},c=(k,T=8)=>{let R=getComputedStyle(r).getPropertyValue(k).trim();if(!R)return T;let M=document.createElement("span");M.style.position="fixed",M.style.visibility="hidden",M.style.pointerEvents="none",M.style.height=R,document.body.appendChild(M);let z=Number.parseFloat(getComputedStyle(M).height);return M.remove(),Number.isFinite(z)?z:T},d=()=>{e.style.removeProperty("position"),e.style.removeProperty("left"),e.style.removeProperty("top"),e.style.removeProperty("right"),e.style.removeProperty("bottom"),e.style.removeProperty("margin-top"),e.style.removeProperty("margin-bottom"),e.style.removeProperty("max-width"),e.style.removeProperty("max-inline-size"),e.style.removeProperty("max-height"),e.style.removeProperty("overflow")},p=()=>{e.getAttribute("aria-hidden")==="false"&&(d(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{l()})}))},l=()=>{if(e.getAttribute("aria-hidden")!=="false")return;let k=(t||r).getBoundingClientRect(),T=window.visualViewport,R=T?.width||document.documentElement?.clientWidth||window.innerWidth,M=T?.height||document.documentElement?.clientHeight||window.innerHeight,z=T?.offsetLeft||0,P=T?.offsetTop||0,$=Math.max(1,R-o*2),v=Math.max(1,M-o*2);e.style.maxWidth=`${Math.round($)}px`,e.style.maxInlineSize=`${Math.round($)}px`,e.style.maxHeight=`${Math.round(v)}px`,e.style.overflow="auto";let{width:E,height:I}=a(),j=c("--spacing-2",8),q=i(),Y=s();r.dataset.dropdownDirection=q,r.dataset.dropdownAlign=Y;let H=Y==="right"?k.right-E:k.left;E>=$-1?H=z+o:H=Math.max(z+o,Math.min(H,z+R-E-o));let F=q==="up"?k.top-j-I:k.bottom+j;F=Math.max(P+o,Math.min(F,P+M-I-o)),e.style.position="fixed",e.style.left=`${Math.round(H)}px`,e.style.top=`${Math.round(F)}px`,e.style.right="auto",e.style.bottom="auto",e.style.marginTop="0",e.style.marginBottom="0"},u=null,g=()=>{u||(u=()=>l(),window.addEventListener("resize",u),window.addEventListener("scroll",u,!0))},h=()=>{u&&(window.removeEventListener("resize",u),window.removeEventListener("scroll",u,!0),u=null)},b=null,f=()=>{b||typeof document>"u"||(b=()=>{e.getAttribute("aria-hidden")==="false"&&(r.dataset.dropdownDirection=i(),r.dataset.dropdownAlign=s(),p(),setTimeout(()=>{e.getAttribute("aria-hidden")==="false"&&p()},50),setTimeout(()=>{e.getAttribute("aria-hidden")==="false"&&p()},150))},document.addEventListener("pds:config-changed",b))},m=()=>{!b||typeof document>"u"||(document.removeEventListener("pds:config-changed",b),b=null)},x=null,w=()=>{r.dataset.dropdownDirection=i(),r.dataset.dropdownAlign=s(),e.setAttribute("aria-hidden","false"),t?.setAttribute("aria-expanded","true"),g(),f(),p(),x||(x=k=>{(k.composedPath?k.composedPath():[k.target]).some(M=>M===r)||S()},setTimeout(()=>{document.addEventListener("click",x)},0))},S=()=>{e.setAttribute("aria-hidden","true"),t?.setAttribute("aria-expanded","false"),h(),m(),d(),x&&(document.removeEventListener("click",x),x=null)},A=()=>{e.getAttribute("aria-hidden")==="false"?S():w()};t?.addEventListener("click",k=>{k.preventDefault(),k.stopPropagation(),A()}),r.addEventListener("keydown",k=>{k.key==="Escape"&&(S(),t?.focus())}),r.addEventListener("focusout",k=>{k.relatedTarget&&((k.composedPath?k.composedPath():[k.relatedTarget]).some(M=>M===r)||S())})}function hn(r){if(r.dataset.enhancedToggle)return;r.dataset.enhancedToggle="true";let e=r.querySelector('input[type="checkbox"]');if(!e)return;r.hasAttribute("tabindex")||r.setAttribute("tabindex","0"),r.setAttribute("role","switch"),r.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 n=document.createElement("span");n.className="toggle-knob",t.appendChild(n),r.insertBefore(t,e.nextSibling);let o=()=>{r.setAttribute("aria-checked",e.checked?"true":"false")},a=()=>{e.disabled||(e.checked=!e.checked,o(),e.dispatchEvent(new Event("change",{bubbles:!0})))};r.addEventListener("click",i=>{i.preventDefault(),a()}),r.addEventListener("keydown",i=>{(i.key===" "||i.key==="Enter")&&(i.preventDefault(),a())}),e.addEventListener("change",o)}function bn(r){if(r.dataset.enhancedColorInput)return;let e=r.querySelector('input[type="color"]');if(!e)return;r.dataset.enhancedColorInput="true";let t=r.querySelector(":scope > .color-control"),n=r.querySelector(":scope > .color-control > .color-swatch"),o=r.querySelector(":scope > .color-control > output");t||(t=document.createElement("span"),t.className="color-control",e.before(t)),n||(n=document.createElement("span"),n.className="color-swatch",t.appendChild(n)),e.parentElement!==n&&n.appendChild(e),o||(o=document.createElement("output"),t.appendChild(o));let a=()=>{if(e.dataset.colorUnset==="1"){o.value="",o.textContent="not set",t.dataset.value="",t.dataset.unset="1",n.dataset.unset="1";return}o.value=e.value,o.textContent=e.value,t.dataset.value=e.value,delete t.dataset.unset,delete n.dataset.unset};a();let i=()=>{e.dataset.colorUnset==="1"&&(e.dataset.colorUnset="0"),a()};e.addEventListener("input",i,{passive:!0}),e.addEventListener("change",i,{passive:!0})}function yn(r){if(r.dataset.enhancedRange)return;let e=i=>{if(r.dataset.enhancedRangeProgrammatic)return;r.dataset.enhancedRangeProgrammatic="1";let s=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(r),"value")||Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");s?.get&&s?.set&&Object.defineProperty(r,"value",{configurable:!0,enumerable:s.enumerable,get(){return s.get.call(this)},set(d){s.set.call(this,d),i()}}),new MutationObserver(d=>{d.some(l=>{let u=l.attributeName;return u==="value"||u==="min"||u==="max"})&&i()}).observe(r,{attributes:!0,attributeFilter:["value","min","max"]})},t=r.closest("label"),n=t?.classList.contains("range-output"),o=r.id||`range-${Math.random().toString(36).substring(2,11)}`,a=`${o}-output`;if(r.id=o,n){let i=t.querySelector("span");if(i&&!i.classList.contains("range-output-wrapper")){let s=document.createElement("span");s.className="range-output-wrapper",s.style.display="flex",s.style.justifyContent="space-between",s.style.alignItems="center";let c=document.createElement("span");c.textContent=i.textContent,s.appendChild(c);let d=document.createElement("output");d.id=a,d.setAttribute("for",o),d.style.color="var(--surface-text-secondary, var(--color-text-secondary))",d.style.fontSize="0.875rem",d.textContent=r.value,s.appendChild(d),i.textContent="",i.appendChild(s);let p=()=>{d.textContent=r.value};r.addEventListener("input",p),r.addEventListener("change",p),e(p),p()}}else{let i=r.closest(".range-container");i||(i=document.createElement("div"),i.className="range-container",r.parentNode?.insertBefore(i,r),i.appendChild(r)),i.style.position="relative";let s=document.createElement("output");s.id=a,s.setAttribute("for",o),s.className="range-bubble",s.setAttribute("aria-live","polite"),i.appendChild(s);let c=()=>{let l=parseFloat(r.min)||0,u=parseFloat(r.max)||100,g=parseFloat(r.value),h=(g-l)/(u-l);s.style.left=`calc(${h*100}% )`,s.textContent=String(g)},d=()=>s.classList.add("visible"),p=()=>s.classList.remove("visible");r.addEventListener("input",c),r.addEventListener("pointerdown",d),r.addEventListener("pointerup",p),r.addEventListener("pointerleave",p),r.addEventListener("focus",d),r.addEventListener("blur",p),r.addEventListener("change",c),e(c),c()}r.dataset.enhancedRange="1"}function vn(r){if(r.dataset.enhancedRequired)return;r.dataset.enhancedRequired="true";let e=t=>{let n;if(t.closest("[role$=group]")?n=t.closest("[role$=group]").querySelector("legend"):n=t.closest("label"),!n||n.querySelector(".required-asterisk"))return;let o=document.createElement("span");o.classList.add("required-asterisk"),o.textContent="*",o.style.marginLeft="4px";let a=n.querySelector("span, [data-label]");if(a)a.appendChild(o);else{let s=n.querySelector("input, select, textarea");s?n.insertBefore(o,s):n.appendChild(o)}let i=t.closest("form");if(i&&!i.querySelector(".required-legend")){let s=document.createElement("small");s.classList.add("required-legend"),s.textContent="* Required fields",i.insertBefore(s,i.querySelector(".form-actions")||i.lastElementChild)}};r.querySelectorAll("[required]").forEach(t=>{e(t)})}function xn(r){if(r.dataset.enhancedOpenGroup)return;r.dataset.enhancedOpenGroup="true",r.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=()=>r.querySelector('input[type="radio"], input[type="checkbox"]');r.appendChild(e),e.addEventListener("keydown",n=>{if(n.key==="Enter"||n.key==="Tab"){let o=e.value.trim();if(o){n.preventDefault();let a=t(),i=a?.type==="radio"?"radio":"checkbox",s=`open-group-${Math.random().toString(36).substring(2,11)}`,c=document.createElement("label"),d=document.createElement("span");d.setAttribute("data-label",""),d.textContent=o;let p=document.createElement("input");p.type=i,p.name=a?.name||r.getAttribute("data-name")||"open-group",p.value=o,p.id=s,c.appendChild(d),c.appendChild(p),r.insertBefore(c,e),e.value=""}}else if(n.key==="Backspace"&&e.value===""){n.preventDefault();let o=r.querySelectorAll("label");o.length>0&&o[o.length-1].remove()}})}function wn(r){if(r.dataset.enhancedClip)return;r.dataset.enhancedClip="true",r.hasAttribute("tabindex")||r.setAttribute("tabindex","0"),r.hasAttribute("role")||r.setAttribute("role","button");let e=()=>{let n=r.getAttribute("data-clip-open")==="true";r.setAttribute("aria-expanded",n?"true":"false")},t=()=>{let n=r.getAttribute("data-clip-open")==="true";r.setAttribute("data-clip-open",n?"false":"true"),e()};r.addEventListener("click",n=>{n.defaultPrevented||t()}),r.addEventListener("keydown",n=>{(n.key===" "||n.key==="Enter")&&(n.preventDefault(),t())}),e()}function kn(r){if(r.dataset.enhancedBtnWorking)return;r.dataset.enhancedBtnWorking="true";let e=null,t=!1;new MutationObserver(o=>{o.forEach(a=>{if(a.attributeName==="class"){let i=r.classList.contains("btn-working"),s=r.querySelector("pds-icon");if(i)if(s)e||(e=s.getAttribute("icon")),s.setAttribute("icon","circle-notch");else{let c=document.createElement("pds-icon");c.setAttribute("icon","circle-notch"),c.setAttribute("size","sm"),r.insertBefore(c,r.firstChild),t=!0}else a.oldValue?.includes("btn-working")&&s&&(t?(s.remove(),t=!1):e&&(s.setAttribute("icon",e),e=null))}})}).observe(r,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0})}var Sn=new Map([[".accordion",mn],["nav[data-dropdown]",fn],["label[data-toggle]",hn],["label[data-color]",bn],['input[type="range"]',yn],["form[data-required]",vn],["fieldset[role=group][data-open]",xn],["[data-clip]",wn],["button, a[class*='btn-']",kn]]),cr=gn.map(r=>({...r,run:Sn.get(r.selector)||(()=>{})}));var dr=[{selector:".accordion",description:"Ensures only one <details> element can be open at a time within the accordion.",demoHtml:`
|
|
3494
|
+
<div class="accordion">
|
|
3495
|
+
<details>
|
|
3496
|
+
<summary>Section 1</summary>
|
|
3497
|
+
<p>Content for section 1</p>
|
|
3498
|
+
</details>
|
|
3499
|
+
<details>
|
|
3500
|
+
<summary>Section 2</summary>
|
|
3501
|
+
<p>Content for section 2</p>
|
|
3502
|
+
</details>
|
|
3503
|
+
<details>
|
|
3504
|
+
<summary>Section 3</summary>
|
|
3505
|
+
<p>Content for section 3</p>
|
|
3506
|
+
</details>
|
|
3507
|
+
</div>
|
|
3508
|
+
`.trim()},{selector:"nav[data-dropdown]",description:"Enhances a nav element with data-dropdown to toggle its last child as a dropdown panel (menu, card, form, etc.).",demoHtml:`
|
|
3509
|
+
<nav data-dropdown>
|
|
3510
|
+
<button class="btn-primary">Menu</button>
|
|
3511
|
+
<div class="card surface-overlay stack-sm">
|
|
3512
|
+
<strong>Quick actions</strong>
|
|
3513
|
+
<div class="flex gap-sm">
|
|
3514
|
+
<button class="btn-primary btn-sm">Ship now</button>
|
|
3515
|
+
<button class="btn-outline btn-sm">Schedule</button>
|
|
3516
|
+
</div>
|
|
3517
|
+
</div>
|
|
3518
|
+
</nav>
|
|
3519
|
+
`.trim()},{selector:"label[data-toggle]",description:"Creates a toggle switch element from a checkbox.",demoHtml:`
|
|
3520
|
+
<label data-toggle>
|
|
3521
|
+
<input type="checkbox">
|
|
3522
|
+
<span data-label>Enable notifications</span>
|
|
3523
|
+
</label>
|
|
3524
|
+
`.trim()},{selector:"label[data-color]",description:"Wraps color inputs with a styled control shell and synced hex output while keeping the native picker.",demoHtml:`
|
|
3525
|
+
<label data-color>
|
|
3526
|
+
<span>Brand color</span>
|
|
3527
|
+
<input type="color" value="#7c3aed">
|
|
3528
|
+
</label>
|
|
3529
|
+
`.trim()},{selector:'input[type="range"]',description:"Enhances range inputs with an attached <output>.",demoHtml:`
|
|
3530
|
+
<label class="range-output">
|
|
3531
|
+
<span data-label>Volume</span>
|
|
3532
|
+
<input type="range" min="0" max="100" value="40">
|
|
3533
|
+
</label>
|
|
3534
|
+
`.trim()},{selector:"form[data-required]",description:"Enhances required form fields using an asterisk in the label.",demoHtml:`
|
|
3535
|
+
<form data-required action="#" method="post">
|
|
3536
|
+
<label>
|
|
3537
|
+
<span>Field Label</span>
|
|
3538
|
+
<input type="text" required>
|
|
3539
|
+
</label>
|
|
3540
|
+
<nav class="form-actions">
|
|
3541
|
+
<button type="submit" class="btn-primary">Submit</button>
|
|
3542
|
+
</nav>
|
|
3543
|
+
</form>
|
|
3544
|
+
`.trim()},{selector:"fieldset[role=group][data-open]",description:"Enhances a checkbox/radio group to be open (have a way to add and remove items).",demoHtml:`
|
|
3545
|
+
<fieldset role="group" data-open>
|
|
3546
|
+
<label>
|
|
3547
|
+
<span data-label>Test</span>
|
|
3548
|
+
<input value="lala" name="test1" type="radio" />
|
|
3549
|
+
</label>
|
|
3550
|
+
</fieldset>
|
|
3551
|
+
`.trim()},{selector:"[data-clip]",description:"Enables click/keyboard toggling for line-clamped content blocks.",demoHtml:`
|
|
3552
|
+
<div data-clip="2" data-clip-more="more...">
|
|
3553
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
3554
|
+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
3555
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
|
|
3556
|
+
</div>
|
|
3557
|
+
`.trim()},{selector:"button, a[class*='btn-']",description:"Automatically manages spinner icon for buttons with .btn-working class",demoHtml:`
|
|
3558
|
+
<button class="btn-primary btn-working">
|
|
3559
|
+
<span>Saving</span>
|
|
3560
|
+
</button>
|
|
3561
|
+
`.trim()}];var ur="pds",$n=/^([a-z][a-z0-9+\-.]*:)?\/\//i,pr=/^[a-z]:/i;function Te(r=""){return r.endsWith("/")?r:`${r}/`}function Cn(r="",e=ur){let t=r.replace(/\/+$/,"");return new RegExp(`(?:^|/)${e}$`,"i").test(t)?t:`${t}/${e}`}function zn(r){return r.replace(/^\.\/+/,"")}function Mn(r){return pr.test(r)?r.replace(pr,"").replace(/^\/+/,""):r}function En(r){return r.startsWith("public/")?r.substring(7):r}function me(r,e={}){let t=e.segment||ur,n=e.defaultRoot||`/assets/${t}/`,o=r?.public&&r.public?.root||r?.static&&r.static?.root||null;if(!o||typeof o!="string")return Te(n);let a=o.trim();return a?(a=a.replace(/\\/g,"/"),a=Cn(a,t),a=Te(a),$n.test(a)?a:(a=zn(a),a=Mn(a),a.startsWith("/")||(a=En(a),a.startsWith("/")||(a=`/${a}`),a=a.replace(/\/+/g,(i,s)=>s===0?i:"/")),Te(a))):Te(n)}function gr(r){let e=r.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 o=document.createElement("canvas").getContext("2d");if(!o)return!1;let a="mmmmmmmmmmlli",i="72px",s="monospace";o.font=`${i} ${s}`;let c=o.measureText(a).width;o.font=`${i} "${e}", ${s}`;let d=o.measureText(a).width;return c!==d}function Tn(r){return r?r.split(",").map(n=>n.trim())[0].replace(/['"]/g,"").trim():null}async function mr(r,e={}){if(!r)return Promise.resolve();let{weights:t=[400,500,600,700],italic:n=!1}=e,o=Tn(r);if(!o||gr(o))return Promise.resolve();let a=encodeURIComponent(o);return document.querySelector(`link[href*="fonts.googleapis.com"][href*="${a}"]`)?(console.log(`Font "${o}" is already loading or loaded`),Promise.resolve()):(console.log(`Loading font "${o}" from Google Fonts...`),new Promise((s,c)=>{let d=document.createElement("link");d.rel="stylesheet";let p=n?`ital,wght@0,${t.join(";0,")};1,${t.join(";1,")}`:`wght@${t.join(";")}`;d.href=`https://fonts.googleapis.com/css2?family=${a}:${p}&display=swap`,d.setAttribute("data-font-loader",o),d.onload=()=>{console.log(`Successfully loaded font "${o}"`),s()},d.onerror=()=>{console.warn(`Failed to load font "${o}" from Google Fonts`),c(new Error(`Failed to load font: ${o}`))},document.head.appendChild(d),setTimeout(()=>{gr(o)||console.warn(`Font "${o}" did not load within timeout`),s()},5e3)}))}async function wt(r){if(!r)return Promise.resolve();let e=new Set;r.fontFamilyHeadings&&e.add(r.fontFamilyHeadings),r.fontFamilyBody&&e.add(r.fontFamilyBody),r.fontFamilyMono&&e.add(r.fontFamilyMono);let t=Array.from(e).map(n=>mr(n).catch(o=>{console.warn(`Could not load font: ${n}`,o)}));await Promise.all(t)}var An=/^[a-z][a-z0-9+\-.]*:\/\//i,Ae=(()=>{try{return import.meta.url}catch{return}})(),fe=r=>typeof r=="string"&&r.length&&!r.endsWith("/")?`${r}/`:r;function he(r,e={}){if(!r||An.test(r))return r;let{preferModule:t=!0}=e,n=()=>{if(!Ae)return null;try{return new URL(r,Ae).href}catch{return null}},o=()=>{if(typeof window>"u"||!window.location?.origin)return null;try{return new URL(r,window.location.origin).href}catch{return null}};return(t?n()||o():o()||n())||r}var fr=(()=>{if(Ae)try{let r=new URL(Ae);if(/\/public\/assets\/js\//.test(r.pathname))return new URL("../pds/",Ae).href}catch{return}})(),hr=!1;function qe(r){hr||typeof document>"u"||(hr=!0,r.addEventListener("pds:ready",e=>{let t=e.detail?.mode;t&&document.documentElement.classList.add(`pds-${t}`,"pds-ready")}))}function St(r={},e={}){if(!e||typeof e!="object")return r;let t=Array.isArray(r)?[...r]:{...r};for(let[n,o]of Object.entries(e))o&&typeof o=="object"&&!Array.isArray(o)?t[n]=St(t[n]&&typeof t[n]=="object"?t[n]:{},o):t[n]=o;return t}function kt(r=""){return String(r).toLowerCase().replace(/&/g," and ").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function ie(r){if(r==null)return r;if(typeof r=="function")return;if(typeof r!="object")return r;if(Array.isArray(r))return r.map(t=>ie(t)).filter(t=>t!==void 0);let e={};for(let t in r)if(r.hasOwnProperty(t)){let n=r[t];if(typeof n!="function"){let o=ie(n);o!==void 0&&(e[t]=o)}}return e}function $t(r={},e={},{presets:t,defaultLog:n,validateDesignConfig:o,validateInitConfig:a}={}){let i=r&&typeof r.log=="function"?r.log:n,s=typeof r=="object"&&("colors"in r||"typography"in r||"spatialRhythm"in r||"shape"in r||"behavior"in r||"layout"in r||"advanced"in r||"a11y"in r||"components"in r||"icons"in r),c=r&&r.enhancers;c&&!Array.isArray(c)&&(c=Object.values(c));let d=c??e.enhancers??[],p=r&&r.preset,l=r&&r.design,u=r&&r.icons&&typeof r.icons=="object"?r.icons:null,g="preset"in(r||{})||"design"in(r||{})||"enhancers"in(r||{});r&&typeof r=="object"&&typeof a=="function"&&a(r,{log:i,context:"PDS.start"});let h,b=null;if(g){l&&typeof l=="object"&&typeof o=="function"&&o(l,{log:i,context:"PDS.start"});let f=String(p||"default").toLowerCase(),m=t?.[f]||Object.values(t||{}).find(q=>kt(q.name)===f||String(q.name||"").toLowerCase()===f);if(!m)throw new Error(`PDS preset not found: "${p||"default"}"`);b={id:m.id||kt(m.name),name:m.name||m.id||String(f)};let x=structuredClone(m);if(l&&typeof l=="object"||u){let q=l?ie(l):{},Y=u?ie(u):null,H=Y?St(q,{icons:Y}):q;x=St(x,structuredClone(H))}let{mode:w,autoDefine:S,applyGlobalStyles:A,manageTheme:k,themeStorageKey:T,preloadStyles:R,criticalLayers:M,managerURL:z,manager:P,preset:$,design:v,enhancers:E,log:I,...j}=r;h={...j,design:x,preset:b.name,log:I||n}}else if(s){typeof o=="function"&&o(r,{log:i,context:"PDS.start"});let{log:f,...m}=r;h={design:structuredClone(m),log:f||n}}else{let f=t?.default||Object.values(t||{}).find(m=>kt(m.name)==="default");if(!f)throw new Error("PDS default preset not available");b={id:f.id||"default",name:f.name||"Default"},h={design:structuredClone(f),preset:b.name,log:n}}return{generatorConfig:h,enhancers:d,presetInfo:b}}function Ge({manageTheme:r,themeStorageKey:e,applyResolvedTheme:t,setupSystemListenerIfNeeded:n}){let o="light",a=null;if(r&&typeof window<"u"){try{a=localStorage.getItem(e)||null}catch{a=null}try{t?.(a),n?.(a)}catch{}a?a==="system"?o=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":o=a:o=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return{resolvedTheme:o,storedTheme:a}}function be(r,{resolvePublicAssetURL:e}){let t=!!(r?.public?.root||r?.static?.root),n=e(r);return!t&&fr&&(n=fr),fe(he(n))}async function Ve(r,{baseEnhancers:e=[]}={}){let{autoDefineBaseURL:t="/auto-define/",autoDefinePreload:n=[],autoDefineMapper:o=null,autoDefinerModuleURL:a=null,enhancers:i=[],autoDefineOverrides:s=null,autoDefinePreferModule:c=!0}=r,d=(()=>{let l=new Map;return(e||[]).forEach(u=>l.set(u.selector,u)),(i||[]).forEach(u=>l.set(u.selector,u)),Array.from(l.values())})(),p=null;if(typeof window<"u"&&typeof document<"u"){let l=null;try{if(!a||typeof a!="string")throw new Error("AutoDefiner module URL is not configured");let m=await import(a);l=m?.AutoDefiner||m?.default?.AutoDefiner||m?.default||null}catch(m){console.warn("AutoDefiner not available:",m?.message||m)}let u=m=>{switch(m){case"pds-tabpanel":return"pds-tabstrip.js";default:return`${m}.js`}},{mapper:g,...h}=s&&typeof s=="object"?s:{},f={baseURL:t&&fe(he(t,{preferModule:c})),predefine:n,scanExisting:!0,observeShadows:!0,patchAttachShadow:!0,debounceMs:16,enhancers:d,onError:(m,x)=>{if(typeof m=="string"&&m.startsWith("pds-")){let S=["pds-form","pds-drawer"].includes(m),A=x?.message?.includes("#pds/lit")||x?.message?.includes("Failed to resolve module specifier");S&&A?console.error(`\u274C PDS component <${m}> requires Lit but #pds/lit is not in import map.
|
|
3562
|
+
See: https://github.com/Pure-Web-Foundation/pure-ds/blob/main/readme.md#lit-components-not-working`):console.warn(`\u26A0\uFE0F PDS component <${m}> not found. Assets may not be installed.`)}else console.error(`\u274C Auto-define error for <${m}>:`,x)},...h,mapper:m=>{if(customElements.get(m))return null;if(typeof o=="function")try{let x=o(m);return x===void 0?u(m):x}catch(x){return console.warn("Custom autoDefine.mapper error; falling back to default:",x?.message||x),u(m)}return u(m)}};l&&(p=new l(f),n.length>0&&typeof l.define=="function"&&await l.define(...n,{baseURL:t,mapper:f.mapper,onError:f.onError}))}return{autoDefiner:p,mergedEnhancers:d}}var Ct=["light","dark"],zt=new Set(Ct);function Mt(r){let t=(Array.isArray(r?.themes)?r.themes.map(n=>String(n).toLowerCase()):Ct).filter(n=>zt.has(n));return t.length?t:Ct}function ye(r,{preferDocument:e=!0}={}){let t=String(r||"").toLowerCase();if(zt.has(t))return t;if(e&&typeof document<"u"){let n=document.documentElement?.getAttribute("data-theme");if(zt.has(n))return n}return typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function se(r,e){let t=ye(e);return Mt(r).includes(t)}var yr=!1,Le=null,Ke="pds-live-edit-toggle",Pt="pds-live-edit-toggle-style";function vr(r){if(typeof document>"u"||typeof r!="function")return;if(document.body){r();return}let e=()=>{document.body&&(document.removeEventListener("DOMContentLoaded",e),r())};document.addEventListener("DOMContentLoaded",e,{once:!0})}function Rn(r={}){let e=r?.interactive!==!1;typeof document>"u"||vr(()=>{if(document.querySelector("pds-live-edit")){if(!e){let t=document.querySelector("pds-live-edit");t&&t.setAttribute("data-pds-live-settings-only","true")}}else{let t=document.createElement("pds-live-edit");e||t.setAttribute("data-pds-live-settings-only","true"),document.body.appendChild(t)}})}function Qe(r=0){return new Promise(e=>{setTimeout(e,Math.max(0,Number(r)||0))})}async function Re(r={}){let e=r?.mountIfMissing!==!1,t=r?.interactive!==!1,n=typeof r?.requiredMethod=="string"&&r.requiredMethod.trim()?r.requiredMethod.trim():"openDesignSettings",o=Number.isFinite(Number(r?.timeoutMs))?Number(r.timeoutMs):2400;if(typeof document>"u"||!e&&!document.querySelector("pds-live-edit"))return null;e&&Rn({interactive:t});let a=Date.now();for(;Date.now()-a<o;){let s=document.querySelector("pds-live-edit");if(!s){await Qe(40);continue}if(typeof s?.[n]=="function")return s;if(typeof customElements<"u"&&typeof customElements.whenDefined=="function"){try{await Promise.race([customElements.whenDefined("pds-live-edit"),Qe(80)])}catch{await Qe(40)}continue}await Qe(40)}let i=document.querySelector("pds-live-edit");return i&&typeof i?.[n]=="function"?i:null}function xr(){if(typeof document>"u")return;document.querySelectorAll("pds-live-edit").forEach(e=>{typeof e?.setInteractiveEditingEnabled=="function"&&e.setInteractiveEditingEnabled(!1),e.remove()})}function Fn(r){return r?typeof r.isInteractiveEditingEnabled=="function"?!!r.isInteractiveEditingEnabled():!0:!1}function Pn(){if(typeof document>"u"||document.getElementById(Pt))return;let r=document.createElement("style");r.id=Pt,r.textContent=`
|
|
3563
|
+
:where(.pds-live-edit-toggle-nav) {
|
|
3564
|
+
position: fixed;
|
|
3565
|
+
top: var(--spacing-3);
|
|
3566
|
+
right: var(--spacing-3);
|
|
3567
|
+
z-index: var(--z-dropdown, 1050);
|
|
3568
|
+
}
|
|
3569
|
+
|
|
3570
|
+
:where(.pds-live-edit-toggle-nav menu) {
|
|
3571
|
+
min-width: 220px;
|
|
3572
|
+
}
|
|
3573
|
+
|
|
3574
|
+
:where(.pds-live-edit-toggle-nav menu a[data-pds-live-action]) {
|
|
3575
|
+
cursor: pointer;
|
|
3576
|
+
}
|
|
3577
|
+
|
|
3578
|
+
:where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item) {
|
|
3579
|
+
list-style: none;
|
|
3580
|
+
margin: 0;
|
|
3581
|
+
padding: 0;
|
|
3582
|
+
}
|
|
3583
|
+
|
|
3584
|
+
:where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item .pds-live-editor-menu) {
|
|
3585
|
+
display: grid;
|
|
3586
|
+
gap: var(--spacing-2);
|
|
3587
|
+
padding: var(--spacing-2);
|
|
3588
|
+
border-bottom: var(--border-width-thin) solid var(--color-border);
|
|
3589
|
+
}
|
|
3590
|
+
|
|
3591
|
+
:where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item label) {
|
|
3592
|
+
display: grid;
|
|
3593
|
+
gap: var(--spacing-1);
|
|
3594
|
+
margin: 0;
|
|
3595
|
+
}
|
|
3596
|
+
|
|
3597
|
+
:where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item label > span) {
|
|
3598
|
+
font-size: var(--font-size-xs);
|
|
3599
|
+
color: var(--color-text-muted);
|
|
3600
|
+
}
|
|
3601
|
+
|
|
3602
|
+
:where(.pds-live-edit-toggle-nav menu li > hr) {
|
|
3603
|
+
border: 0;
|
|
3604
|
+
border-top: var(--border-width-thin) solid var(--color-border);
|
|
3605
|
+
margin: var(--spacing-2) 0 var(--spacing-1) 0;
|
|
3606
|
+
}
|
|
3607
|
+
|
|
3608
|
+
:where(.pds-live-edit-toggle-nav menu li:has(> hr)) {
|
|
3609
|
+
padding: 0;
|
|
3610
|
+
margin: 0;
|
|
3611
|
+
list-style: none;
|
|
3612
|
+
pointer-events: none;
|
|
3613
|
+
}
|
|
3614
|
+
|
|
3615
|
+
:where(.pds-live-edit-toggle-nav menu a[data-pds-live-action="reset-config"]) {
|
|
3616
|
+
color: var(--color-danger-700);
|
|
3617
|
+
}
|
|
3618
|
+
|
|
3619
|
+
:where(.pds-live-edit-toggle-nav menu a[data-pds-live-action="reset-config"] pds-icon) {
|
|
3620
|
+
color: var(--color-danger-700);
|
|
3621
|
+
}
|
|
3622
|
+
`,document.head.appendChild(r)}function Ft(r,e){if(!r)return;r.classList.toggle("btn-primary",e),r.classList.toggle("btn-secondary",!e),r.setAttribute("aria-pressed",e?"true":"false");let t="PDS Manager";r.setAttribute("aria-label",t),r.setAttribute("title",t)}async function In(){if(typeof document>"u")return null;Pn();let r=document.getElementById(Ke);if(!r){let e=document.createElement("nav");e.className="pds-live-edit-toggle-nav",e.setAttribute("data-dropdown",""),e.setAttribute("data-mode","auto"),e.setAttribute("data-pds-live-edit-ignore","true"),r=document.createElement("button"),r.id=Ke,r.type="button",r.className="icon-only btn-secondary",r.setAttribute("data-pds-live-edit-ignore","true"),r.innerHTML='<pds-icon icon="cursor-click" size="sm"></pds-icon>';let t=document.createElement("menu");t.setAttribute("data-pds-live-edit-ignore","true");let n=(a,i,s)=>{let c=document.createElement("li"),d=document.createElement("a");d.href="#",d.dataset.pdsLiveAction=a,d.setAttribute("data-pds-live-edit-ignore","true");let p=document.createElement("pds-icon");return p.setAttribute("icon",s),p.setAttribute("size","sm"),d.append(p,document.createTextNode(` ${i}`)),c.appendChild(d),c},o=()=>{let a=document.createElement("li");a.setAttribute("data-pds-live-edit-ignore","true");let i=document.createElement("hr");return i.setAttribute("aria-hidden","true"),a.appendChild(i),a};t.appendChild(n("toggle","Toggle live editing","pencil")),t.appendChild(n("open-settings","Open Settings","gear")),t.appendChild(o()),t.appendChild(n("reset-config","Reset Config","arrow-counter-clockwise")),await Nn(t),e.append(r,t),vr(()=>{document.getElementById(Ke)||document.body.appendChild(e)})}return r}async function Nn(r){if(r instanceof Element){if(r.__pdsLiveSharedMenuItemInFlight)return r.__pdsLiveSharedMenuItemInFlight;r.__pdsLiveSharedMenuItemInFlight=(async()=>{r.querySelectorAll("li.pds-live-shared-quick-mode-item").forEach(s=>s.remove());let e=await Re({mountIfMissing:!0,interactive:!1,requiredMethod:"createSharedQuickModeMenuItem",timeoutMs:7e3});if(!e||typeof e.createSharedQuickModeMenuItem!="function")return;let t=await e.createSharedQuickModeMenuItem();if(!(t instanceof Element))return;t.classList.add("pds-live-shared-quick-mode-item");let o=r.querySelector('a[data-pds-live-action="reset-config"]')?.closest("li")||null,a=o?.previousElementSibling||null,i=a&&a.querySelector?.(":scope > hr")?a:null;if(i){r.insertBefore(t,i);return}if(o){r.insertBefore(t,o);return}r.appendChild(t)})();try{await r.__pdsLiveSharedMenuItemInFlight}finally{r.__pdsLiveSharedMenuItemInFlight=null}}}function jn(){if(typeof document>"u")return;let r=document.getElementById(Ke);if(r){let t=r.closest(".pds-live-edit-toggle-nav");t?t.remove():r.remove()}let e=document.getElementById(Pt);e&&e.remove(),xr()}async function Bn(){if(typeof document>"u")return;let r=await In();if(!r)return;let e=async i=>{if(i){let s=await Re({mountIfMissing:!0});s&&typeof s.setInteractiveEditingEnabled=="function"&&s.setInteractiveEditingEnabled(!0)}else xr();Ft(r,i)};e(!1);let t=r.closest(".pds-live-edit-toggle-nav")||r;r.__pdsLiveEditActionHandler&&t.removeEventListener("click",r.__pdsLiveEditActionHandler);let n=async i=>{let s=i.target?.closest?.("[data-pds-live-action]");if(!s)return;i.preventDefault();let c=String(s.dataset.pdsLiveAction||"");if(c==="toggle"){let d=await Re({mountIfMissing:!1}),p=Fn(d);await e(!p);return}if(c==="open-settings"){let d=await Re({mountIfMissing:!0,requiredMethod:"openDesignSettings",interactive:!1});d&&typeof d.setInteractiveEditingEnabled=="function"&&d.setInteractiveEditingEnabled(!1),d&&typeof d.openDesignSettings=="function"&&(Ft(r,!1),await d.openDesignSettings());return}if(c==="reset-config"){let d=await Re({mountIfMissing:!0,requiredMethod:"resetConfig",interactive:!1});Ft(r,!1),d&&typeof d.resetConfig=="function"&&await d.resetConfig();return}};r.__pdsLiveEditActionHandler=n,t.addEventListener("click",n),r.__pdsLiveEditDisableHandler&&document.removeEventListener("pds:live-edit:disable",r.__pdsLiveEditDisableHandler),r.__pdsLiveEditEnableHandler&&document.removeEventListener("pds:live-edit:enable",r.__pdsLiveEditEnableHandler);let o=()=>{e(!1)},a=()=>{e(!0)};r.__pdsLiveEditDisableHandler=o,document.addEventListener("pds:live-edit:disable",o),r.__pdsLiveEditEnableHandler=a,document.addEventListener("pds:live-edit:enable",a)}function On(){if(typeof window>"u"||!window.localStorage)return null;try{let r=window.localStorage.getItem("pure-ds-config");if(!r)return null;let e=JSON.parse(r);if(e&&("preset"in e||"design"in e))return e}catch{return null}return null}function It(r={},e={}){if(!e||typeof e!="object")return r;let t=Array.isArray(r)?[...r]:{...r};for(let[n,o]of Object.entries(e))o&&typeof o=="object"&&!Array.isArray(o)?t[n]=It(t[n]&&typeof t[n]=="object"?t[n]:{},o):t[n]=o;return t}function _n(r){let e=On();if(!e||!r||typeof r!="object")return r;let t=e.preset,n=e.design&&typeof e.design=="object"?e.design:null;if(!t&&!n)return r;let o="preset"in r||"design"in r||"enhancers"in r,a={...r};if(t&&(a.preset=t),n)if(o){let i=r.design&&typeof r.design=="object"?r.design:{};a.design=It(i,n)}else a=It(r,n);return a}function Dn(r,e={}){let{hideCategory:t=!0,itemGrid:n="45px 1fr",includeIncompatible:o=!0,disableIncompatible:a=!0,categoryName:i="Presets",theme:s,onSelect:c,iconHandler:d}=e||{},p=ye(s??r?.theme),l=h=>{let f=g(h?.id)?.colors||{},m=f?.primary,x=f?.secondary,w=f?.accent;return m&&x&&w?`<span style="display:flex;gap:1px;flex-shrink:0;" aria-hidden="true">
|
|
3623
|
+
<span style="display:inline-block;width:10px;height:20px;background-color:${m};"> </span>
|
|
3624
|
+
<span style="display:inline-block;width:10px;height:20px;background-color:${x};"> </span>
|
|
3625
|
+
<span style="display:inline-block;width:10px;height:20px;background-color:${w};"> </span>
|
|
3626
|
+
</span>`:h?.icon?`<pds-icon icon="${h.icon}" size="sm"></pds-icon>`:""},u=()=>{let h=r?.presets||{};return Object.values(h||{}).filter(b=>!!(b?.id||b?.name))},g=h=>h&&u().find(f=>String(f?.id||f?.name)===String(h))||null;return{hideCategory:t,itemGrid:n,iconHandler:typeof d=="function"?d:l,categories:{[i]:{trigger:()=>!0,getItems:(h={})=>{let b=String(h?.search||"").toLowerCase().trim();return u().filter(m=>{let x=String(m?.name||m?.id||"").toLowerCase(),w=String(m?.description||"").toLowerCase(),S=Array.isArray(m?.tags)?m.tags.map(k=>String(k).toLowerCase()):[];if(b&&!(x.includes(b)||w.includes(b)||S.some(T=>T.includes(b))))return!1;let A=se(m,p);return!(!o&&!A)}).map(m=>{let x=m?.id||m?.name,w=se(m,p),S=Mt(m),A=S.length===1?`${S[0]} only`:`Not available in ${p} mode`,k=String(m?.description||"").trim(),T=w?k:k?`${k} - ${A}`:A;return{id:x,text:m?.name||String(x),description:T,icon:"palette",class:!w&&a?"disabled":"",disabled:!w&&a,tooltip:w?"":A}}).sort((m,x)=>String(m.text||"").localeCompare(String(x.text||"")))},action:async h=>{if(!h?.id||h?.disabled)return h?.id;let b=g(h.id);return b?typeof c=="function"?await c({preset:b,selection:h,resolvedTheme:p}):(typeof r?.applyLivePreset=="function"&&await r.applyLivePreset(b.id||h.id),b.id||h.id):h?.id}}}}}async function Wn(r,{applyResolvedTheme:e,setupSystemListenerIfNeeded:t,emitConfigChanged:n}){if(yr)return;let[o,a,i,s]=await Promise.all([Promise.resolve().then(()=>(vt(),ar)),Promise.resolve().then(()=>($e(),Gt)),Promise.resolve().then(()=>(At(),Tt)),Promise.resolve().then(()=>(Rt(),Ye))]),c=o?.default||o?.ontology,d=o?.findComponentForElement,p=a?.enums;Le=i?.PDSQuery||i?.default||null,r.ontology=c,r.findComponentForElement=d,r.enums=p,r.common=s||{},r.presets=Q,r.configRelations=Zt,r.configSpec=Xt,r.configEditorMetadata=rr,r.configFormSchema=nr,r.buildConfigFormSchema=ue,r.getConfigEditorMetadata=Ee,r.enhancerMetadata=dr,r.applyStyles=function(l){let u=l||G.instance;sr(u),typeof n=="function"&&n({mode:"live",source:"live:styles-applied"})},r.adoptLayers=function(l,u,g){return Ue(l,u,g,G.instance)},r.adoptPrimitives=function(l,u){return He(l,u,G.instance)},r.getGenerator=async function(){return G},r.query=async function(l){if(!Le){let g=await Promise.resolve().then(()=>(At(),Tt));Le=g?.PDSQuery||g?.default||null}return Le?await new Le(r).search(l):[]},r.buildPresetOmniboxSettings=function(l={}){return Dn(r,l)},r.applyLivePreset=async function(l,u={}){if(!l)return!1;if(!r.registry?.isLive)return console.warn("PDS.applyLivePreset is only available in live mode."),!1;let g=r.currentConfig||{},{design:h,preset:b,...f}=g,m={...structuredClone(ie(f)),preset:l},x=$t(m,{},{presets:Q,defaultLog:yt,validateDesignConfig:ht,validateInitConfig:bt}),w=ye(r.theme);if(!se(x.generatorConfig.design,w)){let T=x.presetInfo?.name||x.generatorConfig?.design?.name||l;console.warn(`PDS theme "${w}" not supported by preset "${T}".`)}g.theme&&!x.generatorConfig.theme&&(x.generatorConfig.theme=g.theme);let S=new G(x.generatorConfig);if(x.generatorConfig.design?.typography)try{await wt(x.generatorConfig.design.typography)}catch(T){x.generatorConfig?.log?.("warn","Failed to load some fonts from Google Fonts:",T)}r.applyStyles?.(S);let A=x.presetInfo||{id:l,name:l};if(r.currentPreset=A,r.currentConfig=Object.freeze({...g,preset:x.generatorConfig.preset,design:structuredClone(x.generatorConfig.design),theme:x.generatorConfig.theme||g.theme}),r.configEditorMetadata=Ee(x.generatorConfig.design),r.configFormSchema=ue(x.generatorConfig.design),u?.persist!==!1&&typeof window<"u"){let T="pure-ds-config";try{let R=localStorage.getItem(T),M=R?JSON.parse(R):null,z={...M&&typeof M=="object"?M:{},preset:A.id||l,design:structuredClone(x.generatorConfig.design||{})};localStorage.setItem(T,JSON.stringify(z))}catch(R){x.generatorConfig?.log?.("warn","Failed to store preset:",R)}}return!0},Object.getOwnPropertyDescriptor(r,"compiled")||Object.defineProperty(r,"compiled",{get(){return r.registry?.isLive&&G.instance?G.instance.compiled:null},enumerable:!0,configurable:!1}),r.preloadCritical=function(l,u={}){if(typeof window>"u"||!document.head||!l)return;let{theme:g,layers:h=["tokens"]}=u;try{let b=g||"light";(g==="system"||!g)&&(b=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),document.documentElement.setAttribute("data-theme",b);let f=l.design?{...l,theme:b}:{design:l,theme:b},m=new G(f),x=h.map(w=>{try{return m.css?.[w]||""}catch{return""}}).filter(w=>w.trim()).join(`
|
|
3627
|
+
`);if(x){let w=document.head.querySelector("style[data-pds-preload]");w&&w.remove();let S=document.createElement("style");S.setAttribute("data-pds-preload",""),S.textContent=x,document.head.insertBefore(S,document.head.firstChild)}}catch(b){console.warn("PDS preload failed:",b)}},yr=!0}async function Hn(r,e,{emitReady:t,emitConfigChanged:n,applyResolvedTheme:o,setupSystemListenerIfNeeded:a}){if(!e||typeof e!="object")throw new Error("PDS.start({ mode: 'live', ... }) requires a valid configuration object");if(e=_n(e),await Wn(r,{applyResolvedTheme:o,setupSystemListenerIfNeeded:a,emitConfigChanged:n}),qe(r),typeof document<"u"&&document.adoptedStyleSheets){let u=`
|
|
3628
|
+
html { opacity: 0; }
|
|
3629
|
+
html.pds-ready { opacity: 1; transition: opacity 0.3s ease-in; }
|
|
3630
|
+
`;try{if(!document.adoptedStyleSheets.some(h=>h._pdsFouc)){let h=new CSSStyleSheet;h.replaceSync(u),h._pdsFouc=!0,document.adoptedStyleSheets=[h,...document.adoptedStyleSheets]}}catch(g){if(console.warn("Constructable stylesheets not supported, using <style> tag fallback:",g),!document.head.querySelector("style[data-pds-fouc]")){let b=document.createElement("style");b.setAttribute("data-pds-fouc",""),b.textContent=u,document.head.insertBefore(b,document.head.firstChild)}}}let i=e.applyGlobalStyles??!0,s=e.manageTheme??!0,c=e.themeStorageKey??"pure-ds-theme",d=e.preloadStyles??!1,p=e.criticalLayers??["tokens","primitives"],l=e&&e.autoDefine||null;try{let{resolvedTheme:u}=Ge({manageTheme:s,themeStorageKey:c,applyResolvedTheme:o,setupSystemListenerIfNeeded:a}),g=$t(e,{},{presets:Q,defaultLog:yt,validateDesignConfig:ht,validateInitConfig:bt});if(s&&!se(g.generatorConfig.design,u)){let M=g.presetInfo?.name||g.generatorConfig?.design?.name||g.generatorConfig?.preset||"current preset";console.warn(`PDS theme "${u}" not supported by preset "${M}".`)}let h=g.enhancers,{log:b,...f}=g.generatorConfig,m=structuredClone(f);m.log=b,s&&(m.theme=u);let x=new G(m);if(m.design?.typography)try{await wt(m.design.typography)}catch(M){m?.log?.("warn","Failed to load some fonts from Google Fonts:",M)}if(d&&typeof window<"u"&&document.head)try{let M=p.map(z=>{try{return x.css?.[z]||""}catch(P){return m?.log?.("warn",`Failed to generate critical CSS for layer "${z}":`,P),""}}).filter(z=>z.trim()).join(`
|
|
3631
|
+
`);if(M){let z=document.head.querySelector("style[data-pds-critical]");z&&z.remove();let P=document.createElement("style");P.setAttribute("data-pds-critical",""),P.textContent=M;let $=document.head.querySelector('meta[charset], meta[name="viewport"]');$?$.parentNode.insertBefore(P,$.nextSibling):document.head.insertBefore(P,document.head.firstChild)}}catch(M){m?.log?.("warn","Failed to preload critical styles:",M)}r.registry.setLiveMode(),g.presetInfo?.name?m?.log?.("log",`PDS live with preset "${g.presetInfo.name}"`):m?.log?.("log","PDS live with custom config"),i&&(r.applyStyles?.(G.instance),typeof window<"u"&&setTimeout(()=>{let M=document.head.querySelector("style[data-pds-critical]");M&&M.remove();let z=document.head.querySelector("style[data-pds-preload]");z&&z.remove();let P=document.getElementById("pds-runtime-stylesheet");P&&P.remove()},100));let w=be(e,{resolvePublicAssetURL:me}),S;l&&l.baseURL?S=fe(he(l.baseURL,{preferModule:!1})):S=`${w}components/`;let A=null,k=[];try{let M=await Ve({autoDefineBaseURL:S,autoDefinePreload:l&&Array.isArray(l.predefine)&&l.predefine||[],autoDefineMapper:l&&typeof l.mapper=="function"&&l.mapper||null,autoDefinerModuleURL:l&&l.moduleURL||`${w}core/pds-auto-definer.js`,enhancers:h,autoDefineOverrides:l||null,autoDefinePreferModule:!(l&&l.baseURL)},{baseEnhancers:cr});A=M.autoDefiner,k=M.mergedEnhancers||[]}catch(M){m?.log?.("error","\u274C Failed to initialize AutoDefiner/Enhancers:",M)}let T=x?.options||m,R=ie(e);if(r.currentConfig=Object.freeze({mode:"live",...structuredClone(R),design:structuredClone(g.generatorConfig.design),preset:g.generatorConfig.preset,theme:u,enhancers:k}),r.configEditorMetadata=Ee(g.generatorConfig.design),r.configFormSchema=ue(g.generatorConfig.design),typeof n=="function"&&n({mode:"live",source:"live:config-applied",preset:g.generatorConfig.preset}),typeof document<"u")try{e?.liveEdit?setTimeout(()=>{Bn()},0):jn()}catch(M){m?.log?.("warn","Live editor toggle failed to start:",M)}return t({mode:"live",generator:x,config:T,theme:u,autoDefiner:A}),{generator:x,config:T,theme:u,autoDefiner:A}}catch(u){throw r.dispatchEvent(new CustomEvent("pds:error",{detail:{error:u}})),u}}function Un(r){let e=Number(r);return Number.isFinite(e)?Math.max(0,Math.min(1,e)):.5}function qn(r){return Array.isArray(r)?r.map(e=>e?{severity:String(e.severity||"info").toLowerCase(),message:String(e.message||""),path:e.path?String(e.path):""}:null).filter(e=>e&&e.message):[]}function B(r={}){let e=String(r.source||"unknown"),t=String(r.type||"generic"),n=Un(r.confidence),o=qn(r.issues),a=r.designPatch&&typeof r.designPatch=="object"?r.designPatch:{},i=r.template&&typeof r.template=="object"?r.template:null;return{source:e,type:t,confidence:n,issues:o,designPatch:a,template:i,meta:r.meta&&typeof r.meta=="object"?r.meta:{}}}function Gn(r){return!!(r&&typeof r=="object"&&"source"in r&&"type"in r&&"confidence"in r&&"issues"in r&&"designPatch"in r)}var Vn="../templates/templates.json",wr="/assets/pds/templates/templates.json",Jn=["public","assets","pds","templates","templates.json"],Yn=["..","..","..","public","assets","pds","templates","templates.json"],Ze=null;function kr(){return!!(typeof process<"u"&&process?.versions?.node)}function Qn(r={}){return{id:String(r.id||"").trim(),name:String(r.name||r.id||"Template").trim(),description:String(r.description||"").trim(),icon:String(r.icon||"layout").trim(),file:String(r.file||"").trim(),tags:Array.isArray(r.tags)?r.tags.map(e=>String(e)):[]}}function Xe(r={},e={}){let n=(Array.isArray(r)?r:Array.isArray(r?.templates)?r.templates:[]).map(Qn).filter(o=>o.id&&o.file);return{version:r?.version||"1",templates:n,__catalogURL:e.catalogURL||null,__catalogFilePath:e.catalogFilePath||null}}async function Kn(r={}){let t=[r.catalogURL||globalThis?.PDS?.currentConfig?.templateCatalogURL,Vn,wr].filter(Boolean);for(let n of t)try{let o=new URL(n,import.meta.url).href,a=await fetch(o,{credentials:"same-origin"});if(!a.ok)continue;let i=await a.json();return Xe(i,{catalogURL:o})}catch{}return Xe({templates:[]})}async function Zn(r={}){let e="node:fs/promises",t="node:path",n="node:url",[{readFile:o},a,{fileURLToPath:i}]=await Promise.all([import(e),import(t),import(n)]),s=[];r.catalogPath&&s.push(a.resolve(r.catalogPath)),s.push(a.resolve(process.cwd(),...Jn));let c=a.dirname(i(import.meta.url));s.push(a.resolve(c,...Yn));for(let d of s)try{let p=await o(d,"utf8"),l=JSON.parse(p);return Xe(l,{catalogFilePath:d})}catch{}return Xe({templates:[]})}async function Xn(r,e){if(!r?.file)return"";if(!kr()){let c=e?.__catalogURL||wr,d=new URL(r.file,c).href,p=await fetch(d,{credentials:"same-origin"});if(!p.ok)throw new Error(`Template file not found: ${r.file}`);return(await p.text()).trim()}let t="node:fs/promises",n="node:path",[{readFile:o},a]=await Promise.all([import(t),import(n)]),i=e?.__catalogFilePath?a.dirname(e.__catalogFilePath):a.resolve(process.cwd(),"public","assets","pds","templates"),s=a.resolve(i,r.file);return(await o(s,"utf8")).trim()}async function et(r={}){return Ze&&!r.forceReload||(Ze=kr()?await Zn(r):await Kn(r)),Ze}async function Sr(r={}){return(await et(r)).templates.map(({id:t,name:n,description:o,icon:a,file:i,tags:s})=>({id:t,name:n,description:o,icon:a,file:i,tags:s}))}async function eo(r,e={}){let t=await et(e),n=t.templates.find(a=>a.id===r)||null;if(!n)return null;let o=await Xn(n,t);return{...n,html:o}}async function $r(r,e={}){let t=await eo(r,e);return t?B({source:"template",type:"template",confidence:1,template:{id:t.id,name:t.name,html:t.html,icon:t.icon,description:t.description}}):B({source:"template",type:"template",confidence:0,issues:[{severity:"error",message:`Unknown template: ${r}`}]})}var Cr={version:"tw2pds-layout-v4",summary:"Deterministic Tailwind\u2192PDS conversion rules focused on layout intent, semantic primitive mapping, and richer import-* fallback coverage.",governance:[{id:"layout.utilities.grid",controls:["grid","grid-cols-*","grid-auto-*"],note:"When false, grid mappings are skipped."},{id:"layout.utilities.flex",controls:["flex","flex-*","items-*","justify-*","grow"],note:"When false, flex mappings are skipped."},{id:"layout.utilities.spacing",controls:["gap-*","stack-*"],note:"When false, spacing mappings are skipped."},{id:"layout.utilities.container",controls:["container","max-w-*"],note:"When false, container mappings are skipped."}],nonPdsClassPatterns:["^group(?:[/:].*)?$","^layout-container$"],neverFallbackTags:["table","thead","tbody","tfoot","tr","th","td","caption","colgroup","col"],directMappings:[{id:"layout.flex.base",tw:"flex",pds:["flex"],gate:"flex"},{id:"layout.flex.inline",tw:"inline-flex",pds:["flex"],gate:"flex"},{id:"layout.flex.row",tw:"flex-row",pds:["flex-row"],gate:"flex"},{id:"layout.flex.col",tw:"flex-col",pds:["flex-col"],gate:"flex"},{id:"layout.flex.wrap",tw:"flex-wrap",pds:["flex-wrap"],gate:"flex"},{id:"layout.flex.grow",tw:"grow",pds:["grow"],gate:"flex"},{id:"layout.flex.grow.tw",tw:"flex-grow",pds:["grow"],gate:"flex"},{id:"layout.flex.grow1",tw:"flex-1",pds:["grow"],gate:"flex"},{id:"layout.items.start",tw:"items-start",pds:["items-start"],gate:"flex"},{id:"layout.items.center",tw:"items-center",pds:["items-center"],gate:"flex"},{id:"layout.items.end",tw:"items-end",pds:["items-end"],gate:"flex"},{id:"layout.items.stretch",tw:"items-stretch",pds:["items-stretch"],gate:"flex"},{id:"layout.items.baseline",tw:"items-baseline",pds:["items-baseline"],gate:"flex"},{id:"layout.justify.start",tw:"justify-start",pds:["justify-start"],gate:"flex"},{id:"layout.justify.center",tw:"justify-center",pds:["justify-center"],gate:"flex"},{id:"layout.justify.end",tw:"justify-end",pds:["justify-end"],gate:"flex"},{id:"layout.justify.between",tw:"justify-between",pds:["justify-between"],gate:"flex"},{id:"layout.justify.around",tw:"justify-around",pds:["justify-around"],gate:"flex"},{id:"layout.justify.evenly",tw:"justify-evenly",pds:["justify-evenly"],gate:"flex"},{id:"layout.grid.base",tw:"grid",pds:["grid"],gate:"grid"},{id:"layout.grid.cols.1",tw:"grid-cols-1",pds:["grid-cols-1"],gate:"grid"},{id:"layout.grid.cols.2",tw:"grid-cols-2",pds:["grid-cols-2"],gate:"grid"},{id:"layout.grid.cols.3",tw:"grid-cols-3",pds:["grid-cols-3"],gate:"grid"},{id:"layout.grid.cols.4",tw:"grid-cols-4",pds:["grid-cols-4"],gate:"grid"},{id:"layout.grid.cols.6",tw:"grid-cols-6",pds:["grid-cols-6"],gate:"grid"},{id:"layout.container",tw:"container",pds:["container"],gate:"container"},{id:"intent.surface.shadow",tw:"shadow",pds:["surface-elevated"]},{id:"intent.surface.shadow-md",tw:"shadow-md",pds:["surface-elevated"]},{id:"intent.surface.shadow-lg",tw:"shadow-lg",pds:["surface-elevated"]},{id:"intent.surface.base",tw:"bg-white",pds:["surface-base"]},{id:"typography.align.center",tw:"text-center",pds:["text-center"]},{id:"typography.align.left",tw:"text-left",pds:["text-left"]},{id:"typography.align.right",tw:"text-right",pds:["text-right"]},{id:"typography.text.muted.gray500",tw:"text-gray-500",pds:["text-muted"]},{id:"typography.text.muted.slate500",tw:"text-slate-500",pds:["text-muted"]}],ignoredPatterns:[{id:"style.color",pattern:"^(?:text|from|to|via|decoration|accent|caret)-|^bg-(?!cover$|center$|no-repeat$)",reason:"Visual style token skipped in favor of semantic PDS styling."},{id:"style.radius-border-shadow",pattern:"^(?:rounded|ring|border|shadow|outline)-?",reason:"Surface/shape inferred at primitive level."},{id:"style.typography",pattern:"^(?:font|leading|tracking|uppercase|lowercase|capitalize)-?",reason:"Typography atomic utilities are skipped."},{id:"style.effects",pattern:"^(?:opacity|blur|backdrop|drop-shadow|mix-blend|filter)-",reason:"Visual effects skipped unless mapped to a PDS utility."},{id:"style.transitions",pattern:"^(?:transition|duration|ease|delay|animate)-",reason:"Motion is system-defined in PDS."},{id:"style.spacing.atomic",pattern:"^(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr)-",reason:"Atomic spacing skipped; structural spacing intent is mapped."},{id:"style.positioning.atomic",pattern:"^(?:absolute|relative|fixed|sticky|inset(?:-[xy])?|top|right|bottom|left|z|translate(?:-[xy])?|-translate-[xy])(?:-|$)",reason:"Atomic positioning/offset utilities are skipped so PDS primitives and layout utilities control placement."}],intentRules:[{id:"intent.layout.responsive-grid-to-auto",summary:"Collapse responsive grid-cols patterns (including base+md two-step patterns) to best-fit grid-auto-*"},{id:"intent.layout.mobile-stack",summary:"Map flex-col + md/lg:flex-row to mobile-stack"},{id:"intent.component.card",summary:"Infer card/surface classes from rounded+shadow+surface signals"},{id:"intent.component.card.normalize",summary:"Detect Tailwind card utility clusters and normalize them to PDS card and surface variants."},{id:"intent.component.button",summary:"Infer btn-primary / btn-outline / icon-only from CTA patterns"},{id:"intent.component.button.normalize",summary:"Prevents import-* style classes on button-like elements and applies PDS button variants/sizes."},{id:"intent.component.button.layout-grow",summary:"Preserve CTA row width intent on button-like elements by mapping w-full/flex-1 to grow."},{id:"intent.icon.color-preserve",summary:"Preserve icon color intent by mapping Tailwind text color utilities on icon-like elements to tokenized import-* classes."},{id:"intent.component.badge.normalize",summary:"Detects Tailwind badge/pill utility clusters and normalizes them to PDS badge primitives/variants."},{id:"intent.typography.heading-semantic",summary:"Removes Tailwind heading typography/color utilities so heading semantics and PDS defaults control typography."},{id:"intent.surface.footer-inverse",summary:"Use surface-inverse for footers with explicit background intent"},{id:"intent.typography.link-treatment",summary:"Apply minimal link treatment for hover/transition-tailwind anchors"},{id:"intent.typography.link-active-preserve",summary:"Preserve anchor text color intent (including active menu states) by mapping Tailwind text utilities to tokenized import-* classes."},{id:"intent.typography.metric-paragraph-to-div",summary:"Normalize metric display lines from paragraph tags to div tags to avoid default paragraph margins in compact stat layouts."},{id:"intent.typography.metric-pair-no-stack",summary:"When a compact metric container has two consecutive typography lines, remove stack-sm so spacing follows Tailwind preflight no-margin assumptions."},{id:"intent.typography.semantic-heading-from-scale",summary:"Map large bold typography scales (text-2xl/text-3xl/text-4xl) to semantic heading tags when possible."},{id:"intent.typography.bold-to-strong",summary:"Prefer semantic strong tags for bold inline text intent instead of utility-only font-weight classes."},{id:"intent.preflight.tailwind-runtime-detected",summary:"Detect Tailwind runtime CSS injection and translate key preflight intent"},{id:"intent.preflight.list-reset",summary:"Preserve Tailwind list-reset preflight behavior via scoped fallback class"},{id:"intent.preflight.anchor-reset",summary:"Preserve Tailwind anchor reset preflight behavior via scoped fallback class"},{id:"table.strict-tags.no-classes",summary:"Never emit classes for semantic table tags (table/thead/tbody/tfoot/tr/th/td/caption/colgroup/col)"},{id:"intent.form.nested-label",summary:"Convert sibling label+control pairs into nested labels"},{id:"fallback.import-style",summary:"Generate import-* classes + local style block for unmapped utility styles"}],gapScaleMap:{"gap-0":"gap-0","gap-1":"gap-xs","gap-2":"gap-sm","gap-3":"gap-sm","gap-4":"gap-md","gap-5":"gap-md","gap-6":"gap-lg","gap-7":"gap-lg","gap-8":"gap-xl","gap-10":"gap-xl","gap-12":"gap-xl"},maxWidthMap:{"max-w-xs":"max-w-sm","max-w-sm":"max-w-sm","max-w-md":"max-w-md","max-w-lg":"max-w-lg","max-w-xl":"max-w-xl","max-w-2xl":"max-w-xl","max-w-3xl":"max-w-xl","max-w-4xl":"max-w-xl","max-w-5xl":"max-w-xl","max-w-6xl":"max-w-xl","max-w-7xl":"max-w-xl"},tailwindSizeScale:{"0":"var(--spacing-0)","0.5":"0.125rem","1":"var(--spacing-1)","1.5":"0.375rem","2":"var(--spacing-2)","2.5":"0.625rem","3":"var(--spacing-3)","3.5":"0.875rem","4":"var(--spacing-4)","5":"var(--spacing-5)","6":"var(--spacing-6)","7":"var(--spacing-7)","8":"var(--spacing-8)","9":"var(--spacing-9)","10":"var(--spacing-10)","11":"var(--spacing-11)","12":"var(--spacing-12)","14":"3.5rem","16":"4rem","20":"5rem","24":"6rem","28":"7rem","32":"8rem","36":"9rem","40":"10rem","48":"12rem"},tailwindShadeScale:["50","100","200","300","400","500","600","700","800","900"],defaultTailwindShade:"500",importStyleRules:{"mx-auto":"margin-left:auto;margin-right:auto","ml-auto":"margin-left:auto","mr-auto":"margin-right:auto","w-full":"width:100%","w-auto":"width:auto","h-full":"height:100%","h-48":"height:12rem","h-2.5":"height:0.625rem","h-10":"height:var(--spacing-10)","h-2":"height:var(--spacing-2)","w-2":"width:var(--spacing-2)","size-8":"width:var(--spacing-8);height:var(--spacing-8)","size-10":"width:var(--spacing-10);height:var(--spacing-10)","size-full":"width:100%;height:100%","min-h-screen":"min-height:100vh","overflow-hidden":"overflow:hidden","overflow-x-hidden":"overflow-x:hidden","overflow-x-auto":"overflow-x:auto","whitespace-nowrap":"white-space:nowrap",hidden:"display:none",block:"display:block",truncate:"overflow:hidden;text-overflow:ellipsis;white-space:nowrap","justify-items-center":"justify-items:center","justify-items-start":"justify-items:start","justify-items-end":"justify-items:end","justify-items-stretch":"justify-items:stretch","grid-flow-col":"grid-auto-flow:column","aspect-square":"aspect-ratio:1 / 1","bg-center":"background-position:center","bg-cover":"background-size:cover","bg-no-repeat":"background-repeat:no-repeat","transition-colors":"transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:150ms"},importStyleDynamicRules:[{id:"fallback.import-style.gap-scale",pattern:"^gap-(\\d+)$",summary:"Converts gap scale utilities (including responsive variants like md:gap-6) to generated import-* fallback classes."},{id:"fallback.import-style.min-width-arbitrary",pattern:"^min-w-\\[[^\\]]+\\]$",summary:"Converts arbitrary min-width utilities (e.g. min-w-[600px]) to generated import-* fallback classes."},{id:"fallback.import-style.max-width-arbitrary",pattern:"^max-w-\\[[^\\]]+\\]$",summary:"Converts arbitrary max-width utilities (e.g. max-w-[480px]) to generated import-* fallback classes."},{id:"fallback.import-style.min-height-arbitrary",pattern:"^min-h-\\[[^\\]]+\\]$",summary:"Converts arbitrary min-height utilities (e.g. min-h-[180px]) to generated import-* fallback classes."},{id:"fallback.import-style.grid-rows-arbitrary",pattern:"^grid-rows-\\[[^\\]]+\\]$",summary:"Converts arbitrary grid template row utilities (e.g. grid-rows-[1fr_auto]) to generated import-* fallback classes."},{id:"fallback.import-style.size-scale",pattern:"^size-(\\[[^\\]]+\\]|[0-9.]+)$",summary:"Converts size scale/arbitrary utilities into width+height fallback declarations."},{id:"fallback.import-style.width-height-scale",pattern:"^[wh]-(\\[[^\\]]+\\]|[0-9.]+)$",summary:"Converts width/height scale and arbitrary utilities to import-* classes."},{id:"fallback.import-style.spacing",pattern:"^-?(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr)-(.+)$",summary:"Converts spacing utilities to directional padding/margin fallback declarations, including responsive variants."},{id:"fallback.import-style.text-size",pattern:"^text-(xs|sm|base|lg|xl|2xl|3xl|4xl)$",summary:"Converts common text size utilities to import-* font-size declarations."},{id:"fallback.import-style.font-weight",pattern:"^font-(normal|medium|semibold|bold|extrabold|black)$",summary:"Converts common font weight utilities to import-* font-weight declarations."},{id:"fallback.import-style.leading-tracking",pattern:"^(leading|tracking)-(none|tight|snug|normal|relaxed|loose|tighter|wide|wider|widest)$",summary:"Converts line-height and letter-spacing utilities to import-* declarations for typography fidelity."},{id:"fallback.import-style.bg-tokenized",pattern:"^bg-([a-z]+)-(\\d{2,3})$",summary:"Safeguards Tailwind background color utilities by mapping families like blue/purple/green/red to PDS semantic tokens."},{id:"fallback.import-style.bg-semantic",pattern:"^bg-(primary|secondary|accent)$",summary:"Safeguards semantic background utilities by mapping bg-primary/bg-secondary/bg-accent to PDS color tokens."},{id:"fallback.import-style.text-tokenized",pattern:"^text-([a-z]+)-(\\d{2,3})$",summary:"Safeguards Tailwind text color utilities by mapping common families to PDS semantic tokens."},{id:"fallback.import-style.rounded",pattern:"^rounded(?:-[trbl]{1,2})?(?:-(none|xs|sm|md|lg|xl|2xl|3xl|full))?$",summary:"Safeguards rounded utilities (including rounded-t-sm) by mapping to PDS radius tokens."},{id:"fallback.import-style.overlay-alpha",pattern:"^bg-black\\/(\\d{1,3})$",summary:"Converts alpha black overlay classes (e.g. bg-black/50) to tokenized color-mix background overlays."},{id:"fallback.import-style.text-inverse",pattern:"^text-white$",summary:"Preserves white foreground intent for text-on-image use cases using inverse-compatible tokens."},{id:"fallback.import-style.bg-arbitrary",pattern:"^bg-\\[[^\\]]+\\]$",summary:"Converts arbitrary background colors to import-* fallback classes when values are CSS-safe."},{id:"fallback.import-style.text-arbitrary",pattern:"^text-\\[[^\\]]+\\]$",summary:"Converts arbitrary text colors to import-* fallback classes when values are CSS-safe."}]};$e();Rt();var jt=class extends EventTarget{},C=new jt;C.initializing=!1;C.currentPreset=null;C.debug=!1;var tt=null,rt=null,nt=null,ot=null;function Pe(r,e){return e&&typeof e=="string"?e:`${be(C.currentConfig||{},{resolvePublicAssetURL:me})}core/${r}`}async function ro(){return Array.isArray(C.defaultEnhancers)&&C.defaultEnhancers.length>0?C.defaultEnhancers:(ot||(ot=import(Pe("pds-enhancers.js",C.currentConfig?.enhancersURL)).then(e=>{let t=Array.isArray(e?.defaultPDSEnhancers)?e.defaultPDSEnhancers:[];return C.defaultEnhancers=t,t}).catch(e=>{throw ot=null,e})),ot)}async function no(){return typeof C.ask=="function"&&C.ask!==Mr?C.ask:(rt||(rt=import(Pe("pds-ask.js",C.currentConfig?.askURL)).then(e=>{let t=e?.ask;if(typeof t!="function")throw new Error("Failed to load ask helper");return C.ask=t,t}).catch(e=>{throw rt=null,e})),rt)}async function Ie(){return typeof C.toast=="function"&&C.toast!==ve?C.toast:(nt||(nt=import(Pe("pds-toast.js",C.currentConfig?.toastURL)).then(e=>{let t=e?.toast;if(typeof t!="function")throw new Error("Failed to load toast helper");return C.toast=t,t}).catch(e=>{throw nt=null,e})),nt)}async function Mr(...r){return(await no())(...r)}async function ve(...r){return(await Ie())(...r)}ve.success=async(...r)=>(await Ie()).success(...r);ve.error=async(...r)=>(await Ie()).error(...r);ve.warning=async(...r)=>(await Ie()).warning(...r);ve.info=async(...r)=>(await Ie()).info(...r);var zr=function(r="log",e,...t){let n=!!(C.registry&&!C.registry.isLive),o=(this?.debug||this?.design?.debug||C.debug||!1)===!0;if(n){if(!C.debug)return}else if(!o&&r!=="error"&&r!=="warn")return;let a=console[r]||console.log;t.length>0?a(e,...t):a(e)};function Bt(r){if(r==null)return r;if(typeof r=="function")return;if(typeof r!="object")return r;if(Array.isArray(r))return r.map(t=>Bt(t)).filter(t=>t!==void 0);let e={};for(let[t,n]of Object.entries(r)){let o=Bt(n);o!==void 0&&(e[t]=o)}return e}async function oo(r,e={}){if(e?.runtimeConfig===!1||typeof fetch!="function")return null;let t=e?.runtimeConfigURL||`${r}pds-runtime-config.json`;try{let n=await fetch(t,{cache:"no-store"});return n.ok?await n.json():null}catch{return null}}C.registry=ge;C.enums=y;C.adoptLayers=Ue;C.adoptPrimitives=He;C.parse=Lt;C.createStylesheet=lr;C.isLiveMode=()=>ge.isLive;C.ask=Mr;C.toast=ve;C.common=Ye;C.AutoComplete=null;C.loadAutoComplete=async()=>{if(C.AutoComplete&&typeof C.AutoComplete.connect=="function")return C.AutoComplete;let r=Pe("pds-autocomplete.js",C.currentConfig?.autoCompleteURL);return tt||(tt=import(r).then(e=>{let t=e?.AutoComplete||e?.default?.AutoComplete||e?.default||null;if(!t)throw new Error("AutoComplete export not found in module");return C.AutoComplete=t,t}).catch(e=>{throw tt=null,e})),tt};function Er(r){let e=typeof CustomEvent=="function";try{let t=e?new CustomEvent("pds:ready",{detail:r}):new Event("pds:ready");C.dispatchEvent(t)}catch{}if(typeof document<"u")if(e){let t={detail:r,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{}}}function Tr(r={}){let e=typeof CustomEvent=="function",t={at:Date.now(),...r};try{let n=e?new CustomEvent("pds:config-changed",{detail:t}):new Event("pds:config-changed");C.dispatchEvent(n)}catch{}if(typeof document<"u")if(e){let n={detail:t,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:config-changed",n))}catch{}}else try{document.dispatchEvent(new Event("pds:config-changed"))}catch{}}var Nt="pure-ds-theme",le=null,Fe=null;function Ot(r){try{if(typeof document>"u")return;let e="light";r?r==="system"?e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e=r:e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",document.documentElement.setAttribute("data-theme",e)}catch{}}function _t(r){try{if(le&&Fe){try{typeof le.removeEventListener=="function"?le.removeEventListener("change",Fe):typeof le.removeListener=="function"&&le.removeListener(Fe)}catch{}le=null,Fe=null}if(r==="system"&&typeof window<"u"&&window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=n=>{let o=n?.matches===void 0?e.matches:n.matches;try{let a=o?"dark":"light";document.documentElement.setAttribute("data-theme",a),C.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:a,source:"system"}}))}catch{}};le=e,Fe=t,typeof e.addEventListener=="function"?e.addEventListener("change",t):typeof e.addListener=="function"&&e.addListener(t)}}catch{}}Object.defineProperty(C,"theme",{get(){try{return typeof window>"u"?null:localStorage.getItem(Nt)||null}catch{return null}},set(r){try{if(typeof window>"u")return;let e=C.currentConfig?.design||null,t=ye(r);if(e&&!se(e,t)){let n=e?.name||C.currentPreset?.name||C.currentConfig?.preset||"current preset";console.warn(`PDS theme "${t}" not supported by preset "${n}".`),C.dispatchEvent(new CustomEvent("pds:theme:blocked",{detail:{theme:r,resolvedTheme:t,preset:n}}));return}r==null?localStorage.removeItem(Nt):localStorage.setItem(Nt,r),Ot(r),_t(r),C.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:r,source:"api"}}))}catch{}}});C.defaultEnhancers=[];async function ao(r){let e=r&&r.mode||"live",{mode:t,...n}=r||{};if(e==="static")return io(n);let o=be(n,{resolvePublicAssetURL:me}),a=n?.managerURL||n?.public?.managerURL||n?.manager?.url||new URL("core/pds-manager.js",o).href||new URL("./pds-manager.js",import.meta.url).href,{startLive:i}=await import(a);return i(C,n,{emitReady:Er,emitConfigChanged:Tr,applyResolvedTheme:Ot,setupSystemListenerIfNeeded:_t})}C.start=ao;async function io(r){if(!r||typeof r!="object")throw new Error("PDS.start({ mode: 'static', ... }) requires a valid configuration object");let e=r.applyGlobalStyles??!0,t=r.manageTheme??!0,n=r.themeStorageKey??"pure-ds-theme",o=r.staticPaths??{},a=be(r,{resolvePublicAssetURL:me}),i=r&&r.autoDefine||null,s;i&&i.baseURL?s=fe(he(i.baseURL,{preferModule:!1})):s=`${a}components/`;let c=i&&Array.isArray(i.predefine)&&i.predefine||[],d=i&&typeof i.mapper=="function"&&i.mapper||null;try{qe(C);let{resolvedTheme:p}=Ge({manageTheme:t,themeStorageKey:n,applyResolvedTheme:Ot,setupSystemListenerIfNeeded:_t}),l=await oo(a,r),u=Array.isArray(r?.enhancers)?r.enhancers:r?.enhancers&&typeof r.enhancers=="object"?Object.values(r.enhancers):[],g=l?.config?{...l.config,...r,design:r?.design||l.config.design,preset:r?.preset||l.config.preset}:{...r},h={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`},b=l?.paths||{};if(o={...h,...b,...o},C.registry.setStaticMode(o),e&&typeof document<"u")try{let w=await C.registry.getStylesheet("styles");if(w){w._pds=!0;let S=(document.adoptedStyleSheets||[]).filter(A=>A._pds!==!0);document.adoptedStyleSheets=[...S,w],Tr({mode:"static",source:"static:styles-applied"})}}catch(w){zr.call(C,"warn","Failed to apply static styles:",w)}let f=null,m=[];try{let w=await ro(),S=await Ve({autoDefineBaseURL:s,autoDefinePreload:c,autoDefineMapper:d,autoDefinerModuleURL:Pe("pds-auto-definer.js",i?.moduleURL||C.currentConfig?.autoDefinerURL),enhancers:u,autoDefineOverrides:i||null,autoDefinePreferModule:!(i&&i.baseURL)},{baseEnhancers:w});f=S.autoDefiner,m=S.mergedEnhancers||[]}catch(w){zr.call(C,"error","\u274C Failed to initialize AutoDefiner/Enhancers (static):",w)}let x=Bt(r);return C.currentConfig=Object.freeze({mode:"static",...structuredClone(x),design:structuredClone(g.design||{}),preset:g.preset,theme:p,enhancers:m}),Er({mode:"static",config:g,theme:p,autoDefiner:f}),{config:g,theme:p,autoDefiner:f}}catch(p){throw C.dispatchEvent(new CustomEvent("pds:error",{detail:{error:p}})),p}}var so="src/js/pds-live-manager/tailwind-conversion-rules.json",st=["base","sm","md","lg","xl","2xl"];function lo(r={}){let e=Array.isArray(r.ignoredPatterns)?r.ignoredPatterns.map(n=>({...n,pattern:n?.pattern instanceof RegExp?n.pattern:new RegExp(String(n?.pattern||""))})):[],t=Array.isArray(r.nonPdsClassPatterns)?r.nonPdsClassPatterns.map(n=>n instanceof RegExp?n:new RegExp(String(n||""))):[];return{...r,ignoredPatterns:e,nonPdsClassPatterns:t}}var W=lo(Cr),Ar=W.version||"tw2pds-layout-v4",co=new Map(W.directMappings.map(r=>[r.tw,r])),Dt=new Map(Object.entries(W.gapScaleMap||{})),Lr=new Map(Object.entries(W.maxWidthMap||{})),po=W.nonPdsClassPatterns||[],uo=new Set(W.neverFallbackTags||[]),go={...W.importStyleRules||{}},mo=W.tailwindSizeScale||{},Wt=Array.isArray(W.tailwindShadeScale)?W.tailwindShadeScale.map(r=>String(r)).filter(Boolean):["50","100","200","300","400","500","600","700","800","900"],Rr=Wt.includes(String(W.defaultTailwindShade||""))?String(W.defaultTailwindShade):"500",it=1.2,fo=["container","grid","flex","gap","space","items","justify","content","place","self","col","row","w","h","min","max","p","m","rounded","border","ring","outline","shadow","bg","text","font","leading","tracking","uppercase","lowercase","capitalize","overflow","whitespace","truncate","object","aspect","opacity","blur","backdrop","transition","duration","ease","delay","animate","hidden","block","inline","absolute","relative","fixed","sticky","size"];function Fr(r="",e=""){if(!r||!e)return r;let t=new RegExp(`\\s${e}\\s*=\\s*("[^"]*"|'[^']*'|[^\\s>]+)`,"gi");return String(r).replace(t,"")}function ho(r="",e=null){let t=String(r||""),n=0;return t=t.replace(/<label([^>]*?)\sfor\s*=\s*(["'])([^"']+)\2([^>]*)>([\s\S]*?)<\/label>\s*<(input)([^>]*?)\sid\s*=\s*(["'])([^"']+)\8([^>]*?)>/gi,(o,a,i,s,c,d,p,l,u,g,h)=>{if(s!==g)return o;let b=Fr(`${a||""}${c||""}`,"for"),f=`<${p}${l||""} id="${g}"${h||""}>`;return n+=1,`<label${b}>${d}${f}</label>`}),t=t.replace(/<label([^>]*?)\sfor\s*=\s*(["'])([^"']+)\2([^>]*)>([\s\S]*?)<\/label>\s*<(select|textarea)([^>]*?)\sid\s*=\s*(["'])([^"']+)\8([^>]*)>([\s\S]*?)<\/\6>/gi,(o,a,i,s,c,d,p,l,u,g,h,b)=>{if(s!==g)return o;let f=Fr(`${a||""}${c||""}`,"for"),m=`<${p}${l||""} id="${g}"${h||""}>${b}</${p}>`;return n+=1,`<label${f}>${d}${m}</label>`}),e&&n>0&&(e.labelNestingCount+=n,N(e,`Nested ${n} label/control pairs.`),L(e,"intent.form.nested-label")),t}function bo(r="",e="base"){let t=String(r||"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")||"rule";return`import-${e&&e!=="base"?`${e}-`:""}${t}`}function ce(r,e,t,n="base",o=""){if(!r||!e||!t)return"";let a=bo(e,n);if(o){let i=`${n}|${o}`;r.importPseudoStyles.has(i)||r.importPseudoStyles.set(i,new Map),r.importPseudoStyles.get(i).set(a,t)}else n==="base"?r.importBaseStyles.set(a,t):(r.importResponsiveStyles.has(n)||r.importResponsiveStyles.set(n,new Map),r.importResponsiveStyles.get(n).set(a,t));return r.importedStyleCount+=1,a}function we(r=""){return String(r||"").trim().replace(/_/g," ")}function ke(r=""){return!r||/[;{}]/.test(r)?!1:/^[-#(),.%/\sa-zA-Z0-9]+$/.test(r)}function Ne(r=""){let e=String(r||"").trim();if(!e)return null;let t=e.match(/^\[([^\]]+)\]$/);if(t){let n=we(t[1]);return ke(n)?n:null}return mo[e]||null}function yo(r=""){let e=Number(r);if(!Number.isFinite(e))return Rr;let t=String(e);return Wt.includes(t)?t:Wt.reduce((n,o)=>{let a=Math.abs(Number(n)-e);return Math.abs(Number(o)-e)<a?o:n},Rr)}function Be(r="",e="500"){let t=String(r||"").toLowerCase(),n=yo(e);return["blue","sky","indigo","cyan"].includes(t)?`var(--color-primary-${n})`:["purple","violet","fuchsia"].includes(t)?`var(--color-accent-${n})`:["green","emerald","lime","teal"].includes(t)?`var(--color-success-${n})`:["yellow","amber","warning"].includes(t)?`var(--color-warning-${n})`:["red","rose","pink","orange"].includes(t)?`var(--color-danger-${n})`:["slate","gray","zinc","neutral","stone"].includes(t)?`var(--color-gray-${n})`:""}function Pr(r=""){let e=we(r);return ke(e)&&(/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(e)||/^(?:rgb|hsl)a?\([^)]*\)$/.test(e))?e:""}function ee(r=""){return String(r||"").split(/\s+/).map(e=>e.trim()).filter(Boolean)}function vo(r="",e=""){if(!e)return r;let t=String(r||""),n=t.match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!n)return`${t} class="${e}"`;let o=n[1]||'"',a=ee(n[2]);a.includes(e)||a.push(e);let i=` class=${o}${a.join(" ")}${o}`;return t.replace(n[0],i)}function xo(r="",e=""){return e?new RegExp(`\\s${e}\\s*=`,"i").test(String(r||"")):!1}function wo(r=""){let e=String(r||"").replace(/[-_]+/g," ").trim();return e?e.replace(/(^|\s)([a-z])/g,(t,n,o)=>`${n}${o.toUpperCase()}`):"Icon button"}function ko(r="",e=null){let t=String(r||"");return t&&t.replace(/<(button|a)([^>]*)>\s*(<pds-icon\b[^>]*><\/pds-icon>)\s*<\/\1>/gi,(n,o,a,i)=>{let s=vo(a,"icon-only");if(!xo(s,"aria-label")){let c=String(i).match(/\sicon\s*=\s*(["'])(.*?)\1/i),d=c?String(c[2]||""):"",p=wo(d);s+=` aria-label="${p}"`}return e&&(e.intentHits+=1,L(e,"intent.component.button.icon-only-markup")),`<${o}${s}>${i}</${o}>`})}function So(r="",e=null){let t=String(r||"");if(!t)return t;let n=0,o=t.replace(/<p([^>]*?)>([\s\S]*?)<\/p>/gi,(a,i,s)=>{let c=String(i||"").match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!c)return a;let d=ee(c[2]||""),p=d.some(u=>/^import-text-/.test(String(u||""))),l=d.includes("text-muted")||d.some(u=>/^import-font-/.test(String(u||"")));return!p||!l?a:(n+=1,`<div${i}>${s}</div>`)});return e&&n>0&&(e.intentHits+=1,L(e,"intent.typography.metric-paragraph-to-div"),N(e,`Normalized ${n} metric text paragraph tag(s) to div.`)),o}function Dr(r="",e=""){if(!e)return r;let t=String(r||""),n=t.match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!n)return t;let o=n[1]||'"',a=ee(n[2]).filter(s=>s!==e);if(a.length===0)return t.replace(n[0],"");let i=` class=${o}${a.join(" ")}${o}`;return t.replace(n[0],i)}function $o(r="",e=t=>t){let t=String(r||""),n=t.match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!n)return t;let o=n[1]||'"',a=ee(n[2]),i=e(Array.from(a)),s=Array.isArray(i)?i.filter(Boolean):a;if(s.length===0)return t.replace(n[0],"");let c=` class=${o}${s.join(" ")}${o}`;return t.replace(n[0],c)}function Co(r="",e=null){let t=String(r||"");if(!t)return t;let n=0,o=t.replace(/<(div|section|article|aside)([^>]*)>\s*<(p|div)([^>]*)>[\s\S]*?<\/\3>\s*<(p|div)([^>]*)>[\s\S]*?<\/\5>\s*<\/\1>/gi,(a,i,s,c,d,p,l)=>{let u=String(s||"").match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!u||!ee(u[2]).includes("stack-sm"))return a;let h=String(d||"").match(/\sclass\s*=\s*(["'])(.*?)\1/i),b=String(l||"").match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!h||!b)return a;let f=ee(h[2]),m=ee(b[2]);if(!(f.some(S=>/^import-text-/.test(String(S||"")))&&m.some(S=>/^import-text-/.test(String(S||"")))))return a;let w=Dr(s,"stack-sm");return n+=1,a.replace(`<${i}${s}>`,`<${i}${w}>`)});return e&&n>0&&(e.intentHits+=1,L(e,"intent.typography.metric-pair-no-stack"),N(e,`Removed stack-sm from ${n} metric text pair container(s).`)),o}function zo(r={}){if(!r||typeof r!="object")return{};let e=r.typography;if(e&&typeof e=="object")return e;let t=r.design?.typography;return t&&typeof t=="object"?t:{}}function Mo(r={}){let e=zo(r),t=Number(e.fontScale);return Number.isFinite(t)?Math.max(1,Math.min(2,t)):it}function Eo(r="",e=it){let n={"4xl":1,"3xl":2,"2xl":3,xl:4}[r];if(!n)return"";let o=Number.isFinite(Number(e))?Math.max(1,Math.min(2,Number(e))):it,a=Math.max(-1,Math.min(1,Math.round((o-it)/.25))),i=n-a;return i<1?"h1":i>4?"":`h${i}`}function To(r="",e=null,t={}){let n=String(r||"");if(!n)return n;let o=Mo(t.config||{}),a=0,i=0,s=n.replace(/<(p|div|span)([^>]*)>([\s\S]*?)<\/\1>/gi,(c,d,p,l)=>{let u=String(p||"").match(/\sclass\s*=\s*(["'])(.*?)\1/i);if(!u)return c;let g=ee(u[2]);if(!g.includes("import-font-bold"))return c;let b=g.find(S=>/^import-text-(?:4xl|3xl|2xl|xl)$/.test(String(S||"")))||"",f=b.match(/^import-text-(4xl|3xl|2xl|xl)$/);if(f){let S=Eo(f[1],o);if(!S)return c;let A=$o(p,k=>k.filter(T=>T!=="import-font-bold"&&T!==b));return a+=1,`<${S}${A}>${l}</${S}>`}let m=/<\/?(?:div|p|section|article|aside|main|header|footer|ul|ol|li|table|tr|td|th|h[1-6])\b/i.test(l),x=/<\/?(?:strong|b)\b/i.test(l);if(m||x)return c;let w=Dr(p,"import-font-bold");return i+=1,`<${d}${w}><strong>${l}</strong></${d}>`});return e&&(a>0&&(e.intentHits+=1,L(e,"intent.typography.semantic-heading-from-scale"),N(e,`Converted ${a} bold display text node(s) to semantic heading tags (fontScale=${Number(o).toFixed(2)}).`)),i>0&&(e.intentHits+=1,L(e,"intent.typography.bold-to-strong"),N(e,`Wrapped ${i} bold text node(s) in strong tags.`))),s}function Ao(r=[]){if(!Array.isArray(r)||r.length===0)return"";let e=r.filter(n=>!st.includes(n));if(e.length===0||e.length>1)return"";let t=e[0];return["hover","focus","active"].includes(t)?t:""}function Ir(r,e="base",t=[]){let n=Ao(t),o=go[r];if(o)return{declaration:o,breakpoint:e,pseudo:n,ruleId:"fallback.import-style"};let a=String(r).match(/^gap-(\d+)$/);if(a){let v={0:"var(--spacing-0)",1:"var(--spacing-1)",2:"var(--spacing-2)",3:"var(--spacing-3)",4:"var(--spacing-4)",5:"var(--spacing-5)",6:"var(--spacing-6)",7:"var(--spacing-7)",8:"var(--spacing-8)",10:"var(--spacing-10)",12:"var(--spacing-12)"},E=Number(a[1]);if(v[E])return{declaration:`gap:${v[E]}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.gap-scale"}}let i=String(r).match(/^(mt|mb|my)-(.+)$/);if(i){let v=i[1],E=i[2],I=Ne(E);if(I){let j="";return v==="mt"?j=`margin-top:${I}`:v==="mb"?j=`margin-bottom:${I}`:j=`margin-top:${I};margin-bottom:${I}`,{declaration:j,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.margin-scale"}}}let s=String(r).match(/^min-w-\[([^\]]+)\]$/);if(s){let v=we(s[1]);if(ke(v))return{declaration:`min-width:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.min-width-arbitrary"}}let c=String(r).match(/^max-w-\[([^\]]+)\]$/);if(c){let v=we(c[1]);if(ke(v))return{declaration:`max-width:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.max-width-arbitrary"}}let d=String(r).match(/^min-h-\[([^\]]+)\]$/);if(d){let v=we(d[1]);if(ke(v))return{declaration:`min-height:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.min-height-arbitrary"}}let p=String(r).match(/^grid-rows-\[([^\]]+)\]$/);if(p){let v=we(p[1]);if(ke(v))return{declaration:`grid-template-rows:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.grid-rows-arbitrary"}}let l=String(r).match(/^size-(.+)$/);if(l){let v=Ne(l[1]);if(v)return{declaration:`width:${v};height:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.size-scale"}}let u=String(r).match(/^w-(.+)$/);if(u){let v=Ne(u[1]);if(v)return{declaration:`width:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.width-scale"}}let g=String(r).match(/^h-(.+)$/);if(g){let v=Ne(g[1]);if(v)return{declaration:`height:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.height-scale"}}let h={xs:"var(--font-size-xs)",sm:"var(--font-size-sm)",base:"var(--font-size-md)",lg:"var(--font-size-lg)",xl:"var(--font-size-xl)","2xl":"var(--font-size-2xl)","3xl":"var(--font-size-3xl)","4xl":"var(--font-size-4xl)"},b=String(r).match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl)$/);if(b)return{declaration:`font-size:${h[b[1]]}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.text-size"};let f={normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"},m=String(r).match(/^font-(normal|medium|semibold|bold|extrabold|black)$/);if(m)return{declaration:`font-weight:${f[m[1]]}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.font-weight"};let x={none:"1",tight:"1.25",snug:"1.375",normal:"1.5",relaxed:"1.625",loose:"2"},w=String(r).match(/^leading-(none|tight|snug|normal|relaxed|loose)$/);if(w)return{declaration:`line-height:${x[w[1]]}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.line-height"};let S={tighter:"-0.05em",tight:"-0.025em",normal:"0em",wide:"0.025em",wider:"0.05em",widest:"0.1em"},A=String(r).match(/^tracking-(tighter|tight|normal|wide|wider|widest)$/);if(A)return{declaration:`letter-spacing:${S[A[1]]}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.tracking"};let k=String(r).match(/^bg-black\/(\d{1,3})$/);if(k)return{declaration:`background-color:color-mix(in srgb, var(--color-gray-900) ${Math.max(0,Math.min(100,Number(k[1])))}%, transparent)`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.overlay-alpha"};if(r==="text-white")return{declaration:"color:var(--color-gray-50)",breakpoint:e,pseudo:n,ruleId:"fallback.import-style.text-inverse"};let T=String(r).match(/^bg-(primary|secondary|accent)$/);if(T){let E={primary:"var(--color-primary-fill)",secondary:"var(--color-gray-500)",accent:"var(--color-accent-500)"}[T[1]];if(E)return{declaration:`background-color:${E}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.bg-semantic"}}let R=String(r).match(/^bg-([a-z]+)-(\d{2,3})$/);if(R){let v=Be(R[1],R[2]);if(v)return{declaration:`background-color:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.bg-tokenized"}}let M=String(r).match(/^bg-\[([^\]]+)\]$/);if(M){let v=Pr(M[1]);if(v)return{declaration:`background-color:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.bg-arbitrary"}}let z=String(r).match(/^text-([a-z]+)-(\d{2,3})$/);if(z){let v=Be(z[1],z[2]);if(v)return{declaration:`color:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.text-tokenized"}}let P=String(r).match(/^text-\[([^\]]+)\]$/);if(P){let v=Pr(P[1]);if(v)return{declaration:`color:${v}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.text-arbitrary"}}let $=String(r).match(/^rounded(?:-([trbl]{1,2}))?(?:-(none|xs|sm|md|lg|xl|2xl|3xl|full))?$/);if($){let v=$[1]||"",E=$[2]||"sm",I=E==="none"?"0":`var(--radius-${E})`,j={t:["top-left","top-right"],b:["bottom-left","bottom-right"],l:["top-left","bottom-left"],r:["top-right","bottom-right"],tl:["top-left"],tr:["top-right"],bl:["bottom-left"],br:["bottom-right"]};if(!v)return{declaration:`border-radius:${I}`,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.rounded"};let Y=(j[v]||[]).map(H=>`border-${H}-radius:${I}`).join(";");if(Y)return{declaration:Y,breakpoint:e,pseudo:n,ruleId:"fallback.import-style.rounded"}}return null}function at(r,e){return typeof r=="number"&&Number.isFinite(r)?`${r}px`:typeof r=="string"&&r.trim()?r.trim():`${e}px`}function Lo(r={}){let t=(r?.design&&typeof r.design=="object"?r.design:r)?.layout?.breakpoints||{};return{sm:at(t.sm,640),md:at(t.md,768),lg:at(t.lg,1024),xl:at(t.xl,1280)}}function Ro(r,e){let t=Array.from(r.importBaseStyles.entries()).map(([a,i])=>`.${a}{${i};}`),n=[];for(let[a,i]of r.importResponsiveStyles.entries()){let s=e?.[a];if(!s||!i?.size)continue;let c=Array.from(i.entries()).map(([d,p])=>`.${d}{${p};}`).join(`
|
|
3632
|
+
`);n.push(`@media (min-width: ${s}) {
|
|
3633
|
+
${c}
|
|
3634
|
+
}`)}for(let[a,i]of r.importPseudoStyles.entries()){let[s,c]=String(a).split("|");if(!c||!i?.size)continue;let d=Array.from(i.entries()).map(([l,u])=>`.${l}:${c}{${u};}`).join(`
|
|
3635
|
+
`);if(!d)continue;if(s==="base"){n.push(d);continue}let p=e?.[s];p&&n.push(`@media (min-width: ${p}) {
|
|
3636
|
+
${d}
|
|
3637
|
+
}`)}let o=[...t,...n].filter(Boolean).join(`
|
|
3638
|
+
`);return o.trim()?["/* pds-import: generated fallback styles for unmapped Tailwind utilities */",o].join(`
|
|
3639
|
+
`):""}function Fo(r="",e=""){if(!e||!e.trim())return r;let t=`<style data-pds-import="tailwind-fallback">
|
|
3640
|
+
${e}
|
|
3641
|
+
</style>`;return/<head[^>]*>/i.test(r)?r.replace(/<head([^>]*)>/i,`<head$1>
|
|
3642
|
+
${t}`):`${t}
|
|
3643
|
+
${r}`}function Nr(r=""){if(!r)return!1;if(r.includes(":")||r.includes("["))return!0;let e=r.split("-")[0];return fo.includes(e)}function te(r=""){let e=String(r).split(":");if(e.length===1)return{breakpoint:"base",base:e[0],variants:[]};let t=e[e.length-1],n=e.slice(0,-1);return{breakpoint:n.find(a=>st.includes(a))||"base",base:t,variants:n}}function Po(){return{totalTailwind:0,mapped:0,ignored:0,policySkipped:0,unknown:0,intentHits:0,unknownTokens:new Map,notes:[],appliedRules:new Set,importBaseStyles:new Map,importResponsiveStyles:new Map,importPseudoStyles:new Map,importedStyleCount:0,labelNestingCount:0,removedAtomicSpacingCount:0,removedAtomicPositioningCount:0}}function Io(r=""){let e=String(r||"").toLowerCase().replace(/\s+/g,""),t=e.includes("menu,ol,ul{list-style:none")||e.includes("ol,ul,menu{list-style:none")||e.includes("ul,ol,menu{list-style:none"),n=e.includes("a{color:inherit;text-decoration:inherit");return{listReset:t,anchorReset:n}}function No(r=""){return String(r||"").toLowerCase().includes("cdn.tailwindcss.com")?{listReset:!0,anchorReset:!0}:{listReset:!1,anchorReset:!1}}function jo(r="",e=null){let t=String(r||""),n={listReset:!1,anchorReset:!1,strippedRuntimeCssBlocks:0,strippedRuntimeScripts:0};return t=t.replace(/<style([^>]*)>([\s\S]*?)<\/style>/gi,(o,a,i)=>{let s=String(i||"");if(!(/tailwindcss\s+v\d/i.test(s)||/\*\s*!\s*tailwindcss/i.test(s)))return o;let d=Io(s);return n.listReset=n.listReset||d.listReset,n.anchorReset=n.anchorReset||d.anchorReset,n.strippedRuntimeCssBlocks+=1,""}),t=t.replace(/<script([^>]*?)src\s*=\s*(?:(['"])([^"']*cdn\.tailwindcss\.com[^"']*)\2|([^\s>]*cdn\.tailwindcss\.com[^\s>]*))([^>]*)><\/script>/gi,(o,a,i,s,c)=>{let p=No(s||c||"");return n.listReset=n.listReset||p.listReset,n.anchorReset=n.anchorReset||p.anchorReset,n.strippedRuntimeScripts+=1,""}),e&&(n.strippedRuntimeCssBlocks>0||n.strippedRuntimeScripts>0)&&(L(e,"intent.preflight.tailwind-runtime-detected"),n.strippedRuntimeCssBlocks>0&&N(e,`Detected and stripped ${n.strippedRuntimeCssBlocks} Tailwind runtime style block(s).`)),e&&n.strippedRuntimeScripts>0&&N(e,`Removed ${n.strippedRuntimeScripts} Tailwind CDN script reference(s).`),{html:t,hints:n}}function N(r,e){!r||!e||r.notes.includes(e)||r.notes.push(e)}function Bo(r,e){let t=r.unknownTokens.get(e)||0;r.unknownTokens.set(e,t+1)}function Oo(r={}){let t=(r?.design&&typeof r.design=="object"?r.design:r)?.layout?.utilities||{};return{grid:t.grid!==!1,flex:t.flex!==!1,spacing:t.spacing!==!1,container:t.container!==!1}}function V(r,e){return e?r?.[e]!==!1:!0}function jr(r){let e=String(r).match(/^grid-cols-(\d+)$/);return e?Number(e[1]):null}function Br(r={}){let e=st.map(o=>({bp:o,cols:r[o]})).filter(o=>Number.isFinite(o.cols));if(e.length<2)return null;if(e.length===2){let[o,a]=e;if(o.bp==="base"&&o.cols===1&&a.cols===2)return"grid-auto-lg";if(o.bp==="base"&&o.cols===1&&a.cols>=3)return null;if(o.cols<a.cols){if(a.cols>=4)return"grid-auto-md";if(a.cols>=2)return"grid-auto-lg"}return null}let t=!0;for(let o=1;o<e.length;o+=1)if(e[o].cols<=e[o-1].cols){t=!1;break}if(!t)return null;let n=e[e.length-1]?.cols||0;return n>=4?"grid-auto-md":n>=3?"grid-auto-sm":null}function _o(r=""){let e=String(r).match(/^text-(gray|slate|zinc|neutral|stone)-(\d{2,3})$/);if(!e)return"";let t=Number(e[2]);return Number.isFinite(t)&&t>=400&&t<=600?"text-muted":""}function Do(r="",e=0){return!r||!Number.isFinite(e)?"":{sm:{2:"sm:grid-cols-2"},md:{3:"md:grid-cols-3"},lg:{4:"lg:grid-cols-4"}}?.[r]?.[e]||""}function Wo(r=""){let e=te(r),n=String(e?.base||"").match(/^space-y-(\d+)$/);if(!n)return"stack-md";let o=Number(n[1]);return Number.isFinite(o)?o<=1?"stack-xs":o<=2?"stack-sm":o<=4?"stack-md":"stack-lg":"stack-md"}function Ho(r=new Set){return Array.from(r).some(e=>{let t=String(e||"");return/^gap-(?:xs|sm|md|lg|xl)$/.test(t)||/^gap-[0-9]+$/.test(t)||/^import-(?:sm-|md-|lg-|xl-)?gap-/.test(t)})}function Uo(r=new Set){return Array.from(r).some(e=>/^stack-(?:xs|sm|md|lg|xl)$/.test(String(e||"")))}function qo(r=new Set){return Array.from(r).some(e=>{let t=String(e||"");return/^grid-cols-\d+$/.test(t)||/^grid-auto-(?:sm|md|lg|xl)$/.test(t)||/^(?:sm|md|lg|xl):grid-cols-\d+$/.test(t)||/^import-(?:sm-|md-|lg-|xl-)?grid-cols-\d+$/.test(t)})}function Go(r,e=12){return Array.from(r.unknownTokens.entries()).sort((t,n)=>n[1]-t[1]).slice(0,e).map(([t])=>t)}function L(r,e){!r||!e||r.appliedRules.add(e)}function ne(r=[],e){return!Array.isArray(r)||!e?!1:r.some(t=>e.test(String(t)))}function Vo(r=[]){for(let e of r){let t=te(e);if(t.breakpoint!=="base")continue;let n=String(t.base).match(/^h-(.+)$/);if(!n)continue;let o=Ne(n[1]);if(!o||o==="auto")continue;let a=String(o).match(/^(-?\d+(?:\.\d+)?)rem$/);if(a){let i=Number(a[1]);if(Number.isFinite(i))return i*16}}return null}function Jo(r=[],e=""){let t=e==="button",n=ne(r,/^bg-/),o=ne(r,/^hover:bg-/),a=ne(r,/^border/),i=ne(r,/^shadow/),s=r.includes("cursor-pointer"),c=ne(r,/^rounded/),d=ne(r,/^(?:min-w|max-w|w)-/),p=ne(r,/^text-(?:white|black|\[[^\]]+\]|[a-z]+-\d{2,3})$/),l=n||o||i;if(!(t||e==="a"&&(l||a||s||c&&d)))return{shouldNormalize:!1,variant:"none",size:"base",iconOnly:!1};let h="none";a&&!n&&!o?h="outline":(l||n&&p)&&(h="primary");let b=r.includes("rounded-full")&&(r.includes("p-2")||r.includes("p-1")||r.includes("p-2.5")),f=ne(r,/^size-(?:6|7|8|9|10|11|12)$/),m=b||f,x=Vo(r),w=r.includes("text-sm")||r.includes("text-xs"),S=r.includes("text-lg")||r.includes("text-xl"),A="base";return x&&x<=40||w?A="sm":(x&&x>=48||S)&&(A="lg"),{shouldNormalize:!0,variant:h,size:A,iconOnly:m}}function Yo(r=""){let e=String(r||"").toLowerCase();return["green","emerald","lime","teal"].includes(e)?"badge-success":["blue","sky","cyan","indigo"].includes(e)?"badge-info":["yellow","amber","orange"].includes(e)?"badge-warning":["red","rose","pink"].includes(e)?"badge-danger":["gray","slate","zinc","neutral","stone"].includes(e)?"badge-secondary":["purple","violet","fuchsia","primary","accent"].includes(e)?"badge-primary":"badge-secondary"}function Qo(r=[],e="",t={shouldNormalize:!1}){if(t?.shouldNormalize)return{shouldNormalize:!1,variantClass:"",outline:!1,sizeClass:"",pastel:null};if(["button","a","input","select","textarea"].includes(e))return{shouldNormalize:!1,variantClass:"",outline:!1,sizeClass:"",pastel:null};if(r.some(z=>/^badge(?:-|$)/.test(String(z))))return{shouldNormalize:!1,variantClass:"",outline:!1,sizeClass:"",pastel:null};let n=r.map(z=>te(z)).filter(z=>z.breakpoint==="base").map(z=>String(z.base)),o=n.some(z=>/^rounded(?:-|$)/.test(z)),a=n.some(z=>/^px-/.test(z)),i=n.some(z=>/^py-/.test(z)),s=a&&i,c=n.includes("text-xs")||n.includes("text-sm"),d=n.includes("text-lg")||n.includes("text-xl"),p=n.map(z=>z.match(/^bg-([a-z]+)-(\d{2,3})(?:\/\d{1,3})?$/)).find(Boolean),l=n.map(z=>z.match(/^text-([a-z]+)-(\d{2,3})(?:\/\d{1,3})?$/)).find(Boolean),u=n.map(z=>z.match(/^border-([a-z]+)-(\d{2,3})$/)).find(Boolean),g=Number(p?.[2]),h=Number(l?.[2]),b=!!(p&&Number.isFinite(g)&&g<=300),f=n.some(z=>/^border(?:-|$)/.test(z)),m=!!(p||l||u),x=[o,s,c,b||f].filter(Boolean).length;if(!(m&&x>=3))return{shouldNormalize:!1,variantClass:"",outline:!1,sizeClass:"",pastel:null};let S=p&&p[1]||l&&l[1]||u&&u[1]||"",A=Yo(S),k=f&&!b,T=c?"badge-sm":d?"badge-lg":"",R=b?{family:S,bgShade:Number.isFinite(g)?g:200,textShade:Number.isFinite(h)?h:700}:null;return{shouldNormalize:!0,variantClass:R?"":A,outline:k,sizeClass:T,pastel:R}}function Ko(r="",e=0){let t=String(r||"").toLowerCase(),n=Number(e);return t==="white"?"surface-base":["gray","slate","zinc","neutral","stone"].includes(t)?Number.isFinite(n)&&n<=100?"surface-base":"surface-subtle":["blue","sky","cyan","indigo","primary","info"].includes(t)?"surface-info":["purple","violet","fuchsia","accent"].includes(t)?"surface-primary":["green","emerald","lime","teal","success"].includes(t)?"surface-success":["yellow","amber","orange","warning"].includes(t)?"surface-warning":["red","rose","pink","danger"].includes(t)?"surface-danger":"surface-base"}function Zo(r=[],e="",t={shouldNormalize:!1},n={shouldNormalize:!1}){if(t?.shouldNormalize||n?.shouldNormalize)return{shouldNormalize:!1,cardVariantClass:"",surfaceClass:""};if(!new Set(["div","section","article","aside","li"]).has(e))return{shouldNormalize:!1,cardVariantClass:"",surfaceClass:""};if(r.some(f=>/^card(?:-|$)/.test(String(f))))return{shouldNormalize:!1,cardVariantClass:"",surfaceClass:""};let a=r.map(f=>te(f)).filter(f=>f.breakpoint==="base").map(f=>String(f.base)),i=a.some(f=>/^rounded(?:-|$)/.test(f)),s=a.some(f=>/^border(?:$|-)/.test(f)),c=a.some(f=>/^shadow(?:$|-)/.test(f)),d=a.some(f=>/^(?:p|px|py|pt|pb|pl|pr)-/.test(f)),p=a.map(f=>f.match(/^bg-([a-z]+)-?(\d{2,3})?$/)).find(Boolean),l=a.includes("bg-white")||!!p;if(!([i,s||c,l,d].filter(Boolean).length>=3))return{shouldNormalize:!1,cardVariantClass:"",surfaceClass:""};let h="card-basic";c?h="card-elevated":s&&(h="card-outlined");let b="";return c?b="surface-elevated":p?b=Ko(p[1],p[2]):l&&(b="surface-base"),{shouldNormalize:!0,cardVariantClass:h,surfaceClass:b}}function Xo({tagName:r,originalClassValue:e,policy:t,summary:n,preflightHints:o={}}){if(uo.has(r))return L(n,"table.strict-tags.no-classes"),"";let a=String(e).split(/\s+/).filter(Boolean),i=Jo(a,r),s=Qo(a,r,i),c=Zo(a,r,i,s),d=/^h[1-6]$/.test(r),p=["i","svg"].includes(r)||a.some($=>/^fa(?:[a-z-]+)?$/i.test(String($||""))||/^fa-/.test(String($||""))),l=new Set,u={},g={},h=!1,b="",f="",m=!1,x="";a.forEach($=>{let v=te($),E=v.base;if(po.some(F=>F.test(E))){n.ignored+=1,L(n,"cleanup.non-pds-class");return}let I=Nr($)||Nr(E);if(I&&(n.totalTailwind+=1),/^space-y-/.test(E)){h=!0,b=b||$,f=f||Wo($),n.ignored+=1,L(n,"layout.spacing.space-y-to-stack");return}if(/^space-x-/.test(E)){let F=String(E).match(/^space-x-(\d+)$/);if(F){let _=`gap-${F[1]}`,re=Dt.get(_);if(re&&V(t,"spacing")){l.add(re),m=!0,x=x||$,n.mapped+=1,n.intentHits+=1,L(n,"layout.spacing.space-x-to-gap");return}}n.ignored+=1,L(n,"style.spacing.atomic");return}if(/^grid-cols-\d+$/.test(E)&&v.breakpoint!=="base"){let F=jr(E);if(Number.isFinite(F)&&V(t,"grid")){u[v.breakpoint]=F,n.mapped+=1,L(n,"intent.layout.responsive-grid-to-auto");return}if(!V(t,"grid")){n.policySkipped+=1,N(n,"Skipped responsive grid mapping because layout.utilities.grid=false.");return}}if(/^flex-(?:row|col)$/.test(E)&&v.breakpoint!=="base"){if(V(t,"flex")){g[v.breakpoint]=E,n.mapped+=1,L(n,"intent.layout.mobile-stack");return}n.policySkipped+=1,N(n,"Skipped responsive flex mapping because layout.utilities.flex=false.");return}if(/^grid-cols-\d+$/.test(E)&&v.breakpoint==="base"){let F=jr(E);Number.isFinite(F)&&V(t,"grid")&&(u.base=F)}let j=co.get(E);if(j&&v.breakpoint==="base"){if(!V(t,j.gate)){n.policySkipped+=1,N(n,`Skipped ${E} because layout.utilities.${j.gate}=false.`);return}j.pds.forEach(F=>{F&&l.add(F)}),n.mapped+=1,L(n,j.id);return}if(Dt.has(E)&&v.breakpoint==="base"){if(!V(t,"spacing")){n.policySkipped+=1,N(n,"Skipped gap utility because layout.utilities.spacing=false.");return}l.add(Dt.get(E)),n.mapped+=1,L(n,"layout.spacing.gap-scale");return}if(Lr.has(E)&&v.breakpoint==="base"){if(!V(t,"container")){n.policySkipped+=1,N(n,"Skipped max-width utility because layout.utilities.container=false.");return}l.add(Lr.get(E)),n.mapped+=1,L(n,"layout.container.max-width");return}if(i.shouldNormalize&&I){let F=String(E||"");if(v.breakpoint==="base"&&["flex-1","grow","flex-grow"].includes(F)){l.add("grow"),n.mapped+=1,n.intentHits+=1,L(n,"intent.component.button.layout-grow");return}if(/^(?:bg-|text-(?!center$|left$|right$)|font-|leading-|tracking-|rounded|ring|border|shadow|outline|transition|duration|ease|delay|animate|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|w-|h-|min-|max-|size-|overflow)/.test(F)||F.startsWith("hover:")){n.ignored+=1,L(n,"intent.component.button.normalize");return}}if(d&&/^(?:text-(?:xs|sm|base|lg|xl|\dxl|white|black|\[[^\]]+\]|[a-z]+-\d{2,3})|font-|leading-|tracking-|uppercase|lowercase|capitalize)/.test(E)){n.ignored+=1,n.intentHits+=1,L(n,"intent.typography.heading-semantic");return}if(s.shouldNormalize&&I){let F=String(E||"");if(/^(?:bg-|text-(?!center$|left$|right$)|font-|leading-|tracking-|rounded|ring|border|shadow|outline|transition|duration|ease|delay|animate|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|w-|h-|min-|max-|size-|overflow)/.test(F)||F.startsWith("hover:")){n.ignored+=1,L(n,"intent.component.badge.normalize");return}}if(c.shouldNormalize&&I){let F=String(E||"");if(/^(?:bg-|text-(?!center$|left$|right$)|font-|leading-|tracking-|rounded|ring|border|shadow|outline|transition|duration|ease|delay|animate|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr)/.test(F)||F.startsWith("hover:")){n.ignored+=1,L(n,"intent.component.card.normalize");return}}let q=_o(E);if(q&&v.breakpoint==="base"){l.add(q),n.mapped+=1,n.intentHits+=1,L(n,"intent.typography.text-neutral-to-muted");return}if(/^text-(?:white|black|[a-z]+-\d{2,3}|\[[^\]]+\])$/.test(E)){if(p||r==="a"&&!i.shouldNormalize){let _=Ir(E,v.breakpoint,v.variants);if(_){let re=ce(n,`${r}-color-${E}`,_.declaration,_.breakpoint,_.pseudo);if(re){l.add(re),n.mapped+=1,n.intentHits+=1,L(n,p?"intent.icon.color-preserve":"intent.typography.link-active-preserve");return}}}n.ignored+=1,L(n,"style.color");return}let H=Ir(E,v.breakpoint,v.variants);if(H){let F=ce(n,E,H.declaration,H.breakpoint,H.pseudo);if(F){l.add(F),n.mapped+=1,n.intentHits+=1,L(n,H.ruleId),v.breakpoint!=="base"&&N(n,`Generated responsive import fallback for ${$}.`);return}}for(let F of W.ignoredPatterns)if(F.pattern.test(E)){n.ignored+=1,L(n,F.id),F.id==="style.spacing.atomic"&&(n.removedAtomicSpacingCount+=1),F.id==="style.positioning.atomic"&&(n.removedAtomicPositioningCount+=1);return}if(I){n.unknown+=1,Bo(n,$);return}l.add($)}),h&&V(t,"spacing")&&(l.add(f||"stack-md"),n.mapped+=1,n.intentHits+=1,N(n,`Mapped ${b} to ${f||"stack-md"}.`)),m&&V(t,"spacing")&&N(n,`Mapped ${x} to gap utility.`);let w=Br(u);if(w&&V(t,"grid")?(l.delete("grid-cols-1"),l.delete("grid-cols-2"),l.delete("grid-cols-3"),l.delete("grid-cols-4"),l.delete("grid-cols-6"),l.add("grid"),l.add(w),n.intentHits+=1,L(n,"intent.layout.responsive-grid-to-auto"),N(n,`Collapsed responsive grid columns to ${w}.`)):V(t,"grid")&&st.filter(v=>v!=="base"&&Number.isFinite(u[v])).forEach(v=>{let E=u[v],I=Do(v,E);if(I){l.add("grid"),l.add(I),n.intentHits+=1,L(n,"intent.layout.responsive-grid-to-auto"),N(n,`Mapped ${v}:grid-cols-${E} to ${I}.`);return}let j=ce(n,`grid-cols-${E}`,`grid-template-columns:repeat(${E}, minmax(0, 1fr))`,v);j&&(l.add("grid"),l.add(j),n.intentHits+=1,L(n,"fallback.import-style.grid-cols-responsive"),N(n,`Mapped ${v}:grid-cols-${E} to responsive import fallback for exact columns.`))}),V(t,"flex")&&a.includes("flex-col")&&(g.md==="flex-row"||g.lg==="flex-row")&&(l.delete("flex-col"),l.delete("flex-row"),l.add("mobile-stack"),n.intentHits+=1,L(n,"intent.layout.mobile-stack"),N(n,"Mapped flex-col + breakpoint flex-row to mobile-stack.")),(l.has("flex")||l.has("inline-flex"))&&V(t,"spacing")&&(Ho(l)||Uo(l)||m||h||(l.add("gap-sm"),n.intentHits+=1,L(n,"layout.spacing.flex-min-gap"),N(n,"Added gap-sm fallback for flex container without explicit spacing."))),a.some($=>/^grid-cols-\d+$/.test(te($).base))&&l.has("grid")&&!qo(l)){let $=Br(u);$?(l.add($),n.intentHits+=1,L(n,"intent.layout.responsive-grid-to-auto"),N(n,`Applied grid safety fallback ${$} to avoid bare grid output.`)):Number.isFinite(u.base)&&u.base>1?(l.add(`grid-cols-${u.base}`),n.intentHits+=1,L(n,"intent.layout.grid-safety-fallback"),N(n,`Applied grid safety fallback grid-cols-${u.base} to preserve explicit grid intent.`)):(l.add("mobile-stack"),n.intentHits+=1,L(n,"intent.layout.grid-safety-fallback.mobile-stack"),N(n,"Applied mobile-stack safety fallback to avoid bare grid output when explicit grid intent was present."))}let k=a.some($=>/^(?:bg-white|shadow|shadow-md|shadow-lg)$/.test($)),T=a.some($=>/^rounded/.test($));if(["div","section","article","li","aside"].includes(r)&&k&&T&&(l.add("card"),!l.has("surface-elevated")&&a.some($=>/^shadow/.test($))&&l.add("surface-elevated"),!l.has("surface-base")&&a.includes("bg-white")&&l.add("surface-base"),n.intentHits+=1,L(n,"intent.component.card")),r==="button"||r==="a"){let $=a.some(I=>/^bg-(?:[a-z]+-)?[4567]00$/.test(I))&&a.includes("text-white"),v=a.some(I=>/^border/.test(I))&&!$,E=a.includes("p-2")&&a.includes("rounded-full");$?(l.delete("surface-base"),l.delete("surface-elevated"),l.add("btn-primary"),n.intentHits+=1,L(n,"intent.component.button.primary")):v&&(l.add("btn-outline"),n.intentHits+=1,L(n,"intent.component.button.outline")),E&&(l.add("icon-only"),L(n,"intent.component.button.icon-only"))}if(i.shouldNormalize){for(let v of Array.from(l))String(v).startsWith("import-")&&l.delete(v);["flex","inline-flex","items-start","items-center","items-end","justify-start","justify-center","justify-end","justify-between","shrink","self-start","self-center","self-end","cursor-pointer","truncate","overflow-hidden","whitespace-nowrap","surface-base","surface-elevated","surface-subtle","card"].forEach(v=>l.delete(v)),i.variant==="primary"?(l.add("btn-primary"),L(n,"intent.component.button.primary")):i.variant==="outline"&&(l.add("btn-outline"),L(n,"intent.component.button.outline")),i.size==="sm"?(l.add("btn-sm"),L(n,"intent.component.button.size-sm")):i.size==="lg"&&(l.add("btn-lg"),L(n,"intent.component.button.size-lg")),i.iconOnly&&(l.add("icon-only"),L(n,"intent.component.button.icon-only")),n.intentHits+=1,L(n,"intent.component.button.normalize")}if(s.shouldNormalize){for(let v of Array.from(l))String(v).startsWith("import-")&&l.delete(v);if(["flex","inline-flex","items-start","items-center","items-end","justify-start","justify-center","justify-end","justify-between","grow","shrink","self-start","self-center","self-end","cursor-pointer","truncate","overflow-hidden","whitespace-nowrap","text-muted","surface-base","surface-elevated","surface-subtle","card"].forEach(v=>l.delete(v)),l.add("badge"),s.variantClass&&l.add(s.variantClass),s.outline&&l.add("badge-outline"),s.sizeClass&&l.add(s.sizeClass),s.pastel&&s.pastel.family){let v=Be(s.pastel.family,String(s.pastel.bgShade||200)),E=Be(s.pastel.family,String(s.pastel.textShade||700));if(v&&E){let I=`badge-pastel-${s.pastel.family}-${s.pastel.bgShade}-${s.pastel.textShade}`,j=ce(n,I,`background-color:${v};color:${E}`,"base");j&&(l.add(j),L(n,"intent.component.badge.pastel-preserve"),N(n,`Preserved pastel badge tone using ${j}.`))}}n.intentHits+=1,L(n,"intent.component.badge.normalize"),N(n,"Normalized badge/pill utility cluster to PDS badge classes.")}if(c.shouldNormalize){for(let v of Array.from(l))String(v).startsWith("import-")&&l.delete(v);["surface-base","surface-subtle","surface-elevated","surface-sunken","surface-overlay","surface-inverse","surface-primary","surface-secondary","surface-success","surface-warning","surface-danger","surface-info","card-basic","card-elevated","card-outlined","card-interactive"].forEach(v=>l.delete(v)),l.add("card"),c.cardVariantClass&&l.add(c.cardVariantClass),c.surfaceClass&&l.add(c.surfaceClass),n.intentHits+=1,L(n,"intent.component.card.normalize"),N(n,"Normalized card utility cluster to PDS card/surface classes.")}if(r==="a"&&!i.shouldNormalize&&a.some(v=>v.includes("hover:text")||v==="transition-colors")){let v=ce(n,"link-reset","text-decoration:none");v&&l.add(v),n.intentHits+=1,L(n,"intent.typography.link-treatment")}if(r==="footer"&&(l.has("surface-base")||a.some(v=>/^bg-/.test(v)))&&(l.delete("surface-base"),l.delete("surface-subtle"),l.add("surface-inverse"),n.intentHits+=1,L(n,"intent.surface.footer-inverse")),o?.listReset&&["ul","ol","menu"].includes(r)){let $=ce(n,"list-reset","list-style:none;margin:0;padding:0");$&&(l.add($),n.intentHits+=1,L(n,"intent.preflight.list-reset"))}if(o?.anchorReset&&r==="a"&&!i.shouldNormalize){let $=ce(n,"anchor-reset","color:inherit;text-decoration:inherit");$&&(l.add($),n.intentHits+=1,L(n,"intent.preflight.anchor-reset"))}let z=new Set(["div","section","article","aside","nav","main","header","footer","form","fieldset","ul","ol","li"]),P=a.some($=>{let v=te($).base;return/^(?:flex|grid|container|gap-|space-[xy]-|items-|justify-|content-|place-|self-|w-|h-|min-|max-)/.test(v)});return l.size===0&&z.has(r)&&P&&(l.add("stack-sm"),N(n,`Added stack-sm fallback for <${r}> with unmapped classes.`)),Array.from(l).join(" ")}function ea(r="",e={}){let t=String(r||""),n=Oo(e.config||{}),o=Lo(e.config||{}),a=Po(),i=jo(t,a),c=ho(i.html,a).replace(/<([a-zA-Z][\w:-]*)([^>]*?)\sclass\s*=\s*(["'])(.*?)\3([^>]*)>/gs,(A,k,T,R,M,z)=>{let P=Xo({tagName:String(k||"").toLowerCase(),originalClassValue:M,policy:n,summary:a,preflightHints:i.hints}),$=String(P||"").trim();return $?`<${k}${T} class=${R}${$}${R}${z}>`:`<${k}${T}${z}>`}),d=To(Co(So(ko(c,a),a),a),a,{config:e.config||{}}),p=Ro(a,o),l=Fo(d,p);p&&N(a,`Generated ${a.importedStyleCount} import-* fallback style mappings.`),(a.removedAtomicSpacingCount>0||a.removedAtomicPositioningCount>0)&&N(a,`Removed atomic utilities by policy: spacing=${a.removedAtomicSpacingCount}, positioning=${a.removedAtomicPositioningCount}.`);let u=Go(a,16),g=a.mapped+a.ignored+a.policySkipped,h=a.totalTailwind>0?g/a.totalTailwind:1,b=a.totalTailwind>0?a.unknown/a.totalTailwind:0,f=.42+h*.45+Math.min(a.intentHits,4)*.025-b*.18,m=Math.max(.15,Math.min(.96,Number(f.toFixed(2)))),x=[`pds-import: rulebook=${Ar} confidence=${Math.round(m*100)}%`,`pds-import: tailwind=${a.totalTailwind} mapped=${a.mapped} ignored=${a.ignored} policySkipped=${a.policySkipped} unknown=${a.unknown}`];u.length&&x.push(`pds-import: unknown-tailwind=${u.join(", ")}`),a.notes.length&&x.push(`pds-import: notes=${a.notes.join(" | ")}`);let w=`<!-- ${x.join(` -->
|
|
3644
|
+
<!-- `)} -->
|
|
3645
|
+
${l}`,S=[];return a.unknown>0&&S.push({severity:"warning",message:`Converted with ${a.unknown} unknown Tailwind utilities requiring manual review.`}),a.policySkipped>0&&S.push({severity:"info",message:`Skipped ${a.policySkipped} utility mappings due to PDS config policy.`}),u.length&&S.push({severity:"info",message:`Top unknown utilities: ${u.slice(0,8).join(", ")}`}),{html:w,confidence:m,issues:S,meta:{rulebookVersion:Ar,coverage:{tailwind:a.totalTailwind,mapped:a.mapped,ignored:a.ignored,policySkipped:a.policySkipped,unknown:a.unknown,importedStyles:a.importedStyleCount,nestedLabelPairs:a.labelNestingCount},unknownTailwindTokens:u,notes:a.notes,appliedRules:Array.from(a.appliedRules),policy:n,importStyleSheetInjected:!!p,breakpoints:o}}}function ta(){return{rulesJsonPath:so,...W,directMappings:W.directMappings.map(r=>({id:r.id,tw:r.tw,pds:r.pds,gate:r.gate||null})),ignoredPatterns:W.ignoredPatterns.map(r=>({id:r.id,pattern:String(r.pattern),reason:r.reason}))}}function ra(r){let e=String(r||"").match(/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/);return e?e[0]:null}function na(r){return String(r||"").replaceAll("&","&").replaceAll("<","<").replaceAll(">",">").replaceAll('"',""").replaceAll("'","'")}function Wr(r){return/<\s*[a-z][^>]*>/i.test(String(r||""))}function oa(r){let e=String(r||"").trim().toLowerCase();if(!e)return null;let t=Number.parseFloat(e);return Number.isFinite(t)?e.endsWith("rem")||e.endsWith("em")?t*16:e.endsWith("px")||/^[0-9.\-]+$/.test(e)?t:null:null}function K(r){let e=String(r||"").trim();if(!e)return"";let t=e.match(/#(?:[0-9a-f]{3,8})\b/i);if(t)return t[0].toLowerCase();let n=e.match(/rgba?\([^)]*\)/i);if(n)return n[0];let o=e.match(/hsla?\([^)]*\)/i);return o?o[0]:""}function aa(r=""){let e=String(r||"").trim();if(!e||typeof window>"u"||typeof document>"u")return"";let t=document.documentElement;if(!t)return"";let n=window.getComputedStyle(t);return String(n.getPropertyValue(e)||"").trim()}function ia(r=""){let e=String(r||"").trim(),t=K(e);if(t)return t;let n=e.match(/var\(\s*(--[^\s,)]+)\s*(?:,[^)]+)?\)/i);if(!n)return"";let o=aa(n[1]);return K(o)}function sa(r=""){let e=String(r||"").trim();if(!e)return"";let t=e.split(":").pop()||e;if(t==="bg-white")return"#ffffff";if(t==="bg-black")return"#000000";let n=t.match(/^bg-black\/(\d{1,3})$/i);if(n)return`rgba(0,0,0,${Math.max(0,Math.min(100,Number(n[1])))/100})`;let o=t.match(/^bg-\[([^\]]+)\]$/i);if(o)return K(o[1]);let a=t.match(/^bg-([a-z]+)-(\d{2,3})$/i);if(!a)return"";let i=Be(a[1],a[2]);return i?ia(i):""}function Or(r=""){return String(r||"").split(/\s+/).map(t=>t.trim()).filter(Boolean).map(t=>sa(t)).filter(Boolean)}function la(r=""){let e=[],t=String(r||""),n=/([^{}]+)\{([^{}]*)\}/g,o=n.exec(t);for(;o;){let a=String(o[1]||"").trim(),i=String(o[2]||"").trim();a&&i&&e.push({selector:a,body:i}),o=n.exec(t)}return e}function ca(r=""){let e=String(r||"").toLowerCase();return e?/(^|\s|,)(html|body|:root|main)(\s|,|$)|#app\b|#root\b|\.app\b|\.page\b/.test(e):!1}function da(r=""){let e=String(r||"").trim().match(/rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*([0-9.]+))?\s*\)/i);if(!e)return null;let t=Number.parseFloat(e[1]),n=Number.parseFloat(e[2]),o=Number.parseFloat(e[3]),a=e[4]==null?1:Number.parseFloat(e[4]);return[t,n,o,a].every(i=>Number.isFinite(i))?{r:Math.max(0,Math.min(255,t)),g:Math.max(0,Math.min(255,n)),b:Math.max(0,Math.min(255,o)),a:Math.max(0,Math.min(1,a))}:null}function pa(r=""){let e=String(r||"").trim().match(/^#([0-9a-f]{3,8})$/i);if(!e)return null;let t=e[1].toLowerCase();if(t.length===3){let[n,o,a]=t.split("");return{r:Number.parseInt(`${n}${n}`,16),g:Number.parseInt(`${o}${o}`,16),b:Number.parseInt(`${a}${a}`,16),a:1}}return t.length===6||t.length===8?{r:Number.parseInt(t.slice(0,2),16),g:Number.parseInt(t.slice(2,4),16),b:Number.parseInt(t.slice(4,6),16),a:t.length===8?Number.parseInt(t.slice(6,8),16)/255:1}:null}function Hr(r=""){let e=K(r);return e?e.startsWith("#")?pa(e):e.startsWith("rgb")?da(e):null:null}function ua(r){if(!r)return null;let e=a=>{let i=Number(a)/255;return i<=.03928?i/12.92:((i+.055)/1.055)**2.4},t=e(r.r),n=e(r.g),o=e(r.b);return .2126*t+.7152*n+.0722*o}function _r(r=""){let e=String(r||"").trim().toLowerCase();if(!e||e==="transparent")return!0;let t=Hr(e);return t&&Number.isFinite(t.a)?t.a<=.04:!1}function ga(r=[],e=[]){let t=r.map(c=>K(c)).filter(c=>c&&!_r(c)),n=je(t);if(n)return{color:n,source:"root"};let o=e.map(c=>K(c)).filter(c=>c&&!_r(c)),a=o.filter(c=>{let d=Hr(c),p=ua(d);return Number.isFinite(p)?p>=.72:!1}),i=je(a);if(i)return{color:i,source:"fallback-bright"};let s=je(o);return s?{color:s,source:"fallback"}:{color:"",source:"none"}}function xe(r,e=new Map){let t=String(r||""),n=/([a-z-]+)\s*:\s*([^;{}]+)/gi,o=n.exec(t);for(;o;){let a=String(o[1]||"").trim().toLowerCase(),i=String(o[2]||"").trim();a&&i&&(e.has(a)||e.set(a,[]),e.get(a).push(i)),o=n.exec(t)}return e}function ma(r=""){let e=String(r||""),t=new Map,n=[],o=[],a=[],i=[],s=[],c=[],d=[],p=/#(?:[0-9a-f]{3,8})\b|rgba?\([^)]*\)|hsla?\([^)]*\)/gi,l=u=>{(String(u||"").match(p)||[]).forEach(h=>{let b=K(h);b&&n.push(b)})};if(typeof DOMParser<"u"&&Wr(e))try{let g=new DOMParser().parseFromString(e,"text/html");Array.from(g.querySelectorAll("style")).map(w=>w.textContent||"").forEach(w=>{xe(w,t),l(w),la(w).forEach(S=>{if(!ca(S.selector))return;let A=xe(S.body,new Map),k=J(A,["background","background-color"]).map(T=>K(T)).filter(Boolean);o.push(...k)})}),Array.from(g.querySelectorAll("[style]")).forEach(w=>{let S=w.getAttribute("style")||"";xe(S,t),l(S)}),["html","body","main","#app","#root",".app",".page"].forEach(w=>{let S=g.querySelector(w);if(!S)return;let A=S.getAttribute("style")||"";if(!A)return;let k=xe(A,new Map),T=J(k,["background","background-color"]).map(M=>K(M)).filter(Boolean);o.push(...T);let R=Or(S.getAttribute("class")||"");a.push(...R)}),Array.from(g.querySelectorAll("[class]")).forEach(w=>{let S=ee(w.getAttribute("class")||"");c.push(...S);let A=Or(w.getAttribute("class")||"");i.push(...A);let k=String(w.tagName||"").toLowerCase(),T=k==="button"||k==="a",R=S.some(M=>/^bg-/.test(String(te(M).base||"")));T&&R&&A.length&&s.push(...A)});let x=g.body?.textContent||"";x.trim()&&d.push(x),l(g.documentElement?.outerHTML||e)}catch{xe(e,t),l(e),d.push(e)}else xe(e,t),l(e),d.push(e);return{declarations:t,colorValues:n,rootBackgroundColors:o,rootClassBackgroundColors:a,classBackgroundColors:i,buttonBackgroundColors:s,classTokens:c,textCorpus:d.join(`
|
|
3646
|
+
`)}}function je(r=[]){let e=new Map;r.forEach(o=>{let a=String(o||"").trim();a&&e.set(a,(e.get(a)||0)+1)});let t="",n=-1;return e.forEach((o,a)=>{o>n&&(t=a,n=o)}),t}function J(r,e=[]){return e.flatMap(t=>r.get(t)||[])}function fa(r,e){if(!r||!e)return null;let t=String(e).split(".").filter(Boolean),n=r;for(let o of t){if(!n||n.type!=="object"||!n.properties||typeof n.properties!="object")return null;n=n.properties[o]}return n||null}function ha(r={}){let e=r&&typeof r=="object"?r:{},t=C?.configRelations&&typeof C.configRelations=="object"?C.configRelations:{},n=new Set(Object.keys(t)),o=null;if(typeof C?.buildConfigFormSchema=="function")try{o=C.buildConfigFormSchema(e)?.schema||null}catch{o=null}return!o&&C?.configFormSchema?.schema&&(o=C.configFormSchema.schema),{design:e,schema:o,allowedPaths:n}}function ba(r,e){if(!r)return e;if(Array.isArray(r.oneOf)&&r.oneOf.length){let t=r.oneOf.map(n=>n?.const).filter(n=>n!=null);if(t.length){if(typeof e=="string"){let n=t.find(o=>String(o).toLowerCase()===e.toLowerCase());if(n!==void 0)return n}if(typeof e=="number"){let n=t.map(o=>Number(o)).filter(o=>Number.isFinite(o));if(n.length)return n.reduce((o,a)=>Math.abs(a-e)<Math.abs(o-e)?a:o,n[0])}return t[0]}}if(r.type==="number"||r.type==="integer"){let t=Number(e);return Number.isFinite(t)?r.type==="integer"?Math.round(t):t:void 0}return r.type==="boolean"?!!e:r.type==="string"?String(e||"").trim():e}function ya(r,e,t){let n=String(e||"").split(".").filter(Boolean);if(!n.length)return;let o=r;for(let a=0;a<n.length;a+=1){let i=n[a];if(a===n.length-1){o[i]=t;return}(!o[i]||typeof o[i]!="object"||Array.isArray(o[i]))&&(o[i]={}),o=o[i]}}function O(r,e,t){if(t==null||t===""||r.allowedPaths.size&&!r.allowedPaths.has(e))return;let n=fa(r.schema,e),o=ba(n,t);o==null||o===""||(ya(r.patch,e,o),r.inferredPaths.add(e))}function de(r=[]){let e=r.map(n=>oa(n)).filter(n=>Number.isFinite(n));if(!e.length)return null;e.sort((n,o)=>n-o);let t=Math.floor(e.length/2);return e.length%2?e[t]:(e[t-1]+e[t])/2}function va(r=[]){let e=r.map(t=>String(t||"").split(",")[0]||"").map(t=>t.trim().replace(/^['"]|['"]$/g,"")).filter(Boolean);return je(e)}function xa(r){let e=Number(r);return Number.isFinite(e)?e<=.75?"hairline":e<=1.5?"thin":e<=2.5?"medium":"thick":"thin"}function wa(r=""){let t=String(te(r).base||"").toLowerCase().match(/^rounded(?:-[trbl]{1,2})?(?:-(none|xs|sm|md|lg|xl|2xl|3xl|full))?$/);if(!t)return null;let n=t[1]||"DEFAULT",o={none:0,xs:2,sm:4,DEFAULT:6,md:8,lg:12,xl:16,"2xl":24,"3xl":32};return n==="full"?null:Number.isFinite(o[n])?o[n]:null}function ka(r=[]){let e=r.map(n=>wa(n)).filter(n=>Number.isFinite(n));if(!e.length)return null;e.sort((n,o)=>n-o);let t=Math.floor(e.length/2);return e.length%2?e[t]:(e[t-1]+e[t])/2}function Ht(r={}){let e=String(r.html||"");if(!e.trim())return B({source:"html-inference",type:String(r.sourceType||"design-inference"),confidence:0,issues:[{severity:"warning",message:"No HTML or guideline text provided for design extraction."}],designPatch:{},meta:{extractedPathCount:0,extractedPaths:[]}});let t=ha(r.config||{}),n=ma(e),o={patch:{},inferredPaths:new Set,allowedPaths:t.allowedPaths,schema:t.schema},a=J(n.declarations,["color"]).map(U=>K(U)).filter(Boolean),i=J(n.declarations,["background","background-color"]).map(U=>K(U)).filter(Boolean),s=[...i,...a,...n.colorValues].filter(Boolean),c=Array.from(new Set(s)),d=[...n.rootBackgroundColors||[]],p=[...n.rootClassBackgroundColors||[]],l=d.length?d:p,u=[...i,...n.classBackgroundColors||[]],g=ga(l,u),h=g.color;O(o,"colors.background",h||i[0]||c[0]);let b=c.filter(U=>U&&U!==h),m=je(n.buttonBackgroundColors||[])||b[0]||c[0],x=b.filter(U=>U&&U!==m);O(o,"colors.primary",m),O(o,"colors.secondary",x[0]||m||c[0]),O(o,"colors.accent",x[1]||x[0]||m||c[0]);let w=J(n.declarations,["font-family"]),S=va(w);O(o,"typography.fontFamilyBody",S),O(o,"typography.fontFamilyHeadings",S),O(o,"typography.fontFamilyMono",/mono|code/i.test(n.textCorpus)?"JetBrains Mono":"");let A=J(n.declarations,["font-size"]),k=de(A);O(o,"typography.baseSize",k);let T=J(n.declarations,["padding","padding-top","padding-right","padding-bottom","padding-left","margin","margin-top","margin-right","margin-bottom","margin-left","gap","row-gap","column-gap"]),R=de(T);O(o,"spatialRhythm.baseUnit",R),O(o,"spatialRhythm.inputPadding",R),O(o,"spatialRhythm.buttonPadding",R);let M=J(n.declarations,["border-radius"]),z=de(M)||ka(n.classTokens||[]);O(o,"shape.radiusSize",z);let P=J(n.declarations,["border-width","border-top-width","border-right-width","border-bottom-width","border-left-width"]),$=de(P);O(o,"shape.borderWidth",xa($));let v=J(n.declarations,["max-width"]),E=de(v);O(o,"layout.containerMaxWidth",E),O(o,"layout.maxWidth",E);let I=J(n.declarations,["min-height","height"]),j=de(I);O(o,"layout.buttonMinHeight",j),O(o,"layout.inputMinHeight",j);let q=J(n.declarations,["transition-duration"]),Y=de(q.map(U=>{let Se=String(U||"").trim().toLowerCase(),oe=Number.parseFloat(Se);return Number.isFinite(oe)?Se.endsWith("ms")?oe:Se.endsWith("s")?oe*1e3:oe:null}));O(o,"behavior.transitionSpeed",Y);let F=J(n.declarations,["box-shadow"]).length>0;O(o,"layers.baseShadowOpacity",F?.2:.08);let _=Array.from(o.inferredPaths),re=_.reduce((U,Se)=>{let oe=Se.split(".")[0];return U[oe]=(U[oe]||0)+1,U},{}),Kr=_.length?Math.min(.92,.35+_.length*.02):.25;return B({source:"html-inference",type:String(r.sourceType||"design-inference"),confidence:Kr,issues:_.length?[]:[{severity:"warning",message:"Could not infer enough design signals from input."}],designPatch:o.patch,meta:{extractedPathCount:_.length,extractedPaths:_,categoryCoverage:re,colorSampleSize:c.length,backgroundInference:{source:g.source,candidates:{root:l.length,declaration:i.length,classBased:(n.classBackgroundColors||[]).length}}}})}function Ur(r={}){let e=String(r.input||"").trim(),t=String(r.sourceType||"unknown");if(!e)return B({source:t,type:t,confidence:0,issues:[{severity:"error",message:"No input provided."}],meta:{conversionMode:"none"}});if(Wr(e)){let n=lt({html:e,config:r.config||{}});return B({source:t,type:t,confidence:n.confidence,issues:n.issues,template:n.template,meta:{...n.meta||{},conversionMode:"html-to-pds"}})}return B({source:t,type:t,confidence:.48,issues:[{severity:"info",message:"Input is not HTML; generated text-based preview template."}],template:{id:`${t}-text-import`,name:"Imported Guideline Text",html:`<article class="card surface-base stack-sm"><h3>Imported Guidelines</h3><pre>${na(e)}</pre></article>`},meta:{conversionMode:"text-preview"}})}function lt(r={}){let e=String(r.html||"").trim();if(!e)return B({source:"tailwind",type:"tailwind-html",confidence:0,issues:[{severity:"error",message:"No HTML provided."}]});let t=ea(e,{config:r.config||{}});return B({source:"tailwind",type:"tailwind-html",confidence:t.confidence,issues:t.issues,template:{id:"tailwind-import",name:"Converted Tailwind Markup",html:t.html},meta:t.meta})}function Ut(r={}){let e=String(r.text||"").trim();if(!e)return B({source:"brand",type:"brand-guidelines",confidence:0,issues:[{severity:"error",message:"No brand guideline text provided."}]});let t=ra(e),n={colors:{},typography:{}},o=[];return t?n.colors.primary=t:o.push({severity:"warning",message:"No HEX color found; primary color was not inferred."}),/serif/i.test(e)&&(n.typography.fontFamilyBody="Georgia, serif"),/sans[-\s]?serif/i.test(e)&&(n.typography.fontFamilyBody="Inter, Arial, sans-serif"),/mono|monospace/i.test(e)&&(n.typography.fontFamilyMono="JetBrains Mono, monospace"),B({source:"brand",type:"brand-guidelines",confidence:t?.68:.52,issues:o,designPatch:n,meta:{inferred:{primaryColor:t}}})}var qt="convert-only",qr="adopt-design-and-convert";function Sa(r){return String(r||"").trim().toLowerCase()===qr?qr:qt}function Gr(...r){let e=r.flat().filter(Boolean);if(!e.length)return[];let t=new Set;return e.filter(n=>{let o=`${String(n?.severity||"info")}::${String(n?.path||"")}::${String(n?.message||"")}`;return t.has(o)?!1:(t.add(o),!0)})}function Vr(r=[]){let e=r.map(t=>Number(t)).filter(t=>Number.isFinite(t));return e.length?Math.max(0,Math.min(1,e.reduce((t,n)=>t+n,0)/e.length)):0}function Oe(r={},e={}){return{...r&&typeof r=="object"?r:{},...e&&typeof e=="object"?e:{}}}function Qr(r={},e={}){if(!e||typeof e!="object")return r;let t=Array.isArray(r)?[...r]:{...r};return Object.entries(e).forEach(([n,o])=>{o&&typeof o=="object"&&!Array.isArray(o)?t[n]=Qr(t[n]&&typeof t[n]=="object"?t[n]:{},o):t[n]=o}),t}function Jr(r){if(typeof structuredClone=="function")try{return structuredClone(r)}catch{}return JSON.parse(JSON.stringify(r||{}))}function $a(r={}){let e=Number(r?.ratio),t=Number(r?.min),n=Number.isFinite(e)?e.toFixed(2):"n/a",o=Number.isFinite(t)?t.toFixed(2):"n/a";return{severity:"error",path:String(r?.path||"/colors"),message:`${String(r?.message||"Color contrast validation failed.")} (ratio=${n}, required=${o})`}}function Yr(r={},e={},t={}){if(!(e&&typeof e=="object"?Object.keys(e):[]).length)return{ok:!0,blocked:!1,issues:[],report:{ok:!0,issues:[]}};let o=Number(t.minContrast),a=Number.isFinite(o)?o:4.5,i=Qr(Jr(r||{}),Jr(e||{})),s=ir(i,{minContrast:a,minMutedContrast:3,extendedChecks:!0}),c=Array.isArray(s?.issues)?s.issues.map(d=>$a(d)):[];return{ok:!!s?.ok,blocked:!s?.ok,issues:c,report:{ok:!!s?.ok,minContrast:a,issues:Array.isArray(s?.issues)?s.issues:[]}}}function Ca(){return[{id:"template",name:"Templates"},{id:"tailwind-html",name:"Tailwind HTML"},{id:"brand-guidelines",name:"Brand Guidelines"},{id:"figma-json",name:"Figma Tokens JSON (planned)"},{id:"ux-pilot",name:"UX Pilot (planned)"},{id:"google-stitch",name:"Google Stitch (planned)"}]}async function za(r={}){let e=String(r.sourceType||""),t=Sa(r.importMode),n=String(r.input||""),o=r.config||null;if(e==="template"){let a=$r(r.templateId,r);return a.meta=Oe(a.meta,{importMode:t}),a}if(e==="tailwind-html"){let a=lt({html:n,config:o});if(t===qt)return a.meta=Oe(a.meta,{importMode:t}),a;let i=Ht({html:n,config:o,sourceType:e}),s=Yr(o||{},i.designPatch||{}),c=s.blocked?{}:i.designPatch,d=s.blocked?[{severity:"error",path:"/colors",message:"Import blocked: inferred design patch failed accessibility contrast validation."},...s.issues]:[];return B({source:a.source||"tailwind",type:e,confidence:Vr([a.confidence,i.confidence]),issues:Gr(a.issues,i.issues,d),template:a.template,designPatch:c,meta:Oe(a.meta,{importMode:t,inference:i.meta,validation:s.report,validationBlocked:s.blocked})})}if(e==="brand-guidelines"){let a=Ur({input:n,sourceType:e,config:o});if(t===qt)return a.meta=Oe(a.meta,{importMode:t}),a;let i=Ut({text:n}),s=Ht({html:n,config:o,sourceType:e}),c={...i.designPatch&&typeof i.designPatch=="object"?i.designPatch:{},...s.designPatch&&typeof s.designPatch=="object"?s.designPatch:{}},d=Yr(o||{},c||{}),p=d.blocked?{}:c,l=d.blocked?[{severity:"error",path:"/colors",message:"Import blocked: inferred design patch failed accessibility contrast validation."},...d.issues]:[];return B({source:"brand",type:e,confidence:Vr([a.confidence,i.confidence,s.confidence]),issues:Gr(a.issues,i.issues,s.issues,l),template:a.template,designPatch:p,meta:Oe(a.meta,{importMode:t,inference:s.meta,brandHeuristics:i.meta,validation:d.report,validationBlocked:d.blocked})})}return e==="figma-json"||e==="ux-pilot"||e==="google-stitch"?B({source:e,type:e,confidence:0,issues:[{severity:"info",message:`${e} adapter is not implemented yet in this phase.`}],meta:{importMode:t}}):B({source:e||"unknown",type:"unknown",confidence:0,issues:[{severity:"error",message:"Unsupported import source type."}],meta:{importMode:t}})}var Ma="pds-live-import-history";var X="imports",ct=null;function Ea(){return typeof globalThis<"u"&&typeof globalThis.indexedDB<"u"}function Z(r){return typeof r=="string"?r:""}function dt(r){return Array.isArray(r)?r:[]}function pt(r){return r&&typeof r=="object"?r:{}}function ut(){return Ea()?ct||(ct=new Promise((r,e)=>{let t=globalThis.indexedDB.open(Ma,1);t.onupgradeneeded=()=>{let n=t.result;if(!n.objectStoreNames.contains(X)){let o=n.createObjectStore(X,{keyPath:"id",autoIncrement:!0});o.createIndex("createdAt","createdAt",{unique:!1}),o.createIndex("sourceType","sourceType",{unique:!1}),o.createIndex("fileName","fileName",{unique:!1})}},t.onsuccess=()=>r(t.result),t.onerror=()=>e(t.error||new Error("Failed to open import history database."))}),ct):Promise.resolve(null)}function gt(r){return new Promise((e,t)=>{r.onsuccess=()=>e(r.result),r.onerror=()=>t(r.error||new Error("IndexedDB operation failed."))})}function Ta(r={}){let e=Date.now(),t=Number.isFinite(Number(r.createdAt))?Number(r.createdAt):e,n=new Date(t).toISOString(),o=dt(r.issues).map(c=>({severity:Z(c?.severity||"info"),message:Z(c?.message||"")})),a=dt(r.notes).filter(c=>typeof c=="string"),i=dt(r.unknownTailwindTokens).filter(c=>typeof c=="string"),s=dt(r.appliedRules).filter(c=>typeof c=="string");return{createdAt:t,createdAtIso:n,sourceType:Z(r.sourceType||"unknown"),importMode:Z(r.importMode||"convert-only"),source:Z(r.source||"unknown"),type:Z(r.type||"unknown"),fileName:Z(r.fileName||""),fileSize:Number.isFinite(Number(r.fileSize))?Number(r.fileSize):0,mimeType:Z(r.mimeType||""),fileContents:Z(r.fileContents||""),convertedHtml:Z(r.convertedHtml||""),confidence:Number.isFinite(Number(r.confidence))?Number(r.confidence):0,notes:a,issues:o,coverage:pt(r.coverage),unknownTailwindTokens:i,appliedRules:s,importStyleSheetInjected:!!r.importStyleSheetInjected,templateName:Z(r.templateName||""),designPatch:pt(r.designPatch),meta:pt(r.meta),resultSnapshot:pt(r.resultSnapshot)}}async function Aa(r={}){let e=await ut();if(!e)return null;let t=Ta(r),o=e.transaction(X,"readwrite").objectStore(X);return{id:await gt(o.add(t)),...t}}async function La(r={}){let e=await ut();if(!e)return[];let t=Number.isFinite(Number(r.limit))?Math.max(1,Number(r.limit)):30,o=e.transaction(X,"readonly").objectStore(X);return(await gt(o.getAll())||[]).sort((i,s)=>Number(s?.createdAt||0)-Number(i?.createdAt||0)).slice(0,t)}async function Ra(r){let e=await ut();if(!e)return null;let t=Number(r);if(!Number.isFinite(t))return null;let o=e.transaction(X,"readonly").objectStore(X);return await gt(o.get(t))||null}async function Fa(){let r=await ut();if(!r)return;let t=r.transaction(X,"readwrite").objectStore(X);await gt(t.clear())}export{Fa as clearLiveImportHistory,Ut as convertBrandGuidelinesToPatch,lt as convertTailwindHtmlToPds,B as createImportResult,ta as describeTailwindConversionRules,Ra as getLiveImportHistoryEntry,Ca as getLiveImportSources,Gn as isImportResult,La as listLiveImportHistory,Sr as listLiveTemplates,mr as loadGoogleFont,et as loadLiveTemplateCatalog,za as runLiveImport,Aa as saveLiveImportHistory,Hn as startLive};
|