@pure-ds/core 0.5.5 → 0.5.7
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/INTELLISENSE.md +3 -3
- package/dist/types/pds.d.ts +2 -0
- package/dist/types/public/assets/js/pds-manager.d.ts +2 -2
- package/dist/types/public/assets/js/pds.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-enhancers-meta.d.ts +13 -0
- package/dist/types/src/js/pds-core/pds-enhancers-meta.d.ts.map +1 -0
- package/dist/types/src/js/pds-core/pds-enhancers.d.ts +0 -15
- package/dist/types/src/js/pds-core/pds-enhancers.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-live.d.ts.map +1 -1
- package/package.json +7 -5
- package/packages/pds-cli/bin/pds-bootstrap.js +291 -0
- package/packages/pds-cli/bin/pds-static.js +1 -1
- package/packages/pds-cli/bin/postinstall.mjs +23 -15
- package/packages/pds-cli/bin/sync-assets.js +1 -1
- package/public/assets/js/app.js +10 -64
- package/public/assets/js/pds-manager.js +8 -8
- package/public/assets/js/pds.js +4 -58
- package/public/assets/pds/vscode-custom-data.json +4 -4
- package/readme.md +35 -21
- package/src/js/pds-core/pds-enhancers-meta.js +104 -0
- package/src/js/pds-core/pds-enhancers.js +9 -106
- package/src/js/pds-core/pds-live.js +2 -0
- package/src/js/pds-core/pds-registry.js +1 -1
- package/src/js/pds.d.ts +2 -0
- package/src/js/pds.js +1 -1
package/public/assets/js/pds.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var yt=Object.defineProperty;var gt=(t,e)=>()=>(t&&(e=t(t=0)),e);var bt=(t,e)=>{for(var n in e)yt(t,n,{get:e[n],enumerable:!0})};var ot={};bt(ot,{AutoDefiner:()=>Pe});async function Kt(...t){let e={};t.length&&typeof t[t.length-1]=="object"&&(e=t.pop()||{});let n=t,{baseURL:s,mapper:r=d=>`${d}.js`,onError:o=(d,l)=>console.error(`[defineWebComponents] ${d}:`,l)}=e,i=s?new URL(s,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),a=d=>d.toLowerCase().replace(/(^|-)([a-z])/g,(l,u,f)=>f.toUpperCase()),c=async d=>{try{if(customElements.get(d))return{tag:d,status:"already-defined"};let l=r(d),f=await import(l instanceof URL?l.href:new URL(l,i).href),m=f?.default??f?.[a(d)];if(!m){if(customElements.get(d))return{tag:d,status:"self-defined"};throw new Error(`No export found for ${d}. Expected default export or named export "${a(d)}".`)}return customElements.get(d)?{tag:d,status:"race-already-defined"}:(customElements.define(d,m),{tag:d,status:"defined"})}catch(l){throw o(d,l),l}};return Promise.all(n.map(c))}var Pe,it=gt(()=>{Pe=class{constructor(e={}){let{baseURL:n,mapper:s,onError:r,predicate:o=()=>!0,attributeModule:i="data-module",root:a=document,scanExisting:c=!0,debounceMs:d=16,observeShadows:l=!0,enhancers:u=[],patchAttachShadow:f=!0}=e,m=new Set,w=new Set,x=new Set,g=new Map,$=new WeakMap,H=new WeakMap,E=0,D=!1,L=null,Z=p=>{if(!p||!u.length)return;let y=H.get(p);y||(y=new Set,H.set(p,y));for(let h of u)if(!(!h.selector||!h.run)&&!y.has(h.selector))try{p.matches&&p.matches(h.selector)&&(h.run(p),y.add(h.selector))}catch(v){console.warn(`[AutoDefiner] Error applying enhancer for selector "${h.selector}":`,v)}},I=(p,y)=>{if(!D&&!(!p||!p.includes("-"))&&!customElements.get(p)&&!w.has(p)&&!x.has(p)){if(y&&y.getAttribute){let h=y.getAttribute(i);h&&!g.has(p)&&g.set(p,h)}m.add(p),oe()}},oe=()=>{E||(E=setTimeout(z,d))},A=p=>{if(p){if(p.nodeType===1){let y=p,h=y.tagName?.toLowerCase();h&&h.includes("-")&&!customElements.get(h)&&o(h,y)&&I(h,y),Z(y),l&&y.shadowRoot&&M(y.shadowRoot)}p.querySelectorAll&&p.querySelectorAll("*").forEach(y=>{let h=y.tagName?.toLowerCase();h&&h.includes("-")&&!customElements.get(h)&&o(h,y)&&I(h,y),Z(y),l&&y.shadowRoot&&M(y.shadowRoot)})}},M=p=>{if(!p||$.has(p))return;A(p);let y=new MutationObserver(h=>{for(let v of h)v.addedNodes?.forEach(B=>{A(B)}),v.type==="attributes"&&v.target&&A(v.target)});y.observe(p,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[i,...u.map(h=>h.selector).filter(h=>h.startsWith("data-"))]}),$.set(p,y)};async function z(){if(clearTimeout(E),E=0,!m.size)return;let p=Array.from(m);m.clear(),p.forEach(y=>w.add(y));try{let y=h=>g.get(h)??(s?s(h):`${h}.js`);await Kt(...p,{baseURL:n,mapper:y,onError:(h,v)=>{x.add(h),r?.(h,v)}})}catch{}finally{p.forEach(y=>w.delete(y))}}let _=a===document?document.documentElement:a,R=new MutationObserver(p=>{for(let y of p)y.addedNodes?.forEach(h=>{A(h)}),y.type==="attributes"&&y.target&&A(y.target)});if(R.observe(_,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[i,...u.map(p=>p.selector).filter(p=>p.startsWith("data-"))]}),l&&f&&Element.prototype.attachShadow){let p=Element.prototype.attachShadow;Element.prototype.attachShadow=function(h){let v=p.call(this,h);if(h&&h.mode==="open"){M(v);let B=this.tagName?.toLowerCase();B&&B.includes("-")&&!customElements.get(B)&&I(B,this)}return v},L=()=>Element.prototype.attachShadow=p}return c&&A(_),{stop(){D=!0,R.disconnect(),L&&L(),E&&(clearTimeout(E),E=0),$.forEach(p=>p.disconnect())},flush:z}}static async define(...e){let n={};e.length&&typeof e[e.length-1]=="object"&&(n=e.pop()||{});let s=e,{baseURL:r,mapper:o=l=>`${l}.js`,onError:i=(l,u)=>console.error(`[defineWebComponents] ${l}:`,u)}=n,a=r?new URL(r,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),c=l=>l.toLowerCase().replace(/(^|-)([a-z])/g,(u,f,m)=>m.toUpperCase()),d=async l=>{try{if(customElements.get(l))return{tag:l,status:"already-defined"};let u=o(l),m=await import(u instanceof URL?u.href:new URL(u,a).href),w=m?.default??m?.[c(l)];if(!w){if(customElements.get(l))return{tag:l,status:"self-defined"};throw new Error(`No export found for ${l}. Expected default export or named export "${c(l)}".`)}return customElements.get(l)?{tag:l,status:"race-already-defined"}:(customElements.define(l,w),{tag:l,status:"defined"})}catch(u){throw i(l,u),u}};return Promise.all(s.map(d))}}});var me=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(e={}){this._mode="static",this._staticPaths={...this._staticPaths,...e},console.log("[PDS Registry] Switched to STATIC mode",this._staticPaths)}async getStylesheet(e){if(this._mode==="live")return null;try{return(await import(this._staticPaths[e]))[e]}catch(n){console.error(`[PDS Registry] Failed to load static ${e}:`,n),console.error(`[PDS Registry] Looking for: ${this._staticPaths[e]}`),console.error("[PDS Registry] Make sure you've run 'npm run pds:export' and configured PDS.start() with the correct static.root path");let s=new CSSStyleSheet;return s.replaceSync("/* Failed to load "+e+" */"),s}}get mode(){return this._mode}get isLive(){return this._mode==="live"}},F=new me;async function Ue(t,e=[],n=null){try{let s=n?.primitivesStylesheet?n.primitivesStylesheet:await F.getStylesheet("primitives");t.adoptedStyleSheets=[s,...e]}catch(s){let r=t.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${r}> failed to adopt primitives:`,s),t.adoptedStyleSheets=e}}async function Oe(t,e=["primitives"],n=[],s=null){try{let o=(await Promise.all(e.map(async i=>{if(s)switch(i){case"tokens":return s.tokensStylesheet;case"primitives":return s.primitivesStylesheet;case"components":return s.componentsStylesheet;case"utilities":return s.utilitiesStylesheet;default:break}return F.getStylesheet(i)}))).filter(i=>i!==null);t.adoptedStyleSheets=[...o,...n]}catch(r){let o=t.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${o}> failed to adopt layers:`,r),t.adoptedStyleSheets=n}}function Ne(t){let e=new CSSStyleSheet;return e.replaceSync(t),e}var ie=globalThis,ce=ie.ShadowRoot&&(ie.ShadyCSS===void 0||ie.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,je=Symbol(),qe=new WeakMap,ae=class{constructor(e,n,s){if(this._$cssResult$=!0,s!==je)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=n}get styleSheet(){let e=this.o,n=this.t;if(ce&&e===void 0){let s=n!==void 0&&n.length===1;s&&(e=qe.get(n)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&qe.set(n,e))}return e}toString(){return this.cssText}},He=t=>new ae(typeof t=="string"?t:t+"",void 0,je);var Ie=(t,e)=>{if(ce)t.adoptedStyleSheets=e.map(n=>n instanceof CSSStyleSheet?n:n.styleSheet);else for(let n of e){let s=document.createElement("style"),r=ie.litNonce;r!==void 0&&s.setAttribute("nonce",r),s.textContent=n.cssText,t.appendChild(s)}},ye=ce?t=>t:t=>t instanceof CSSStyleSheet?(e=>{let n="";for(let s of e.cssRules)n+=s.cssText;return He(n)})(t):t;var{is:wt,defineProperty:St,getOwnPropertyDescriptor:$t,getOwnPropertyNames:_t,getOwnPropertySymbols:Et,getPrototypeOf:At}=Object,le=globalThis,ze=le.trustedTypes,vt=ze?ze.emptyScript:"",Lt=le.reactiveElementPolyfillSupport,J=(t,e)=>t,ge={toAttribute(t,e){switch(e){case Boolean:t=t?vt:null;break;case Object:case Array:t=t==null?t:JSON.stringify(t)}return t},fromAttribute(t,e){let n=t;switch(e){case Boolean:n=t!==null;break;case Number:n=t===null?null:Number(t);break;case Object:case Array:try{n=JSON.parse(t)}catch{n=null}}return n}},Fe=(t,e)=>!wt(t,e),Be={attribute:!0,type:String,converter:ge,reflect:!1,useDefault:!1,hasChanged:Fe};Symbol.metadata??=Symbol("metadata"),le.litPropertyMetadata??=new WeakMap;var P=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,n=Be){if(n.state&&(n.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((n=Object.create(n)).wrapped=!0),this.elementProperties.set(e,n),!n.noAccessor){let s=Symbol(),r=this.getPropertyDescriptor(e,s,n);r!==void 0&&St(this.prototype,e,r)}}static getPropertyDescriptor(e,n,s){let{get:r,set:o}=$t(this.prototype,e)??{get(){return this[n]},set(i){this[n]=i}};return{get:r,set(i){let a=r?.call(this);o?.call(this,i),this.requestUpdate(e,a,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Be}static _$Ei(){if(this.hasOwnProperty(J("elementProperties")))return;let e=At(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(J("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(J("properties"))){let n=this.properties,s=[..._t(n),...Et(n)];for(let r of s)this.createProperty(r,n[r])}let e=this[Symbol.metadata];if(e!==null){let n=litPropertyMetadata.get(e);if(n!==void 0)for(let[s,r]of n)this.elementProperties.set(s,r)}this._$Eh=new Map;for(let[n,s]of this.elementProperties){let r=this._$Eu(n,s);r!==void 0&&this._$Eh.set(r,n)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let n=[];if(Array.isArray(e)){let s=new Set(e.flat(1/0).reverse());for(let r of s)n.unshift(ye(r))}else e!==void 0&&n.push(ye(e));return n}static _$Eu(e,n){let s=n.attribute;return s===!1?void 0:typeof s=="string"?s:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,n=this.constructor.elementProperties;for(let s of n.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Ie(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,n,s){this._$AK(e,s)}_$ET(e,n){let s=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,s);if(r!==void 0&&s.reflect===!0){let o=(s.converter?.toAttribute!==void 0?s.converter:ge).toAttribute(n,s.type);this._$Em=e,o==null?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(e,n){let s=this.constructor,r=s._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let o=s.getPropertyOptions(r),i=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:ge;this._$Em=r;let a=i.fromAttribute(n,o.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,n,s){if(e!==void 0){let r=this.constructor,o=this[e];if(s??=r.getPropertyOptions(e),!((s.hasChanged??Fe)(o,n)||s.useDefault&&s.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,s))))return;this.C(e,n,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,n,{useDefault:s,reflect:r,wrapped:o},i){s&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,i??n??this[e]),o!==!0||i!==void 0)||(this._$AL.has(e)||(this.hasUpdated||s||(n=void 0),this._$AL.set(e,n)),r===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(n){Promise.reject(n)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0}let s=this.constructor.elementProperties;if(s.size>0)for(let[r,o]of s){let{wrapped:i}=o,a=this[r];i!==!0||this._$AL.has(r)||a===void 0||this.C(r,void 0,o,a)}}let e=!1,n=this._$AL;try{e=this.shouldUpdate(n),e?(this.willUpdate(n),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(n)):this._$EM()}catch(s){throw e=!1,this._$EM(),s}e&&this._$AE(n)}willUpdate(e){}_$AE(e){this._$EO?.forEach(n=>n.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(n=>this._$ET(n,this[n])),this._$EM()}updated(e){}firstUpdated(e){}};P.elementStyles=[],P.shadowRootOptions={mode:"open"},P[J("elementProperties")]=new Map,P[J("finalized")]=new Map,Lt?.({ReactiveElement:P}),(le.reactiveElementVersions??=[]).push("2.1.1");var Ae=globalThis,de=Ae.trustedTypes,We=de?de.createPolicy("lit-html",{createHTML:t=>t}):void 0,Qe="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,Xe="?"+k,Ct=`<${Xe}>`,O=document,X=()=>O.createComment(""),Y=t=>t===null||typeof t!="object"&&typeof t!="function",ve=Array.isArray,xt=t=>ve(t)||typeof t?.[Symbol.iterator]=="function",be=`[
|
|
1
|
+
var yt=Object.defineProperty;var gt=(t,e)=>()=>(t&&(e=t(t=0)),e);var bt=(t,e)=>{for(var s in e)yt(t,s,{get:e[s],enumerable:!0})};var ot={};bt(ot,{AutoDefiner:()=>Pe});async function Kt(...t){let e={};t.length&&typeof t[t.length-1]=="object"&&(e=t.pop()||{});let s=t,{baseURL:n,mapper:r=d=>`${d}.js`,onError:o=(d,l)=>console.error(`[defineWebComponents] ${d}:`,l)}=e,i=n?new URL(n,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),a=d=>d.toLowerCase().replace(/(^|-)([a-z])/g,(l,u,f)=>f.toUpperCase()),c=async d=>{try{if(customElements.get(d))return{tag:d,status:"already-defined"};let l=r(d),f=await import(l instanceof URL?l.href:new URL(l,i).href),m=f?.default??f?.[a(d)];if(!m){if(customElements.get(d))return{tag:d,status:"self-defined"};throw new Error(`No export found for ${d}. Expected default export or named export "${a(d)}".`)}return customElements.get(d)?{tag:d,status:"race-already-defined"}:(customElements.define(d,m),{tag:d,status:"defined"})}catch(l){throw o(d,l),l}};return Promise.all(s.map(c))}var Pe,it=gt(()=>{Pe=class{constructor(e={}){let{baseURL:s,mapper:n,onError:r,predicate:o=()=>!0,attributeModule:i="data-module",root:a=document,scanExisting:c=!0,debounceMs:d=16,observeShadows:l=!0,enhancers:u=[],patchAttachShadow:f=!0}=e,m=new Set,$=new Set,x=new Set,g=new Map,w=new WeakMap,H=new WeakMap,A=0,D=!1,L=null,Z=p=>{if(!p||!u.length)return;let y=H.get(p);y||(y=new Set,H.set(p,y));for(let h of u)if(!(!h.selector||!h.run)&&!y.has(h.selector))try{p.matches&&p.matches(h.selector)&&(h.run(p),y.add(h.selector))}catch(v){console.warn(`[AutoDefiner] Error applying enhancer for selector "${h.selector}":`,v)}},I=(p,y)=>{if(!D&&!(!p||!p.includes("-"))&&!customElements.get(p)&&!$.has(p)&&!x.has(p)){if(y&&y.getAttribute){let h=y.getAttribute(i);h&&!g.has(p)&&g.set(p,h)}m.add(p),oe()}},oe=()=>{A||(A=setTimeout(z,d))},E=p=>{if(p){if(p.nodeType===1){let y=p,h=y.tagName?.toLowerCase();h&&h.includes("-")&&!customElements.get(h)&&o(h,y)&&I(h,y),Z(y),l&&y.shadowRoot&&M(y.shadowRoot)}p.querySelectorAll&&p.querySelectorAll("*").forEach(y=>{let h=y.tagName?.toLowerCase();h&&h.includes("-")&&!customElements.get(h)&&o(h,y)&&I(h,y),Z(y),l&&y.shadowRoot&&M(y.shadowRoot)})}},M=p=>{if(!p||w.has(p))return;E(p);let y=new MutationObserver(h=>{for(let v of h)v.addedNodes?.forEach(B=>{E(B)}),v.type==="attributes"&&v.target&&E(v.target)});y.observe(p,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[i,...u.map(h=>h.selector).filter(h=>h.startsWith("data-"))]}),w.set(p,y)};async function z(){if(clearTimeout(A),A=0,!m.size)return;let p=Array.from(m);m.clear(),p.forEach(y=>$.add(y));try{let y=h=>g.get(h)??(n?n(h):`${h}.js`);await Kt(...p,{baseURL:s,mapper:y,onError:(h,v)=>{x.add(h),r?.(h,v)}})}catch{}finally{p.forEach(y=>$.delete(y))}}let S=a===document?document.documentElement:a,R=new MutationObserver(p=>{for(let y of p)y.addedNodes?.forEach(h=>{E(h)}),y.type==="attributes"&&y.target&&E(y.target)});if(R.observe(S,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[i,...u.map(p=>p.selector).filter(p=>p.startsWith("data-"))]}),l&&f&&Element.prototype.attachShadow){let p=Element.prototype.attachShadow;Element.prototype.attachShadow=function(h){let v=p.call(this,h);if(h&&h.mode==="open"){M(v);let B=this.tagName?.toLowerCase();B&&B.includes("-")&&!customElements.get(B)&&I(B,this)}return v},L=()=>Element.prototype.attachShadow=p}return c&&E(S),{stop(){D=!0,R.disconnect(),L&&L(),A&&(clearTimeout(A),A=0),w.forEach(p=>p.disconnect())},flush:z}}static async define(...e){let s={};e.length&&typeof e[e.length-1]=="object"&&(s=e.pop()||{});let n=e,{baseURL:r,mapper:o=l=>`${l}.js`,onError:i=(l,u)=>console.error(`[defineWebComponents] ${l}:`,u)}=s,a=r?new URL(r,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),c=l=>l.toLowerCase().replace(/(^|-)([a-z])/g,(u,f,m)=>m.toUpperCase()),d=async l=>{try{if(customElements.get(l))return{tag:l,status:"already-defined"};let u=o(l),m=await import(u instanceof URL?u.href:new URL(u,a).href),$=m?.default??m?.[c(l)];if(!$){if(customElements.get(l))return{tag:l,status:"self-defined"};throw new Error(`No export found for ${l}. Expected default export or named export "${c(l)}".`)}return customElements.get(l)?{tag:l,status:"race-already-defined"}:(customElements.define(l,$),{tag:l,status:"defined"})}catch(u){throw i(l,u),u}};return Promise.all(n.map(d))}}});var me=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(e={}){this._mode="static",this._staticPaths={...this._staticPaths,...e},console.log("[PDS Registry] Switched to STATIC mode",this._staticPaths)}async getStylesheet(e){if(this._mode==="live")return null;try{return(await import(this._staticPaths[e]))[e]}catch(s){console.error(`[PDS Registry] Failed to load static ${e}:`,s),console.error(`[PDS Registry] Looking for: ${this._staticPaths[e]}`),console.error("[PDS Registry] Make sure you've run 'npm run pds: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"}},F=new me;async function Ue(t,e=[],s=null){try{let n=s?.primitivesStylesheet?s.primitivesStylesheet:await F.getStylesheet("primitives");t.adoptedStyleSheets=[n,...e]}catch(n){let r=t.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${r}> failed to adopt primitives:`,n),t.adoptedStyleSheets=e}}async function Oe(t,e=["primitives"],s=[],n=null){try{let o=(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 F.getStylesheet(i)}))).filter(i=>i!==null);t.adoptedStyleSheets=[...o,...s]}catch(r){let o=t.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${o}> failed to adopt layers:`,r),t.adoptedStyleSheets=s}}function Ne(t){let e=new CSSStyleSheet;return e.replaceSync(t),e}var ie=globalThis,ce=ie.ShadowRoot&&(ie.ShadyCSS===void 0||ie.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,qe=Symbol(),je=new WeakMap,ae=class{constructor(e,s,n){if(this._$cssResult$=!0,n!==qe)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=s}get styleSheet(){let e=this.o,s=this.t;if(ce&&e===void 0){let n=s!==void 0&&s.length===1;n&&(e=je.get(s)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&je.set(s,e))}return e}toString(){return this.cssText}},He=t=>new ae(typeof t=="string"?t:t+"",void 0,qe);var Ie=(t,e)=>{if(ce)t.adoptedStyleSheets=e.map(s=>s instanceof CSSStyleSheet?s:s.styleSheet);else for(let s of e){let n=document.createElement("style"),r=ie.litNonce;r!==void 0&&n.setAttribute("nonce",r),n.textContent=s.cssText,t.appendChild(n)}},ye=ce?t=>t:t=>t instanceof CSSStyleSheet?(e=>{let s="";for(let n of e.cssRules)s+=n.cssText;return He(s)})(t):t;var{is:$t,defineProperty:_t,getOwnPropertyDescriptor:wt,getOwnPropertyNames:St,getOwnPropertySymbols:At,getPrototypeOf:Et}=Object,le=globalThis,ze=le.trustedTypes,vt=ze?ze.emptyScript:"",Lt=le.reactiveElementPolyfillSupport,J=(t,e)=>t,ge={toAttribute(t,e){switch(e){case Boolean:t=t?vt:null;break;case Object:case Array:t=t==null?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=t!==null;break;case Number:s=t===null?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch{s=null}}return s}},Fe=(t,e)=>!$t(t,e),Be={attribute:!0,type:String,converter:ge,reflect:!1,useDefault:!1,hasChanged:Fe};Symbol.metadata??=Symbol("metadata"),le.litPropertyMetadata??=new WeakMap;var P=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,s=Be){if(s.state&&(s.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((s=Object.create(s)).wrapped=!0),this.elementProperties.set(e,s),!s.noAccessor){let n=Symbol(),r=this.getPropertyDescriptor(e,n,s);r!==void 0&&_t(this.prototype,e,r)}}static getPropertyDescriptor(e,s,n){let{get:r,set:o}=wt(this.prototype,e)??{get(){return this[s]},set(i){this[s]=i}};return{get:r,set(i){let a=r?.call(this);o?.call(this,i),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Be}static _$Ei(){if(this.hasOwnProperty(J("elementProperties")))return;let e=Et(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(J("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(J("properties"))){let s=this.properties,n=[...St(s),...At(s)];for(let r of n)this.createProperty(r,s[r])}let e=this[Symbol.metadata];if(e!==null){let s=litPropertyMetadata.get(e);if(s!==void 0)for(let[n,r]of s)this.elementProperties.set(n,r)}this._$Eh=new Map;for(let[s,n]of this.elementProperties){let r=this._$Eu(s,n);r!==void 0&&this._$Eh.set(r,s)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let s=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let r of n)s.unshift(ye(r))}else e!==void 0&&s.push(ye(e));return s}static _$Eu(e,s){let n=s.attribute;return n===!1?void 0:typeof n=="string"?n:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,s=this.constructor.elementProperties;for(let n of s.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Ie(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,s,n){this._$AK(e,n)}_$ET(e,s){let n=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,n);if(r!==void 0&&n.reflect===!0){let o=(n.converter?.toAttribute!==void 0?n.converter:ge).toAttribute(s,n.type);this._$Em=e,o==null?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(e,s){let n=this.constructor,r=n._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let o=n.getPropertyOptions(r),i=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:ge;this._$Em=r;let a=i.fromAttribute(s,o.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,s,n){if(e!==void 0){let r=this.constructor,o=this[e];if(n??=r.getPropertyOptions(e),!((n.hasChanged??Fe)(o,s)||n.useDefault&&n.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,n))))return;this.C(e,s,n)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,s,{useDefault:n,reflect:r,wrapped:o},i){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,i??s??this[e]),o!==!0||i!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(s=void 0),this._$AL.set(e,s)),r===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(s){Promise.reject(s)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0}let n=this.constructor.elementProperties;if(n.size>0)for(let[r,o]of n){let{wrapped:i}=o,a=this[r];i!==!0||this._$AL.has(r)||a===void 0||this.C(r,void 0,o,a)}}let e=!1,s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),this._$EO?.forEach(n=>n.hostUpdate?.()),this.update(s)):this._$EM()}catch(n){throw e=!1,this._$EM(),n}e&&this._$AE(s)}willUpdate(e){}_$AE(e){this._$EO?.forEach(s=>s.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(s=>this._$ET(s,this[s])),this._$EM()}updated(e){}firstUpdated(e){}};P.elementStyles=[],P.shadowRootOptions={mode:"open"},P[J("elementProperties")]=new Map,P[J("finalized")]=new Map,Lt?.({ReactiveElement:P}),(le.reactiveElementVersions??=[]).push("2.1.1");var Ee=globalThis,de=Ee.trustedTypes,We=de?de.createPolicy("lit-html",{createHTML:t=>t}):void 0,Qe="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,Xe="?"+k,Ct=`<${Xe}>`,O=document,X=()=>O.createComment(""),Y=t=>t===null||typeof t!="object"&&typeof t!="function",ve=Array.isArray,xt=t=>ve(t)||typeof t?.[Symbol.iterator]=="function",be=`[
|
|
2
2
|
\f\r]`,Q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ve=/-->/g,Ke=/>/g,T=RegExp(`>|${be}(?:([^\\s"'>=/]+)(${be}*=${be}*(?:[^
|
|
3
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),Ge=/'/g,Ze=/"/g,Ye=/^(?:script|style|textarea|title)$/i,Le=t=>(e,...
|
|
3
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),Ge=/'/g,Ze=/"/g,Ye=/^(?:script|style|textarea|title)$/i,Le=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),cs=Le(1),ls=Le(2),ds=Le(3),N=Symbol.for("lit-noChange"),_=Symbol.for("lit-nothing"),Je=new WeakMap,U=O.createTreeWalker(O,129);function et(t,e){if(!ve(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return We!==void 0?We.createHTML(e):e}var Rt=(t,e)=>{let s=t.length-1,n=[],r,o=e===2?"<svg>":e===3?"<math>":"",i=Q;for(let a=0;a<s;a++){let c=t[a],d,l,u=-1,f=0;for(;f<c.length&&(i.lastIndex=f,l=i.exec(c),l!==null);)f=i.lastIndex,i===Q?l[1]==="!--"?i=Ve:l[1]!==void 0?i=Ke:l[2]!==void 0?(Ye.test(l[2])&&(r=RegExp("</"+l[2],"g")),i=T):l[3]!==void 0&&(i=T):i===T?l[0]===">"?(i=r??Q,u=-1):l[1]===void 0?u=-2:(u=i.lastIndex-l[2].length,d=l[1],i=l[3]===void 0?T:l[3]==='"'?Ze:Ge):i===Ze||i===Ge?i=T:i===Ve||i===Ke?i=Q:(i=T,r=void 0);let m=i===T&&t[a+1].startsWith("/>")?" ":"";o+=i===Q?c+Ct:u>=0?(n.push(d),c.slice(0,u)+Qe+c.slice(u)+k+m):c+k+(u===-2?a:m)}return[et(t,o+(t[s]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),n]},ee=class t{constructor({strings:e,_$litType$:s},n){let r;this.parts=[];let o=0,i=0,a=e.length-1,c=this.parts,[d,l]=Rt(e,s);if(this.el=t.createElement(d,n),U.currentNode=this.el.content,s===2||s===3){let u=this.el.content.firstChild;u.replaceWith(...u.childNodes)}for(;(r=U.nextNode())!==null&&c.length<a;){if(r.nodeType===1){if(r.hasAttributes())for(let u of r.getAttributeNames())if(u.endsWith(Qe)){let f=l[i++],m=r.getAttribute(u).split(k),$=/([.?@])?(.*)/.exec(f);c.push({type:1,index:o,name:$[2],strings:m,ctor:$[1]==="."?_e:$[1]==="?"?we:$[1]==="@"?Se:V}),r.removeAttribute(u)}else u.startsWith(k)&&(c.push({type:6,index:o}),r.removeAttribute(u));if(Ye.test(r.tagName)){let u=r.textContent.split(k),f=u.length-1;if(f>0){r.textContent=de?de.emptyScript:"";for(let m=0;m<f;m++)r.append(u[m],X()),U.nextNode(),c.push({type:2,index:++o});r.append(u[f],X())}}}else if(r.nodeType===8)if(r.data===Xe)c.push({type:2,index:o});else{let u=-1;for(;(u=r.data.indexOf(k,u+1))!==-1;)c.push({type:7,index:o}),u+=k.length-1}o++}}static createElement(e,s){let n=O.createElement("template");return n.innerHTML=e,n}};function W(t,e,s=t,n){if(e===N)return e;let r=n!==void 0?s._$Co?.[n]:s._$Cl,o=Y(e)?void 0:e._$litDirective$;return r?.constructor!==o&&(r?._$AO?.(!1),o===void 0?r=void 0:(r=new o(t),r._$AT(t,s,n)),n!==void 0?(s._$Co??=[])[n]=r:s._$Cl=r),r!==void 0&&(e=W(t,r._$AS(t,e.values),r,n)),e}var $e=class{constructor(e,s){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=s}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:s},parts:n}=this._$AD,r=(e?.creationScope??O).importNode(s,!0);U.currentNode=r;let o=U.nextNode(),i=0,a=0,c=n[0];for(;c!==void 0;){if(i===c.index){let d;c.type===2?d=new te(o,o.nextSibling,this,e):c.type===1?d=new c.ctor(o,c.name,c.strings,this,e):c.type===6&&(d=new Ae(o,this,e)),this._$AV.push(d),c=n[++a]}i!==c?.index&&(o=U.nextNode(),i++)}return U.currentNode=O,r}p(e){let s=0;for(let n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(e,n,s),s+=n.strings.length-2):n._$AI(e[s])),s++}},te=class t{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,s,n,r){this.type=2,this._$AH=_,this._$AN=void 0,this._$AA=e,this._$AB=s,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,s=this._$AM;return s!==void 0&&e?.nodeType===11&&(e=s.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,s=this){e=W(this,e,s),Y(e)?e===_||e==null||e===""?(this._$AH!==_&&this._$AR(),this._$AH=_):e!==this._$AH&&e!==N&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):xt(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==_&&Y(this._$AH)?this._$AA.nextSibling.data=e:this.T(O.createTextNode(e)),this._$AH=e}$(e){let{values:s,_$litType$:n}=e,r=typeof n=="number"?this._$AC(e):(n.el===void 0&&(n.el=ee.createElement(et(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(s);else{let o=new $e(r,this),i=o.u(this.options);o.p(s),this.T(i),this._$AH=o}}_$AC(e){let s=Je.get(e.strings);return s===void 0&&Je.set(e.strings,s=new ee(e)),s}k(e){ve(this._$AH)||(this._$AH=[],this._$AR());let s=this._$AH,n,r=0;for(let o of e)r===s.length?s.push(n=new t(this.O(X()),this.O(X()),this,this.options)):n=s[r],n._$AI(o),r++;r<s.length&&(this._$AR(n&&n._$AB.nextSibling,r),s.length=r)}_$AR(e=this._$AA.nextSibling,s){for(this._$AP?.(!1,!0,s);e!==this._$AB;){let n=e.nextSibling;e.remove(),e=n}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},V=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,s,n,r,o){this.type=1,this._$AH=_,this._$AN=void 0,this.element=e,this.name=s,this._$AM=r,this.options=o,n.length>2||n[0]!==""||n[1]!==""?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=_}_$AI(e,s=this,n,r){let o=this.strings,i=!1;if(o===void 0)e=W(this,e,s,0),i=!Y(e)||e!==this._$AH&&e!==N,i&&(this._$AH=e);else{let a=e,c,d;for(e=o[0],c=0;c<o.length-1;c++)d=W(this,a[n+c],s,c),d===N&&(d=this._$AH[c]),i||=!Y(d)||d!==this._$AH[c],d===_?e=_:e!==_&&(e+=(d??"")+o[c+1]),this._$AH[c]=d}i&&!r&&this.j(e)}j(e){e===_?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},_e=class extends V{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===_?void 0:e}},we=class extends V{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==_)}},Se=class extends V{constructor(e,s,n,r,o){super(e,s,n,r,o),this.type=5}_$AI(e,s=this){if((e=W(this,e,s,0)??_)===N)return;let n=this._$AH,r=e===_&&n!==_||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,o=e!==_&&(n===_||r);r&&this.element.removeEventListener(this.name,this,n),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},Ae=class{constructor(e,s,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=s,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){W(this,e)}};var Pt=Ee.litHtmlPolyfillSupport;Pt?.(ee,te),(Ee.litHtmlVersions??=[]).push("3.3.1");var j=(t,e,s)=>{let n=s?.renderBefore??e,r=n._$litPart$;if(r===void 0){let o=s?.renderBefore??null;n._$litPart$=r=new te(e.insertBefore(X(),o),o,void 0,s??{})}return r._$AI(t),r};var Ce=globalThis,K=class extends P{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=j(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return N}};K._$litElement$=!0,K.finalized=!0,Ce.litElementHydrateSupport?.({LitElement:K});var kt=Ce.litElementPolyfillSupport;kt?.({LitElement:K});(Ce.litElementVersions??=[]).push("4.2.1");var tt={mode:"live",preset:"default",autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(t,e,...s){console[t](e,...s)}};async function st(t,e={}){return e={...{title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}},...e},new Promise(n=>{let r=document.createElement("dialog");tt.options?.liquidGlassEffects&&r.classList.add("liquid-glass"),e.size&&r.classList.add(`dialog-${e.size}`),e.type&&r.classList.add(`dialog-${e.type}`),e.class&&(Array.isArray(e.class)?r.classList.add(...e.class):r.classList.add(e.class)),e.maxHeight&&r.style.setProperty("--dialog-max-height",e.maxHeight);let o=Object.entries(e.buttons).map(([a,c])=>{let d=c.primary?"btn-primary btn-sm":"btn-outline btn-sm";return`<button type="${c.cancel?"button":"submit"}" class="${d}" value="${a}">${c.name}</button>`});if(e.useForm){let a=document.createElement("div");typeof t=="object"&&t._$litType$?j(t,a):typeof t=="string"?a.textContent=t:j(t,a);let c=a.querySelector("form");if(c){r.innerHTML=`
|
|
4
4
|
<header>
|
|
5
5
|
<h2>${e.title}</h2>
|
|
6
6
|
</header>
|
|
@@ -24,66 +24,12 @@ var yt=Object.defineProperty;var gt=(t,e)=>()=>(t&&(e=t(t=0)),e);var bt=(t,e)=>{
|
|
|
24
24
|
${o.join("")}
|
|
25
25
|
</footer>
|
|
26
26
|
</form>
|
|
27
|
-
`;let a=r.querySelector("#msg-container");typeof t=="object"&&t._$litType$?q(t,a):typeof t=="string"?a.textContent=t:q(t,a)}r.addEventListener("click",a=>{a.target.closest('button[value="cancel"]')&&(r.close(),s(!1))});let i=()=>{let a=r.querySelector("form");a?a.addEventListener("submit",c=>{c.preventDefault();let d;e.useForm&&c.submitter.value==="ok"?(console.log("Found form:",a),console.log("Form elements:",a?Array.from(a.elements):"no form"),d=new FormData(a),console.log("FormData entries:",Array.from(d.entries()))):d=c.submitter.value==="ok",r.close(),s(d)}):requestAnimationFrame(i)};i(),r.addEventListener("close",()=>{setTimeout(()=>r.remove(),200)}),document.body.appendChild(r),typeof e.rendered=="function"&&e.rendered(r),r.showModal()})}async function Dt(){let t=document.querySelector("pds-toaster");return t||(t=document.createElement("pds-toaster"),document.body.appendChild(t),await customElements.whenDefined("pds-toaster")),t}async function C(t,e={}){return(await Dt()).toast(t,e)}C.success=async function(t,e={}){return C(t,{...e,type:"success"})};C.error=async function(t,e={}){return C(t,{...e,type:"error"})};C.warning=async function(t,e={}){return C(t,{...e,type:"warning"})};C.info=async function(t,e={}){return C(t,{...e,type:"information"})};var Mt=[{selector:".accordion",description:"Ensures only one <details> element can be open at a time within the accordion.",demoHtml:`
|
|
28
|
-
<div class="accordion">
|
|
29
|
-
<details>
|
|
30
|
-
<summary>Section 1</summary>
|
|
31
|
-
<p>Content for section 1</p>
|
|
32
|
-
</details>
|
|
33
|
-
<details>
|
|
34
|
-
<summary>Section 2</summary>
|
|
35
|
-
<p>Content for section 2</p>
|
|
36
|
-
</details>
|
|
37
|
-
<details>
|
|
38
|
-
<summary>Section 3</summary>
|
|
39
|
-
<p>Content for section 3</p>
|
|
40
|
-
</details>
|
|
41
|
-
</div>
|
|
42
|
-
`.trim()},{selector:"nav[data-dropdown]",description:"Enhances a nav element with data-dropdown to function as a dropdown menu.",demoHtml:`
|
|
43
|
-
<nav data-dropdown>
|
|
44
|
-
<button class="btn-primary">Menu</button>
|
|
45
|
-
<menu>
|
|
46
|
-
<li><a href="#">Item 1</a></li>
|
|
47
|
-
<li><a href="#">Item 2</a></li>
|
|
48
|
-
</menu>
|
|
49
|
-
</nav>
|
|
50
|
-
`.trim()},{selector:"label[data-toggle]",description:"Creates a toggle switch element from a checkbox.",demoHtml:`
|
|
51
|
-
<label data-toggle>
|
|
52
|
-
<input type="checkbox">
|
|
53
|
-
<span data-label>Enable notifications</span>
|
|
54
|
-
</label>
|
|
55
|
-
`.trim()},{selector:'input[type="range"]',description:"Enhances range inputs with an attached <output>.",demoHtml:`
|
|
56
|
-
<label class="range-output">
|
|
57
|
-
<span data-label>Volume</span>
|
|
58
|
-
<input type="range" min="0" max="100" value="40">
|
|
59
|
-
</label>
|
|
60
|
-
`.trim()},{selector:"form[data-required]",description:"Enhances required form fields using an asterisk in the label.",demoHtml:`
|
|
61
|
-
<form data-required action="#" method="post">
|
|
62
|
-
<label>
|
|
63
|
-
<span>Field Label</span>
|
|
64
|
-
<input type="text" required>
|
|
65
|
-
</label>
|
|
66
|
-
<nav class="form-actions">
|
|
67
|
-
<button type="submit" class="btn-primary">Submit</button>
|
|
68
|
-
</nav>
|
|
69
|
-
</form>
|
|
70
|
-
`.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:`
|
|
71
|
-
<fieldset role="group" data-open>
|
|
72
|
-
<label>
|
|
73
|
-
<span data-label>Test</span>
|
|
74
|
-
<input value="lala" name="test1" type="radio" />
|
|
75
|
-
</label>
|
|
76
|
-
</fieldset>
|
|
77
|
-
`.trim()},{selector:"button, a[class*='btn-']",description:"Automatically manages spinner icon for buttons with .btn-working class",demoHtml:`
|
|
78
|
-
<button class="btn-primary btn-working">
|
|
79
|
-
<span>Saving</span>
|
|
80
|
-
</button>
|
|
81
|
-
`.trim()}];function Tt(t){t.dataset.enhancedAccordion||(t.dataset.enhancedAccordion="true",t.addEventListener("toggle",e=>{e.target.open&&e.target.parentElement===t&&t.querySelectorAll(":scope > details[open]").forEach(n=>{n!==e.target&&(n.open=!1)})},!0))}function Ut(t){if(t.dataset.enhancedDropdown)return;t.dataset.enhancedDropdown="true";let e=t.querySelector("menu");if(!e)return;let n=t.querySelector("[data-dropdown-toggle]")||t.querySelector("button");n&&!n.hasAttribute("type")&&n.setAttribute("type","button"),e.id||(e.id=`dropdown-${Math.random().toString(36).slice(2,9)}`),e.setAttribute("role",e.getAttribute("role")||"menu"),e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),n&&(n.setAttribute("aria-haspopup","true"),n.setAttribute("aria-controls",e.id),n.setAttribute("aria-expanded","false"));let s=()=>{let a=(t.getAttribute("data-mode")||"auto").toLowerCase();if(a==="up"||a==="down")return a;let c=t.getBoundingClientRect(),d=Math.max(0,window.innerHeight-c.bottom);return Math.max(0,c.top)>d?"up":"down"},r=()=>{t.dataset.dropdownDirection=s(),e.setAttribute("aria-hidden","false"),n?.setAttribute("aria-expanded","true")},o=()=>{e.setAttribute("aria-hidden","true"),n?.setAttribute("aria-expanded","false")},i=()=>{e.getAttribute("aria-hidden")==="false"?o():r()};n?.addEventListener("click",a=>{a.preventDefault(),a.stopPropagation(),i()}),document.addEventListener("click",a=>{t.contains(a.target)||o()}),t.addEventListener("keydown",a=>{a.key==="Escape"&&(o(),n?.focus())}),t.addEventListener("focusout",a=>{(!a.relatedTarget||!t.contains(a.relatedTarget))&&o()})}function Ot(t){if(t.dataset.enhancedToggle)return;t.dataset.enhancedToggle="true";let e=t.querySelector('input[type="checkbox"]');if(!e)return;t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("role","switch"),t.setAttribute("aria-checked",e.checked?"true":"false");let n=document.createElement("span");n.className="toggle-switch",n.setAttribute("role","presentation"),n.setAttribute("aria-hidden","true");let s=document.createElement("span");s.className="toggle-knob",n.appendChild(s),t.insertBefore(n,e.nextSibling);let r=()=>{t.setAttribute("aria-checked",e.checked?"true":"false")},o=()=>{e.disabled||(e.checked=!e.checked,r(),e.dispatchEvent(new Event("change",{bubbles:!0})))};t.addEventListener("click",i=>{i.preventDefault(),o()}),t.addEventListener("keydown",i=>{(i.key===" "||i.key==="Enter")&&(i.preventDefault(),o())}),e.addEventListener("change",r)}function Nt(t){if(t.dataset.enhancedRange)return;let e=t.closest("label"),n=e?.classList.contains("range-output"),s=t.id||`range-${Math.random().toString(36).substring(2,11)}`,r=`${s}-output`;if(t.id=s,n){let o=e.querySelector("span");if(o&&!o.classList.contains("range-output-wrapper")){let i=document.createElement("span");i.className="range-output-wrapper",i.style.display="flex",i.style.justifyContent="space-between",i.style.alignItems="center";let a=document.createElement("span");a.textContent=o.textContent,i.appendChild(a);let c=document.createElement("output");c.id=r,c.setAttribute("for",s),c.style.color="var(--surface-text-secondary, var(--color-text-secondary))",c.style.fontSize="0.875rem",c.textContent=t.value,i.appendChild(c),o.textContent="",o.appendChild(i);let d=()=>{c.textContent=t.value};t.addEventListener("input",d)}}else{let o=t.closest(".range-container");o||(o=document.createElement("div"),o.className="range-container",t.parentNode?.insertBefore(o,t),o.appendChild(t)),o.style.position="relative";let i=document.createElement("output");i.id=r,i.setAttribute("for",s),i.className="range-bubble",i.setAttribute("aria-live","polite"),o.appendChild(i);let a=()=>{let l=parseFloat(t.min)||0,u=parseFloat(t.max)||100,f=parseFloat(t.value),m=(f-l)/(u-l);i.style.left=`calc(${m*100}% )`,i.textContent=String(f)},c=()=>i.classList.add("visible"),d=()=>i.classList.remove("visible");t.addEventListener("input",a),t.addEventListener("pointerdown",c),t.addEventListener("pointerup",d),t.addEventListener("pointerleave",d),t.addEventListener("focus",c),t.addEventListener("blur",d),a()}t.dataset.enhancedRange="1"}function qt(t){if(t.dataset.enhancedRequired)return;t.dataset.enhancedRequired="true";let e=n=>{let s=n.closest("label");if(!s||s.querySelector(".required-asterisk"))return;let r=document.createElement("span");r.classList.add("required-asterisk"),r.textContent="*",r.style.marginLeft="4px",s.querySelector("span").appendChild(r);let o=n.closest("form");if(o&&!o.querySelector(".required-legend")){let i=document.createElement("small");i.classList.add("required-legend"),i.textContent="* Required fields",o.insertBefore(i,o.querySelector(".form-actions")||o.lastElementChild)}};t.querySelectorAll("[required]").forEach(n=>{e(n)})}function jt(t){if(t.dataset.enhancedOpenGroup)return;t.dataset.enhancedOpenGroup="true",t.classList.add("flex","flex-wrap","buttons");let e=document.createElement("input");e.type="text",e.placeholder="Add item...",e.classList.add("input-text","input-sm"),e.style.width="auto";let n=t.querySelector('input[type="radio"], input[type="checkbox"]');t.appendChild(e),e.addEventListener("keydown",s=>{if(s.key==="Enter"||s.key==="Tab"){let r=e.value.trim();if(r){s.preventDefault();let o=n.type==="radio"?"radio":"checkbox",i=`open-group-${Math.random().toString(36).substring(2,11)}`,a=document.createElement("label"),c=document.createElement("span");c.setAttribute("data-label",""),c.textContent=r;let d=document.createElement("input");d.type=o,d.name=n.name||t.getAttribute("data-name")||"open-group",d.value=r,d.id=i,a.appendChild(c),a.appendChild(d),t.insertBefore(a,e),e.value=""}}else if(s.key==="Backspace"&&e.value===""){s.preventDefault();let r=t.querySelectorAll("label");r.length>0&&r[r.length-1].remove()}})}function Ht(t){if(t.dataset.enhancedBtnWorking)return;t.dataset.enhancedBtnWorking="true";let e=null,n=!1;new MutationObserver(r=>{r.forEach(o=>{if(o.attributeName==="class"){let i=t.classList.contains("btn-working"),a=t.querySelector("pds-icon");if(i)if(a)e||(e=a.getAttribute("icon")),a.setAttribute("icon","circle-notch");else{let c=document.createElement("pds-icon");c.setAttribute("icon","circle-notch"),c.setAttribute("size","sm"),t.insertBefore(c,t.firstChild),n=!0}else o.oldValue?.includes("btn-working")&&a&&(n?(a.remove(),n=!1):e&&(a.setAttribute("icon",e),e=null))}})}).observe(t,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0})}var It=new Map([[".accordion",Tt],["nav[data-dropdown]",Ut],["label[data-toggle]",Ot],['input[type="range"]',Nt],["form[data-required]",qt],["fieldset[role=group][data-open]",jt],["button, a[class*='btn-']",Ht]]),xe=Mt.map(t=>({...t,run:It.get(t.selector)||(()=>{})}));var rt="pds",zt=/^([a-z][a-z0-9+\-.]*:)?\/\//i,st=/^[a-z]:/i;function ne(t=""){return t.endsWith("/")?t:`${t}/`}function Bt(t="",e=rt){let n=t.replace(/\/+$/,"");return new RegExp(`(?:^|/)${e}$`,"i").test(n)?n:`${n}/${e}`}function Ft(t){return t.replace(/^\.\/+/,"")}function Wt(t){return st.test(t)?t.replace(st,"").replace(/^\/+/,""):t}function Vt(t){return t.startsWith("public/")?t.substring(7):t}function Re(t,e={}){let n=e.segment||rt,s=e.defaultRoot||`/assets/${n}/`,r=t?.public&&t.public?.root||t?.static&&t.static?.root||null;if(!r||typeof r!="string")return ne(s);let o=r.trim();return o?(o=o.replace(/\\/g,"/"),o=Bt(o,n),o=ne(o),zt.test(o)?o:(o=Ft(o),o=Wt(o),o.startsWith("/")||(o=Vt(o),o.startsWith("/")||(o=`/${o}`),o=o.replace(/\/+/g,(i,a)=>a===0?i:"/")),ne(o))):ne(s)}var Gt=/^[a-z][a-z0-9+\-.]*:\/\//i,se=(()=>{try{return import.meta.url}catch{return}})(),ue=t=>typeof t=="string"&&t.length&&!t.endsWith("/")?`${t}/`:t;function pe(t,e={}){if(!t||Gt.test(t))return t;let{preferModule:n=!0}=e,s=()=>{if(!se)return null;try{return new URL(t,se).href}catch{return null}},r=()=>{if(typeof window>"u"||!window.location?.origin)return null;try{return new URL(t,window.location.origin).href}catch{return null}};return(n?s()||r():r()||s())||t}var at=(()=>{if(se)try{let t=new URL(se);if(/\/public\/assets\/js\//.test(t.pathname))return new URL("../pds/",se).href}catch{return}})(),ct=!1;function lt(t){ct||typeof document>"u"||(ct=!0,t.addEventListener("pds:ready",e=>{let n=e.detail?.mode;n&&document.documentElement.classList.add(`pds-${n}`,"pds-ready")}))}function dt(t={},e={}){if(!e||typeof e!="object")return t;let n=Array.isArray(t)?[...t]:{...t};for(let[s,r]of Object.entries(e))r&&typeof r=="object"&&!Array.isArray(r)?n[s]=dt(n[s]&&typeof n[s]=="object"?n[s]:{},r):n[s]=r;return n}function ke(t=""){return String(t).toLowerCase().replace(/&/g," and ").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function G(t){if(t==null)return t;if(typeof t=="function")return;if(typeof t!="object")return t;if(Array.isArray(t))return t.map(n=>G(n)).filter(n=>n!==void 0);let e={};for(let n in t)if(t.hasOwnProperty(n)){let s=t[n];if(typeof s!="function"){let r=G(s);r!==void 0&&(e[n]=r)}}return e}function ut(t={},e={},{presets:n,defaultLog:s}){let r=typeof t=="object"&&("colors"in t||"typography"in t||"spatialRhythm"in t||"shape"in t||"behavior"in t||"layout"in t||"advanced"in t||"a11y"in t||"components"in t||"icons"in t),o=t&&t.enhancers;o&&!Array.isArray(o)&&(o=Object.values(o));let i=o??e.enhancers??[],a=t&&t.preset,c=t&&t.design,d="preset"in(t||{})||"design"in(t||{})||"enhancers"in(t||{}),l,u=null;if(d){let f=String(a||"default").toLowerCase(),m=n?.[f]||Object.values(n||{}).find(R=>ke(R.name)===f||String(R.name||"").toLowerCase()===f);if(!m)throw new Error(`PDS preset not found: "${a||"default"}"`);u={id:m.id||ke(m.name),name:m.name||m.id||String(f)};let w=structuredClone(m);if(c&&typeof c=="object"){let R=G(c);w=dt(w,structuredClone(R))}let{mode:x,autoDefine:g,applyGlobalStyles:$,manageTheme:H,themeStorageKey:E,preloadStyles:D,criticalLayers:L,managerURL:Z,manager:I,preset:oe,design:A,enhancers:M,log:z,..._}=t;l={..._,design:w,preset:u.name,log:z||s}}else if(r){let{log:f,...m}=t;l={design:structuredClone(m),log:f||s}}else{let f=n?.default||Object.values(n||{}).find(m=>ke(m.name)==="default");if(!f)throw new Error("PDS default preset not available");u={id:f.id||"default",name:f.name||"Default"},l={design:structuredClone(f),preset:u.name,log:s}}return{generatorConfig:l,enhancers:i,presetInfo:u}}function pt({manageTheme:t,themeStorageKey:e,applyResolvedTheme:n,setupSystemListenerIfNeeded:s}){let r="light",o=null;if(t&&typeof window<"u"){try{o=localStorage.getItem(e)||null}catch{o=null}try{n?.(o),s?.(o)}catch{}o?o==="system"?r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":r=o:r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return{resolvedTheme:r,storedTheme:o}}function De(t,{resolvePublicAssetURL:e}){let n=!!(t?.public?.root||t?.static?.root),s=e(t);return!n&&at&&(s=at),ue(pe(s))}async function ht(t,{baseEnhancers:e=[]}={}){let{autoDefineBaseURL:n="/auto-define/",autoDefinePreload:s=[],autoDefineMapper:r=null,enhancers:o=[],autoDefineOverrides:i=null,autoDefinePreferModule:a=!0}=t,c=(()=>{let l=new Map;return(e||[]).forEach(u=>l.set(u.selector,u)),(o||[]).forEach(u=>l.set(u.selector,u)),Array.from(l.values())})(),d=null;if(typeof window<"u"&&typeof document<"u"){let l=null;try{let g=await Promise.resolve().then(()=>(it(),ot));l=g?.AutoDefiner||g?.default?.AutoDefiner||g?.default||null}catch(g){console.warn("AutoDefiner not available:",g?.message||g)}let u=g=>{switch(g){case"pds-tabpanel":return"pds-tabstrip.js";default:return`${g}.js`}},{mapper:f,...m}=i&&typeof i=="object"?i:{},x={baseURL:n&&ue(pe(n,{preferModule:a})),predefine:s,scanExisting:!0,observeShadows:!0,patchAttachShadow:!0,debounceMs:16,enhancers:c,onError:(g,$)=>{if(typeof g=="string"&&g.startsWith("pds-")){let E=["pds-form","pds-drawer"].includes(g),D=$?.message?.includes("#pds/lit")||$?.message?.includes("Failed to resolve module specifier");E&&D?console.error(`\u274C PDS component <${g}> requires Lit but #pds/lit is not in import map.
|
|
27
|
+
`;let a=r.querySelector("#msg-container");typeof t=="object"&&t._$litType$?j(t,a):typeof t=="string"?a.textContent=t:j(t,a)}r.addEventListener("click",a=>{a.target.closest('button[value="cancel"]')&&(r.close(),n(!1))});let i=()=>{let a=r.querySelector("form");a?a.addEventListener("submit",c=>{c.preventDefault();let d;e.useForm&&c.submitter.value==="ok"?(console.log("Found form:",a),console.log("Form elements:",a?Array.from(a.elements):"no form"),d=new FormData(a),console.log("FormData entries:",Array.from(d.entries()))):d=c.submitter.value==="ok",r.close(),n(d)}):requestAnimationFrame(i)};i(),r.addEventListener("close",()=>{setTimeout(()=>r.remove(),200)}),document.body.appendChild(r),typeof e.rendered=="function"&&e.rendered(r),r.showModal()})}async function Dt(){let t=document.querySelector("pds-toaster");return t||(t=document.createElement("pds-toaster"),document.body.appendChild(t),await customElements.whenDefined("pds-toaster")),t}async function C(t,e={}){return(await Dt()).toast(t,e)}C.success=async function(t,e={}){return C(t,{...e,type:"success"})};C.error=async function(t,e={}){return C(t,{...e,type:"error"})};C.warning=async function(t,e={}){return C(t,{...e,type:"warning"})};C.info=async function(t,e={}){return C(t,{...e,type:"information"})};var Mt=[{selector:".accordion"},{selector:"nav[data-dropdown]"},{selector:"label[data-toggle]"},{selector:'input[type="range"]'},{selector:"form[data-required]"},{selector:"fieldset[role=group][data-open]"},{selector:"button, a[class*='btn-']"}];function Tt(t){t.dataset.enhancedAccordion||(t.dataset.enhancedAccordion="true",t.addEventListener("toggle",e=>{e.target.open&&e.target.parentElement===t&&t.querySelectorAll(":scope > details[open]").forEach(s=>{s!==e.target&&(s.open=!1)})},!0))}function Ut(t){if(t.dataset.enhancedDropdown)return;t.dataset.enhancedDropdown="true";let e=t.querySelector("menu");if(!e)return;let s=t.querySelector("[data-dropdown-toggle]")||t.querySelector("button");s&&!s.hasAttribute("type")&&s.setAttribute("type","button"),e.id||(e.id=`dropdown-${Math.random().toString(36).slice(2,9)}`),e.setAttribute("role",e.getAttribute("role")||"menu"),e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),s&&(s.setAttribute("aria-haspopup","true"),s.setAttribute("aria-controls",e.id),s.setAttribute("aria-expanded","false"));let n=()=>{let a=(t.getAttribute("data-mode")||"auto").toLowerCase();if(a==="up"||a==="down")return a;let c=t.getBoundingClientRect(),d=Math.max(0,window.innerHeight-c.bottom);return Math.max(0,c.top)>d?"up":"down"},r=()=>{t.dataset.dropdownDirection=n(),e.setAttribute("aria-hidden","false"),s?.setAttribute("aria-expanded","true")},o=()=>{e.setAttribute("aria-hidden","true"),s?.setAttribute("aria-expanded","false")},i=()=>{e.getAttribute("aria-hidden")==="false"?o():r()};s?.addEventListener("click",a=>{a.preventDefault(),a.stopPropagation(),i()}),document.addEventListener("click",a=>{t.contains(a.target)||o()}),t.addEventListener("keydown",a=>{a.key==="Escape"&&(o(),s?.focus())}),t.addEventListener("focusout",a=>{(!a.relatedTarget||!t.contains(a.relatedTarget))&&o()})}function Ot(t){if(t.dataset.enhancedToggle)return;t.dataset.enhancedToggle="true";let e=t.querySelector('input[type="checkbox"]');if(!e)return;t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("role","switch"),t.setAttribute("aria-checked",e.checked?"true":"false");let s=document.createElement("span");s.className="toggle-switch",s.setAttribute("role","presentation"),s.setAttribute("aria-hidden","true");let n=document.createElement("span");n.className="toggle-knob",s.appendChild(n),t.insertBefore(s,e.nextSibling);let r=()=>{t.setAttribute("aria-checked",e.checked?"true":"false")},o=()=>{e.disabled||(e.checked=!e.checked,r(),e.dispatchEvent(new Event("change",{bubbles:!0})))};t.addEventListener("click",i=>{i.preventDefault(),o()}),t.addEventListener("keydown",i=>{(i.key===" "||i.key==="Enter")&&(i.preventDefault(),o())}),e.addEventListener("change",r)}function Nt(t){if(t.dataset.enhancedRange)return;let e=t.closest("label"),s=e?.classList.contains("range-output"),n=t.id||`range-${Math.random().toString(36).substring(2,11)}`,r=`${n}-output`;if(t.id=n,s){let o=e.querySelector("span");if(o&&!o.classList.contains("range-output-wrapper")){let i=document.createElement("span");i.className="range-output-wrapper",i.style.display="flex",i.style.justifyContent="space-between",i.style.alignItems="center";let a=document.createElement("span");a.textContent=o.textContent,i.appendChild(a);let c=document.createElement("output");c.id=r,c.setAttribute("for",n),c.style.color="var(--surface-text-secondary, var(--color-text-secondary))",c.style.fontSize="0.875rem",c.textContent=t.value,i.appendChild(c),o.textContent="",o.appendChild(i);let d=()=>{c.textContent=t.value};t.addEventListener("input",d)}}else{let o=t.closest(".range-container");o||(o=document.createElement("div"),o.className="range-container",t.parentNode?.insertBefore(o,t),o.appendChild(t)),o.style.position="relative";let i=document.createElement("output");i.id=r,i.setAttribute("for",n),i.className="range-bubble",i.setAttribute("aria-live","polite"),o.appendChild(i);let a=()=>{let l=parseFloat(t.min)||0,u=parseFloat(t.max)||100,f=parseFloat(t.value),m=(f-l)/(u-l);i.style.left=`calc(${m*100}% )`,i.textContent=String(f)},c=()=>i.classList.add("visible"),d=()=>i.classList.remove("visible");t.addEventListener("input",a),t.addEventListener("pointerdown",c),t.addEventListener("pointerup",d),t.addEventListener("pointerleave",d),t.addEventListener("focus",c),t.addEventListener("blur",d),a()}t.dataset.enhancedRange="1"}function jt(t){if(t.dataset.enhancedRequired)return;t.dataset.enhancedRequired="true";let e=s=>{let n=s.closest("label");if(!n||n.querySelector(".required-asterisk"))return;let r=document.createElement("span");r.classList.add("required-asterisk"),r.textContent="*",r.style.marginLeft="4px",n.querySelector("span").appendChild(r);let o=s.closest("form");if(o&&!o.querySelector(".required-legend")){let i=document.createElement("small");i.classList.add("required-legend"),i.textContent="* Required fields",o.insertBefore(i,o.querySelector(".form-actions")||o.lastElementChild)}};t.querySelectorAll("[required]").forEach(s=>{e(s)})}function qt(t){if(t.dataset.enhancedOpenGroup)return;t.dataset.enhancedOpenGroup="true",t.classList.add("flex","flex-wrap","buttons");let e=document.createElement("input");e.type="text",e.placeholder="Add item...",e.classList.add("input-text","input-sm"),e.style.width="auto";let s=t.querySelector('input[type="radio"], input[type="checkbox"]');t.appendChild(e),e.addEventListener("keydown",n=>{if(n.key==="Enter"||n.key==="Tab"){let r=e.value.trim();if(r){n.preventDefault();let o=s.type==="radio"?"radio":"checkbox",i=`open-group-${Math.random().toString(36).substring(2,11)}`,a=document.createElement("label"),c=document.createElement("span");c.setAttribute("data-label",""),c.textContent=r;let d=document.createElement("input");d.type=o,d.name=s.name||t.getAttribute("data-name")||"open-group",d.value=r,d.id=i,a.appendChild(c),a.appendChild(d),t.insertBefore(a,e),e.value=""}}else if(n.key==="Backspace"&&e.value===""){n.preventDefault();let r=t.querySelectorAll("label");r.length>0&&r[r.length-1].remove()}})}function Ht(t){if(t.dataset.enhancedBtnWorking)return;t.dataset.enhancedBtnWorking="true";let e=null,s=!1;new MutationObserver(r=>{r.forEach(o=>{if(o.attributeName==="class"){let i=t.classList.contains("btn-working"),a=t.querySelector("pds-icon");if(i)if(a)e||(e=a.getAttribute("icon")),a.setAttribute("icon","circle-notch");else{let c=document.createElement("pds-icon");c.setAttribute("icon","circle-notch"),c.setAttribute("size","sm"),t.insertBefore(c,t.firstChild),s=!0}else o.oldValue?.includes("btn-working")&&a&&(s?(a.remove(),s=!1):e&&(a.setAttribute("icon",e),e=null))}})}).observe(t,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0})}var It=new Map([[".accordion",Tt],["nav[data-dropdown]",Ut],["label[data-toggle]",Ot],['input[type="range"]',Nt],["form[data-required]",jt],["fieldset[role=group][data-open]",qt],["button, a[class*='btn-']",Ht]]),xe=Mt.map(t=>({...t,run:It.get(t.selector)||(()=>{})}));var rt="pds",zt=/^([a-z][a-z0-9+\-.]*:)?\/\//i,nt=/^[a-z]:/i;function se(t=""){return t.endsWith("/")?t:`${t}/`}function Bt(t="",e=rt){let s=t.replace(/\/+$/,"");return new RegExp(`(?:^|/)${e}$`,"i").test(s)?s:`${s}/${e}`}function Ft(t){return t.replace(/^\.\/+/,"")}function Wt(t){return nt.test(t)?t.replace(nt,"").replace(/^\/+/,""):t}function Vt(t){return t.startsWith("public/")?t.substring(7):t}function Re(t,e={}){let s=e.segment||rt,n=e.defaultRoot||`/assets/${s}/`,r=t?.public&&t.public?.root||t?.static&&t.static?.root||null;if(!r||typeof r!="string")return se(n);let o=r.trim();return o?(o=o.replace(/\\/g,"/"),o=Bt(o,s),o=se(o),zt.test(o)?o:(o=Ft(o),o=Wt(o),o.startsWith("/")||(o=Vt(o),o.startsWith("/")||(o=`/${o}`),o=o.replace(/\/+/g,(i,a)=>a===0?i:"/")),se(o))):se(n)}var Gt=/^[a-z][a-z0-9+\-.]*:\/\//i,ne=(()=>{try{return import.meta.url}catch{return}})(),ue=t=>typeof t=="string"&&t.length&&!t.endsWith("/")?`${t}/`:t;function pe(t,e={}){if(!t||Gt.test(t))return t;let{preferModule:s=!0}=e,n=()=>{if(!ne)return null;try{return new URL(t,ne).href}catch{return null}},r=()=>{if(typeof window>"u"||!window.location?.origin)return null;try{return new URL(t,window.location.origin).href}catch{return null}};return(s?n()||r():r()||n())||t}var at=(()=>{if(ne)try{let t=new URL(ne);if(/\/public\/assets\/js\//.test(t.pathname))return new URL("../pds/",ne).href}catch{return}})(),ct=!1;function lt(t){ct||typeof document>"u"||(ct=!0,t.addEventListener("pds:ready",e=>{let s=e.detail?.mode;s&&document.documentElement.classList.add(`pds-${s}`,"pds-ready")}))}function dt(t={},e={}){if(!e||typeof e!="object")return t;let s=Array.isArray(t)?[...t]:{...t};for(let[n,r]of Object.entries(e))r&&typeof r=="object"&&!Array.isArray(r)?s[n]=dt(s[n]&&typeof s[n]=="object"?s[n]:{},r):s[n]=r;return s}function ke(t=""){return String(t).toLowerCase().replace(/&/g," and ").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function G(t){if(t==null)return t;if(typeof t=="function")return;if(typeof t!="object")return t;if(Array.isArray(t))return t.map(s=>G(s)).filter(s=>s!==void 0);let e={};for(let s in t)if(t.hasOwnProperty(s)){let n=t[s];if(typeof n!="function"){let r=G(n);r!==void 0&&(e[s]=r)}}return e}function ut(t={},e={},{presets:s,defaultLog:n}){let r=typeof t=="object"&&("colors"in t||"typography"in t||"spatialRhythm"in t||"shape"in t||"behavior"in t||"layout"in t||"advanced"in t||"a11y"in t||"components"in t||"icons"in t),o=t&&t.enhancers;o&&!Array.isArray(o)&&(o=Object.values(o));let i=o??e.enhancers??[],a=t&&t.preset,c=t&&t.design,d="preset"in(t||{})||"design"in(t||{})||"enhancers"in(t||{}),l,u=null;if(d){let f=String(a||"default").toLowerCase(),m=s?.[f]||Object.values(s||{}).find(R=>ke(R.name)===f||String(R.name||"").toLowerCase()===f);if(!m)throw new Error(`PDS preset not found: "${a||"default"}"`);u={id:m.id||ke(m.name),name:m.name||m.id||String(f)};let $=structuredClone(m);if(c&&typeof c=="object"){let R=G(c);$=dt($,structuredClone(R))}let{mode:x,autoDefine:g,applyGlobalStyles:w,manageTheme:H,themeStorageKey:A,preloadStyles:D,criticalLayers:L,managerURL:Z,manager:I,preset:oe,design:E,enhancers:M,log:z,...S}=t;l={...S,design:$,preset:u.name,log:z||n}}else if(r){let{log:f,...m}=t;l={design:structuredClone(m),log:f||n}}else{let f=s?.default||Object.values(s||{}).find(m=>ke(m.name)==="default");if(!f)throw new Error("PDS default preset not available");u={id:f.id||"default",name:f.name||"Default"},l={design:structuredClone(f),preset:u.name,log:n}}return{generatorConfig:l,enhancers:i,presetInfo:u}}function pt({manageTheme:t,themeStorageKey:e,applyResolvedTheme:s,setupSystemListenerIfNeeded:n}){let r="light",o=null;if(t&&typeof window<"u"){try{o=localStorage.getItem(e)||null}catch{o=null}try{s?.(o),n?.(o)}catch{}o?o==="system"?r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":r=o:r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return{resolvedTheme:r,storedTheme:o}}function De(t,{resolvePublicAssetURL:e}){let s=!!(t?.public?.root||t?.static?.root),n=e(t);return!s&&at&&(n=at),ue(pe(n))}async function ht(t,{baseEnhancers:e=[]}={}){let{autoDefineBaseURL:s="/auto-define/",autoDefinePreload:n=[],autoDefineMapper:r=null,enhancers:o=[],autoDefineOverrides:i=null,autoDefinePreferModule:a=!0}=t,c=(()=>{let l=new Map;return(e||[]).forEach(u=>l.set(u.selector,u)),(o||[]).forEach(u=>l.set(u.selector,u)),Array.from(l.values())})(),d=null;if(typeof window<"u"&&typeof document<"u"){let l=null;try{let g=await Promise.resolve().then(()=>(it(),ot));l=g?.AutoDefiner||g?.default?.AutoDefiner||g?.default||null}catch(g){console.warn("AutoDefiner not available:",g?.message||g)}let u=g=>{switch(g){case"pds-tabpanel":return"pds-tabstrip.js";default:return`${g}.js`}},{mapper:f,...m}=i&&typeof i=="object"?i:{},x={baseURL:s&&ue(pe(s,{preferModule:a})),predefine:n,scanExisting:!0,observeShadows:!0,patchAttachShadow:!0,debounceMs:16,enhancers:c,onError:(g,w)=>{if(typeof g=="string"&&g.startsWith("pds-")){let A=["pds-form","pds-drawer"].includes(g),D=w?.message?.includes("#pds/lit")||w?.message?.includes("Failed to resolve module specifier");A&&D?console.error(`\u274C PDS component <${g}> requires Lit but #pds/lit is not in import map.
|
|
82
28
|
Add this to your HTML <head>:
|
|
83
29
|
<script type="importmap">
|
|
84
30
|
{ "imports": { "#pds/lit": "./path/to/lit.js" } }
|
|
85
31
|
<\/script>
|
|
86
|
-
See: https://github.com/pure-ds/core#lit-components`):console.warn(`\u26A0\uFE0F PDS component <${g}> not found. Assets may not be installed.`)}else console.error(`\u274C Auto-define error for <${g}
|
|
32
|
+
See: https://github.com/pure-ds/core#lit-components`):console.warn(`\u26A0\uFE0F PDS component <${g}> not found. Assets may not be installed.`)}else console.error(`\u274C Auto-define error for <${g}>:`,w)},...m,mapper:g=>{if(customElements.get(g))return null;if(typeof r=="function")try{let w=r(g);return w===void 0?u(g):w}catch(w){return console.warn("Custom autoDefine.mapper error; falling back to default:",w?.message||w),u(g)}return u(g)}};l&&(d=new l(x),n.length>0&&typeof l.define=="function"&&await l.define(...n,{baseURL:s,mapper:x.mapper,onError:x.onError}))}return{autoDefiner:d,mergedEnhancers:c}}var Te=class extends EventTarget{},b=new Te;b.initializing=!1;b.currentPreset=null;var ft=(t="")=>String(t).toLowerCase().replace(/&/g," and ").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,""),Zt=function(t="log",e,...s){if(this?.debug||this?.design?.debug||!1||t==="error"||t==="warn"){let r=console[t]||console.log;s.length>0?r(e,...s):r(e)}};async function Jt(t,e={}){if(e?.runtimeConfig===!1||typeof fetch!="function")return null;let s=e?.runtimeConfigURL||`${t}pds-runtime-config.json`;try{let n=await fetch(s,{cache:"no-store"});return n.ok?await n.json():null}catch{return null}}b.registry=F;b.adoptLayers=Oe;b.adoptPrimitives=Ue;b.createStylesheet=Ne;b.isLiveMode=()=>F.isLive;b.ask=st;b.toast=C;function mt(t){let e=typeof CustomEvent=="function";try{let s=e?new CustomEvent("pds:ready",{detail:t}):new Event("pds:ready");b.dispatchEvent(s)}catch{}if(typeof document<"u")if(e){let s={detail:t,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:ready",s))}catch{}try{document.dispatchEvent(new CustomEvent("pds-ready",s))}catch{}}else{try{document.dispatchEvent(new Event("pds:ready"))}catch{}try{document.dispatchEvent(new Event("pds-ready"))}catch{}}}Object.defineProperty(b,"currentConfig",{value:null,writable:!0,enumerable:!0,configurable:!1});typeof window<"u"&&(window.PDS=b);var Me="pure-ds-theme",q=null,re=null;function he(t){try{if(typeof document>"u")return;let e="light";t?t==="system"?e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e=t:e=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",document.documentElement.setAttribute("data-theme",e)}catch{}}function fe(t){try{if(q&&re){try{typeof q.removeEventListener=="function"?q.removeEventListener("change",re):typeof q.removeListener=="function"&&q.removeListener(re)}catch{}q=null,re=null}if(t==="system"&&typeof window<"u"&&window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),s=n=>{let r=n?.matches===void 0?e.matches:n.matches;try{let o=r?"dark":"light";document.documentElement.setAttribute("data-theme",o),b.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:o,source:"system"}}))}catch{}};q=e,re=s,typeof e.addEventListener=="function"?e.addEventListener("change",s):typeof e.addListener=="function"&&e.addListener(s)}}catch{}}Object.defineProperty(b,"theme",{get(){try{return typeof window>"u"?null:localStorage.getItem(Me)||null}catch{return null}},set(t){try{if(typeof window>"u")return;t==null?localStorage.removeItem(Me):localStorage.setItem(Me,t),he(t),fe(t),b.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:t,source:"api"}}))}catch{}}});b._applyResolvedTheme=he;b._setupSystemListenerIfNeeded=fe;b.defaultEnhancers=xe;async function Qt(t){let e=t&&t.mode||"live",{mode:s,...n}=t||{};if(e==="static")return Xt(n);let r=De(n,{resolvePublicAssetURL:Re}),o=n?.managerURL||n?.public?.managerURL||n?.manager?.url||new URL("core/pds-manager.js",r).href||new URL("./pds-manager.js",import.meta.url).href,{startLive:i}=await import(o);return i(b,n,{emitReady:mt,applyResolvedTheme:he,setupSystemListenerIfNeeded:fe})}b.start=Qt;async function Xt(t){if(!t||typeof t!="object")throw new Error("PDS.start({ mode: 'static', ... }) requires a valid configuration object");let e=t.applyGlobalStyles??!0,s=t.manageTheme??!0,n=t.themeStorageKey??"pure-ds-theme",r=t.staticPaths??{},o=De(t,{resolvePublicAssetURL:Re}),i=t&&t.autoDefine||null,a;i&&i.baseURL?a=ue(pe(i.baseURL,{preferModule:!1})):a=`${o}components/`;let c=i&&Array.isArray(i.predefine)&&i.predefine||[],d=i&&typeof i.mapper=="function"&&i.mapper||null;try{lt(b);let{resolvedTheme:l}=pt({manageTheme:s,themeStorageKey:n,applyResolvedTheme:he,setupSystemListenerIfNeeded:fe}),u=await Jt(o,t),f=u?.config?.design||u?.design||null,m=u?.config?.preset||u?.preset||"default",$=u?.presetId||ft(m)||"default",x=f?{[String($).toLowerCase()]:f,...String($).toLowerCase()!=="default"?{default:f}:{}}:null,g=t?.design&&typeof t.design=="object"?G(t.design):null,w=ft(t?.preset||"default")||"default",H=g?{[String(w).toLowerCase()]:g,...String(w).toLowerCase()!=="default"?{default:g}:{}}:null,A=x||t?.presets||H||{};if(!Object.keys(A||{}).length)throw new Error("PDS static mode requires preset data. Run pds:build or provide config.presets/config.design.");let D=u?.config?{...u.config,...t,preset:t?.preset||$,design:g||f||u?.config?.design}:t,L=ut(D,{},{presets:A,defaultLog:Zt}),Z=L.enhancers,I={tokens:`${o}styles/pds-tokens.css.js`,primitives:`${o}styles/pds-primitives.css.js`,components:`${o}styles/pds-components.css.js`,utilities:`${o}styles/pds-utilities.css.js`,styles:`${o}styles/pds-styles.css.js`},oe=u?.paths||{};if(r={...I,...oe,...r},b.registry.setStaticMode(r),e&&typeof document<"u")try{let S=await b.registry.getStylesheet("styles");if(S){S._pds=!0;let R=(document.adoptedStyleSheets||[]).filter(p=>p._pds!==!0);document.adoptedStyleSheets=[...R,S]}}catch(S){console.warn("Failed to apply static styles:",S)}let E=null,M=[];try{let S=await ht({autoDefineBaseURL:a,autoDefinePreload:c,autoDefineMapper:d,enhancers:Z,autoDefineOverrides:i||null,autoDefinePreferModule:!(i&&i.baseURL)},{baseEnhancers:xe});E=S.autoDefiner,M=S.mergedEnhancers||[]}catch(S){console.error("\u274C Failed to initialize AutoDefiner/Enhancers (static):",S)}let z=G(t);return b.currentConfig=Object.freeze({mode:"static",...structuredClone(z),design:structuredClone(L.generatorConfig.design),preset:L.generatorConfig.preset,theme:l,enhancers:M}),mt({mode:"static",config:L.generatorConfig,theme:l,autoDefiner:E}),{config:L.generatorConfig,theme:l,autoDefiner:E}}catch(l){throw b.dispatchEvent(new CustomEvent("pds:error",{detail:{error:l}})),l}}export{b as PDS};
|
|
87
33
|
/*! Bundled license information:
|
|
88
34
|
|
|
89
35
|
@lit/reactive-element/css-tag.js:
|
|
@@ -807,22 +807,22 @@
|
|
|
807
807
|
"globalAttributes": [
|
|
808
808
|
{
|
|
809
809
|
"name": "data-dropdown",
|
|
810
|
-
"description": "
|
|
810
|
+
"description": "Progressive enhancement: nav[data-dropdown]",
|
|
811
811
|
"valueSet": "v"
|
|
812
812
|
},
|
|
813
813
|
{
|
|
814
814
|
"name": "data-toggle",
|
|
815
|
-
"description": "
|
|
815
|
+
"description": "Progressive enhancement: label[data-toggle]",
|
|
816
816
|
"valueSet": "v"
|
|
817
817
|
},
|
|
818
818
|
{
|
|
819
819
|
"name": "data-required",
|
|
820
|
-
"description": "
|
|
820
|
+
"description": "Progressive enhancement: form[data-required]",
|
|
821
821
|
"valueSet": "v"
|
|
822
822
|
},
|
|
823
823
|
{
|
|
824
824
|
"name": "data-open",
|
|
825
|
-
"description": "
|
|
825
|
+
"description": "Progressive enhancement: fieldset[role=group][data-open]",
|
|
826
826
|
"valueSet": "v"
|
|
827
827
|
}
|
|
828
828
|
]
|
package/readme.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Pure Design System (PDS)
|
|
2
2
|
|
|
3
|
-
> ⚠️ **Beta Software** - APIs are stabilizing but may still change. Pin versions in production: `"@pure-ds/core": "~0.
|
|
3
|
+
> ⚠️ **Beta Software** - APIs are stabilizing but may still change. Pin versions in production: `"@pure-ds/core": "~0.5.6"`
|
|
4
4
|
|
|
5
5
|
[](https://github.com/mvneerven/pure-ds/actions/workflows/ci.yml)
|
|
6
6
|
[](#license)
|
|
@@ -49,7 +49,7 @@ await PDS.start(config);
|
|
|
49
49
|
|
|
50
50
|
## The PDS Philosophy
|
|
51
51
|
|
|
52
|
-
### Semantic Classes First
|
|
52
|
+
### HTML and Semantic Classes First
|
|
53
53
|
PDS generates **high-level primitives** that style semantic HTML:
|
|
54
54
|
|
|
55
55
|
```html
|
|
@@ -58,7 +58,12 @@ PDS generates **high-level primitives** that style semantic HTML:
|
|
|
58
58
|
<div class="alert alert-success">Done!</div>
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
HTML is a great starting point. There's no need to have components for stuff that HTML can do on its own, or with the help of a pinch of CSS and/or a dash of JavaScript. The [Pure Web Manifesto](https://pureweb.dev/manifesto) is a great set of principles.
|
|
62
|
+
|
|
63
|
+
Also, PDS is not a component library. Yes, there are a couple of (optional, lazy-loaded, components), but they are only for more complex widgets, like a TabStrip, a Drag & Drop uploader, a Rich Text Editor, etc.
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
### Layout Utilities
|
|
62
67
|
A **small set** of layout utilities for composition:
|
|
63
68
|
|
|
64
69
|
```html
|
|
@@ -83,11 +88,11 @@ The **only** valid `style=""` in PDS sets CSS custom properties:
|
|
|
83
88
|
|
|
84
89
|
## Why PDS Exists
|
|
85
90
|
|
|
86
|
-
|
|
|
91
|
+
| Other Libs | The PDS Way |
|
|
87
92
|
|-------------|-------------|
|
|
88
93
|
| `class="flex items-center gap-4 p-6 bg-white rounded-lg shadow-md"` | `class="card"` |
|
|
89
94
|
| `style="color: #007acc;"` | Uses `--color-primary-500` token |
|
|
90
|
-
| Import a Button component | `<button class="btn-primary">` |
|
|
95
|
+
| Import a `<Button>` component | `<button class="btn-primary">` |
|
|
91
96
|
| 47 utility classes per element | Semantic class + maybe one layout utility |
|
|
92
97
|
|
|
93
98
|
**The result:** Readable HTML. Inspectable CSS. Sites that work without JS. Code that lasts decades.
|
|
@@ -99,9 +104,9 @@ PDS follows the [Pure Web Manifesto](https://pureweb.dev/manifesto)—sustainabl
|
|
|
99
104
|
## Key Features
|
|
100
105
|
|
|
101
106
|
- 🎨 **Configuration-Driven** — Single source of truth generates everything
|
|
102
|
-
- 🚀 **Live or Static** — Runtime generation or pre-built
|
|
107
|
+
- 🚀 **Live or Static** — Runtime generation or pre-built CSS
|
|
103
108
|
- 🎯 **Framework Agnostic** — Vanilla, Lit, React, Vue, Svelte, Next.js
|
|
104
|
-
- 🌐 **Web Standards** —
|
|
109
|
+
- 🌐 **Web Standards** — `HTMLElement` API, Constructable Stylesheets, Shadow DOM, etc.
|
|
105
110
|
- 🧩 **Progressive Enhancement** — Semantic HTML first, enhance where needed
|
|
106
111
|
- ♿ **Accessibility Built-in** — WCAG AA validation, contrast checking
|
|
107
112
|
- 📦 **Zero Build Required** — Works directly in browsers
|
|
@@ -132,9 +137,9 @@ PDS follows the [Pure Web Manifesto](https://pureweb.dev/manifesto)—sustainabl
|
|
|
132
137
|
|
|
133
138
|
---
|
|
134
139
|
|
|
135
|
-
## The
|
|
140
|
+
## The Four Layers
|
|
136
141
|
|
|
137
|
-
PDS is built on **three fully optional layers**, each powered by your config:
|
|
142
|
+
PDS is built on **three fully optional layers**, each powered by your config, and a great DX layer on top:
|
|
138
143
|
|
|
139
144
|
### 1. Styles — Deterministic Global CSS
|
|
140
145
|
|
|
@@ -174,8 +179,17 @@ A growing set of PDS components:
|
|
|
174
179
|
|
|
175
180
|
Auto-defined when used. Lazy-loaded via dynamic imports. Styled by your tokens. Zero dependencies.
|
|
176
181
|
|
|
182
|
+
|
|
183
|
+
### 4: DX - Built-in Storybook & LLM Support
|
|
184
|
+
|
|
185
|
+
Install `@pure-ds/storybook` and get a cloned PDS Storybook instance right where you code, inside your project. Then add some `.stories.js` and see them immediately pop up.
|
|
186
|
+
|
|
187
|
+
Install `@pure-ds/core` and get instant PDS AI Coding Instrucions at your fingertips (GitHub Copilot & Cursor support built in)
|
|
188
|
+
|
|
177
189
|
### How It Works
|
|
178
190
|
|
|
191
|
+
It all starts with your `pds.confog.js` file in the root of the project (auto-generated when installing)
|
|
192
|
+
|
|
179
193
|
```
|
|
180
194
|
┌──────────────────────────────────────────────────────────────┐
|
|
181
195
|
│ Configuration │
|
|
@@ -251,13 +265,13 @@ npm install @pure-ds/core
|
|
|
251
265
|
During installation, PDS automatically:
|
|
252
266
|
- Creates a default `pds.config.js` (if one doesn't exist)
|
|
253
267
|
- Copies Copilot/AI instructions to `.github/copilot-instructions.md`
|
|
254
|
-
- Adds `pds:
|
|
255
|
-
- Runs `pds:
|
|
268
|
+
- Adds `pds:build` and `pds:build-icons` scripts to your `package.json`
|
|
269
|
+
- Runs `pds:build` to generate static assets
|
|
256
270
|
|
|
257
271
|
To manually re-sync assets:
|
|
258
272
|
|
|
259
273
|
```bash
|
|
260
|
-
npm run pds:
|
|
274
|
+
npm run pds:build
|
|
261
275
|
```
|
|
262
276
|
|
|
263
277
|
### Lit Import Convention
|
|
@@ -328,10 +342,10 @@ await PDS.start({
|
|
|
328
342
|
|
|
329
343
|
Pre-generate assets for production:
|
|
330
344
|
|
|
331
|
-
**1.
|
|
345
|
+
**1. Build static files:**
|
|
332
346
|
|
|
333
347
|
```bash
|
|
334
|
-
npm run pds:
|
|
348
|
+
npm run pds:build
|
|
335
349
|
```
|
|
336
350
|
|
|
337
351
|
This creates:
|
|
@@ -1562,13 +1576,13 @@ await PDS.start({ design: myPreset });
|
|
|
1562
1576
|
|
|
1563
1577
|
---
|
|
1564
1578
|
|
|
1565
|
-
## CLI &
|
|
1579
|
+
## CLI & Build
|
|
1566
1580
|
|
|
1567
1581
|
### Available Scripts
|
|
1568
1582
|
|
|
1569
1583
|
| Script | Description |
|
|
1570
1584
|
|--------|-------------|
|
|
1571
|
-
| `npm run pds:
|
|
1585
|
+
| `npm run pds:build` | Full build: styles, components, icons, and IntelliSense data |
|
|
1572
1586
|
| `npm run pds:dx` | Generate all IntelliSense data (HTML + CSS) |
|
|
1573
1587
|
| `npm run pds:manifest` | Generate HTML IntelliSense (Custom Elements Manifest) |
|
|
1574
1588
|
| `npm run pds:css-data` | Generate CSS IntelliSense (tokens, classes, attributes) |
|
|
@@ -1596,10 +1610,10 @@ This generates a `pds.config.js` with:
|
|
|
1596
1610
|
|
|
1597
1611
|
**Note:** During `npm install`, PDS automatically creates this file if it doesn't exist.
|
|
1598
1612
|
|
|
1599
|
-
###
|
|
1613
|
+
### Build Static Assets
|
|
1600
1614
|
|
|
1601
1615
|
```bash
|
|
1602
|
-
npm run pds:
|
|
1616
|
+
npm run pds:build
|
|
1603
1617
|
```
|
|
1604
1618
|
|
|
1605
1619
|
**Output:**
|
|
@@ -1707,14 +1721,14 @@ Reload VS Code: **Ctrl+Shift+P** → **Developer: Reload Window**
|
|
|
1707
1721
|
|
|
1708
1722
|
### Generation
|
|
1709
1723
|
|
|
1710
|
-
IntelliSense data is automatically generated with
|
|
1724
|
+
IntelliSense data is automatically generated with build:
|
|
1711
1725
|
|
|
1712
1726
|
```bash
|
|
1713
1727
|
# Generate all IntelliSense data (HTML + CSS)
|
|
1714
1728
|
npm run pds:dx
|
|
1715
1729
|
|
|
1716
|
-
# Or as part of full
|
|
1717
|
-
npm run pds:
|
|
1730
|
+
# Or as part of full build
|
|
1731
|
+
npm run pds:build
|
|
1718
1732
|
|
|
1719
1733
|
# Or generate individually
|
|
1720
1734
|
npm run pds:manifest # HTML IntelliSense only
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PDS Enhancer Metadata (live mode only)
|
|
3
|
+
*
|
|
4
|
+
* This file contains description and demoHtml for runtime inspection tools.
|
|
5
|
+
* It is intentionally kept separate from pds-enhancers.js to keep the
|
|
6
|
+
* production pds.js bundle lean.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export const defaultPDSEnhancerMetadata = [
|
|
10
|
+
{
|
|
11
|
+
selector: ".accordion",
|
|
12
|
+
description:
|
|
13
|
+
"Ensures only one <details> element can be open at a time within the accordion.",
|
|
14
|
+
demoHtml: `
|
|
15
|
+
<div class="accordion">
|
|
16
|
+
<details>
|
|
17
|
+
<summary>Section 1</summary>
|
|
18
|
+
<p>Content for section 1</p>
|
|
19
|
+
</details>
|
|
20
|
+
<details>
|
|
21
|
+
<summary>Section 2</summary>
|
|
22
|
+
<p>Content for section 2</p>
|
|
23
|
+
</details>
|
|
24
|
+
<details>
|
|
25
|
+
<summary>Section 3</summary>
|
|
26
|
+
<p>Content for section 3</p>
|
|
27
|
+
</details>
|
|
28
|
+
</div>
|
|
29
|
+
`.trim(),
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
selector: "nav[data-dropdown]",
|
|
33
|
+
description:
|
|
34
|
+
"Enhances a nav element with data-dropdown to function as a dropdown menu.",
|
|
35
|
+
demoHtml: `
|
|
36
|
+
<nav data-dropdown>
|
|
37
|
+
<button class="btn-primary">Menu</button>
|
|
38
|
+
<menu>
|
|
39
|
+
<li><a href="#">Item 1</a></li>
|
|
40
|
+
<li><a href="#">Item 2</a></li>
|
|
41
|
+
</menu>
|
|
42
|
+
</nav>
|
|
43
|
+
`.trim(),
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
selector: "label[data-toggle]",
|
|
47
|
+
description: "Creates a toggle switch element from a checkbox.",
|
|
48
|
+
demoHtml: `
|
|
49
|
+
<label data-toggle>
|
|
50
|
+
<input type="checkbox">
|
|
51
|
+
<span data-label>Enable notifications</span>
|
|
52
|
+
</label>
|
|
53
|
+
`.trim(),
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
selector: 'input[type="range"]',
|
|
57
|
+
description: "Enhances range inputs with an attached <output>.",
|
|
58
|
+
demoHtml: `
|
|
59
|
+
<label class="range-output">
|
|
60
|
+
<span data-label>Volume</span>
|
|
61
|
+
<input type="range" min="0" max="100" value="40">
|
|
62
|
+
</label>
|
|
63
|
+
`.trim(),
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
selector: "form[data-required]",
|
|
67
|
+
description:
|
|
68
|
+
"Enhances required form fields using an asterisk in the label.",
|
|
69
|
+
demoHtml: `
|
|
70
|
+
<form data-required action="#" method="post">
|
|
71
|
+
<label>
|
|
72
|
+
<span>Field Label</span>
|
|
73
|
+
<input type="text" required>
|
|
74
|
+
</label>
|
|
75
|
+
<nav class="form-actions">
|
|
76
|
+
<button type="submit" class="btn-primary">Submit</button>
|
|
77
|
+
</nav>
|
|
78
|
+
</form>
|
|
79
|
+
`.trim(),
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
selector: "fieldset[role=group][data-open]",
|
|
83
|
+
description:
|
|
84
|
+
"Enhances a checkbox/radio group to be open (have a way to add and remove items).",
|
|
85
|
+
demoHtml: `
|
|
86
|
+
<fieldset role="group" data-open>
|
|
87
|
+
<label>
|
|
88
|
+
<span data-label>Test</span>
|
|
89
|
+
<input value="lala" name="test1" type="radio" />
|
|
90
|
+
</label>
|
|
91
|
+
</fieldset>
|
|
92
|
+
`.trim(),
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
selector: "button, a[class*='btn-']",
|
|
96
|
+
description:
|
|
97
|
+
"Automatically manages spinner icon for buttons with .btn-working class",
|
|
98
|
+
demoHtml: `
|
|
99
|
+
<button class="btn-primary btn-working">
|
|
100
|
+
<span>Saving</span>
|
|
101
|
+
</button>
|
|
102
|
+
`.trim(),
|
|
103
|
+
},
|
|
104
|
+
];
|