crayon-design-system-ui 0.0.2 → 0.0.3

package/dist/components/card/Card.svelte

@@ -60,63 +60,63 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
     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);
+    font-size: var(--crayon-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
-      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);
+    color: var(--crayon-card-color, #212529);
+    background-color: var(--crayon-card-bg, #fff);
+    border: var(--crayon-card-border-width, 1px) solid
+      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);
   }
 
   /* Variants: default uses CSS vars above; others set bg + border + color */
   .card-root.variant-primary {
-    background-color: var(--ui-card-primary-bg, #0d6efd);
-    border-color: var(--ui-card-primary-border, #0d6efd);
-    color: var(--ui-card-primary-color, #fff);
+    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 {
-    background-color: var(--ui-card-secondary-bg, #6c757d);
-    border-color: var(--ui-card-secondary-border, #6c757d);
-    color: var(--ui-card-secondary-color, #fff);
+    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 {
-    background-color: var(--ui-card-success-bg, #198754);
-    border-color: var(--ui-card-success-border, #198754);
-    color: var(--ui-card-success-color, #fff);
+    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 {
-    background-color: var(--ui-card-danger-bg, #dc3545);
-    border-color: var(--ui-card-danger-border, #dc3545);
-    color: var(--ui-card-danger-color, #fff);
+    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 {
-    background-color: var(--ui-card-warning-bg, #ffc107);
-    border-color: var(--ui-card-warning-border, #ffc107);
-    color: var(--ui-card-warning-color, #000);
+    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 {
-    background-color: var(--ui-card-info-bg, #0dcaf0);
-    border-color: var(--ui-card-info-border, #0dcaf0);
-    color: var(--ui-card-info-color, #000);
+    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 {
-    background-color: var(--ui-card-light-bg, #f8f9fa);
-    border-color: var(--ui-card-light-border, #e9ecef);
-    color: var(--ui-card-light-color, #212529);
+    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 {
-    background-color: var(--ui-card-dark-bg, #212529);
-    border-color: var(--ui-card-dark-border, #212529);
-    color: var(--ui-card-dark-color, #fff);
+    background-color: var(--crayon-card-dark-bg, #212529);
+    border-color: var(--crayon-card-dark-border, #212529);
+    color: var(--crayon-card-dark-color, #fff);
   }
 
   /* Text alignment */
@@ -133,16 +133,16 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
   }
 
   .card-header {
-    padding: var(--ui-card-header-padding-y, 0.5rem) var(--ui-card-header-padding-x, 1rem);
+    padding: var(--crayon-card-header-padding-y, 0.5rem) var(--crayon-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
-      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;
+    background-color: var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));
+    border-bottom: var(--crayon-card-border-width, 1px) solid
+      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 .card-header {
-    background-color: var(--ui-card-header-bg, rgba(0, 0, 0, 0.03));
+    background-color: var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));
   }
 
   .card-root.variant-primary .card-header,
@@ -162,7 +162,7 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
 
   .card-body {
     flex: 1 1 auto;
-    padding: var(--ui-card-body-padding-y, 1rem) var(--ui-card-body-padding-x, 1rem);
+    padding: var(--crayon-card-body-padding-y, 1rem) var(--crayon-card-body-padding-x, 1rem);
   }
 
   .card-body ::slotted(h1),
@@ -172,15 +172,15 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
   .card-body ::slotted(h5),
   .card-body ::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);
+    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 ::slotted(p) {
     margin-top: 0;
-    margin-bottom: var(--ui-card-text-margin-bottom, 0.5rem);
+    margin-bottom: var(--crayon-card-text-margin-bottom, 0.5rem);
   }
 
   .card-body ::slotted(p:last-child) {
@@ -188,12 +188,12 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
   }
 
   .card-footer {
-    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
-      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));
-    border-radius: 0 0 calc(var(--ui-card-border-radius, 8px) - 1px)
-      calc(var(--ui-card-border-radius, 8px) - 1px);
+    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
+      var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));
+    border-radius: 0 0 calc(var(--crayon-card-border-radius, 8px) - 1px)
+      calc(var(--crayon-card-border-radius, 8px) - 1px);
   }
 
   .card-root.variant-primary .card-footer,
@@ -218,8 +218,8 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
 
   .card-img-top-wrapper.has-content {
     overflow: hidden;
-    border-top-left-radius: var(--ui-card-border-radius, 8px);
-    border-top-right-radius: var(--ui-card-border-radius, 8px);
+    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 ::slotted(img) {
@@ -231,8 +231,8 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
 
   .card-img-bottom-wrapper.has-content {
     overflow: hidden;
-    border-bottom-left-radius: var(--ui-card-border-radius, 8px);
-    border-bottom-right-radius: var(--ui-card-border-radius, 8px);
+    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 ::slotted(img) {

package/dist/components/checkbox/Checkbox.js

@@ -1,23 +1,23 @@
-import{c as q,p as G,l as u,d as C,a as N,e as O,t as P,f as U,i as A,j as J,g as r,G as K,k as Q,b as D,n as c,m as f,s as x,x as T,r as S}from"../../assets/custom-element-CN6vLcFC.js";import{o as V}from"../../assets/index-client-CiUbrQq_.js";import{s as W}from"../../assets/slot-CRFQJtYY.js";import{a as X,i as Y,s as Z}from"../../assets/lifecycle-BK5NY8qp.js";import{r as $,s as m,a as ee,d as re}from"../../assets/attributes-o88QCNuy.js";import{b as te}from"../../assets/this-DllEouAd.js";import{p as a}from"../../assets/props-DbUVX42-.js";var oe=Q('<label><span class="checkbox-control svelte-wckrr7"><input type="checkbox" class="svelte-wckrr7"/> <span class="checkbox-box svelte-wckrr7" aria-hidden="true"></span></span> <span class="checkbox-label svelte-wckrr7"><!></span></label>');const ce={hash:"svelte-wckrr7",code:`.checkbox-root.svelte-wckrr7 {display:inline-flex;align-items:center;gap:0.5rem;font-family:system-ui,\r
+import{c as q,p as G,l as f,d as C,a as N,e as O,t as P,f as U,i as A,j as J,g as r,G as K,k as Q,b as D,n as a,m as x,s as u,x as T,r as S}from"../../assets/custom-element-CN6vLcFC.js";import{o as V}from"../../assets/index-client-CiUbrQq_.js";import{s as W}from"../../assets/slot-CRFQJtYY.js";import{a as X,i as Y,s as Z}from"../../assets/lifecycle-BK5NY8qp.js";import{r as $,s as m,a as ee,d as re}from"../../assets/attributes-o88QCNuy.js";import{b as oe}from"../../assets/this-DllEouAd.js";import{p as t}from"../../assets/props-DbUVX42-.js";var ce=Q('<label><span class="checkbox-control svelte-wckrr7"><input type="checkbox" class="svelte-wckrr7"/> <span class="checkbox-box svelte-wckrr7" aria-hidden="true"></span></span> <span class="checkbox-label svelte-wckrr7"><!></span></label>');const ae={hash:"svelte-wckrr7",code:`.checkbox-root.svelte-wckrr7 {display:inline-flex;align-items:center;gap:0.5rem;font-family:system-ui,\r
       -apple-system,\r
       BlinkMacSystemFont,\r
       "Segoe UI",\r
-      sans-serif;font-size:14px;line-height:1.3;color:var(--ui-checkbox-label-color, #111827);cursor:pointer;\r
-    /* Prevent vertical shift when state or focus changes */min-height:var(--ui-checkbox-size, 22px);}.checkbox-control.svelte-wckrr7 {position:relative;display:inline-flex;align-items:center;justify-content:center;\r
-    /* Fixed size so layout doesn’t shift when checkmark appears or on focus */width:var(--ui-checkbox-size, 22px);height:var(--ui-checkbox-size, 22px);flex-shrink:0;}.checkbox-control.svelte-wckrr7 input:where(.svelte-wckrr7) {position:absolute;inset:0;margin:0;padding:0;opacity:0;cursor:inherit;outline:none;}.checkbox-box.svelte-wckrr7 {width:var(--ui-checkbox-size, 22px);height:var(--ui-checkbox-size, 22px);min-width:var(--ui-checkbox-size, 22px);min-height:var(--ui-checkbox-size, 22px);flex-shrink:0;border-radius:var(--ui-checkbox-radius, 4px);border:2px solid var(--ui-checkbox-border-color, #111111);background-color:var(--ui-checkbox-bg, transparent);box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,\r
+      sans-serif;font-size:14px;line-height:1.3;color:var(--crayon-checkbox-label-color, #111827);cursor:pointer;\r
+    /* Prevent vertical shift when state or focus changes */min-height:var(--crayon-checkbox-size, 22px);}.checkbox-control.svelte-wckrr7 {position:relative;display:inline-flex;align-items:center;justify-content:center;\r
+    /* Fixed size so layout doesn’t shift when checkmark appears or on focus */width:var(--crayon-checkbox-size, 22px);height:var(--crayon-checkbox-size, 22px);flex-shrink:0;}.checkbox-control.svelte-wckrr7 input:where(.svelte-wckrr7) {position:absolute;inset:0;margin:0;padding:0;opacity:0;cursor:inherit;outline:none;}.checkbox-box.svelte-wckrr7 {width:var(--crayon-checkbox-size, 22px);height:var(--crayon-checkbox-size, 22px);min-width:var(--crayon-checkbox-size, 22px);min-height:var(--crayon-checkbox-size, 22px);flex-shrink:0;border-radius:var(--crayon-checkbox-radius, 4px);border:2px solid var(--crayon-checkbox-border-color, #111111);background-color:var(--crayon-checkbox-bg, transparent);box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,\r
       border-color 0.15s ease,\r
       box-shadow 0.15s ease;}\r
 \r
   /* Out of flow so checkmark/indeterminate never affect layout */.checkbox-box.svelte-wckrr7::before {content:"";position:absolute;inset:0;margin:auto;opacity:0;transition:opacity 0.1s ease,\r
       transform 0.1s ease;}\r
 \r
-  /* Checked: solid purple square with checkmark */.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--ui-checkbox-checked-bg, var(--ui-primary, #474bff));border-color:var(--ui-checkbox-checked-border, var(--ui-primary, #474bff));}.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7)::before {width:26%;height:50%;border-right:3px solid var(--ui-checkbox-check-color, #ffffff);border-bottom:3px solid var(--ui-checkbox-check-color, #ffffff);transform:rotate(45deg) translate(-8%, -8%);transform-origin:center center;opacity:1;}\r
+  /* Checked: solid purple square with checkmark */.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--crayon-checkbox-checked-bg, var(--crayon-primary, #474bff));border-color:var(--crayon-checkbox-checked-border, var(--crayon-primary, #474bff));}.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7)::before {width:26%;height:50%;border-right:3px solid var(--crayon-checkbox-check-color, #ffffff);border-bottom:3px solid var(--crayon-checkbox-check-color, #ffffff);transform:rotate(45deg) translate(-8%, -8%);transform-origin:center center;opacity:1;}\r
 \r
-  /* Indeterminate: solid purple with dash */.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--ui-checkbox-checked-bg, var(--ui-primary, #474bff));border-color:var(--ui-checkbox-checked-border, var(--ui-primary, #474bff));}.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7)::before {width:70%;height:0;border-bottom:3px solid var(--ui-checkbox-check-color, #ffffff);opacity:1;transform:none;}\r
+  /* Indeterminate: solid purple with dash */.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--crayon-checkbox-checked-bg, var(--crayon-primary, #474bff));border-color:var(--crayon-checkbox-checked-border, var(--crayon-primary, #474bff));}.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7)::before {width:70%;height:0;border-bottom:3px solid var(--crayon-checkbox-check-color, #ffffff);opacity:1;transform:none;}\r
 \r
   /* Hover + focus ring */.checkbox-root.svelte-wckrr7:not(.is-disabled)\r
     .checkbox-control:where(.svelte-wckrr7)\r
     input:where(.svelte-wckrr7):focus-visible\r
-    + .checkbox-box:where(.svelte-wckrr7) {box-shadow:0 0 0 3px var(--ui-checkbox-focus-ring, rgba(71, 75, 255, 0.45));}.checkbox-root.is-disabled.svelte-wckrr7 {cursor:not-allowed;color:var(--ui-checkbox-label-disabled, #9ca3af);}.checkbox-root.is-disabled.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {border-color:var(--ui-checkbox-border-disabled, #bdbdbc);background-color:var(--ui-checkbox-bg-disabled, #e5e7eb);}.checkbox-label.svelte-wckrr7:empty {display:none;}`};function ae(E,t){G(t,!1),X(E,ce);const d=f(),v=f(),s=f();let n=a(t,"checked",12,!1),h=a(t,"disabled",12,!1),l=a(t,"indeterminate",12,!1),p=a(t,"name",12,void 0),g=a(t,"value",12,void 0),w=a(t,"ariaLabel",12,void 0),y=a(t,"ariaDescribedby",12,void 0),_=a(t,"onchange",12,void 0);function z(e){return typeof e=="boolean"?e:e==null?!1:String(e).toLowerCase()==="true"}let b=f();function F(e){const i=e.getRootNode();return i instanceof ShadowRoot?i.host:null}function L(){r(b)&&K(b,r(b).indeterminate=r(s))}V(L);function H(e){const i=e.target;n(i.checked),r(s)&&(l(!1),L());const I={checked:i.checked,indeterminate:!1};_()?.(I),F(i)?.dispatchEvent(new CustomEvent("change",{detail:I,bubbles:!0}))}u(()=>C(n()),()=>{x(d,z(n()))}),u(()=>C(h()),()=>{x(v,z(h()))}),u(()=>C(l()),()=>{x(s,z(l()))}),u(()=>{},()=>{L()}),N();var M={get checked(){return n()},set checked(e){n(e),c()},get disabled(){return h()},set disabled(e){h(e),c()},get indeterminate(){return l()},set indeterminate(e){l(e),c()},get name(){return p()},set name(e){p(e),c()},get value(){return g()},set value(e){g(e),c()},get ariaLabel(){return w()},set ariaLabel(e){w(e),c()},get ariaDescribedby(){return y()},set ariaDescribedby(e){y(e),c()},get onchange(){return _()},set onchange(e){_(e),c()}};Y();var k=oe(),B=D(k),o=D(B);$(o),te(o,e=>x(b,e),()=>r(b)),T(2),S(B);var j=O(B,2),R=D(j);return W(R,t,"default",{},null),S(j),S(k),P(()=>{Z(k,1,`checkbox-root ${r(d)?"is-checked":""} ${r(s)?"is-indeterminate":""} ${r(v)?"is-disabled":""}`,"svelte-wckrr7"),m(o,"name",p()),ee(o,g()),re(o,r(d)),o.disabled=r(v),m(o,"aria-label",w()),m(o,"aria-describedby",y()),m(o,"aria-checked",r(s)?"mixed":r(d)?"true":"false")}),U("change",o,H),A(E,k),J(M)}const __Default = (q(ae,{checked:{},disabled:{},indeterminate:{},name:{},value:{},ariaLabel:{},ariaDescribedby:{},onchange:{}},["default"],[],{mode:"open"}));
+    + .checkbox-box:where(.svelte-wckrr7) {box-shadow:0 0 0 3px var(--crayon-checkbox-focus-ring, rgba(71, 75, 255, 0.45));}.checkbox-root.is-disabled.svelte-wckrr7 {cursor:not-allowed;color:var(--crayon-checkbox-label-disabled, #9ca3af);}.checkbox-root.is-disabled.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {border-color:var(--crayon-checkbox-border-disabled, #bdbdbc);background-color:var(--crayon-checkbox-bg-disabled, #e5e7eb);}.checkbox-label.svelte-wckrr7:empty {display:none;}`};function te(E,o){G(o,!1),X(E,ae);const d=x(),v=x(),s=x();let i=t(o,"checked",12,!1),h=t(o,"disabled",12,!1),l=t(o,"indeterminate",12,!1),p=t(o,"name",12,void 0),y=t(o,"value",12,void 0),g=t(o,"ariaLabel",12,void 0),w=t(o,"ariaDescribedby",12,void 0),_=t(o,"onchange",12,void 0);function z(e){return typeof e=="boolean"?e:e==null?!1:String(e).toLowerCase()==="true"}let b=x();function F(e){const n=e.getRootNode();return n instanceof ShadowRoot?n.host:null}function L(){r(b)&&K(b,r(b).indeterminate=r(s))}V(L);function H(e){const n=e.target;i(n.checked),r(s)&&(l(!1),L());const I={checked:n.checked,indeterminate:!1};_()?.(I),F(n)?.dispatchEvent(new CustomEvent("change",{detail:I,bubbles:!0}))}f(()=>C(i()),()=>{u(d,z(i()))}),f(()=>C(h()),()=>{u(v,z(h()))}),f(()=>C(l()),()=>{u(s,z(l()))}),f(()=>{},()=>{L()}),N();var M={get checked(){return i()},set checked(e){i(e),a()},get disabled(){return h()},set disabled(e){h(e),a()},get indeterminate(){return l()},set indeterminate(e){l(e),a()},get name(){return p()},set name(e){p(e),a()},get value(){return y()},set value(e){y(e),a()},get ariaLabel(){return g()},set ariaLabel(e){g(e),a()},get ariaDescribedby(){return w()},set ariaDescribedby(e){w(e),a()},get onchange(){return _()},set onchange(e){_(e),a()}};Y();var k=ce(),B=D(k),c=D(B);$(c),oe(c,e=>u(b,e),()=>r(b)),T(2),S(B);var j=O(B,2),R=D(j);return W(R,o,"default",{},null),S(j),S(k),P(()=>{Z(k,1,`checkbox-root ${r(d)?"is-checked":""} ${r(s)?"is-indeterminate":""} ${r(v)?"is-disabled":""}`,"svelte-wckrr7"),m(c,"name",p()),ee(c,y()),re(c,r(d)),c.disabled=r(v),m(c,"aria-label",g()),m(c,"aria-describedby",w()),m(c,"aria-checked",r(s)?"mixed":r(d)?"true":"false")}),U("change",c,H),A(E,k),J(M)}const __Default = (q(te,{checked:{},disabled:{},indeterminate:{},name:{},value:{},ariaLabel:{},ariaDescribedby:{},onchange:{}},["default"],[],{mode:"open"}));
 customElements.define("ui-checkbox", __Default);
 export default __Default;

package/dist/components/checkbox/Checkbox.svelte

@@ -82,10 +82,10 @@ function handleChange(event) {
       sans-serif;
     font-size: 14px;
     line-height: 1.3;
-    color: var(--ui-checkbox-label-color, #111827);
+    color: var(--crayon-checkbox-label-color, #111827);
     cursor: pointer;
     /* Prevent vertical shift when state or focus changes */
-    min-height: var(--ui-checkbox-size, 22px);
+    min-height: var(--crayon-checkbox-size, 22px);
   }
 
   .checkbox-control {
@@ -94,8 +94,8 @@ function handleChange(event) {
     align-items: center;
     justify-content: center;
     /* Fixed size so layout doesn’t shift when checkmark appears or on focus */
-    width: var(--ui-checkbox-size, 22px);
-    height: var(--ui-checkbox-size, 22px);
+    width: var(--crayon-checkbox-size, 22px);
+    height: var(--crayon-checkbox-size, 22px);
     flex-shrink: 0;
   }
 
@@ -110,14 +110,14 @@ function handleChange(event) {
   }
 
   .checkbox-box {
-    width: var(--ui-checkbox-size, 22px);
-    height: var(--ui-checkbox-size, 22px);
-    min-width: var(--ui-checkbox-size, 22px);
-    min-height: var(--ui-checkbox-size, 22px);
+    width: var(--crayon-checkbox-size, 22px);
+    height: var(--crayon-checkbox-size, 22px);
+    min-width: var(--crayon-checkbox-size, 22px);
+    min-height: var(--crayon-checkbox-size, 22px);
     flex-shrink: 0;
-    border-radius: var(--ui-checkbox-radius, 4px);
-    border: 2px solid var(--ui-checkbox-border-color, #111111);
-    background-color: var(--ui-checkbox-bg, transparent);
+    border-radius: var(--crayon-checkbox-radius, 4px);
+    border: 2px solid var(--crayon-checkbox-border-color, #111111);
+    background-color: var(--crayon-checkbox-bg, transparent);
     box-sizing: border-box;
     position: relative;
     display: inline-flex;
@@ -143,15 +143,15 @@ function handleChange(event) {
 
   /* Checked: solid purple square with checkmark */
   .checkbox-root.is-checked .checkbox-box {
-    background-color: var(--ui-checkbox-checked-bg, var(--ui-primary, #474bff));
-    border-color: var(--ui-checkbox-checked-border, var(--ui-primary, #474bff));
+    background-color: var(--crayon-checkbox-checked-bg, var(--crayon-primary, #474bff));
+    border-color: var(--crayon-checkbox-checked-border, var(--crayon-primary, #474bff));
   }
 
   .checkbox-root.is-checked .checkbox-box::before {
     width: 26%;
     height: 50%;
-    border-right: 3px solid var(--ui-checkbox-check-color, #ffffff);
-    border-bottom: 3px solid var(--ui-checkbox-check-color, #ffffff);
+    border-right: 3px solid var(--crayon-checkbox-check-color, #ffffff);
+    border-bottom: 3px solid var(--crayon-checkbox-check-color, #ffffff);
     transform: rotate(45deg) translate(-8%, -8%);
     transform-origin: center center;
     opacity: 1;
@@ -159,14 +159,14 @@ function handleChange(event) {
 
   /* Indeterminate: solid purple with dash */
   .checkbox-root.is-indeterminate .checkbox-box {
-    background-color: var(--ui-checkbox-checked-bg, var(--ui-primary, #474bff));
-    border-color: var(--ui-checkbox-checked-border, var(--ui-primary, #474bff));
+    background-color: var(--crayon-checkbox-checked-bg, var(--crayon-primary, #474bff));
+    border-color: var(--crayon-checkbox-checked-border, var(--crayon-primary, #474bff));
   }
 
   .checkbox-root.is-indeterminate .checkbox-box::before {
     width: 70%;
     height: 0;
-    border-bottom: 3px solid var(--ui-checkbox-check-color, #ffffff);
+    border-bottom: 3px solid var(--crayon-checkbox-check-color, #ffffff);
     opacity: 1;
     transform: none;
   }
@@ -176,18 +176,18 @@ function handleChange(event) {
     .checkbox-control
     input:focus-visible
     + .checkbox-box {
-    box-shadow: 0 0 0 3px var(--ui-checkbox-focus-ring, rgba(71, 75, 255, 0.45));
+    box-shadow: 0 0 0 3px var(--crayon-checkbox-focus-ring, rgba(71, 75, 255, 0.45));
   }
 
 
   .checkbox-root.is-disabled {
     cursor: not-allowed;
-    color: var(--ui-checkbox-label-disabled, #9ca3af);
+    color: var(--crayon-checkbox-label-disabled, #9ca3af);
   }
 
   .checkbox-root.is-disabled .checkbox-box {
-    border-color: var(--ui-checkbox-border-disabled, #bdbdbc);
-    background-color: var(--ui-checkbox-bg-disabled, #e5e7eb);
+    border-color: var(--crayon-checkbox-border-disabled, #bdbdbc);
+    background-color: var(--crayon-checkbox-bg-disabled, #e5e7eb);
   }
 
   .checkbox-label:empty {

package/dist/components/form-select/FormSelect.js

@@ -1,20 +1,20 @@
-import{C as he,D as xe,E as ye,F as we,o as Ee,c as Oe,p as ke,g as t,l as re,d as M,a as Se,e as q,t as h,y as f,i as b,j as Te,m as I,s as P,k as _,b as g,n as c,G as Ne,r as p,z as O,w as ae,H as Le}from"../../assets/custom-element-CN6vLcFC.js";import{o as qe}from"../../assets/index-client-CiUbrQq_.js";import{i as D}from"../../assets/if-DdiIl-sg.js";import{e as ie,i as se}from"../../assets/each-DkX3FjFL.js";import{s as De}from"../../assets/slot-CRFQJtYY.js";import{a as Ae,i as Ce,s as Fe,c as Me}from"../../assets/lifecycle-BK5NY8qp.js";import{s as k,c as Ie}from"../../assets/attributes-o88QCNuy.js";import{b as ne}from"../../assets/this-DllEouAd.js";import{p as v}from"../../assets/props-DbUVX42-.js";function oe(u,i,S=!1){if(u.multiple){if(i==null)return;if(!xe(i))return ye();for(var o of u.options)o.selected=i.includes(le(o));return}for(o of u.options){var T=le(o);if(we(T,i)){o.selected=!0;return}}(!S||i!==void 0)&&(u.selectedIndex=-1)}function Pe(u){var i=new MutationObserver(()=>{oe(u,u.__value)});i.observe(u,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),he(()=>{i.disconnect()})}function le(u){return"__value"in u?u.__value:u.value}var Re=_('<label class="form-select-label svelte-tlzzzs"> </label>'),Ge=_('<option disabled="" hidden=""> </option>'),je=_("<option> </option>"),He=_("<!> <!>",1),Ue=_('<option disabled="" hidden=""> </option>'),Be=_("<option> </option>"),We=_("<!> <!>",1),Je=_('<p class="form-select-hint svelte-tlzzzs"> </p>'),Ke=_('<div class="form-select-wrapper svelte-tlzzzs"><!> <select><!></select> <!> <div class="form-select-options-slot svelte-tlzzzs"><!></div></div>');const Qe={hash:"svelte-tlzzzs",code:`.form-select-wrapper.svelte-tlzzzs {display:block;}.form-select-label.svelte-tlzzzs {display:block;margin-bottom:0.375rem;font-size:var(--ui-label-font-size, 0.875rem);font-weight:500;color:var(--ui-label-color, #212529);}.form-select-hint.svelte-tlzzzs {margin:0.375rem 0 0;font-size:var(--ui-hint-font-size, 0.8125rem);color:var(--ui-hint-color, #6c757d);}.form-select-options-slot.svelte-tlzzzs {display:none;}select.svelte-tlzzzs {display:block;width:100%;padding:var(--ui-select-padding-y, 0.375rem)\r
-      var(--ui-select-indicator-padding, 2.25rem)\r
-      var(--ui-select-padding-y, 0.375rem) var(--ui-select-padding-x, 0.75rem);font-family:inherit;font-size:var(--ui-select-font-size, 1rem);font-weight:400;line-height:1.5;color:var(--ui-input-color, #212529);background-color:var(--ui-input-bg, #fff);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:16px 12px;border:var(--ui-input-border-width, 1px) solid\r
-      var(--ui-input-border-color, #dee2e6);border-radius:var(--ui-input-border-radius, 0.375rem);box-shadow:var(\r
-      --ui-input-box-shadow,\r
+import{C as he,D as ye,E as xe,F as we,o as Ee,c as Oe,p as ke,g as t,l as re,d as M,a as Se,e as q,t as h,y as f,i as b,j as Te,m as I,s as P,k as _,b as g,n as u,G as Ne,r as p,z as O,w as ae,H as Le}from"../../assets/custom-element-CN6vLcFC.js";import{o as qe}from"../../assets/index-client-CiUbrQq_.js";import{i as D}from"../../assets/if-DdiIl-sg.js";import{e as ne,i as oe}from"../../assets/each-DkX3FjFL.js";import{s as De}from"../../assets/slot-CRFQJtYY.js";import{a as Ae,i as Ce,s as Fe,c as Me}from"../../assets/lifecycle-BK5NY8qp.js";import{s as k,c as Ie}from"../../assets/attributes-o88QCNuy.js";import{b as se}from"../../assets/this-DllEouAd.js";import{p as v}from"../../assets/props-DbUVX42-.js";function ie(c,n,S=!1){if(c.multiple){if(n==null)return;if(!ye(n))return xe();for(var i of c.options)i.selected=n.includes(le(i));return}for(i of c.options){var T=le(i);if(we(T,n)){i.selected=!0;return}}(!S||n!==void 0)&&(c.selectedIndex=-1)}function Pe(c){var n=new MutationObserver(()=>{ie(c,c.__value)});n.observe(c,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),he(()=>{n.disconnect()})}function le(c){return"__value"in c?c.__value:c.value}var Re=_('<label class="form-select-label svelte-tlzzzs"> </label>'),Ge=_('<option disabled="" hidden=""> </option>'),je=_("<option> </option>"),He=_("<!> <!>",1),Ue=_('<option disabled="" hidden=""> </option>'),Be=_("<option> </option>"),We=_("<!> <!>",1),Je=_('<p class="form-select-hint svelte-tlzzzs"> </p>'),Ke=_('<div class="form-select-wrapper svelte-tlzzzs"><!> <select><!></select> <!> <div class="form-select-options-slot svelte-tlzzzs"><!></div></div>');const Qe={hash:"svelte-tlzzzs",code:`.form-select-wrapper.svelte-tlzzzs {display:block;}.form-select-label.svelte-tlzzzs {display:block;margin-bottom:0.375rem;font-size:var(--crayon-label-font-size, 0.875rem);font-weight:500;color:var(--crayon-label-color, #212529);}.form-select-hint.svelte-tlzzzs {margin:0.375rem 0 0;font-size:var(--crayon-hint-font-size, 0.8125rem);color:var(--crayon-hint-color, #6c757d);}.form-select-options-slot.svelte-tlzzzs {display:none;}select.svelte-tlzzzs {display:block;width:100%;padding:var(--crayon-select-padding-y, 0.375rem)\r
+      var(--crayon-select-indicator-padding, 2.25rem)\r
+      var(--crayon-select-padding-y, 0.375rem) var(--crayon-select-padding-x, 0.75rem);font-family:inherit;font-size:var(--crayon-select-font-size, 1rem);font-weight:400;line-height:1.5;color:var(--crayon-input-color, #212529);background-color:var(--crayon-input-bg, #fff);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:16px 12px;border:var(--crayon-input-border-width, 1px) solid\r
+      var(--crayon-input-border-color, #dee2e6);border-radius:var(--crayon-input-border-radius, 0.375rem);box-shadow:var(\r
+      --crayon-input-box-shadow,\r
       inset 0 1px 2px rgba(0, 0, 0, 0.075)\r
     );transition:border-color 0.15s ease-in-out,\r
-      box-shadow 0.15s ease-in-out;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;}select.svelte-tlzzzs:hover:not(:disabled) {border-color:var(--ui-input-hover-border-color, #adb5bd);}select.svelte-tlzzzs:focus {outline:0;border-color:var(--ui-input-focus-border-color, #86b7fe);box-shadow:0 0 0 0.25rem\r
-      var(--ui-input-focus-ring, rgba(13, 110, 253, 0.25));}select.svelte-tlzzzs:disabled {background-color:var(--ui-input-disabled-bg, #e9ecef);color:var(--ui-input-disabled-color, #6c757d);cursor:not-allowed;opacity:1;}\r
+      box-shadow 0.15s ease-in-out;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;}select.svelte-tlzzzs:hover:not(:disabled) {border-color:var(--crayon-input-hover-border-color, #adb5bd);}select.svelte-tlzzzs:focus {outline:0;border-color:var(--crayon-input-focus-border-color, #86b7fe);box-shadow:0 0 0 0.25rem\r
+      var(--crayon-input-focus-ring, rgba(13, 110, 253, 0.25));}select.svelte-tlzzzs:disabled {background-color:var(--crayon-input-disabled-bg, #e9ecef);color:var(--crayon-input-disabled-color, #6c757d);cursor:not-allowed;opacity:1;}\r
 \r
-  /* Sizes */.sm.svelte-tlzzzs {padding:var(--ui-select-padding-y-sm, 0.25rem)\r
-      var(--ui-select-indicator-padding, 2rem)\r
-      var(--ui-select-padding-y-sm, 0.25rem)\r
-      var(--ui-select-padding-x-sm, 0.5rem);font-size:var(--ui-input-font-size-sm, 0.875rem);border-radius:var(--ui-input-border-radius-sm, 0.25rem);}.md.svelte-tlzzzs {padding:var(--ui-select-padding-y, 0.375rem)\r
-      var(--ui-select-indicator-padding, 2.25rem)\r
-      var(--ui-select-padding-y, 0.375rem) var(--ui-select-padding-x, 0.75rem);font-size:var(--ui-select-font-size, 1rem);border-radius:var(--ui-input-border-radius, 0.375rem);}.lg.svelte-tlzzzs {padding:var(--ui-select-padding-y-lg, 0.5rem)\r
-      var(--ui-select-indicator-padding, 2.5rem)\r
-      var(--ui-select-padding-y-lg, 0.5rem) var(--ui-select-padding-x-lg, 1rem);font-size:var(--ui-input-font-size-lg, 1.25rem);border-radius:var(--ui-input-border-radius-lg, 0.5rem);}`};function Ve(u,i){ke(i,!1),Ae(u,Qe);const S=I();let o=v(i,"value",12,""),T=v(i,"name",12,void 0),A=v(i,"id",12,void 0),R=v(i,"size",12,"md"),G=v(i,"disabled",12,!1),j=v(i,"required",12,!1),H=v(i,"multiple",12,!1),U=v(i,"selectSize",12,void 0),B=v(i,"ariaLabel",12,void 0),W=v(i,"ariaDescribedby",12,void 0),N=v(i,"label",12,void 0),C=v(i,"hintText",12,void 0),x=v(i,"options",12,void 0),y=v(i,"placeholder",12,void 0),J=v(i,"onchange",12,void 0),m=I(),K=I(),F=I([]),w=null;const de="UI-FORM-SELECT-OPTION";function ue(e){const r=e.getRootNode();return r instanceof ShadowRoot?r.host:null}function Z(e){w&&w.disconnect(),w=new MutationObserver(()=>{Q({target:e})}),e.assignedElements().forEach(n=>{w?.observe(n,{attributes:!0,childList:!0,characterData:!0,subtree:!0})})}function Q(e){const r=e?.target??t(m)?.closest(".form-select-wrapper")?.querySelector("slot");if(!r)return;const n=r.assignedNodes(),z=n.filter(s=>s.nodeType===Node.ELEMENT_NODE&&s.tagName===de);if(z.length>0){P(F,z.map(s=>({value:s.getAttribute("value")??"",label:s.textContent?.trim()??s.getAttribute("label")??"",selected:s.hasAttribute("selected")})));return}const E=n.filter(s=>s.nodeType===Node.ELEMENT_NODE&&(s.tagName==="OPTION"||s.tagName==="OPTGROUP"));E.length>0&&t(m)&&E.forEach(s=>t(m).appendChild(s))}function ce(e){const r=e.target;o(r.value);const n={value:o()};J()?.(n),ue(r)?.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0}))}qe(()=>{const e=t(K)?.querySelector("slot");if(!e)return;const r=n=>{Q(n),Z(e)};return e.addEventListener("slotchange",r),requestAnimationFrame(()=>{Q({target:e}),Z(e)}),()=>{e.removeEventListener("slotchange",r),w?.disconnect(),w=null}}),re(()=>(t(m),M(o())),()=>{if(t(m)!=null){const e=o()!=null?String(o()):"";t(m).value!==e&&Ne(m,t(m).value=e)}}),re(()=>M(A()),()=>{P(S,A()??`ui-form-select-${Math.random().toString(36).slice(2,9)}`)}),Se();var ve={get value(){return o()},set value(e){o(e),c()},get name(){return T()},set name(e){T(e),c()},get id(){return A()},set id(e){A(e),c()},get size(){return R()},set size(e){R(e),c()},get disabled(){return G()},set disabled(e){G(e),c()},get required(){return j()},set required(e){j(e),c()},get multiple(){return H()},set multiple(e){H(e),c()},get selectSize(){return U()},set selectSize(e){U(e),c()},get ariaLabel(){return B()},set ariaLabel(e){B(e),c()},get ariaDescribedby(){return W()},set ariaDescribedby(e){W(e),c()},get label(){return N()},set label(e){N(e),c()},get hintText(){return C()},set hintText(e){C(e),c()},get options(){return x()},set options(e){x(e),c()},get placeholder(){return y()},set placeholder(e){y(e),c()},get onchange(){return J()},set onchange(e){J(e),c()}};Ce();var V=Ke(),$=g(V);{var me=e=>{var r=Re(),n=g(r,!0);p(r),h(()=>{k(r,"for",t(S)),O(n,N())}),b(e,r)};D($,e=>{N()&&e(me)})}var l=q($,2);l.__change=ce;var fe=g(l);{var be=e=>{var r=He(),n=ae(r);{var z=s=>{var a=Ge(),d=g(a,!0);p(a),a.value=a.__value="",h(()=>O(d,y())),b(s,a)};D(n,s=>{y()!=null&&s(z)})}var E=q(n,2);ie(E,1,x,se,(s,a)=>{var d=je(),Y=g(d,!0);p(d);var L={};h(()=>{O(Y,(t(a),f(()=>t(a).label))),L!==(L=(t(a),f(()=>t(a).value)))&&(d.value=(d.__value=(t(a),f(()=>t(a).value)))??"")}),b(s,d)}),b(e,r)},ge=Le(()=>(M(x()),f(()=>Array.isArray(x())&&x().length>0))),pe=e=>{var r=We(),n=ae(r);{var z=s=>{var a=Ue(),d=g(a,!0);p(a),a.value=a.__value="",h(()=>O(d,y())),b(s,a)};D(n,s=>{y()!=null&&s(z)})}var E=q(n,2);ie(E,1,()=>t(F),se,(s,a)=>{var d=Be(),Y=g(d,!0);p(d);var L={};h(()=>{Ie(d,(t(a),f(()=>t(a).selected))),O(Y,(t(a),f(()=>t(a).label))),L!==(L=(t(a),f(()=>t(a).value)))&&(d.value=(d.__value=(t(a),f(()=>t(a).value)))??"")}),b(s,d)}),b(e,r)};D(fe,e=>{t(ge)?e(be):(t(F),f(()=>t(F).length>0)&&e(pe,1))})}p(l),ne(l,e=>P(m,e),()=>t(m));var ee;Pe(l);var te=q(l,2);{var _e=e=>{var r=Je(),n=g(r,!0);p(r),h(()=>O(n,C())),b(e,r)};D(te,e=>{C()&&e(_e)})}var X=q(te,2),ze=g(X);return De(ze,i,"default",{},null),p(X),ne(X,e=>P(K,e),()=>t(K)),p(V),h(e=>{k(l,"id",t(S)),k(l,"name",T()),l.disabled=G(),l.required=j(),l.multiple=H(),k(l,"size",U()),Fe(l,1,Me(R()),"svelte-tlzzzs"),k(l,"aria-label",B()??N()),k(l,"aria-describedby",W()),ee!==(ee=e)&&(l.value=(l.__value=e)??"",oe(l,e))},[()=>(M(o()),f(()=>o()!=null?String(o()):""))]),b(u,V),Te(ve)}Ee(["change"]);const __Default = (Oe(Ve,{value:{},name:{},id:{},size:{},disabled:{},required:{},multiple:{},selectSize:{},ariaLabel:{},ariaDescribedby:{},label:{},hintText:{},options:{},placeholder:{},onchange:{}},["default"],[],{mode:"open"}));
+  /* Sizes */.sm.svelte-tlzzzs {padding:var(--crayon-select-padding-y-sm, 0.25rem)\r
+      var(--crayon-select-indicator-padding, 2rem)\r
+      var(--crayon-select-padding-y-sm, 0.25rem)\r
+      var(--crayon-select-padding-x-sm, 0.5rem);font-size:var(--crayon-input-font-size-sm, 0.875rem);border-radius:var(--crayon-input-border-radius-sm, 0.25rem);}.md.svelte-tlzzzs {padding:var(--crayon-select-padding-y, 0.375rem)\r
+      var(--crayon-select-indicator-padding, 2.25rem)\r
+      var(--crayon-select-padding-y, 0.375rem) var(--crayon-select-padding-x, 0.75rem);font-size:var(--crayon-select-font-size, 1rem);border-radius:var(--crayon-input-border-radius, 0.375rem);}.lg.svelte-tlzzzs {padding:var(--crayon-select-padding-y-lg, 0.5rem)\r
+      var(--crayon-select-indicator-padding, 2.5rem)\r
+      var(--crayon-select-padding-y-lg, 0.5rem) var(--crayon-select-padding-x-lg, 1rem);font-size:var(--crayon-input-font-size-lg, 1.25rem);border-radius:var(--crayon-input-border-radius-lg, 0.5rem);}`};function Ve(c,n){ke(n,!1),Ae(c,Qe);const S=I();let i=v(n,"value",12,""),T=v(n,"name",12,void 0),A=v(n,"id",12,void 0),R=v(n,"size",12,"md"),G=v(n,"disabled",12,!1),j=v(n,"required",12,!1),H=v(n,"multiple",12,!1),U=v(n,"selectSize",12,void 0),B=v(n,"ariaLabel",12,void 0),W=v(n,"ariaDescribedby",12,void 0),N=v(n,"label",12,void 0),C=v(n,"hintText",12,void 0),y=v(n,"options",12,void 0),x=v(n,"placeholder",12,void 0),J=v(n,"onchange",12,void 0),m=I(),K=I(),F=I([]),w=null;const de="UI-FORM-SELECT-OPTION";function ce(e){const r=e.getRootNode();return r instanceof ShadowRoot?r.host:null}function Z(e){w&&w.disconnect(),w=new MutationObserver(()=>{Q({target:e})}),e.assignedElements().forEach(s=>{w?.observe(s,{attributes:!0,childList:!0,characterData:!0,subtree:!0})})}function Q(e){const r=e?.target??t(m)?.closest(".form-select-wrapper")?.querySelector("slot");if(!r)return;const s=r.assignedNodes(),z=s.filter(o=>o.nodeType===Node.ELEMENT_NODE&&o.tagName===de);if(z.length>0){P(F,z.map(o=>({value:o.getAttribute("value")??"",label:o.textContent?.trim()??o.getAttribute("label")??"",selected:o.hasAttribute("selected")})));return}const E=s.filter(o=>o.nodeType===Node.ELEMENT_NODE&&(o.tagName==="OPTION"||o.tagName==="OPTGROUP"));E.length>0&&t(m)&&E.forEach(o=>t(m).appendChild(o))}function ue(e){const r=e.target;i(r.value);const s={value:i()};J()?.(s),ce(r)?.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0}))}qe(()=>{const e=t(K)?.querySelector("slot");if(!e)return;const r=s=>{Q(s),Z(e)};return e.addEventListener("slotchange",r),requestAnimationFrame(()=>{Q({target:e}),Z(e)}),()=>{e.removeEventListener("slotchange",r),w?.disconnect(),w=null}}),re(()=>(t(m),M(i())),()=>{if(t(m)!=null){const e=i()!=null?String(i()):"";t(m).value!==e&&Ne(m,t(m).value=e)}}),re(()=>M(A()),()=>{P(S,A()??`ui-form-select-${Math.random().toString(36).slice(2,9)}`)}),Se();var ve={get value(){return i()},set value(e){i(e),u()},get name(){return T()},set name(e){T(e),u()},get id(){return A()},set id(e){A(e),u()},get size(){return R()},set size(e){R(e),u()},get disabled(){return G()},set disabled(e){G(e),u()},get required(){return j()},set required(e){j(e),u()},get multiple(){return H()},set multiple(e){H(e),u()},get selectSize(){return U()},set selectSize(e){U(e),u()},get ariaLabel(){return B()},set ariaLabel(e){B(e),u()},get ariaDescribedby(){return W()},set ariaDescribedby(e){W(e),u()},get label(){return N()},set label(e){N(e),u()},get hintText(){return C()},set hintText(e){C(e),u()},get options(){return y()},set options(e){y(e),u()},get placeholder(){return x()},set placeholder(e){x(e),u()},get onchange(){return J()},set onchange(e){J(e),u()}};Ce();var V=Ke(),$=g(V);{var me=e=>{var r=Re(),s=g(r,!0);p(r),h(()=>{k(r,"for",t(S)),O(s,N())}),b(e,r)};D($,e=>{N()&&e(me)})}var l=q($,2);l.__change=ue;var fe=g(l);{var be=e=>{var r=He(),s=ae(r);{var z=o=>{var a=Ge(),d=g(a,!0);p(a),a.value=a.__value="",h(()=>O(d,x())),b(o,a)};D(s,o=>{x()!=null&&o(z)})}var E=q(s,2);ne(E,1,y,oe,(o,a)=>{var d=je(),Y=g(d,!0);p(d);var L={};h(()=>{O(Y,(t(a),f(()=>t(a).label))),L!==(L=(t(a),f(()=>t(a).value)))&&(d.value=(d.__value=(t(a),f(()=>t(a).value)))??"")}),b(o,d)}),b(e,r)},ge=Le(()=>(M(y()),f(()=>Array.isArray(y())&&y().length>0))),pe=e=>{var r=We(),s=ae(r);{var z=o=>{var a=Ue(),d=g(a,!0);p(a),a.value=a.__value="",h(()=>O(d,x())),b(o,a)};D(s,o=>{x()!=null&&o(z)})}var E=q(s,2);ne(E,1,()=>t(F),oe,(o,a)=>{var d=Be(),Y=g(d,!0);p(d);var L={};h(()=>{Ie(d,(t(a),f(()=>t(a).selected))),O(Y,(t(a),f(()=>t(a).label))),L!==(L=(t(a),f(()=>t(a).value)))&&(d.value=(d.__value=(t(a),f(()=>t(a).value)))??"")}),b(o,d)}),b(e,r)};D(fe,e=>{t(ge)?e(be):(t(F),f(()=>t(F).length>0)&&e(pe,1))})}p(l),se(l,e=>P(m,e),()=>t(m));var ee;Pe(l);var te=q(l,2);{var _e=e=>{var r=Je(),s=g(r,!0);p(r),h(()=>O(s,C())),b(e,r)};D(te,e=>{C()&&e(_e)})}var X=q(te,2),ze=g(X);return De(ze,n,"default",{},null),p(X),se(X,e=>P(K,e),()=>t(K)),p(V),h(e=>{k(l,"id",t(S)),k(l,"name",T()),l.disabled=G(),l.required=j(),l.multiple=H(),k(l,"size",U()),Fe(l,1,Me(R()),"svelte-tlzzzs"),k(l,"aria-label",B()??N()),k(l,"aria-describedby",W()),ee!==(ee=e)&&(l.value=(l.__value=e)??"",ie(l,e))},[()=>(M(i()),f(()=>i()!=null?String(i()):""))]),b(c,V),Te(ve)}Ee(["change"]);const __Default = (Oe(Ve,{value:{},name:{},id:{},size:{},disabled:{},required:{},multiple:{},selectSize:{},ariaLabel:{},ariaDescribedby:{},label:{},hintText:{},options:{},placeholder:{},onchange:{}},["default"],[],{mode:"open"}));
 customElements.define("ui-form-select", __Default);
 export default __Default;

package/dist/components/form-select/FormSelect.svelte

@@ -151,15 +151,15 @@ onMount(() => {
   .form-select-label {
     display: block;
     margin-bottom: 0.375rem;
-    font-size: var(--ui-label-font-size, 0.875rem);
+    font-size: var(--crayon-label-font-size, 0.875rem);
     font-weight: 500;
-    color: var(--ui-label-color, #212529);
+    color: var(--crayon-label-color, #212529);
   }
 
   .form-select-hint {
     margin: 0.375rem 0 0;
-    font-size: var(--ui-hint-font-size, 0.8125rem);
-    color: var(--ui-hint-color, #6c757d);
+    font-size: var(--crayon-hint-font-size, 0.8125rem);
+    color: var(--crayon-hint-color, #6c757d);
   }
 
   .form-select-options-slot {
@@ -169,24 +169,24 @@ onMount(() => {
   select {
     display: block;
     width: 100%;
-    padding: var(--ui-select-padding-y, 0.375rem)
-      var(--ui-select-indicator-padding, 2.25rem)
-      var(--ui-select-padding-y, 0.375rem) var(--ui-select-padding-x, 0.75rem);
+    padding: var(--crayon-select-padding-y, 0.375rem)
+      var(--crayon-select-indicator-padding, 2.25rem)
+      var(--crayon-select-padding-y, 0.375rem) var(--crayon-select-padding-x, 0.75rem);
     font-family: inherit;
-    font-size: var(--ui-select-font-size, 1rem);
+    font-size: var(--crayon-select-font-size, 1rem);
     font-weight: 400;
     line-height: 1.5;
-    color: var(--ui-input-color, #212529);
-    background-color: var(--ui-input-bg, #fff);
+    color: var(--crayon-input-color, #212529);
+    background-color: var(--crayon-input-bg, #fff);
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 0.75rem center;
     background-size: 16px 12px;
-    border: var(--ui-input-border-width, 1px) solid
-      var(--ui-input-border-color, #dee2e6);
-    border-radius: var(--ui-input-border-radius, 0.375rem);
+    border: var(--crayon-input-border-width, 1px) solid
+      var(--crayon-input-border-color, #dee2e6);
+    border-radius: var(--crayon-input-border-radius, 0.375rem);
     box-shadow: var(
-      --ui-input-box-shadow,
+      --crayon-input-box-shadow,
       inset 0 1px 2px rgba(0, 0, 0, 0.075)
     );
     transition:
@@ -199,46 +199,46 @@ onMount(() => {
   }
 
   select:hover:not(:disabled) {
-    border-color: var(--ui-input-hover-border-color, #adb5bd);
+    border-color: var(--crayon-input-hover-border-color, #adb5bd);
   }
 
   select:focus {
     outline: 0;
-    border-color: var(--ui-input-focus-border-color, #86b7fe);
+    border-color: var(--crayon-input-focus-border-color, #86b7fe);
     box-shadow: 0 0 0 0.25rem
-      var(--ui-input-focus-ring, rgba(13, 110, 253, 0.25));
+      var(--crayon-input-focus-ring, rgba(13, 110, 253, 0.25));
   }
 
   select:disabled {
-    background-color: var(--ui-input-disabled-bg, #e9ecef);
-    color: var(--ui-input-disabled-color, #6c757d);
+    background-color: var(--crayon-input-disabled-bg, #e9ecef);
+    color: var(--crayon-input-disabled-color, #6c757d);
     cursor: not-allowed;
     opacity: 1;
   }
 
   /* Sizes */
   .sm {
-    padding: var(--ui-select-padding-y-sm, 0.25rem)
-      var(--ui-select-indicator-padding, 2rem)
-      var(--ui-select-padding-y-sm, 0.25rem)
-      var(--ui-select-padding-x-sm, 0.5rem);
-    font-size: var(--ui-input-font-size-sm, 0.875rem);
-    border-radius: var(--ui-input-border-radius-sm, 0.25rem);
+    padding: var(--crayon-select-padding-y-sm, 0.25rem)
+      var(--crayon-select-indicator-padding, 2rem)
+      var(--crayon-select-padding-y-sm, 0.25rem)
+      var(--crayon-select-padding-x-sm, 0.5rem);
+    font-size: var(--crayon-input-font-size-sm, 0.875rem);
+    border-radius: var(--crayon-input-border-radius-sm, 0.25rem);
   }
 
   .md {
-    padding: var(--ui-select-padding-y, 0.375rem)
-      var(--ui-select-indicator-padding, 2.25rem)
-      var(--ui-select-padding-y, 0.375rem) var(--ui-select-padding-x, 0.75rem);
-    font-size: var(--ui-select-font-size, 1rem);
-    border-radius: var(--ui-input-border-radius, 0.375rem);
+    padding: var(--crayon-select-padding-y, 0.375rem)
+      var(--crayon-select-indicator-padding, 2.25rem)
+      var(--crayon-select-padding-y, 0.375rem) var(--crayon-select-padding-x, 0.75rem);
+    font-size: var(--crayon-select-font-size, 1rem);
+    border-radius: var(--crayon-input-border-radius, 0.375rem);
   }
 
   .lg {
-    padding: var(--ui-select-padding-y-lg, 0.5rem)
-      var(--ui-select-indicator-padding, 2.5rem)
-      var(--ui-select-padding-y-lg, 0.5rem) var(--ui-select-padding-x-lg, 1rem);
-    font-size: var(--ui-input-font-size-lg, 1.25rem);
-    border-radius: var(--ui-input-border-radius-lg, 0.5rem);
+    padding: var(--crayon-select-padding-y-lg, 0.5rem)
+      var(--crayon-select-indicator-padding, 2.5rem)
+      var(--crayon-select-padding-y-lg, 0.5rem) var(--crayon-select-padding-x-lg, 1rem);
+    font-size: var(--crayon-input-font-size-lg, 1.25rem);
+    border-radius: var(--crayon-input-border-radius-lg, 0.5rem);
   }
 </style>