crayon-design-system-ui 0.0.2 → 0.0.3

package/README.md

@@ -466,7 +466,7 @@ Works in:
 
 # Next Steps
 
-Current components: Button, Accordion, AccordionItem, Input, Textarea, FormSelect, FormSelectOption, Checkbox, Radio, Label, Form, Avatar, Card.
+Current components: Accordion, AccordionItem, Avatar, Button, Card, Checkbox, Form, FormSelect, Input, Label, Radio, Textarea.
 
 Ideas for more:
 

package/dist/components/accordion/Accordion.js

@@ -1,5 +1,5 @@
-import{o as te,c as oe,m as T,g as o,f as re,i as A,j as se,q as E,s as B,k as J,u as ae,p as ne,b as c,e as F,r as d,v as ie,w as le,x as ce,t as de,y as b,z as G}from"../../assets/custom-element-CN6vLcFC.js";import{i as fe}from"../../assets/if-DdiIl-sg.js";import{e as pe,i as ve}from"../../assets/each-DkX3FjFL.js";import{s as ue}from"../../assets/slot-CRFQJtYY.js";import{a as he,i as ge,s as H}from"../../assets/lifecycle-BK5NY8qp.js";import{s as f}from"../../assets/attributes-o88QCNuy.js";import{b as me}from"../../assets/this-DllEouAd.js";var be=J('<div role="button" tabindex="0"><span class="trigger svelte-19oeh9f"><span class="title svelte-19oeh9f"> </span> <span class="chevron svelte-19oeh9f" aria-hidden="true">▼</span></span> <div role="region"><div class="panel-inner svelte-19oeh9f"> </div></div></div>'),_e=J('<div class="accordion svelte-19oeh9f" role="region" aria-label="Accordion"><!> <!></div>');const xe={hash:"svelte-19oeh9f",code:`.accordion.svelte-19oeh9f {display:flex;flex-direction:column;gap:2px;width:100%;}.accordion.svelte-19oeh9f :where(.svelte-19oeh9f)::slotted(ui-accordion-item) {display:block;}\r
+import{o as te,c as oe,m as T,g as o,f as re,i as A,j as ae,q as E,s as B,k as J,u as se,p as ne,b as c,e as F,r as d,v as ie,w as le,x as ce,t as de,y as b,z as G}from"../../assets/custom-element-CN6vLcFC.js";import{i as fe}from"../../assets/if-DdiIl-sg.js";import{e as pe,i as ve}from"../../assets/each-DkX3FjFL.js";import{s as he}from"../../assets/slot-CRFQJtYY.js";import{a as ue,i as ge,s as H}from"../../assets/lifecycle-BK5NY8qp.js";import{s as f}from"../../assets/attributes-o88QCNuy.js";import{b as me}from"../../assets/this-DllEouAd.js";var be=J('<div role="button" tabindex="0"><span class="trigger svelte-19oeh9f"><span class="title svelte-19oeh9f"> </span> <span class="chevron svelte-19oeh9f" aria-hidden="true">▼</span></span> <div role="region"><div class="panel-inner svelte-19oeh9f"> </div></div></div>'),ye=J('<div class="accordion svelte-19oeh9f" role="region" aria-label="Accordion"><!> <!></div>');const _e={hash:"svelte-19oeh9f",code:`.accordion.svelte-19oeh9f {display:flex;flex-direction:column;gap:2px;width:100%;}.accordion.svelte-19oeh9f :where(.svelte-19oeh9f)::slotted(ui-accordion-item) {display:block;}\r
 \r
-  /* Simple mode (items prop) styles */.item.svelte-19oeh9f {border-radius:var(--ui-radius-md, 10px);background:var(--ui-accordion-bg, #f5f5f5);border:1px solid var(--ui-accordion-border, #e0e0e0);overflow:hidden;transition:background 0.2s ease, border-color 0.2s ease;}.item.svelte-19oeh9f:hover {background:var(--ui-accordion-bg-hover, #eeeeee);}.item.open.svelte-19oeh9f {border-color:var(--ui-primary, #474bff);background:var(--ui-accordion-bg-open, #fafaff);}.trigger.svelte-19oeh9f {display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;user-select:none;font-weight:500;color:var(--ui-accordion-title, #1a1a1a);transition:color 0.2s ease;}.item.open.svelte-19oeh9f .trigger:where(.svelte-19oeh9f) {color:var(--ui-primary, #474bff);}.title.svelte-19oeh9f {flex:1;text-align:left;}.chevron.svelte-19oeh9f {font-size:0.7em;opacity:0.7;transition:transform 0.25s ease;flex-shrink:0;margin-left:8px;}.item.open.svelte-19oeh9f .chevron:where(.svelte-19oeh9f) {transform:rotate(180deg);}.panel.svelte-19oeh9f {display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease-out;}.panel.open.svelte-19oeh9f {grid-template-rows:1fr;}.panel-inner.svelte-19oeh9f {min-height:0;overflow:hidden;padding:0 18px 14px 18px;padding-top:0;color:var(--ui-accordion-content, #444);font-size:14px;line-height:1.5;border-top:1px solid var(--ui-accordion-border, #e0e0e0);}`};function ye(I,z){ne(z,!1),he(I,xe);const K=()=>E(props,"$props",x),_=()=>E(state,"$state",x),N=()=>E(effect,"$effect",x),[x,L]=ae();let{items:P=[],allowMultiple:j=!1}=K()(),h=T(),n,i=T(_()(!1)),y=_()(null),w=_()(new Set);function k(e){if(j){const t=new Set(w);t.has(e)?t.delete(e):t.add(e),w=t}else y=y===e?null:e;o(i)&&$()}function p(e){return j?w.has(e):y===e}function $(){if(!n)return;n.assignedElements().forEach((t,s)=>{t.setAttribute("data-accordion-index",String(s)),p(s)?t.setAttribute("open",""):t.removeAttribute("open")})}function q(e){const t=e?.target??n;t&&(n=t);const s=t?.assignedElements()??[];B(i,s.length>0),o(i)&&$()}function Q(e){const t=e.target?.closest?.("ui-accordion-item");if(!t)return;const s=t.getAttribute("data-accordion-index");if(s===null)return;const g=parseInt(s,10);Number.isNaN(g)||k(g)}N()(()=>{o(i)&&$()}),N()(()=>{o(h)&&(n=o(h).querySelector("slot"),n&&q())}),ge();var v=_e(),C=c(v);ue(C,z,"default",{onslotchange:e=>q(e),get style(){return o(i)?"":"display: none"}},null);var U=F(C,2);{var V=e=>{var t=ie(),s=le(t);pe(s,1,()=>P,ve,(g,m,r)=>{var a=be();let D;f(a,"aria-controls",`accordion-panel-${r}`),f(a,"id",`accordion-trigger-${r}`),a.__keydown=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),k(r))},a.__click=()=>k(r);var S=c(a),M=c(S),W=c(M,!0);d(M),ce(2),d(S);var l=F(S,2);let O;f(l,"id",`accordion-panel-${r}`),f(l,"aria-labelledby",`accordion-trigger-${r}`);var R=c(l),X=c(R,!0);d(R),d(l),d(a),de((u,Y,Z,ee)=>{D=H(a,1,"item svelte-19oeh9f",null,D,u),f(a,"aria-expanded",Y),G(W,(o(m),b(()=>o(m).title))),O=H(l,1,"panel svelte-19oeh9f",null,O,Z),f(l,"aria-hidden",ee),G(X,(o(m),b(()=>o(m).content)))},[()=>({open:p(r)}),()=>b(()=>p(r)),()=>({open:p(r)}),()=>b(()=>!p(r))]),A(g,a)}),A(e,t)};fe(U,e=>{o(i)||e(V)})}d(v),me(v,e=>B(h,e),()=>o(h)),re("accordion-toggle",v,Q),A(I,v),se(),L()}te(["keydown","click"]);const __Default = (oe(ye,{},["default"],[],{mode:"open"}));
+  /* Simple mode (items prop) styles */.item.svelte-19oeh9f {border-radius:var(--crayon-radius-md, 10px);background:var(--crayon-accordion-bg, #f5f5f5);border:1px solid var(--crayon-accordion-border, #e0e0e0);overflow:hidden;transition:background 0.2s ease, border-color 0.2s ease;}.item.svelte-19oeh9f:hover {background:var(--crayon-accordion-bg-hover, #eeeeee);}.item.open.svelte-19oeh9f {border-color:var(--crayon-primary, #474bff);background:var(--crayon-accordion-bg-open, #fafaff);}.trigger.svelte-19oeh9f {display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;user-select:none;font-weight:500;color:var(--crayon-accordion-title, #1a1a1a);transition:color 0.2s ease;}.item.open.svelte-19oeh9f .trigger:where(.svelte-19oeh9f) {color:var(--crayon-primary, #474bff);}.title.svelte-19oeh9f {flex:1;text-align:left;}.chevron.svelte-19oeh9f {font-size:0.7em;opacity:0.7;transition:transform 0.25s ease;flex-shrink:0;margin-left:8px;}.item.open.svelte-19oeh9f .chevron:where(.svelte-19oeh9f) {transform:rotate(180deg);}.panel.svelte-19oeh9f {display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease-out;}.panel.open.svelte-19oeh9f {grid-template-rows:1fr;}.panel-inner.svelte-19oeh9f {min-height:0;overflow:hidden;padding:0 18px 14px 18px;padding-top:0;color:var(--crayon-accordion-content, #444);font-size:14px;line-height:1.5;border-top:1px solid var(--crayon-accordion-border, #e0e0e0);}`};function xe(I,z){ne(z,!1),ue(I,_e);const K=()=>E(props,"$props",_),y=()=>E(state,"$state",_),N=()=>E(effect,"$effect",_),[_,L]=se();let{items:P=[],allowMultiple:j=!1}=K()(),u=T(),n,i=T(y()(!1)),x=y()(null),w=y()(new Set);function k(e){if(j){const t=new Set(w);t.has(e)?t.delete(e):t.add(e),w=t}else x=x===e?null:e;o(i)&&$()}function p(e){return j?w.has(e):x===e}function $(){if(!n)return;n.assignedElements().forEach((t,a)=>{t.setAttribute("data-accordion-index",String(a)),p(a)?t.setAttribute("open",""):t.removeAttribute("open")})}function q(e){const t=e?.target??n;t&&(n=t);const a=t?.assignedElements()??[];B(i,a.length>0),o(i)&&$()}function Q(e){const t=e.target?.closest?.("ui-accordion-item");if(!t)return;const a=t.getAttribute("data-accordion-index");if(a===null)return;const g=parseInt(a,10);Number.isNaN(g)||k(g)}N()(()=>{o(i)&&$()}),N()(()=>{o(u)&&(n=o(u).querySelector("slot"),n&&q())}),ge();var v=ye(),C=c(v);he(C,z,"default",{onslotchange:e=>q(e),get style(){return o(i)?"":"display: none"}},null);var U=F(C,2);{var V=e=>{var t=ie(),a=le(t);pe(a,1,()=>P,ve,(g,m,r)=>{var s=be();let D;f(s,"aria-controls",`accordion-panel-${r}`),f(s,"id",`accordion-trigger-${r}`),s.__keydown=h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),k(r))},s.__click=()=>k(r);var S=c(s),M=c(S),W=c(M,!0);d(M),ce(2),d(S);var l=F(S,2);let O;f(l,"id",`accordion-panel-${r}`),f(l,"aria-labelledby",`accordion-trigger-${r}`);var R=c(l),X=c(R,!0);d(R),d(l),d(s),de((h,Y,Z,ee)=>{D=H(s,1,"item svelte-19oeh9f",null,D,h),f(s,"aria-expanded",Y),G(W,(o(m),b(()=>o(m).title))),O=H(l,1,"panel svelte-19oeh9f",null,O,Z),f(l,"aria-hidden",ee),G(X,(o(m),b(()=>o(m).content)))},[()=>({open:p(r)}),()=>b(()=>p(r)),()=>({open:p(r)}),()=>b(()=>!p(r))]),A(g,s)}),A(e,t)};fe(U,e=>{o(i)||e(V)})}d(v),me(v,e=>B(u,e),()=>o(u)),re("accordion-toggle",v,Q),A(I,v),ae(),L()}te(["keydown","click"]);const __Default = (oe(xe,{},["default"],[],{mode:"open"}));
 customElements.define("ui-accordion", __Default);
 export default __Default;

package/dist/components/accordion/Accordion.svelte

@@ -131,20 +131,20 @@ $effect(() => {
 
   /* Simple mode (items prop) styles */
   .item {
-    border-radius: var(--ui-radius-md, 10px);
-    background: var(--ui-accordion-bg, #f5f5f5);
-    border: 1px solid var(--ui-accordion-border, #e0e0e0);
+    border-radius: var(--crayon-radius-md, 10px);
+    background: var(--crayon-accordion-bg, #f5f5f5);
+    border: 1px solid var(--crayon-accordion-border, #e0e0e0);
     overflow: hidden;
     transition: background 0.2s ease, border-color 0.2s ease;
   }
 
   .item:hover {
-    background: var(--ui-accordion-bg-hover, #eeeeee);
+    background: var(--crayon-accordion-bg-hover, #eeeeee);
   }
 
   .item.open {
-    border-color: var(--ui-primary, #474bff);
-    background: var(--ui-accordion-bg-open, #fafaff);
+    border-color: var(--crayon-primary, #474bff);
+    background: var(--crayon-accordion-bg-open, #fafaff);
   }
 
   .trigger {
@@ -155,12 +155,12 @@ $effect(() => {
     cursor: pointer;
     user-select: none;
     font-weight: 500;
-    color: var(--ui-accordion-title, #1a1a1a);
+    color: var(--crayon-accordion-title, #1a1a1a);
     transition: color 0.2s ease;
   }
 
   .item.open .trigger {
-    color: var(--ui-primary, #474bff);
+    color: var(--crayon-primary, #474bff);
   }
 
   .title {
@@ -195,9 +195,9 @@ $effect(() => {
     overflow: hidden;
     padding: 0 18px 14px 18px;
     padding-top: 0;
-    color: var(--ui-accordion-content, #444);
+    color: var(--crayon-accordion-content, #444);
     font-size: 14px;
     line-height: 1.5;
-    border-top: 1px solid var(--ui-accordion-border, #e0e0e0);
+    border-top: 1px solid var(--crayon-accordion-border, #e0e0e0);
   }
 </style>

package/dist/components/accordion-item/AccordionItem.js

@@ -1,3 +1,3 @@
-import{o as G,c as J,p as K,m,t as C,i as v,j as L,q as H,k as N,b as d,u as P,g as r,A as j,z as Q,x as R,r as c,e as S,v as U,w as V,s as g}from"../../assets/custom-element-CN6vLcFC.js";import{o as W}from"../../assets/index-client-CiUbrQq_.js";import{s as b}from"../../assets/slot-CRFQJtYY.js";import{a as X,i as Y,s as z}from"../../assets/lifecycle-BK5NY8qp.js";import{s as a}from"../../assets/attributes-o88QCNuy.js";import{b as Z}from"../../assets/this-DllEouAd.js";var ee=N('<div data-accordion-item=""><div class="trigger svelte-1f416ns" role="button" tabindex="0"><span class="trigger-inner svelte-1f416ns"><!> <span class="chevron svelte-1f416ns" aria-hidden="true">▼</span></span></div> <div role="region"><div class="panel-inner svelte-1f416ns"><!></div></div></div>');const te={hash:"svelte-1f416ns",code:".item.svelte-1f416ns {border-radius:var(--ui-radius-md, 10px);background:var(--ui-accordion-bg, #f5f5f5);border:1px solid var(--ui-accordion-border, #e0e0e0);overflow:hidden;transition:background 0.2s ease, border-color 0.2s ease;}.item.svelte-1f416ns:hover {background:var(--ui-accordion-bg-hover, #eeeeee);}.item.open.svelte-1f416ns {border-color:var(--ui-primary, #474bff);background:var(--ui-accordion-bg-open, #fafaff);}.trigger.svelte-1f416ns {cursor:pointer;user-select:none;}.trigger-inner.svelte-1f416ns {display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-weight:500;color:var(--ui-accordion-title, #1a1a1a);transition:color 0.2s ease;}.item.open.svelte-1f416ns .trigger-inner:where(.svelte-1f416ns) {color:var(--ui-primary, #474bff);}.trigger-inner.svelte-1f416ns :where(.svelte-1f416ns)::slotted(*) {flex:1;text-align:left;}.chevron.svelte-1f416ns {font-size:0.7em;opacity:0.7;transition:transform 0.25s ease;flex-shrink:0;margin-left:8px;}.item.open.svelte-1f416ns .chevron:where(.svelte-1f416ns) {transform:rotate(180deg);}.panel.svelte-1f416ns {display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease-out;}.panel.open.svelte-1f416ns {grid-template-rows:1fr;}.panel-inner.svelte-1f416ns {min-height:0;overflow:hidden;padding:0 18px 14px 18px;border-top:1px solid var(--ui-accordion-border, #e0e0e0);}"};function re(h,f){K(f,!1),X(h,te);const F=()=>H(props,"$props",_),x=()=>H(state,"$state",_),[_,M]=P();let p=m(),{title:q="Header"}=F()(),o=m(x()(!1)),i=m(x()(null));function u(){return r(p)?.parentElement??null}function w(){const e=u();if(!e)return;g(o,e.hasAttribute("open"));const t=e.getAttribute("data-accordion-index");t!==null&&g(i,t)}function k(){const e=u();e&&e.dispatchEvent(new CustomEvent("accordion-toggle",{bubbles:!0,composed:!0}))}W(()=>{w();const e=u();if(!e)return;const t=new MutationObserver(()=>{w()});return t.observe(e,{attributes:!0,attributeFilter:["open","data-accordion-index"]}),()=>t.disconnect()}),Y();var l=ee();let y;var s=d(l);s.__keydown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),k())},s.__click=k;var $=d(s),D=d($);b(D,f,"header",{},e=>{var t=j();C(()=>Q(t,q)),v(e,t)}),R(2),c($),c(s);var n=S(s,2);let E;var A=d(n),I=d(A);b(I,f,"content",{},e=>{var t=U(),O=V(t);b(O,f,"default",{},T=>{var B=j("Content");v(T,B)}),v(e,t)}),c(A),c(n),c(l),Z(l,e=>g(p,e),()=>r(p)),C(()=>{y=z(l,1,"item svelte-1f416ns",null,y,{open:r(o)}),a(s,"aria-expanded",r(o)),a(s,"aria-controls",`accordion-panel-${r(i)??""}`),a(s,"id",`accordion-trigger-${r(i)??""}`),E=z(n,1,"panel svelte-1f416ns",null,E,{open:r(o)}),a(n,"id",`accordion-panel-${r(i)??""}`),a(n,"aria-labelledby",`accordion-trigger-${r(i)??""}`),a(n,"aria-hidden",!r(o))}),v(h,l),L(),M()}G(["keydown","click"]);const __Default = (J(re,{},["header","content","default"],[],{mode:"open"}));
+import{o as G,c as J,p as K,m,t as C,i as v,j as L,q as H,k as N,b as c,u as P,g as r,A as j,z as Q,x as R,r as d,e as S,v as U,w as V,s as g}from"../../assets/custom-element-CN6vLcFC.js";import{o as W}from"../../assets/index-client-CiUbrQq_.js";import{s as b}from"../../assets/slot-CRFQJtYY.js";import{a as X,i as Y,s as z}from"../../assets/lifecycle-BK5NY8qp.js";import{s as a}from"../../assets/attributes-o88QCNuy.js";import{b as Z}from"../../assets/this-DllEouAd.js";var ee=N('<div data-accordion-item=""><div class="trigger svelte-1f416ns" role="button" tabindex="0"><span class="trigger-inner svelte-1f416ns"><!> <span class="chevron svelte-1f416ns" aria-hidden="true">▼</span></span></div> <div role="region"><div class="panel-inner svelte-1f416ns"><!></div></div></div>');const te={hash:"svelte-1f416ns",code:".item.svelte-1f416ns {border-radius:var(--crayon-radius-md, 10px);background:var(--crayon-accordion-bg, #f5f5f5);border:1px solid var(--crayon-accordion-border, #e0e0e0);overflow:hidden;transition:background 0.2s ease, border-color 0.2s ease;}.item.svelte-1f416ns:hover {background:var(--crayon-accordion-bg-hover, #eeeeee);}.item.open.svelte-1f416ns {border-color:var(--crayon-primary, #474bff);background:var(--crayon-accordion-bg-open, #fafaff);}.trigger.svelte-1f416ns {cursor:pointer;user-select:none;}.trigger-inner.svelte-1f416ns {display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-weight:500;color:var(--crayon-accordion-title, #1a1a1a);transition:color 0.2s ease;}.item.open.svelte-1f416ns .trigger-inner:where(.svelte-1f416ns) {color:var(--crayon-primary, #474bff);}.trigger-inner.svelte-1f416ns :where(.svelte-1f416ns)::slotted(*) {flex:1;text-align:left;}.chevron.svelte-1f416ns {font-size:0.7em;opacity:0.7;transition:transform 0.25s ease;flex-shrink:0;margin-left:8px;}.item.open.svelte-1f416ns .chevron:where(.svelte-1f416ns) {transform:rotate(180deg);}.panel.svelte-1f416ns {display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease-out;}.panel.open.svelte-1f416ns {grid-template-rows:1fr;}.panel-inner.svelte-1f416ns {min-height:0;overflow:hidden;padding:0 18px 14px 18px;border-top:1px solid var(--crayon-accordion-border, #e0e0e0);}"};function re(h,f){K(f,!1),X(h,te);const F=()=>H(props,"$props",_),x=()=>H(state,"$state",_),[_,M]=P();let p=m(),{title:q="Header"}=F()(),o=m(x()(!1)),i=m(x()(null));function u(){return r(p)?.parentElement??null}function y(){const e=u();if(!e)return;g(o,e.hasAttribute("open"));const t=e.getAttribute("data-accordion-index");t!==null&&g(i,t)}function w(){const e=u();e&&e.dispatchEvent(new CustomEvent("accordion-toggle",{bubbles:!0,composed:!0}))}W(()=>{y();const e=u();if(!e)return;const t=new MutationObserver(()=>{y()});return t.observe(e,{attributes:!0,attributeFilter:["open","data-accordion-index"]}),()=>t.disconnect()}),Y();var l=ee();let k;var n=c(l);n.__keydown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),w())},n.__click=w;var $=c(n),D=c($);b(D,f,"header",{},e=>{var t=j();C(()=>Q(t,q)),v(e,t)}),R(2),d($),d(n);var s=S(n,2);let E;var A=c(s),I=c(A);b(I,f,"content",{},e=>{var t=U(),O=V(t);b(O,f,"default",{},T=>{var B=j("Content");v(T,B)}),v(e,t)}),d(A),d(s),d(l),Z(l,e=>g(p,e),()=>r(p)),C(()=>{k=z(l,1,"item svelte-1f416ns",null,k,{open:r(o)}),a(n,"aria-expanded",r(o)),a(n,"aria-controls",`accordion-panel-${r(i)??""}`),a(n,"id",`accordion-trigger-${r(i)??""}`),E=z(s,1,"panel svelte-1f416ns",null,E,{open:r(o)}),a(s,"id",`accordion-panel-${r(i)??""}`),a(s,"aria-labelledby",`accordion-trigger-${r(i)??""}`),a(s,"aria-hidden",!r(o))}),v(h,l),L(),M()}G(["keydown","click"]);const __Default = (J(re,{},["header","content","default"],[],{mode:"open"}));
 customElements.define("ui-accordion-item", __Default);
 export default __Default;

package/dist/components/accordion-item/AccordionItem.svelte

@@ -74,20 +74,20 @@ onMount(() => {
 
 <style>
   .item {
-    border-radius: var(--ui-radius-md, 10px);
-    background: var(--ui-accordion-bg, #f5f5f5);
-    border: 1px solid var(--ui-accordion-border, #e0e0e0);
+    border-radius: var(--crayon-radius-md, 10px);
+    background: var(--crayon-accordion-bg, #f5f5f5);
+    border: 1px solid var(--crayon-accordion-border, #e0e0e0);
     overflow: hidden;
     transition: background 0.2s ease, border-color 0.2s ease;
   }
 
   .item:hover {
-    background: var(--ui-accordion-bg-hover, #eeeeee);
+    background: var(--crayon-accordion-bg-hover, #eeeeee);
   }
 
   .item.open {
-    border-color: var(--ui-primary, #474bff);
-    background: var(--ui-accordion-bg-open, #fafaff);
+    border-color: var(--crayon-primary, #474bff);
+    background: var(--crayon-accordion-bg-open, #fafaff);
   }
 
   .trigger {
@@ -101,12 +101,12 @@ onMount(() => {
     justify-content: space-between;
     padding: 14px 18px;
     font-weight: 500;
-    color: var(--ui-accordion-title, #1a1a1a);
+    color: var(--crayon-accordion-title, #1a1a1a);
     transition: color 0.2s ease;
   }
 
   .item.open .trigger-inner {
-    color: var(--ui-primary, #474bff);
+    color: var(--crayon-primary, #474bff);
   }
 
   .trigger-inner ::slotted(*) {
@@ -140,11 +140,11 @@ onMount(() => {
     min-height: 0;
     overflow: hidden;
     padding: 0 18px 14px 18px;
-    border-top: 1px solid var(--ui-accordion-border, #e0e0e0);
+    border-top: 1px solid var(--crayon-accordion-border, #e0e0e0);
   }
 
   .panel-inner ::slotted(*) {
-    color: var(--ui-accordion-content, #444);
+    color: var(--crayon-accordion-content, #444);
     font-size: 14px;
     line-height: 1.5;
   }

package/dist/components/avatar/Avatar.js

@@ -1,4 +1,4 @@
-import{c as P,p as Q,l as x,d as n,g as s,a as T,e as V,t as j,i as _,j as W,m as c,k as z,b as R,n as l,s as i,r as I,f as B,z as X}from"../../assets/custom-element-CN6vLcFC.js";import{i as M}from"../../assets/if-DdiIl-sg.js";import{s as Y}from"../../assets/slot-CRFQJtYY.js";import{a as Z,i as $,s as ee,c as ae}from"../../assets/lifecycle-BK5NY8qp.js";import{s as S}from"../../assets/attributes-o88QCNuy.js";import{p as o}from"../../assets/props-DbUVX42-.js";var te=z('<img class="avatar-img svelte-1sygndv"/>'),se=z('<span class="avatar-initials svelte-1sygndv"> </span>'),re=z('<span class="avatar-fallback svelte-1sygndv" aria-hidden="true"><!></span>'),ie=z('<span role="img"><!> <!></span>');const ne={hash:"svelte-1sygndv",code:`.avatar-root.svelte-1sygndv {position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",\r
-      sans-serif;font-weight:600;background-color:var(--ui-avatar-bg, #e5e7eb);color:var(--ui-avatar-color, #374151);}.avatar-root.shape-circle.svelte-1sygndv {border-radius:50%;}.avatar-root.shape-rounded.svelte-1sygndv {border-radius:var(--ui-avatar-border-radius, 8px);}.avatar-root.size-sm.svelte-1sygndv {width:var(--ui-avatar-size-sm, 32px);height:var(--ui-avatar-size-sm, 32px);font-size:var(--ui-avatar-font-size-sm, 12px);}.avatar-root.size-md.svelte-1sygndv {width:var(--ui-avatar-size-md, 40px);height:var(--ui-avatar-size-md, 40px);font-size:var(--ui-avatar-font-size-md, 14px);}.avatar-root.size-lg.svelte-1sygndv {width:var(--ui-avatar-size-lg, 56px);height:var(--ui-avatar-size-lg, 56px);font-size:var(--ui-avatar-font-size-lg, 18px);}.avatar-root.has-ring.svelte-1sygndv {box-shadow:0 0 0 2px var(--ui-avatar-ring-color, #fff);outline:2px solid var(--ui-avatar-ring-border, #e5e7eb);}.avatar-img.svelte-1sygndv {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}.avatar-fallback.svelte-1sygndv {display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.avatar-initials.svelte-1sygndv {display:flex;align-items:center;justify-content:center;line-height:1;user-select:none;}`};function le(E,r){Q(r,!1),Z(E,ne);const U=c(),A=c(),F=c();let t=o(r,"src",12,void 0),f=o(r,"alt",12,""),v=o(r,"name",12,void 0),u=o(r,"size",12,"md"),m=o(r,"shape",12,"circle"),p=o(r,"showRing",12,!1),h=o(r,"extraClass",12,""),d=c(!1),y=c(!1);function q(e){if(!e||!e.trim())return"?";const a=e.trim().split(/\s+/);if(a.length>=2){const w=a[0][0]??"",k=a[a.length-1][0]??"";return(w+k).toUpperCase()}return e.slice(0,2).toUpperCase()}let b=c(void 0);function D(){i(y,!0),i(d,!1)}function G(){i(d,!0)}x(()=>(n(t()),s(b)),()=>{t()!==s(b)&&(i(b,t()),i(y,!1),i(d,!1))}),x(()=>(n(t()),s(d),s(y)),()=>{i(U,!t()||s(d)||t()!=null&&!s(y))}),x(()=>n(v()),()=>{i(A,q(v()))}),x(()=>(n(u()),n(m()),n(p()),n(h())),()=>{i(F,`avatar-root size-${u()} shape-${m()} ${p()?"has-ring":""} ${h()}`.trim())}),T();var H={get src(){return t()},set src(e){t(e),l()},get alt(){return f()},set alt(e){f(e),l()},get name(){return v()},set name(e){v(e),l()},get size(){return u()},set size(e){u(e),l()},get shape(){return m()},set shape(e){m(e),l()},get showRing(){return p()},set showRing(e){p(e),l()},get extraClass(){return h()},set extraClass(e){h(e),l()}};$();var g=ie(),L=R(g);{var J=e=>{var a=te();j(()=>{S(a,"src",t()),S(a,"alt",f()||v()||"")}),B("load",a,D),B("error",a,G),_(e,a)};M(L,e=>{t()&&!s(d)&&e(J)})}var K=V(L,2);{var N=e=>{var a=re(),w=R(a);Y(w,r,"default",{},k=>{var C=se(),O=R(C,!0);I(C),j(()=>X(O,s(A))),_(k,C)}),I(a),_(e,a)};M(K,e=>{s(U)&&e(N)})}return I(g),j(()=>{ee(g,1,ae(s(F)),"svelte-1sygndv"),S(g,"aria-label",f()||v()||"Avatar")}),_(E,g),W(H)}const __Default = (P(le,{src:{},alt:{},name:{},size:{},shape:{},showRing:{},extraClass:{}},["default"],[],{mode:"open"}));
+import{c as P,p as Q,l as x,d as i,g as s,a as T,e as V,t as j,i as _,j as W,m as d,k as z,b as R,n as o,s as n,r as I,f as B,z as X}from"../../assets/custom-element-CN6vLcFC.js";import{i as M}from"../../assets/if-DdiIl-sg.js";import{s as Y}from"../../assets/slot-CRFQJtYY.js";import{a as Z,i as $,s as aa,c as ea}from"../../assets/lifecycle-BK5NY8qp.js";import{s as S}from"../../assets/attributes-o88QCNuy.js";import{p as l}from"../../assets/props-DbUVX42-.js";var ta=z('<img class="avatar-img svelte-1sygndv"/>'),sa=z('<span class="avatar-initials svelte-1sygndv"> </span>'),ra=z('<span class="avatar-fallback svelte-1sygndv" aria-hidden="true"><!></span>'),na=z('<span role="img"><!> <!></span>');const ia={hash:"svelte-1sygndv",code:`.avatar-root.svelte-1sygndv {position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",\r
+      sans-serif;font-weight:600;background-color:var(--crayon-avatar-bg, #e5e7eb);color:var(--crayon-avatar-color, #374151);}.avatar-root.shape-circle.svelte-1sygndv {border-radius:50%;}.avatar-root.shape-rounded.svelte-1sygndv {border-radius:var(--crayon-avatar-border-radius, 8px);}.avatar-root.size-sm.svelte-1sygndv {width:var(--crayon-avatar-size-sm, 32px);height:var(--crayon-avatar-size-sm, 32px);font-size:var(--crayon-avatar-font-size-sm, 12px);}.avatar-root.size-md.svelte-1sygndv {width:var(--crayon-avatar-size-md, 40px);height:var(--crayon-avatar-size-md, 40px);font-size:var(--crayon-avatar-font-size-md, 14px);}.avatar-root.size-lg.svelte-1sygndv {width:var(--crayon-avatar-size-lg, 56px);height:var(--crayon-avatar-size-lg, 56px);font-size:var(--crayon-avatar-font-size-lg, 18px);}.avatar-root.has-ring.svelte-1sygndv {box-shadow:0 0 0 2px var(--crayon-avatar-ring-color, #fff);outline:2px solid var(--crayon-avatar-ring-border, #e5e7eb);}.avatar-img.svelte-1sygndv {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}.avatar-fallback.svelte-1sygndv {display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.avatar-initials.svelte-1sygndv {display:flex;align-items:center;justify-content:center;line-height:1;user-select:none;}`};function oa(E,r){Q(r,!1),Z(E,ia);const U=d(),A=d(),F=d();let t=l(r,"src",12,void 0),f=l(r,"alt",12,""),v=l(r,"name",12,void 0),m=l(r,"size",12,"md"),p=l(r,"shape",12,"circle"),h=l(r,"showRing",12,!1),u=l(r,"extraClass",12,""),c=d(!1),y=d(!1);function q(a){if(!a||!a.trim())return"?";const e=a.trim().split(/\s+/);if(e.length>=2){const w=e[0][0]??"",k=e[e.length-1][0]??"";return(w+k).toUpperCase()}return a.slice(0,2).toUpperCase()}let b=d(void 0);function D(){n(y,!0),n(c,!1)}function G(){n(c,!0)}x(()=>(i(t()),s(b)),()=>{t()!==s(b)&&(n(b,t()),n(y,!1),n(c,!1))}),x(()=>(i(t()),s(c),s(y)),()=>{n(U,!t()||s(c)||t()!=null&&!s(y))}),x(()=>i(v()),()=>{n(A,q(v()))}),x(()=>(i(m()),i(p()),i(h()),i(u())),()=>{n(F,`avatar-root size-${m()} shape-${p()} ${h()?"has-ring":""} ${u()}`.trim())}),T();var H={get src(){return t()},set src(a){t(a),o()},get alt(){return f()},set alt(a){f(a),o()},get name(){return v()},set name(a){v(a),o()},get size(){return m()},set size(a){m(a),o()},get shape(){return p()},set shape(a){p(a),o()},get showRing(){return h()},set showRing(a){h(a),o()},get extraClass(){return u()},set extraClass(a){u(a),o()}};$();var g=na(),L=R(g);{var J=a=>{var e=ta();j(()=>{S(e,"src",t()),S(e,"alt",f()||v()||"")}),B("load",e,D),B("error",e,G),_(a,e)};M(L,a=>{t()&&!s(c)&&a(J)})}var K=V(L,2);{var N=a=>{var e=ra(),w=R(e);Y(w,r,"default",{},k=>{var C=sa(),O=R(C,!0);I(C),j(()=>X(O,s(A))),_(k,C)}),I(e),_(a,e)};M(K,a=>{s(U)&&a(N)})}return I(g),j(()=>{aa(g,1,ea(s(F)),"svelte-1sygndv"),S(g,"aria-label",f()||v()||"Avatar")}),_(E,g),W(H)}const __Default = (P(oa,{src:{},alt:{},name:{},size:{},shape:{},showRing:{},extraClass:{}},["default"],[],{mode:"open"}));
 customElements.define("ui-avatar", __Default);
 export default __Default;

package/dist/components/avatar/Avatar.svelte

@@ -70,8 +70,8 @@ $: rootClass = `avatar-root size-${size} shape-${shape} ${showRing ? "has-ring"
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
       sans-serif;
     font-weight: 600;
-    background-color: var(--ui-avatar-bg, #e5e7eb);
-    color: var(--ui-avatar-color, #374151);
+    background-color: var(--crayon-avatar-bg, #e5e7eb);
+    color: var(--crayon-avatar-color, #374151);
   }
 
   .avatar-root.shape-circle {
@@ -79,30 +79,30 @@ $: rootClass = `avatar-root size-${size} shape-${shape} ${showRing ? "has-ring"
   }
 
   .avatar-root.shape-rounded {
-    border-radius: var(--ui-avatar-border-radius, 8px);
+    border-radius: var(--crayon-avatar-border-radius, 8px);
   }
 
   .avatar-root.size-sm {
-    width: var(--ui-avatar-size-sm, 32px);
-    height: var(--ui-avatar-size-sm, 32px);
-    font-size: var(--ui-avatar-font-size-sm, 12px);
+    width: var(--crayon-avatar-size-sm, 32px);
+    height: var(--crayon-avatar-size-sm, 32px);
+    font-size: var(--crayon-avatar-font-size-sm, 12px);
   }
 
   .avatar-root.size-md {
-    width: var(--ui-avatar-size-md, 40px);
-    height: var(--ui-avatar-size-md, 40px);
-    font-size: var(--ui-avatar-font-size-md, 14px);
+    width: var(--crayon-avatar-size-md, 40px);
+    height: var(--crayon-avatar-size-md, 40px);
+    font-size: var(--crayon-avatar-font-size-md, 14px);
   }
 
   .avatar-root.size-lg {
-    width: var(--ui-avatar-size-lg, 56px);
-    height: var(--ui-avatar-size-lg, 56px);
-    font-size: var(--ui-avatar-font-size-lg, 18px);
+    width: var(--crayon-avatar-size-lg, 56px);
+    height: var(--crayon-avatar-size-lg, 56px);
+    font-size: var(--crayon-avatar-font-size-lg, 18px);
   }
 
   .avatar-root.has-ring {
-    box-shadow: 0 0 0 2px var(--ui-avatar-ring-color, #fff);
-    outline: 2px solid var(--ui-avatar-ring-border, #e5e7eb);
+    box-shadow: 0 0 0 2px var(--crayon-avatar-ring-color, #fff);
+    outline: 2px solid var(--crayon-avatar-ring-border, #e5e7eb);
   }
 
   .avatar-img {

package/dist/components/button/Button.js

@@ -1,4 +1,4 @@
-import{h as A,c as G,p as H,l as C,s as W,d as l,g as h,a as J,b as B,e as K,r as P,t as L,f as M,i as D,j as N,m as S,k as E,n as r}from"../../assets/custom-element-CN6vLcFC.js";import{i as O}from"../../assets/if-DdiIl-sg.js";import{s as Q}from"../../assets/slot-CRFQJtYY.js";import{t as U,a as X,i as Y,s as Z,c as $}from"../../assets/lifecycle-BK5NY8qp.js";import{s as ee}from"../../assets/attributes-o88QCNuy.js";import{p as n}from"../../assets/props-DbUVX42-.js";function te(s,t,i,f){var p=s.__style;if(A||p!==t){var o=U(t);(!A||o!==s.getAttribute("style"))&&(o==null?s.removeAttribute("style"):s.style.cssText=o),s.__style=t}return f}var re=E('<span class="spinner svelte-kv8yyl"></span>'),ne=E('<button><!> <span class="btn-content svelte-kv8yyl"><!></span></button>');const le={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;border-radius:var(--ui-radius-md, 10px);cursor:pointer;font-weight:500;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;}.btn-content.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;}\r
+import{h as A,c as G,p as H,l as C,s as W,d as o,g as f,a as J,b as B,e as K,r as P,t as L,f as M,i as D,j as N,m as S,k as E,n as r}from"../../assets/custom-element-CN6vLcFC.js";import{i as O}from"../../assets/if-DdiIl-sg.js";import{s as Q}from"../../assets/slot-CRFQJtYY.js";import{t as U,a as X,i as Y,s as Z,c as $}from"../../assets/lifecycle-BK5NY8qp.js";import{s as ee}from"../../assets/attributes-o88QCNuy.js";import{p as n}from"../../assets/props-DbUVX42-.js";function te(a,t,i,h){var p=a.__style;if(A||p!==t){var l=U(t);(!A||l!==a.getAttribute("style"))&&(l==null?a.removeAttribute("style"):a.style.cssText=l),a.__style=t}return h}var re=E('<span class="spinner svelte-kv8yyl"></span>'),ne=E('<button><!> <span class="btn-content svelte-kv8yyl"><!></span></button>');const oe={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;border-radius:var(--crayon-radius-md, 10px);cursor:pointer;font-weight:500;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;}.btn-content.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;}\r
 \r
   /* Shape: pill (full rounded) for icon + text */.shape-pill.svelte-kv8yyl {border-radius:999px;}\r
 \r
@@ -14,22 +14,31 @@ import{h as A,c as G,p as H,l as C,s as W,d as l,g as h,a as J,b as B,e as K,r a
   .shape-pill.lg.svelte-kv8yyl {padding:14px 32px;font-size:16px;}.shape-rectangle.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
   .shape-pill.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:0.5rem;}\r
 \r
-  /* Variants — respect --ui-button-custom-bg when set via backgroundColor prop */.primary.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-primary, #474bff));color:var(--ui-button-bg, #fefeff);}.primary.svelte-kv8yyl:hover {background:var(--ui-button-custom-bg-hover, var(--ui-primary-hover, #2b2399));color:#fefeff;}.secondary.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-secondary, #222121));color:#fefeff;}.secondary.svelte-kv8yyl:hover {background:var(--ui-button-custom-bg-hover, var(--ui-secondary-hover, #616061));color:#fefeff;}.outline.svelte-kv8yyl {background:var(--ui-outline, transparent);border:1px solid var(--ui-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--ui-outline-hover, transparent);border:1px solid var(--ui-outline, #222121);color:#222121;}.danger.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-danger, #e03e52));color:#fefeff;}.danger.svelte-kv8yyl:hover {background:var(\r
-      --ui-button-custom-bg-hover,\r
-      var(--ui-danger-hover, #c23445)\r
-    );color:#fefeff;}.success.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-success, #2cc84d));color:#fefeff;}.success.svelte-kv8yyl:hover {background:var(\r
-      --ui-button-custom-bg-hover,\r
-      var(--ui-success-hover, #2cc84d)\r
-    );color:#fefeff;}.white.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-white, #ffffff));color:var(--ui-text-on-light, #222121);border:1px solid var(--ui-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
-      --ui-button-custom-bg-hover,\r
-      var(--ui-white-hover, #f5f5f5)\r
-    );color:var(--ui-text-on-light, #222121);border-color:var(--ui-border-light-hover, #c0c0c0);}.ghost.svelte-kv8yyl {background:transparent;color:var(--ui-ghost-text, #616061);}.ghost.svelte-kv8yyl:hover {background:var(--ui-ghost-hover, rgba(0, 0, 0, 0.06));color:var(--ui-ghost-text-hover, #222121);}.btn-inner.svelte-kv8yyl:disabled {background:#e0e0e0;cursor:not-allowed;}.btn-inner.svelte-kv8yyl:disabled:hover {background:#e0e0e0;cursor:not-allowed;}.spinner.svelte-kv8yyl {width:14px;height:14px;border:2px solid white;border-top-color:transparent;border-radius:50%;display:inline-block;margin-right:6px;\r
+  /* Variants — respect --crayon-button-custom-bg when set via backgroundColor prop */.primary.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-primary, #ff4782));color:var(--crayon-button-bg, #fefeff);}.primary.svelte-kv8yyl:hover {background:var(\r
+      --crayon-button-custom-bg-hover,\r
+      var(--crayon-primary-hover, #cf0e4c)\r
+    );color:#fefeff;}.secondary.svelte-kv8yyl {background:var(\r
+      --crayon-button-custom-bg,\r
+      var(--crayon-secondary, #222121)\r
+    );color:#fefeff;}.secondary.svelte-kv8yyl:hover {background:var(\r
+      --crayon-button-custom-bg-hover,\r
+      var(--crayon-secondary-hover, #616061)\r
+    );color:#fefeff;}.outline.svelte-kv8yyl {background:var(--crayon-outline, transparent);border:1px solid var(--crayon-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--crayon-outline-hover, transparent);border:1px solid var(--crayon-outline, #222121);color:#222121;}.danger.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-danger, #e03e52));color:#fefeff;}.danger.svelte-kv8yyl:hover {background:var(\r
+      --crayon-button-custom-bg-hover,\r
+      var(--crayon-danger-hover, #c23445)\r
+    );color:#fefeff;}.success.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-success, #2cc84d));color:#fefeff;}.success.svelte-kv8yyl:hover {background:var(\r
+      --crayon-button-custom-bg-hover,\r
+      var(--crayon-success-hover, #2cc84d)\r
+    );color:#fefeff;}.white.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));color:var(--crayon-text-on-light, #222121);border:1px solid var(--crayon-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
+      --crayon-button-custom-bg-hover,\r
+      var(--crayon-white-hover, #f5f5f5)\r
+    );color:var(--crayon-text-on-light, #222121);border-color:var(--crayon-border-light-hover, #c0c0c0);}.ghost.svelte-kv8yyl {background:transparent;color:var(--crayon-ghost-text, #616061);}.ghost.svelte-kv8yyl:hover {background:var(--crayon-ghost-hover, rgba(0, 0, 0, 0.06));color:var(--crayon-ghost-text-hover, #222121);}.btn-inner.svelte-kv8yyl:disabled {background:#e0e0e0;cursor:not-allowed;}.btn-inner.svelte-kv8yyl:disabled:hover {background:#e0e0e0;cursor:not-allowed;}.spinner.svelte-kv8yyl {width:14px;height:14px;border:2px solid white;border-top-color:transparent;border-radius:50%;display:inline-block;margin-right:6px;\r
     animation: svelte-kv8yyl-spin 0.6s linear infinite;}\r
 \r
   @keyframes svelte-kv8yyl-spin {\r
     to {\r
       transform: rotate(360deg);\r
     }\r
-  }`};function se(s,t){H(t,!1),X(s,le);const i=S(),f=S(),p=S();let o=n(t,"variant",12,"primary"),k=n(t,"size",12,"md"),m=n(t,"shape",12,"rectangle"),x=n(t,"disabled",12,!1),w=n(t,"loading",12,!1),d=n(t,"color",12,void 0),z=n(t,"type",12,"button"),u=n(t,"backgroundColor",12,void 0),v=n(t,"fontSize",12,void 0),c=n(t,"borderRadius",12,void 0),y=n(t,"borderWidth",12,void 0),g=n(t,"fontWeight",12,void 0),b=n(t,"padding",12,void 0),_=n(t,"extraClass",12,"");function I(e){(x()||w())&&(e.preventDefault(),e.stopImmediatePropagation())}C(()=>(l(d()),l(u()),l(v()),l(c()),l(y()),l(g()),l(b())),()=>{W(i,[d()!=null&&`--ui-button-bg:${d()}`,u()!=null&&`--ui-button-custom-bg:${u()}`,v()!=null&&`font-size:${v()}`,c()!=null&&`border-radius:${c()}`,y()!=null&&`border-width:${y()}`,g()!=null&&`font-weight:${g()}`,b()!=null&&`padding:${b()}`].filter(Boolean))}),C(()=>h(i),()=>{W(f,h(i).length>0?h(i).join("; "):void 0)}),C(()=>(l(o()),l(k()),l(m()),l(_())),()=>{W(p,`btn-inner ${o()} ${k()} shape-${m()} ${_()}`.trim())}),J();var T={get variant(){return o()},set variant(e){o(e),r()},get size(){return k()},set size(e){k(e),r()},get shape(){return m()},set shape(e){m(e),r()},get disabled(){return x()},set disabled(e){x(e),r()},get loading(){return w()},set loading(e){w(e),r()},get color(){return d()},set color(e){d(e),r()},get type(){return z()},set type(e){z(e),r()},get backgroundColor(){return u()},set backgroundColor(e){u(e),r()},get fontSize(){return v()},set fontSize(e){v(e),r()},get borderRadius(){return c()},set borderRadius(e){c(e),r()},get borderWidth(){return y()},set borderWidth(e){y(e),r()},get fontWeight(){return g()},set fontWeight(e){g(e),r()},get padding(){return b()},set padding(e){b(e),r()},get extraClass(){return _()},set extraClass(e){_(e),r()}};Y();var a=ne(),R=B(a);{var V=e=>{var F=re();D(e,F)};O(R,e=>{w()&&e(V)})}var j=K(R,2),q=B(j);return Q(q,t,"default",{},null),P(j),P(a),L(()=>{ee(a,"type",z()),Z(a,1,$(h(p)),"svelte-kv8yyl"),a.disabled=x(),te(a,h(f))}),M("click",a,I),D(s,a),N(T)}const __Default = (G(se,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["default"],[],{mode:"open"}));
+  }`};function ae(a,t){H(t,!1),X(a,oe);const i=S(),h=S(),p=S();let l=n(t,"variant",12,"primary"),k=n(t,"size",12,"md"),m=n(t,"shape",12,"rectangle"),x=n(t,"disabled",12,!1),w=n(t,"loading",12,!1),c=n(t,"color",12,void 0),z=n(t,"type",12,"button"),d=n(t,"backgroundColor",12,void 0),v=n(t,"fontSize",12,void 0),y=n(t,"borderRadius",12,void 0),u=n(t,"borderWidth",12,void 0),g=n(t,"fontWeight",12,void 0),b=n(t,"padding",12,void 0),_=n(t,"extraClass",12,"");function I(e){(x()||w())&&(e.preventDefault(),e.stopImmediatePropagation())}C(()=>(o(c()),o(d()),o(v()),o(y()),o(u()),o(g()),o(b())),()=>{W(i,[c()!=null&&`--crayon-button-bg:${c()}`,d()!=null&&`--crayon-button-custom-bg:${d()}`,v()!=null&&`font-size:${v()}`,y()!=null&&`border-radius:${y()}`,u()!=null&&`border-width:${u()}`,g()!=null&&`font-weight:${g()}`,b()!=null&&`padding:${b()}`].filter(Boolean))}),C(()=>f(i),()=>{W(h,f(i).length>0?f(i).join("; "):void 0)}),C(()=>(o(l()),o(k()),o(m()),o(_())),()=>{W(p,`btn-inner ${l()} ${k()} shape-${m()} ${_()}`.trim())}),J();var T={get variant(){return l()},set variant(e){l(e),r()},get size(){return k()},set size(e){k(e),r()},get shape(){return m()},set shape(e){m(e),r()},get disabled(){return x()},set disabled(e){x(e),r()},get loading(){return w()},set loading(e){w(e),r()},get color(){return c()},set color(e){c(e),r()},get type(){return z()},set type(e){z(e),r()},get backgroundColor(){return d()},set backgroundColor(e){d(e),r()},get fontSize(){return v()},set fontSize(e){v(e),r()},get borderRadius(){return y()},set borderRadius(e){y(e),r()},get borderWidth(){return u()},set borderWidth(e){u(e),r()},get fontWeight(){return g()},set fontWeight(e){g(e),r()},get padding(){return b()},set padding(e){b(e),r()},get extraClass(){return _()},set extraClass(e){_(e),r()}};Y();var s=ne(),R=B(s);{var V=e=>{var F=re();D(e,F)};O(R,e=>{w()&&e(V)})}var j=K(R,2),q=B(j);return Q(q,t,"default",{},null),P(j),P(s),L(()=>{ee(s,"type",z()),Z(s,1,$(f(p)),"svelte-kv8yyl"),s.disabled=x(),te(s,f(h))}),M("click",s,I),D(a,s),N(T)}const __Default = (G(ae,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["default"],[],{mode:"open"}));
 customElements.define("ui-button", __Default);
 export default __Default;

package/dist/components/button/Button.svelte

@@ -16,8 +16,8 @@ export let fontWeight = void 0;
 export let padding = void 0;
 export let extraClass = "";
 $: styleParts = [
-  color != null && `--ui-button-bg:${color}`,
-  backgroundColor != null && `--ui-button-custom-bg:${backgroundColor}`,
+  color != null && `--crayon-button-bg:${color}`,
+  backgroundColor != null && `--crayon-button-custom-bg:${backgroundColor}`,
   fontSize != null && `font-size:${fontSize}`,
   borderRadius != null && `border-radius:${borderRadius}`,
   borderWidth != null && `border-width:${borderWidth}`,
@@ -56,7 +56,7 @@ function handleClick(event) {
 
   .btn-inner {
     border: none;
-    border-radius: var(--ui-radius-md, 10px);
+    border-radius: var(--crayon-radius-md, 10px);
     cursor: pointer;
     font-weight: 500;
     transition: all 0.2s ease;
@@ -141,88 +141,97 @@ function handleClick(event) {
     gap: 0.5rem;
   }
 
-  /* Variants — respect --ui-button-custom-bg when set via backgroundColor prop */
+  /* Variants — respect --crayon-button-custom-bg when set via backgroundColor prop */
   .primary {
-    background: var(--ui-button-custom-bg, var(--ui-primary, #474bff));
-    color: var(--ui-button-bg, #fefeff);
+    background: var(--crayon-button-custom-bg, var(--crayon-primary, #ff4782));
+    color: var(--crayon-button-bg, #fefeff);
   }
 
   .primary:hover {
-    background: var(--ui-button-custom-bg-hover, var(--ui-primary-hover, #2b2399));
+    background: var(
+      --crayon-button-custom-bg-hover,
+      var(--crayon-primary-hover, #cf0e4c)
+    );
     color: #fefeff;
   }
 
   .secondary {
-    background: var(--ui-button-custom-bg, var(--ui-secondary, #222121));
+    background: var(
+      --crayon-button-custom-bg,
+      var(--crayon-secondary, #222121)
+    );
     color: #fefeff;
   }
 
   .secondary:hover {
-    background: var(--ui-button-custom-bg-hover, var(--ui-secondary-hover, #616061));
+    background: var(
+      --crayon-button-custom-bg-hover,
+      var(--crayon-secondary-hover, #616061)
+    );
     color: #fefeff;
   }
 
   .outline {
-    background: var(--ui-outline, transparent);
-    border: 1px solid var(--ui-outline, #222121);
+    background: var(--crayon-outline, transparent);
+    border: 1px solid var(--crayon-outline, #222121);
     color: #616061;
   }
 
   .outline:hover {
-    background: var(--ui-outline-hover, transparent);
-    border: 1px solid var(--ui-outline, #222121);
+    background: var(--crayon-outline-hover, transparent);
+    border: 1px solid var(--crayon-outline, #222121);
     color: #222121;
   }
 
   .danger {
-    background: var(--ui-button-custom-bg, var(--ui-danger, #e03e52));
+    background: var(--crayon-button-custom-bg, var(--crayon-danger, #e03e52));
     color: #fefeff;
   }
 
   .danger:hover {
     background: var(
-      --ui-button-custom-bg-hover,
-      var(--ui-danger-hover, #c23445)
+      --crayon-button-custom-bg-hover,
+      var(--crayon-danger-hover, #c23445)
     );
     color: #fefeff;
   }
 
   .success {
-    background: var(--ui-button-custom-bg, var(--ui-success, #2cc84d));
+    background: var(--crayon-button-custom-bg, var(--crayon-success, #2cc84d));
     color: #fefeff;
   }
 
   .success:hover {
     background: var(
-      --ui-button-custom-bg-hover,
-      var(--ui-success-hover, #2cc84d)
+      --crayon-button-custom-bg-hover,
+      var(--crayon-success-hover, #2cc84d)
     );
     color: #fefeff;
   }
 
   .white {
-    background: var(--ui-button-custom-bg, var(--ui-white, #ffffff));
-    color: var(--ui-text-on-light, #222121);
-    border: 1px solid var(--ui-border-light, #e0e0e0);
+    background: var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));
+    color: var(--crayon-text-on-light, #222121);
+    border: 1px solid var(--crayon-border-light, #e0e0e0);
   }
 
   .white:hover {
     background: var(
-      --ui-button-custom-bg-hover,
-      var(--ui-white-hover, #f5f5f5)
+      --crayon-button-custom-bg-hover,
+      var(--crayon-white-hover, #f5f5f5)
     );
-    color: var(--ui-text-on-light, #222121);
-    border-color: var(--ui-border-light-hover, #c0c0c0);
+    color: var(--crayon-text-on-light, #222121);
+    border-color: var(--crayon-border-light-hover, #c0c0c0);
   }
 
   .ghost {
     background: transparent;
-    color: var(--ui-ghost-text, #616061);
+    color: var(--crayon-ghost-text, #616061);
   }
 
   .ghost:hover {
-    background: var(--ui-ghost-hover, rgba(0, 0, 0, 0.06));
-    color: var(--ui-ghost-text-hover, #222121);
+    background: var(--crayon-ghost-hover, rgba(0, 0, 0, 0.06));
+    color: var(--crayon-ghost-text-hover, #222121);
   }
 
   .btn-inner:disabled {

package/dist/components/card/Card.js

@@ -1,29 +1,29 @@
-import{c as G,p as J,g as o,l as K,d as y,a as P,e as m,t as Q,i as W,j as X,s as a,m as t,k as Y,b as d,n as _,r as i}from"../../assets/custom-element-CN6vLcFC.js";import{o as Z}from"../../assets/index-client-CiUbrQq_.js";import{s as l}from"../../assets/slot-CRFQJtYY.js";import{a as $,i as rr,s as n,c as er}from"../../assets/lifecycle-BK5NY8qp.js";import{b as or}from"../../assets/this-DllEouAd.js";import{p as k}from"../../assets/props-DbUVX42-.js";var ar=Y('<div><div><!></div> <div><!></div> <div class="card-body svelte-18poi8p"><!></div> <div><!></div> <div><!></div></div>');const tr={hash:"svelte-18poi8p",code:`.card-root.svelte-18poi8p {position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:var(--ui-card-font-size, 14px);line-height:1.5;color:var(--ui-card-color, #212529);background-color:var(--ui-card-bg, #fff);border:var(--ui-card-border-width, 1px) solid\r
-      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));border-radius:var(--ui-card-border-radius, 8px);box-shadow:var(--ui-card-box-shadow, none);}\r
+import{c as G,p as J,g as e,l as K,d as x,a as P,e as m,t as Q,i as W,j as X,s as a,m as t,k as Y,b as d,n as _,r as c}from"../../assets/custom-element-CN6vLcFC.js";import{o as Z}from"../../assets/index-client-CiUbrQq_.js";import{s as i}from"../../assets/slot-CRFQJtYY.js";import{a as $,i as rr,s as l,c as or}from"../../assets/lifecycle-BK5NY8qp.js";import{b as er}from"../../assets/this-DllEouAd.js";import{p as k}from"../../assets/props-DbUVX42-.js";var ar=Y('<div><div><!></div> <div><!></div> <div class="card-body svelte-18poi8p"><!></div> <div><!></div> <div><!></div></div>');const tr={hash:"svelte-18poi8p",code:`.card-root.svelte-18poi8p {position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:var(--crayon-card-font-size, 14px);line-height:1.5;color:var(--crayon-card-color, #212529);background-color:var(--crayon-card-bg, #fff);border:var(--crayon-card-border-width, 1px) solid\r
+      var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));border-radius:var(--crayon-card-border-radius, 8px);box-shadow:var(--crayon-card-box-shadow, none);}\r
 \r
-  /* Variants: default uses CSS vars above; others set bg + border + color */.card-root.variant-primary.svelte-18poi8p {background-color:var(--ui-card-primary-bg, #0d6efd);border-color:var(--ui-card-primary-border, #0d6efd);color:var(--ui-card-primary-color, #fff);}.card-root.variant-secondary.svelte-18poi8p {background-color:var(--ui-card-secondary-bg, #6c757d);border-color:var(--ui-card-secondary-border, #6c757d);color:var(--ui-card-secondary-color, #fff);}.card-root.variant-success.svelte-18poi8p {background-color:var(--ui-card-success-bg, #198754);border-color:var(--ui-card-success-border, #198754);color:var(--ui-card-success-color, #fff);}.card-root.variant-danger.svelte-18poi8p {background-color:var(--ui-card-danger-bg, #dc3545);border-color:var(--ui-card-danger-border, #dc3545);color:var(--ui-card-danger-color, #fff);}.card-root.variant-warning.svelte-18poi8p {background-color:var(--ui-card-warning-bg, #ffc107);border-color:var(--ui-card-warning-border, #ffc107);color:var(--ui-card-warning-color, #000);}.card-root.variant-info.svelte-18poi8p {background-color:var(--ui-card-info-bg, #0dcaf0);border-color:var(--ui-card-info-border, #0dcaf0);color:var(--ui-card-info-color, #000);}.card-root.variant-light.svelte-18poi8p {background-color:var(--ui-card-light-bg, #f8f9fa);border-color:var(--ui-card-light-border, #e9ecef);color:var(--ui-card-light-color, #212529);}.card-root.variant-dark.svelte-18poi8p {background-color:var(--ui-card-dark-bg, #212529);border-color:var(--ui-card-dark-border, #212529);color:var(--ui-card-dark-color, #fff);}\r
+  /* Variants: default uses CSS vars above; others set bg + border + color */.card-root.variant-primary.svelte-18poi8p {background-color:var(--crayon-card-primary-bg, #0d6efd);border-color:var(--crayon-card-primary-border, #0d6efd);color:var(--crayon-card-primary-color, #fff);}.card-root.variant-secondary.svelte-18poi8p {background-color:var(--crayon-card-secondary-bg, #6c757d);border-color:var(--crayon-card-secondary-border, #6c757d);color:var(--crayon-card-secondary-color, #fff);}.card-root.variant-success.svelte-18poi8p {background-color:var(--crayon-card-success-bg, #198754);border-color:var(--crayon-card-success-border, #198754);color:var(--crayon-card-success-color, #fff);}.card-root.variant-danger.svelte-18poi8p {background-color:var(--crayon-card-danger-bg, #dc3545);border-color:var(--crayon-card-danger-border, #dc3545);color:var(--crayon-card-danger-color, #fff);}.card-root.variant-warning.svelte-18poi8p {background-color:var(--crayon-card-warning-bg, #ffc107);border-color:var(--crayon-card-warning-border, #ffc107);color:var(--crayon-card-warning-color, #000);}.card-root.variant-info.svelte-18poi8p {background-color:var(--crayon-card-info-bg, #0dcaf0);border-color:var(--crayon-card-info-border, #0dcaf0);color:var(--crayon-card-info-color, #000);}.card-root.variant-light.svelte-18poi8p {background-color:var(--crayon-card-light-bg, #f8f9fa);border-color:var(--crayon-card-light-border, #e9ecef);color:var(--crayon-card-light-color, #212529);}.card-root.variant-dark.svelte-18poi8p {background-color:var(--crayon-card-dark-bg, #212529);border-color:var(--crayon-card-dark-border, #212529);color:var(--crayon-card-dark-color, #fff);}\r
 \r
-  /* Text alignment */.card-root.text-start.svelte-18poi8p {text-align:start;}.card-root.text-center.svelte-18poi8p {text-align:center;}.card-root.text-end.svelte-18poi8p {text-align:end;}.card-header.svelte-18poi8p {padding:var(--ui-card-header-padding-y, 0.5rem) var(--ui-card-header-padding-x, 1rem);margin-bottom:0;background-color:var(--ui-card-header-bg, rgba(0, 0, 0, 0.03));border-bottom:var(--ui-card-border-width, 1px) solid\r
-      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));border-radius:calc(var(--ui-card-border-radius, 8px) - 1px) calc(var(--ui-card-border-radius, 8px) - 1px) 0 0;}.card-root.variant-default.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:var(--ui-card-header-bg, rgba(0, 0, 0, 0.03));}.card-root.variant-primary.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
+  /* Text alignment */.card-root.text-start.svelte-18poi8p {text-align:start;}.card-root.text-center.svelte-18poi8p {text-align:center;}.card-root.text-end.svelte-18poi8p {text-align:end;}.card-header.svelte-18poi8p {padding:var(--crayon-card-header-padding-y, 0.5rem) var(--crayon-card-header-padding-x, 1rem);margin-bottom:0;background-color:var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));border-bottom:var(--crayon-card-border-width, 1px) solid\r
+      var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));border-radius:calc(var(--crayon-card-border-radius, 8px) - 1px) calc(var(--crayon-card-border-radius, 8px) - 1px) 0 0;}.card-root.variant-default.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));}.card-root.variant-primary.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
   .card-root.variant-secondary.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
   .card-root.variant-success.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
   .card-root.variant-danger.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
   .card-root.variant-warning.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
   .card-root.variant-info.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
-  .card-root.variant-dark.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:rgba(0, 0, 0, 0.2);border-bottom-color:rgba(255, 255, 255, 0.2);}.card-header.svelte-18poi8p:not(.has-content) {display:none;}.card-body.svelte-18poi8p {flex:1 1 auto;padding:var(--ui-card-body-padding-y, 1rem) var(--ui-card-body-padding-x, 1rem);}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h1),\r
+  .card-root.variant-dark.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:rgba(0, 0, 0, 0.2);border-bottom-color:rgba(255, 255, 255, 0.2);}.card-header.svelte-18poi8p:not(.has-content) {display:none;}.card-body.svelte-18poi8p {flex:1 1 auto;padding:var(--crayon-card-body-padding-y, 1rem) var(--crayon-card-body-padding-x, 1rem);}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h1),\r
   .card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h2),\r
   .card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h3),\r
   .card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h4),\r
   .card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h5),\r
-  .card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h6) {margin-top:0;margin-bottom:var(--ui-card-title-margin-bottom, 0.5rem);font-size:var(--ui-card-title-font-size, 1.25rem);font-weight:500;line-height:1.2;}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(p) {margin-top:0;margin-bottom:var(--ui-card-text-margin-bottom, 0.5rem);}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(p:last-child) {margin-bottom:0;}.card-footer.svelte-18poi8p {padding:var(--ui-card-footer-padding-y, 0.5rem) var(--ui-card-footer-padding-x, 1rem);background-color:var(--ui-card-footer-bg, rgba(0, 0, 0, 0.03));border-top:var(--ui-card-border-width, 1px) solid\r
-      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));border-radius:0 0 calc(var(--ui-card-border-radius, 8px) - 1px)\r
-      calc(var(--ui-card-border-radius, 8px) - 1px);}.card-root.variant-primary.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
+  .card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h6) {margin-top:0;margin-bottom:var(--crayon-card-title-margin-bottom, 0.5rem);font-size:var(--crayon-card-title-font-size, 1.25rem);font-weight:500;line-height:1.2;}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(p) {margin-top:0;margin-bottom:var(--crayon-card-text-margin-bottom, 0.5rem);}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(p:last-child) {margin-bottom:0;}.card-footer.svelte-18poi8p {padding:var(--crayon-card-footer-padding-y, 0.5rem) var(--crayon-card-footer-padding-x, 1rem);background-color:var(--crayon-card-footer-bg, rgba(0, 0, 0, 0.03));border-top:var(--crayon-card-border-width, 1px) solid\r
+      var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));border-radius:0 0 calc(var(--crayon-card-border-radius, 8px) - 1px)\r
+      calc(var(--crayon-card-border-radius, 8px) - 1px);}.card-root.variant-primary.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
   .card-root.variant-secondary.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
   .card-root.variant-success.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
   .card-root.variant-danger.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
   .card-root.variant-warning.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
   .card-root.variant-info.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
   .card-root.variant-dark.svelte-18poi8p .card-footer:where(.svelte-18poi8p) {background-color:rgba(0, 0, 0, 0.2);border-top-color:rgba(255, 255, 255, 0.2);}.card-footer.svelte-18poi8p:not(.has-content) {display:none;}.card-img-top-wrapper.svelte-18poi8p:not(.has-content),\r
-  .card-img-bottom-wrapper.svelte-18poi8p:not(.has-content) {display:none;}.card-img-top-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-top-left-radius:var(--ui-card-border-radius, 8px);border-top-right-radius:var(--ui-card-border-radius, 8px);}.card-img-top-wrapper.has-content.svelte-18poi8p :where(.svelte-18poi8p)::slotted(img) {display:block;width:100%;height:auto;object-fit:cover;}.card-img-bottom-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-bottom-left-radius:var(--ui-card-border-radius, 8px);border-bottom-right-radius:var(--ui-card-border-radius, 8px);}.card-img-bottom-wrapper.has-content.svelte-18poi8p :where(.svelte-18poi8p)::slotted(img) {display:block;width:100%;height:auto;object-fit:cover;}`};function dr(S,e){J(e,!1),$(S,tr);const C=t();let p=k(e,"variant",12,"default"),v=k(e,"textAlign",12,"start"),u=k(e,"extraClass",12,""),s=t(),N=t(!1),A=t(!1),I=t(!1),q=t(!1);function z(){if(!o(s))return;const r=o(s).getRootNode();if(!r)return;const T=r.querySelector('slot[name="header"]'),f=r.querySelector('slot[name="footer"]'),U=r.querySelector('slot[name="image-top"]'),D=r.querySelector('slot[name="image-bottom"]');a(N,(T?.assignedNodes().length??0)>0),a(A,(f?.assignedNodes().length??0)>0),a(I,(U?.assignedNodes().length??0)>0),a(q,(D?.assignedNodes().length??0)>0)}Z(()=>{z();const r=new MutationObserver(z),f=o(s)?.getRootNode()?.host;return f&&r.observe(f,{childList:!0,subtree:!0}),()=>r.disconnect()}),K(()=>(y(p()),y(v()),y(u())),()=>{a(C,`card-root variant-${p()} text-${v()} ${u()}`.trim())}),P();var E={get variant(){return p()},set variant(r){p(r),_()},get textAlign(){return v()},set textAlign(r){v(r),_()},get extraClass(){return u()},set extraClass(r){u(r),_()}};rr();var c=ar(),b=d(c);let j;var H=d(b);l(H,e,"image-top",{},null),i(b);var g=m(b,2);let B;var R=d(g);l(R,e,"header",{},null),i(g);var w=m(g,2),V=d(w);l(V,e,"default",{},null),i(w);var h=m(w,2);let F;var L=d(h);l(L,e,"footer",{},null),i(h);var x=m(h,2);let M;var O=d(x);return l(O,e,"image-bottom",{},null),i(x),i(c),or(c,r=>a(s,r),()=>o(s)),Q(()=>{n(c,1,er(o(C)),"svelte-18poi8p"),j=n(b,1,"card-img-top-wrapper svelte-18poi8p",null,j,{"has-content":o(I)}),B=n(g,1,"card-header svelte-18poi8p",null,B,{"has-content":o(N)}),F=n(h,1,"card-footer svelte-18poi8p",null,F,{"has-content":o(A)}),M=n(x,1,"card-img-bottom-wrapper svelte-18poi8p",null,M,{"has-content":o(q)})}),W(S,c),X(E)}const __Default = (G(dr,{variant:{},textAlign:{},extraClass:{}},["image-top","header","default","footer","image-bottom"],[],{mode:"open"}));
+  .card-img-bottom-wrapper.svelte-18poi8p:not(.has-content) {display:none;}.card-img-top-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-top-left-radius:var(--crayon-card-border-radius, 8px);border-top-right-radius:var(--crayon-card-border-radius, 8px);}.card-img-top-wrapper.has-content.svelte-18poi8p :where(.svelte-18poi8p)::slotted(img) {display:block;width:100%;height:auto;object-fit:cover;}.card-img-bottom-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-bottom-left-radius:var(--crayon-card-border-radius, 8px);border-bottom-right-radius:var(--crayon-card-border-radius, 8px);}.card-img-bottom-wrapper.has-content.svelte-18poi8p :where(.svelte-18poi8p)::slotted(img) {display:block;width:100%;height:auto;object-fit:cover;}`};function dr(S,o){J(o,!1),$(S,tr);const C=t();let p=k(o,"variant",12,"default"),v=k(o,"textAlign",12,"start"),b=k(o,"extraClass",12,""),n=t(),N=t(!1),A=t(!1),I=t(!1),q=t(!1);function z(){if(!e(n))return;const r=e(n).getRootNode();if(!r)return;const T=r.querySelector('slot[name="header"]'),f=r.querySelector('slot[name="footer"]'),U=r.querySelector('slot[name="image-top"]'),D=r.querySelector('slot[name="image-bottom"]');a(N,(T?.assignedNodes().length??0)>0),a(A,(f?.assignedNodes().length??0)>0),a(I,(U?.assignedNodes().length??0)>0),a(q,(D?.assignedNodes().length??0)>0)}Z(()=>{z();const r=new MutationObserver(z),f=e(n)?.getRootNode()?.host;return f&&r.observe(f,{childList:!0,subtree:!0}),()=>r.disconnect()}),K(()=>(x(p()),x(v()),x(b())),()=>{a(C,`card-root variant-${p()} text-${v()} ${b()}`.trim())}),P();var E={get variant(){return p()},set variant(r){p(r),_()},get textAlign(){return v()},set textAlign(r){v(r),_()},get extraClass(){return b()},set extraClass(r){b(r),_()}};rr();var s=ar(),g=d(s);let j;var H=d(g);i(H,o,"image-top",{},null),c(g);var h=m(g,2);let B;var R=d(h);i(R,o,"header",{},null),c(h);var u=m(h,2),V=d(u);i(V,o,"default",{},null),c(u);var y=m(u,2);let F;var L=d(y);i(L,o,"footer",{},null),c(y);var w=m(y,2);let M;var O=d(w);return i(O,o,"image-bottom",{},null),c(w),c(s),er(s,r=>a(n,r),()=>e(n)),Q(()=>{l(s,1,or(e(C)),"svelte-18poi8p"),j=l(g,1,"card-img-top-wrapper svelte-18poi8p",null,j,{"has-content":e(I)}),B=l(h,1,"card-header svelte-18poi8p",null,B,{"has-content":e(N)}),F=l(y,1,"card-footer svelte-18poi8p",null,F,{"has-content":e(A)}),M=l(w,1,"card-img-bottom-wrapper svelte-18poi8p",null,M,{"has-content":e(q)})}),W(S,s),X(E)}const __Default = (G(dr,{variant:{},textAlign:{},extraClass:{}},["image-top","header","default","footer","image-bottom"],[],{mode:"open"}));
 customElements.define("ui-card", __Default);
 export default __Default;