crayon-design-system-ui 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -77,6 +77,14 @@ Package name: **`crayon-design-system-ui`**. A reusable Design System built usin
77
77
 
78
78
  Use **custom elements** (`import 'crayon-design-system-ui/register'` then `<ui-button>`) everywhere, or in Svelte use the named component: `import { Button } from 'crayon-design-system-ui'`.
79
79
 
80
+ **Always load design tokens in the app** so spacing, colors, and component sizing resolve correctly:
81
+
82
+ ```js
83
+ import 'crayon-design-system-ui/tokens.css';
84
+ ```
85
+
86
+ Registering components alone does **not** load `tokens.css`. Without it, many `--crayon-*` variables are undefined; components now use **fallbacks** where possible (e.g. button padding), but importing tokens is still required for the full theme and consistent look across all components.
87
+
80
88
  Example:
81
89
 
82
90
  ```
@@ -1,20 +1,24 @@
1
- import{c as te,p as re,l as B,s as H,d as o,g as f,a as ne,b as h,e as V,r as k,t as P,f as ae,h as l,i as oe,m as D,j as m,k as r,n as se}from"../../assets/custom-element-Dvi8gtP4.js";import{i as E}from"../../assets/if-CsWnYcmL.js";import{s as L}from"../../assets/slot-ppr_b4OV.js";import{a as le}from"../../assets/css-CKfYjZyl.js";import{s as F}from"../../assets/attributes-uoZEBXET.js";import{i as ie,s as ce,c as de}from"../../assets/lifecycle-C_inGHSE.js";import{s as ve}from"../../assets/style-DLVett9p.js";import{p as n}from"../../assets/props-CeFGKXVm.js";var ye=m('<span class="spinner svelte-kv8yyl"></span>'),ue=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),ge=se('<svg class="btn-icon-svg svelte-kv8yyl" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="12" fill="currentColor" opacity="0.12" class="svelte-kv8yyl"></circle><path d="M12 6.75c.414 0 .75.336.75.75v3.75H16.5a.75.75 0 1 1 0 1.5H12.75V16.5a.75.75 0 1 1-1.5 0v-3.75H7.5a.75.75 0 1 1 0-1.5h3.75V7.5c0-.414.336-.75.75-.75Z" fill="currentColor" class="svelte-kv8yyl"></path></svg>'),be=m('<span class="btn-icon svelte-kv8yyl"><!></span>'),pe=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),fe=m('<button><!> <span class="btn-content svelte-kv8yyl"><!> <!> <!></span></button>');const he={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;border-radius:var(--crayon-button-border-radius);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:var(--crayon-button-gap);}.btn-icon.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;}.btn-icon-sprite.svelte-kv8yyl {width:16px;height:16px;display:inline-block;background-image:var(--crayon-icon-sprite, url("/sprite.png"));background-repeat:no-repeat;background-size:32px 16px; /* two 16x16 icons in a single row */}.btn-icon-sprite[data-icon="plus"].svelte-kv8yyl {background-position:0 0;}.btn-icon-sprite[data-icon="delete"].svelte-kv8yyl {background-position:-16px 0;}.btn-icon-svg.svelte-kv8yyl {width:22px;margin-right:8px;}.svelte-kv8yyl::slotted(img) {width:22px;margin-right:8px;}\r
1
+ import{c as te,p as re,l as B,s as E,d as o,g as f,a as ne,b as h,e as H,r as k,t as V,f as ae,h as l,i as oe,m as D,j as m,k as r,n as se}from"../../assets/custom-element-Dvi8gtP4.js";import{i as F}from"../../assets/if-CsWnYcmL.js";import{s as L}from"../../assets/slot-ppr_b4OV.js";import{a as le}from"../../assets/css-CKfYjZyl.js";import{s as M}from"../../assets/attributes-uoZEBXET.js";import{i as ie,s as ce,c as de}from"../../assets/lifecycle-C_inGHSE.js";import{s as ve}from"../../assets/style-DLVett9p.js";import{p as n}from"../../assets/props-CeFGKXVm.js";var ye=m('<span class="spinner svelte-kv8yyl"></span>'),ue=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),ge=se('<svg class="btn-icon-svg svelte-kv8yyl" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="12" fill="currentColor" opacity="0.12" class="svelte-kv8yyl"></circle><path d="M12 6.75c.414 0 .75.336.75.75v3.75H16.5a.75.75 0 1 1 0 1.5H12.75V16.5a.75.75 0 1 1-1.5 0v-3.75H7.5a.75.75 0 1 1 0-1.5h3.75V7.5c0-.414.336-.75.75-.75Z" fill="currentColor" class="svelte-kv8yyl"></path></svg>'),pe=m('<span class="btn-icon svelte-kv8yyl"><!></span>'),be=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),fe=m('<button><!> <span class="btn-content svelte-kv8yyl"><!> <!> <!></span></button>');const he={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;\r
2
+ /* Fallbacks: required when consumers load register without tokens.css (see README). */border-radius:var(--crayon-button-border-radius, 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:var(--crayon-button-gap, 12px);}.btn-icon.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;}.btn-icon-sprite.svelte-kv8yyl {width:20px;height:20px;display:inline-block;background-image:var(--crayon-icon-sprite, url("/sprite.png"));background-repeat:no-repeat;background-size:40px 24px;}.btn-icon-sprite[data-icon="plus"].svelte-kv8yyl {background-position:-10px -1px;}.btn-icon-sprite[data-icon="delete"].svelte-kv8yyl {background-position:-16px 0;}.btn-icon-svg.svelte-kv8yyl {width:22px;margin-right:8px;}.svelte-kv8yyl::slotted(img) {width:22px;margin-right:8px;}\r
2
3
  \r
3
- /* Shape: pill (full rounded) for icon + text */.shape-pill.svelte-kv8yyl {border-radius:var(--crayon-radius-full);}\r
4
+ /* Shape: pill (full rounded) for icon + text */.shape-pill.svelte-kv8yyl {border-radius:var(--crayon-radius-full, 999px);}\r
4
5
  \r
5
- /* Shape: circle for icon-only buttons */.shape-circle.svelte-kv8yyl {border-radius:var(--crayon-radius-circle);padding:0;aspect-ratio:1;}.shape-circle.sm.svelte-kv8yyl {width:32px;height:32px;min-width:32px;min-height:32px;}.shape-circle.md.svelte-kv8yyl {width:40px;height:40px;min-width:40px;min-height:40px;}.shape-circle.lg.svelte-kv8yyl {width:48px;height:48px;min-width:48px;min-height:48px;}\r
6
+ /* Shape: circle for icon-only buttons */.shape-circle.svelte-kv8yyl {border-radius:var(--crayon-radius-circle, 50%);padding:0;aspect-ratio:1;}.shape-circle.sm.svelte-kv8yyl {width:32px;height:32px;min-width:32px;min-height:32px;}.shape-circle.md.svelte-kv8yyl {width:40px;height:40px;min-width:40px;min-height:40px;}.shape-circle.lg.svelte-kv8yyl {width:48px;height:48px;min-width:48px;min-height:48px;}\r
6
7
  \r
7
8
  /* When app adds class for full width (e.g. class="w-full" or class="full-width"), inner button fills the host */:host([class*="full"]) .btn-inner.svelte-kv8yyl,\r
8
9
  :host([class*="w-full"]) .btn-inner.svelte-kv8yyl {width:100%;box-sizing:border-box;}\r
9
10
  \r
10
11
  /* Sizes (rectangle / pill) */.shape-rectangle.sm.svelte-kv8yyl,\r
11
- .shape-pill.sm.svelte-kv8yyl {padding:var(--crayon-button-padding-y-sm) var(--crayon-button-padding-x-sm);font-size:var(--crayon-button-font-size-sm);}.shape-rectangle.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
12
- .shape-pill.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap-sm);}.shape-rectangle.md.svelte-kv8yyl,\r
13
- .shape-pill.md.svelte-kv8yyl {padding:var(--crayon-button-padding-y-md) var(--crayon-button-padding-x-md);font-size:var(--crayon-button-font-size-md);}.shape-rectangle.lg.svelte-kv8yyl,\r
14
- .shape-pill.lg.svelte-kv8yyl {padding:var(--crayon-button-padding-y-lg) var(--crayon-button-padding-x-lg);font-size:var(--crayon-button-font-size-lg);}.shape-rectangle.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
15
- .shape-pill.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap);}\r
12
+ .shape-pill.sm.svelte-kv8yyl {padding:var(--crayon-button-padding-y-sm, 6px)\r
13
+ var(--crayon-button-padding-x-sm, 12px);font-size:var(--crayon-button-font-size-sm, 12px);}.shape-rectangle.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
14
+ .shape-pill.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap-sm, 6px);}.shape-rectangle.md.svelte-kv8yyl,\r
15
+ .shape-pill.md.svelte-kv8yyl {padding:var(--crayon-button-padding-y-md, 14px)\r
16
+ var(--crayon-button-padding-x-md, 24px);font-size:var(--crayon-button-font-size-md, 14px);}.shape-rectangle.lg.svelte-kv8yyl,\r
17
+ .shape-pill.lg.svelte-kv8yyl {padding:var(--crayon-button-padding-y-lg, 14px)\r
18
+ var(--crayon-button-padding-x-lg, 32px);font-size:var(--crayon-button-font-size-lg, 16px);}.shape-rectangle.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
19
+ .shape-pill.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap, 12px);}\r
16
20
  \r
17
- /* Floating: visual treatment only; positioning is up to the consumer */.btn-inner.is-floating.svelte-kv8yyl {border-radius:var(--crayon-button-floating-radius);padding-left:22px;padding-right:26px;box-shadow:0px 6px 7px -6px #40474bff;box-shadow:var(\r
21
+ /* Floating: visual treatment only; positioning is up to the consumer */.btn-inner.is-floating.svelte-kv8yyl {border-radius:var(--crayon-button-floating-radius, 999px);padding-left:22px;padding-right:26px;box-shadow:0px 6px 7px -6px #40474bff;box-shadow:var(\r
18
22
  --crayon-button-floating-shadow,\r
19
23
  0px 6px 7px -6px #40474bff\r
20
24
  );}\r
@@ -28,22 +32,25 @@ import{c as te,p as re,l as B,s as H,d as o,g as f,a as ne,b as h,e as V,r as k,
28
32
  );color:#fefeff;}.secondary.svelte-kv8yyl:hover {background:var(\r
29
33
  --crayon-button-custom-bg-hover,\r
30
34
  var(--crayon-secondary-hover, #616061)\r
31
- );color:#fefeff;}.outline.svelte-kv8yyl {background:var(--crayon-button-custom-bg, transparent);border:var(--crayon-button-border-width) solid var(--crayon-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--crayon-outline-hover, transparent);border:var(--crayon-button-border-width) 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
35
+ );color:#fefeff;}.outline.svelte-kv8yyl {background:var(--crayon-button-custom-bg, transparent);border:var(--crayon-button-border-width, 1px) solid\r
36
+ var(--crayon-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--crayon-outline-hover, transparent);border:var(--crayon-button-border-width, 1px) solid\r
37
+ 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
32
38
  --crayon-button-custom-bg-hover,\r
33
39
  var(--crayon-danger-hover, #c23445)\r
34
40
  );color:#fefeff;}.success.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-success, #2cc84d));color:#fefeff;}.success.svelte-kv8yyl:hover {background:var(\r
35
41
  --crayon-button-custom-bg-hover,\r
36
42
  var(--crayon-success-hover, #2cc84d)\r
37
- );color:#fefeff;}.white.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));color:var(--crayon-text-on-light, #222121);border:var(--crayon-button-border-width) solid var(--crayon-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
43
+ );color:#fefeff;}.white.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));color:var(--crayon-text-on-light, #222121);border:var(--crayon-button-border-width, 1px) solid\r
44
+ var(--crayon-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
38
45
  --crayon-button-custom-bg-hover,\r
39
46
  var(--crayon-white-hover, #f5f5f5)\r
40
- );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:var(--crayon-font-size-sm);height:var(--crayon-font-size-sm);border:var(--crayon-border-width-medium) solid white;border-top-color:transparent;border-radius:var(--crayon-radius-circle);display:inline-block;margin-right:var(--crayon-spacing-3);\r
47
+ );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:var(--crayon-font-size-sm, 14px);height:var(--crayon-font-size-sm, 14px);border:var(--crayon-border-width-medium, 2px) solid white;border-top-color:transparent;border-radius:var(--crayon-radius-circle, 50%);display:inline-block;margin-right:var(--crayon-spacing-3, 6px);\r
41
48
  animation: svelte-kv8yyl-spin 0.6s linear infinite;}\r
42
49
  \r
43
50
  @keyframes svelte-kv8yyl-spin {\r
44
51
  to {\r
45
52
  transform: rotate(360deg);\r
46
53
  }\r
47
- }`};function ke(M,t){re(t,!1),le(M,he);const x=D(),Z=D(),q=D();let w=n(t,"variant",12,"primary"),_=n(t,"size",12,"md"),z=n(t,"shape",12,"rectangle"),C=n(t,"disabled",12,!1),I=n(t,"loading",12,!1),i=n(t,"color",12,void 0),R=n(t,"type",12,"button"),c=n(t,"floating",12,!1),W=n(t,"startIcon",12,void 0),S=n(t,"endIcon",12,void 0),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),j=n(t,"extraClass",12,"");function N(e){(C()||I())&&(e.preventDefault(),e.stopImmediatePropagation())}B(()=>(o(i()),o(d()),o(v()),o(y()),o(u()),o(g()),o(b())),()=>{H(x,[i()!=null&&`--crayon-button-bg:${i()}`,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))}),B(()=>f(x),()=>{H(Z,f(x).length>0?f(x).join("; "):void 0)}),B(()=>(o(w()),o(_()),o(z()),o(c()),o(j())),()=>{H(q,`btn-inner ${w()} ${_()} shape-${z()} ${c()?"is-floating":""} ${j()}`.trim())}),ne();var O={get variant(){return w()},set variant(e){w(e),r()},get size(){return _()},set size(e){_(e),r()},get shape(){return z()},set shape(e){z(e),r()},get disabled(){return C()},set disabled(e){C(e),r()},get loading(){return I()},set loading(e){I(e),r()},get color(){return i()},set color(e){i(e),r()},get type(){return R()},set type(e){R(e),r()},get floating(){return c()},set floating(e){c(e),r()},get startIcon(){return W()},set startIcon(e){W(e),r()},get endIcon(){return S()},set endIcon(e){S(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 j()},set extraClass(e){j(e),r()}};ie();var s=fe(),A=h(s);{var Q=e=>{var a=ye();l(e,a)};E(A,e=>{I()&&e(Q)})}var G=V(A,2),J=h(G);{var T=e=>{var a=ue(),p=h(a);k(a),P(()=>F(p,"data-icon",W())),l(e,a)},U=e=>{var a=be(),p=h(a);L(p,t,"icon",{},$=>{var ee=ge();l($,ee)}),k(a),l(e,a)};E(J,e=>{W()?e(T):c()&&e(U,1)})}var K=V(J,2);L(K,t,"default",{},null);var X=V(K,2);{var Y=e=>{var a=pe(),p=h(a);k(a),P(()=>F(p,"data-icon",S())),l(e,a)};E(X,e=>{S()&&e(Y)})}return k(G),k(s),P(()=>{F(s,"type",R()),ce(s,1,de(f(q)),"svelte-kv8yyl"),s.disabled=C(),ve(s,f(Z))}),ae("click",s,N),l(M,s),oe(O)}const __Default = (te(ke,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},floating:{},startIcon:{},endIcon:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["icon","default"],[],{mode:"open"}));
54
+ }`};function ke(P,t){re(t,!1),le(P,he);const x=D(),q=D(),A=D();let w=n(t,"variant",12,"primary"),_=n(t,"size",12,"md"),z=n(t,"shape",12,"rectangle"),C=n(t,"disabled",12,!1),I=n(t,"loading",12,!1),i=n(t,"color",12,void 0),j=n(t,"type",12,"button"),c=n(t,"floating",12,!1),W=n(t,"startIcon",12,void 0),S=n(t,"endIcon",12,void 0),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),p=n(t,"padding",12,void 0),R=n(t,"extraClass",12,"");function N(e){(C()||I())&&(e.preventDefault(),e.stopImmediatePropagation())}B(()=>(o(i()),o(d()),o(v()),o(y()),o(u()),o(g()),o(p())),()=>{E(x,[i()!=null&&`--crayon-button-bg:${i()}`,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()}`,p()!=null&&`padding:${p()}`].filter(Boolean))}),B(()=>f(x),()=>{E(q,f(x).length>0?f(x).join("; "):void 0)}),B(()=>(o(w()),o(_()),o(z()),o(c()),o(R())),()=>{E(A,`btn-inner ${w()} ${_()} shape-${z()} ${c()?"is-floating":""} ${R()}`.trim())}),ne();var O={get variant(){return w()},set variant(e){w(e),r()},get size(){return _()},set size(e){_(e),r()},get shape(){return z()},set shape(e){z(e),r()},get disabled(){return C()},set disabled(e){C(e),r()},get loading(){return I()},set loading(e){I(e),r()},get color(){return i()},set color(e){i(e),r()},get type(){return j()},set type(e){j(e),r()},get floating(){return c()},set floating(e){c(e),r()},get startIcon(){return W()},set startIcon(e){W(e),r()},get endIcon(){return S()},set endIcon(e){S(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 p()},set padding(e){p(e),r()},get extraClass(){return R()},set extraClass(e){R(e),r()}};ie();var s=fe(),Z=h(s);{var Q=e=>{var a=ye();l(e,a)};F(Z,e=>{I()&&e(Q)})}var G=H(Z,2),J=h(G);{var T=e=>{var a=ue(),b=h(a);k(a),V(()=>M(b,"data-icon",W())),l(e,a)},U=e=>{var a=pe(),b=h(a);L(b,t,"icon",{},$=>{var ee=ge();l($,ee)}),k(a),l(e,a)};F(J,e=>{W()?e(T):c()&&e(U,1)})}var K=H(J,2);L(K,t,"default",{},null);var X=H(K,2);{var Y=e=>{var a=be(),b=h(a);k(a),V(()=>M(b,"data-icon",S())),l(e,a)};F(X,e=>{S()&&e(Y)})}return k(G),k(s),V(()=>{M(s,"type",j()),ce(s,1,de(f(A)),"svelte-kv8yyl"),s.disabled=C(),ve(s,f(q))}),ae("click",s,N),l(P,s),oe(O)}const __Default = (te(ke,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},floating:{},startIcon:{},endIcon:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["icon","default"],[],{mode:"open"}));
48
55
  customElements.define("ui-button", __Default);
49
56
  export default __Default;
@@ -50,7 +50,8 @@ function handleClick(event) {
50
50
  <span class="btn-content">
51
51
  {#if startIcon}
52
52
  <span class="btn-icon">
53
- <span class="btn-icon-sprite" data-icon={startIcon} aria-hidden="true"></span>
53
+ <span class="btn-icon-sprite" data-icon={startIcon} aria-hidden="true"
54
+ ></span>
54
55
  </span>
55
56
  {:else if floating}
56
57
  <span class="btn-icon">
@@ -73,7 +74,8 @@ function handleClick(event) {
73
74
  <slot />
74
75
  {#if endIcon}
75
76
  <span class="btn-icon">
76
- <span class="btn-icon-sprite" data-icon={endIcon} aria-hidden="true"></span>
77
+ <span class="btn-icon-sprite" data-icon={endIcon} aria-hidden="true"
78
+ ></span>
77
79
  </span>
78
80
  {/if}
79
81
  </span>
@@ -86,7 +88,8 @@ function handleClick(event) {
86
88
 
87
89
  .btn-inner {
88
90
  border: none;
89
- border-radius: var(--crayon-button-border-radius);
91
+ /* Fallbacks: required when consumers load register without tokens.css (see README). */
92
+ border-radius: var(--crayon-button-border-radius, 10px);
90
93
  cursor: pointer;
91
94
  font-weight: 500;
92
95
  transition: all 0.2s ease;
@@ -99,7 +102,7 @@ function handleClick(event) {
99
102
  display: inline-flex;
100
103
  align-items: center;
101
104
  justify-content: center;
102
- gap: var(--crayon-button-gap);
105
+ gap: var(--crayon-button-gap, 12px);
103
106
  }
104
107
 
105
108
  .btn-icon {
@@ -109,16 +112,16 @@ function handleClick(event) {
109
112
  }
110
113
 
111
114
  .btn-icon-sprite {
112
- width: 16px;
113
- height: 16px;
115
+ width: 20px;
116
+ height: 20px;
114
117
  display: inline-block;
115
118
  background-image: var(--crayon-icon-sprite, url("/sprite.png"));
116
119
  background-repeat: no-repeat;
117
- background-size: 32px 16px; /* two 16x16 icons in a single row */
120
+ background-size: 40px 24px;
118
121
  }
119
122
 
120
123
  .btn-icon-sprite[data-icon="plus"] {
121
- background-position: 0 0;
124
+ background-position: -10px -1px;
122
125
  }
123
126
 
124
127
  .btn-icon-sprite[data-icon="delete"] {
@@ -137,12 +140,12 @@ function handleClick(event) {
137
140
 
138
141
  /* Shape: pill (full rounded) for icon + text */
139
142
  .shape-pill {
140
- border-radius: var(--crayon-radius-full);
143
+ border-radius: var(--crayon-radius-full, 999px);
141
144
  }
142
145
 
143
146
  /* Shape: circle for icon-only buttons */
144
147
  .shape-circle {
145
- border-radius: var(--crayon-radius-circle);
148
+ border-radius: var(--crayon-radius-circle, 50%);
146
149
  padding: 0;
147
150
  aspect-ratio: 1;
148
151
  }
@@ -178,35 +181,38 @@ function handleClick(event) {
178
181
  /* Sizes (rectangle / pill) */
179
182
  .shape-rectangle.sm,
180
183
  .shape-pill.sm {
181
- padding: var(--crayon-button-padding-y-sm) var(--crayon-button-padding-x-sm);
182
- font-size: var(--crayon-button-font-size-sm);
184
+ padding: var(--crayon-button-padding-y-sm, 6px)
185
+ var(--crayon-button-padding-x-sm, 12px);
186
+ font-size: var(--crayon-button-font-size-sm, 12px);
183
187
  }
184
188
 
185
189
  .shape-rectangle.sm .btn-content,
186
190
  .shape-pill.sm .btn-content {
187
- gap: var(--crayon-button-gap-sm);
191
+ gap: var(--crayon-button-gap-sm, 6px);
188
192
  }
189
193
 
190
194
  .shape-rectangle.md,
191
195
  .shape-pill.md {
192
- padding: var(--crayon-button-padding-y-md) var(--crayon-button-padding-x-md);
193
- font-size: var(--crayon-button-font-size-md);
196
+ padding: var(--crayon-button-padding-y-md, 14px)
197
+ var(--crayon-button-padding-x-md, 24px);
198
+ font-size: var(--crayon-button-font-size-md, 14px);
194
199
  }
195
200
 
196
201
  .shape-rectangle.lg,
197
202
  .shape-pill.lg {
198
- padding: var(--crayon-button-padding-y-lg) var(--crayon-button-padding-x-lg);
199
- font-size: var(--crayon-button-font-size-lg);
203
+ padding: var(--crayon-button-padding-y-lg, 14px)
204
+ var(--crayon-button-padding-x-lg, 32px);
205
+ font-size: var(--crayon-button-font-size-lg, 16px);
200
206
  }
201
207
 
202
208
  .shape-rectangle.lg .btn-content,
203
209
  .shape-pill.lg .btn-content {
204
- gap: var(--crayon-button-gap);
210
+ gap: var(--crayon-button-gap, 12px);
205
211
  }
206
212
 
207
213
  /* Floating: visual treatment only; positioning is up to the consumer */
208
214
  .btn-inner.is-floating {
209
- border-radius: var(--crayon-button-floating-radius);
215
+ border-radius: var(--crayon-button-floating-radius, 999px);
210
216
  padding-left: 22px;
211
217
  padding-right: 26px;
212
218
  box-shadow: 0px 6px 7px -6px #40474bff;
@@ -248,13 +254,15 @@ function handleClick(event) {
248
254
 
249
255
  .outline {
250
256
  background: var(--crayon-button-custom-bg, transparent);
251
- border: var(--crayon-button-border-width) solid var(--crayon-outline, #222121);
257
+ border: var(--crayon-button-border-width, 1px) solid
258
+ var(--crayon-outline, #222121);
252
259
  color: #616061;
253
260
  }
254
261
 
255
262
  .outline:hover {
256
263
  background: var(--crayon-outline-hover, transparent);
257
- border: var(--crayon-button-border-width) solid var(--crayon-outline, #222121);
264
+ border: var(--crayon-button-border-width, 1px) solid
265
+ var(--crayon-outline, #222121);
258
266
  color: #222121;
259
267
  }
260
268
 
@@ -287,7 +295,8 @@ function handleClick(event) {
287
295
  .white {
288
296
  background: var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));
289
297
  color: var(--crayon-text-on-light, #222121);
290
- border: var(--crayon-button-border-width) solid var(--crayon-border-light, #e0e0e0);
298
+ border: var(--crayon-button-border-width, 1px) solid
299
+ var(--crayon-border-light, #e0e0e0);
291
300
  }
292
301
 
293
302
  .white:hover {
@@ -320,13 +329,13 @@ function handleClick(event) {
320
329
  }
321
330
 
322
331
  .spinner {
323
- width: var(--crayon-font-size-sm);
324
- height: var(--crayon-font-size-sm);
325
- border: var(--crayon-border-width-medium) solid white;
332
+ width: var(--crayon-font-size-sm, 14px);
333
+ height: var(--crayon-font-size-sm, 14px);
334
+ border: var(--crayon-border-width-medium, 2px) solid white;
326
335
  border-top-color: transparent;
327
- border-radius: var(--crayon-radius-circle);
336
+ border-radius: var(--crayon-radius-circle, 50%);
328
337
  display: inline-block;
329
- margin-right: var(--crayon-spacing-3);
338
+ margin-right: var(--crayon-spacing-3, 6px);
330
339
  animation: spin 0.6s linear infinite;
331
340
  }
332
341
 
@@ -1,20 +1,24 @@
1
- import{l as B,a as te,t as H,e as re,b as l,p as ne,f as m,c as ae,d as o,g as f,s as V,h as oe,m as P,i as h,j as r,k as D,r as k,n as se}from"./custom-element-CcJ8WSV9.js";import{i as E}from"./if-ClpXslPg.js";import{s as L}from"./slot-C5Y5a3mg.js";import{a as le}from"./css-C9RCq3_J.js";import{s as F}from"./attributes-C4ShczQn.js";import{i as ie,s as ce,c as de}from"./lifecycle-Pq2xpGQC.js";import{s as ve}from"./style-BMG8VovL.js";import{p as n}from"./props-YueOHezF.js";var ye=m('<span class="spinner svelte-kv8yyl"></span>'),ue=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),ge=se('<svg class="btn-icon-svg svelte-kv8yyl" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="12" fill="currentColor" opacity="0.12" class="svelte-kv8yyl"></circle><path d="M12 6.75c.414 0 .75.336.75.75v3.75H16.5a.75.75 0 1 1 0 1.5H12.75V16.5a.75.75 0 1 1-1.5 0v-3.75H7.5a.75.75 0 1 1 0-1.5h3.75V7.5c0-.414.336-.75.75-.75Z" fill="currentColor" class="svelte-kv8yyl"></path></svg>'),be=m('<span class="btn-icon svelte-kv8yyl"><!></span>'),pe=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),fe=m('<button><!> <span class="btn-content svelte-kv8yyl"><!> <!> <!></span></button>');const he={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;border-radius:var(--crayon-button-border-radius);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:var(--crayon-button-gap);}.btn-icon.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;}.btn-icon-sprite.svelte-kv8yyl {width:16px;height:16px;display:inline-block;background-image:var(--crayon-icon-sprite, url("/sprite.png"));background-repeat:no-repeat;background-size:32px 16px; /* two 16x16 icons in a single row */}.btn-icon-sprite[data-icon="plus"].svelte-kv8yyl {background-position:0 0;}.btn-icon-sprite[data-icon="delete"].svelte-kv8yyl {background-position:-16px 0;}.btn-icon-svg.svelte-kv8yyl {width:22px;margin-right:8px;}.svelte-kv8yyl::slotted(img) {width:22px;margin-right:8px;}\r
1
+ import{l as B,a as te,t as E,e as re,b as l,p as ne,f as m,c as ae,d as o,g as f,s as H,h as oe,m as V,i as h,j as r,k as D,r as k,n as se}from"./custom-element-CcJ8WSV9.js";import{i as F}from"./if-ClpXslPg.js";import{s as L}from"./slot-C5Y5a3mg.js";import{a as le}from"./css-C9RCq3_J.js";import{s as M}from"./attributes-C4ShczQn.js";import{i as ie,s as ce,c as de}from"./lifecycle-Pq2xpGQC.js";import{s as ve}from"./style-BMG8VovL.js";import{p as n}from"./props-YueOHezF.js";var ye=m('<span class="spinner svelte-kv8yyl"></span>'),ue=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),ge=se('<svg class="btn-icon-svg svelte-kv8yyl" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="12" fill="currentColor" opacity="0.12" class="svelte-kv8yyl"></circle><path d="M12 6.75c.414 0 .75.336.75.75v3.75H16.5a.75.75 0 1 1 0 1.5H12.75V16.5a.75.75 0 1 1-1.5 0v-3.75H7.5a.75.75 0 1 1 0-1.5h3.75V7.5c0-.414.336-.75.75-.75Z" fill="currentColor" class="svelte-kv8yyl"></path></svg>'),pe=m('<span class="btn-icon svelte-kv8yyl"><!></span>'),be=m('<span class="btn-icon svelte-kv8yyl"><span class="btn-icon-sprite svelte-kv8yyl" aria-hidden="true"></span></span>'),fe=m('<button><!> <span class="btn-content svelte-kv8yyl"><!> <!> <!></span></button>');const he={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;\r
2
+ /* Fallbacks: required when consumers load register without tokens.css (see README). */border-radius:var(--crayon-button-border-radius, 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:var(--crayon-button-gap, 12px);}.btn-icon.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;}.btn-icon-sprite.svelte-kv8yyl {width:20px;height:20px;display:inline-block;background-image:var(--crayon-icon-sprite, url("/sprite.png"));background-repeat:no-repeat;background-size:40px 24px;}.btn-icon-sprite[data-icon="plus"].svelte-kv8yyl {background-position:-10px -1px;}.btn-icon-sprite[data-icon="delete"].svelte-kv8yyl {background-position:-16px 0;}.btn-icon-svg.svelte-kv8yyl {width:22px;margin-right:8px;}.svelte-kv8yyl::slotted(img) {width:22px;margin-right:8px;}\r
2
3
  \r
3
- /* Shape: pill (full rounded) for icon + text */.shape-pill.svelte-kv8yyl {border-radius:var(--crayon-radius-full);}\r
4
+ /* Shape: pill (full rounded) for icon + text */.shape-pill.svelte-kv8yyl {border-radius:var(--crayon-radius-full, 999px);}\r
4
5
  \r
5
- /* Shape: circle for icon-only buttons */.shape-circle.svelte-kv8yyl {border-radius:var(--crayon-radius-circle);padding:0;aspect-ratio:1;}.shape-circle.sm.svelte-kv8yyl {width:32px;height:32px;min-width:32px;min-height:32px;}.shape-circle.md.svelte-kv8yyl {width:40px;height:40px;min-width:40px;min-height:40px;}.shape-circle.lg.svelte-kv8yyl {width:48px;height:48px;min-width:48px;min-height:48px;}\r
6
+ /* Shape: circle for icon-only buttons */.shape-circle.svelte-kv8yyl {border-radius:var(--crayon-radius-circle, 50%);padding:0;aspect-ratio:1;}.shape-circle.sm.svelte-kv8yyl {width:32px;height:32px;min-width:32px;min-height:32px;}.shape-circle.md.svelte-kv8yyl {width:40px;height:40px;min-width:40px;min-height:40px;}.shape-circle.lg.svelte-kv8yyl {width:48px;height:48px;min-width:48px;min-height:48px;}\r
6
7
  \r
7
8
  /* When app adds class for full width (e.g. class="w-full" or class="full-width"), inner button fills the host */:host([class*="full"]) .btn-inner.svelte-kv8yyl,\r
8
9
  :host([class*="w-full"]) .btn-inner.svelte-kv8yyl {width:100%;box-sizing:border-box;}\r
9
10
  \r
10
11
  /* Sizes (rectangle / pill) */.shape-rectangle.sm.svelte-kv8yyl,\r
11
- .shape-pill.sm.svelte-kv8yyl {padding:var(--crayon-button-padding-y-sm) var(--crayon-button-padding-x-sm);font-size:var(--crayon-button-font-size-sm);}.shape-rectangle.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
12
- .shape-pill.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap-sm);}.shape-rectangle.md.svelte-kv8yyl,\r
13
- .shape-pill.md.svelte-kv8yyl {padding:var(--crayon-button-padding-y-md) var(--crayon-button-padding-x-md);font-size:var(--crayon-button-font-size-md);}.shape-rectangle.lg.svelte-kv8yyl,\r
14
- .shape-pill.lg.svelte-kv8yyl {padding:var(--crayon-button-padding-y-lg) var(--crayon-button-padding-x-lg);font-size:var(--crayon-button-font-size-lg);}.shape-rectangle.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
15
- .shape-pill.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap);}\r
12
+ .shape-pill.sm.svelte-kv8yyl {padding:var(--crayon-button-padding-y-sm, 6px)\r
13
+ var(--crayon-button-padding-x-sm, 12px);font-size:var(--crayon-button-font-size-sm, 12px);}.shape-rectangle.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
14
+ .shape-pill.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap-sm, 6px);}.shape-rectangle.md.svelte-kv8yyl,\r
15
+ .shape-pill.md.svelte-kv8yyl {padding:var(--crayon-button-padding-y-md, 14px)\r
16
+ var(--crayon-button-padding-x-md, 24px);font-size:var(--crayon-button-font-size-md, 14px);}.shape-rectangle.lg.svelte-kv8yyl,\r
17
+ .shape-pill.lg.svelte-kv8yyl {padding:var(--crayon-button-padding-y-lg, 14px)\r
18
+ var(--crayon-button-padding-x-lg, 32px);font-size:var(--crayon-button-font-size-lg, 16px);}.shape-rectangle.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
19
+ .shape-pill.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:var(--crayon-button-gap, 12px);}\r
16
20
  \r
17
- /* Floating: visual treatment only; positioning is up to the consumer */.btn-inner.is-floating.svelte-kv8yyl {border-radius:var(--crayon-button-floating-radius);padding-left:22px;padding-right:26px;box-shadow:0px 6px 7px -6px #40474bff;box-shadow:var(\r
21
+ /* Floating: visual treatment only; positioning is up to the consumer */.btn-inner.is-floating.svelte-kv8yyl {border-radius:var(--crayon-button-floating-radius, 999px);padding-left:22px;padding-right:26px;box-shadow:0px 6px 7px -6px #40474bff;box-shadow:var(\r
18
22
  --crayon-button-floating-shadow,\r
19
23
  0px 6px 7px -6px #40474bff\r
20
24
  );}\r
@@ -28,20 +32,23 @@ import{l as B,a as te,t as H,e as re,b as l,p as ne,f as m,c as ae,d as o,g as f
28
32
  );color:#fefeff;}.secondary.svelte-kv8yyl:hover {background:var(\r
29
33
  --crayon-button-custom-bg-hover,\r
30
34
  var(--crayon-secondary-hover, #616061)\r
31
- );color:#fefeff;}.outline.svelte-kv8yyl {background:var(--crayon-button-custom-bg, transparent);border:var(--crayon-button-border-width) solid var(--crayon-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--crayon-outline-hover, transparent);border:var(--crayon-button-border-width) 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
35
+ );color:#fefeff;}.outline.svelte-kv8yyl {background:var(--crayon-button-custom-bg, transparent);border:var(--crayon-button-border-width, 1px) solid\r
36
+ var(--crayon-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--crayon-outline-hover, transparent);border:var(--crayon-button-border-width, 1px) solid\r
37
+ 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
32
38
  --crayon-button-custom-bg-hover,\r
33
39
  var(--crayon-danger-hover, #c23445)\r
34
40
  );color:#fefeff;}.success.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-success, #2cc84d));color:#fefeff;}.success.svelte-kv8yyl:hover {background:var(\r
35
41
  --crayon-button-custom-bg-hover,\r
36
42
  var(--crayon-success-hover, #2cc84d)\r
37
- );color:#fefeff;}.white.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));color:var(--crayon-text-on-light, #222121);border:var(--crayon-button-border-width) solid var(--crayon-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
43
+ );color:#fefeff;}.white.svelte-kv8yyl {background:var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));color:var(--crayon-text-on-light, #222121);border:var(--crayon-button-border-width, 1px) solid\r
44
+ var(--crayon-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
38
45
  --crayon-button-custom-bg-hover,\r
39
46
  var(--crayon-white-hover, #f5f5f5)\r
40
- );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:var(--crayon-font-size-sm);height:var(--crayon-font-size-sm);border:var(--crayon-border-width-medium) solid white;border-top-color:transparent;border-radius:var(--crayon-radius-circle);display:inline-block;margin-right:var(--crayon-spacing-3);\r
47
+ );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:var(--crayon-font-size-sm, 14px);height:var(--crayon-font-size-sm, 14px);border:var(--crayon-border-width-medium, 2px) solid white;border-top-color:transparent;border-radius:var(--crayon-radius-circle, 50%);display:inline-block;margin-right:var(--crayon-spacing-3, 6px);\r
41
48
  animation: svelte-kv8yyl-spin 0.6s linear infinite;}\r
42
49
  \r
43
50
  @keyframes svelte-kv8yyl-spin {\r
44
51
  to {\r
45
52
  transform: rotate(360deg);\r
46
53
  }\r
47
- }`};function ke(M,t){ae(t,!1),le(M,he);const x=P(),Z=P(),q=P();let w=n(t,"variant",12,"primary"),_=n(t,"size",12,"md"),z=n(t,"shape",12,"rectangle"),C=n(t,"disabled",12,!1),I=n(t,"loading",12,!1),i=n(t,"color",12,void 0),R=n(t,"type",12,"button"),c=n(t,"floating",12,!1),W=n(t,"startIcon",12,void 0),S=n(t,"endIcon",12,void 0),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),j=n(t,"extraClass",12,"");function N(e){(C()||I())&&(e.preventDefault(),e.stopImmediatePropagation())}B(()=>(o(i()),o(d()),o(v()),o(y()),o(u()),o(g()),o(b())),()=>{D(x,[i()!=null&&`--crayon-button-bg:${i()}`,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))}),B(()=>f(x),()=>{D(Z,f(x).length>0?f(x).join("; "):void 0)}),B(()=>(o(w()),o(_()),o(z()),o(c()),o(j())),()=>{D(q,`btn-inner ${w()} ${_()} shape-${z()} ${c()?"is-floating":""} ${j()}`.trim())}),te();var O={get variant(){return w()},set variant(e){w(e),r()},get size(){return _()},set size(e){_(e),r()},get shape(){return z()},set shape(e){z(e),r()},get disabled(){return C()},set disabled(e){C(e),r()},get loading(){return I()},set loading(e){I(e),r()},get color(){return i()},set color(e){i(e),r()},get type(){return R()},set type(e){R(e),r()},get floating(){return c()},set floating(e){c(e),r()},get startIcon(){return W()},set startIcon(e){W(e),r()},get endIcon(){return S()},set endIcon(e){S(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 j()},set extraClass(e){j(e),r()}};ie();var s=fe(),A=h(s);{var Q=e=>{var a=ye();l(e,a)};E(A,e=>{I()&&e(Q)})}var G=V(A,2),J=h(G);{var T=e=>{var a=ue(),p=h(a);k(a),H(()=>F(p,"data-icon",W())),l(e,a)},U=e=>{var a=be(),p=h(a);L(p,t,"icon",{},$=>{var ee=ge();l($,ee)}),k(a),l(e,a)};E(J,e=>{W()?e(T):c()&&e(U,1)})}var K=V(J,2);L(K,t,"default",{},null);var X=V(K,2);{var Y=e=>{var a=pe(),p=h(a);k(a),H(()=>F(p,"data-icon",S())),l(e,a)};E(X,e=>{S()&&e(Y)})}return k(G),k(s),H(()=>{F(s,"type",R()),ce(s,1,de(f(q)),"svelte-kv8yyl"),s.disabled=C(),ve(s,f(Z))}),re("click",s,N),l(M,s),ne(O)}customElements.define("ui-button",oe(ke,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},floating:{},startIcon:{},endIcon:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["icon","default"],[],{mode:"open"}));export{ke as default};
54
+ }`};function ke(P,t){ae(t,!1),le(P,he);const x=V(),q=V(),A=V();let w=n(t,"variant",12,"primary"),_=n(t,"size",12,"md"),z=n(t,"shape",12,"rectangle"),C=n(t,"disabled",12,!1),I=n(t,"loading",12,!1),i=n(t,"color",12,void 0),j=n(t,"type",12,"button"),c=n(t,"floating",12,!1),W=n(t,"startIcon",12,void 0),S=n(t,"endIcon",12,void 0),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),p=n(t,"padding",12,void 0),R=n(t,"extraClass",12,"");function N(e){(C()||I())&&(e.preventDefault(),e.stopImmediatePropagation())}B(()=>(o(i()),o(d()),o(v()),o(y()),o(u()),o(g()),o(p())),()=>{D(x,[i()!=null&&`--crayon-button-bg:${i()}`,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()}`,p()!=null&&`padding:${p()}`].filter(Boolean))}),B(()=>f(x),()=>{D(q,f(x).length>0?f(x).join("; "):void 0)}),B(()=>(o(w()),o(_()),o(z()),o(c()),o(R())),()=>{D(A,`btn-inner ${w()} ${_()} shape-${z()} ${c()?"is-floating":""} ${R()}`.trim())}),te();var O={get variant(){return w()},set variant(e){w(e),r()},get size(){return _()},set size(e){_(e),r()},get shape(){return z()},set shape(e){z(e),r()},get disabled(){return C()},set disabled(e){C(e),r()},get loading(){return I()},set loading(e){I(e),r()},get color(){return i()},set color(e){i(e),r()},get type(){return j()},set type(e){j(e),r()},get floating(){return c()},set floating(e){c(e),r()},get startIcon(){return W()},set startIcon(e){W(e),r()},get endIcon(){return S()},set endIcon(e){S(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 p()},set padding(e){p(e),r()},get extraClass(){return R()},set extraClass(e){R(e),r()}};ie();var s=fe(),Z=h(s);{var Q=e=>{var a=ye();l(e,a)};F(Z,e=>{I()&&e(Q)})}var G=H(Z,2),J=h(G);{var T=e=>{var a=ue(),b=h(a);k(a),E(()=>M(b,"data-icon",W())),l(e,a)},U=e=>{var a=pe(),b=h(a);L(b,t,"icon",{},$=>{var ee=ge();l($,ee)}),k(a),l(e,a)};F(J,e=>{W()?e(T):c()&&e(U,1)})}var K=H(J,2);L(K,t,"default",{},null);var X=H(K,2);{var Y=e=>{var a=be(),b=h(a);k(a),E(()=>M(b,"data-icon",S())),l(e,a)};F(X,e=>{S()&&e(Y)})}return k(G),k(s),E(()=>{M(s,"type",j()),ce(s,1,de(f(A)),"svelte-kv8yyl"),s.disabled=C(),ve(s,f(q))}),re("click",s,N),l(P,s),ne(O)}customElements.define("ui-button",oe(ke,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},floating:{},startIcon:{},endIcon:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["icon","default"],[],{mode:"open"}));export{ke as default};
@@ -1,2 +1,2 @@
1
- const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./assets/Button-BgSoEGtb.js","./assets/custom-element-CcJ8WSV9.js","./assets/if-ClpXslPg.js","./assets/slot-C5Y5a3mg.js","./assets/css-C9RCq3_J.js","./assets/attributes-C4ShczQn.js","./assets/lifecycle-Pq2xpGQC.js","./assets/style-BMG8VovL.js","./assets/props-YueOHezF.js","./assets/Accordion-CLJVtM3-.js","./assets/each-B74lx5Dn.js","./assets/this-CyqMrS8B.js","./assets/AccordionItem-COqKC4Sj.js","./assets/index-client-BgAGEORd.js","./assets/Input-DEXz_Amu.js","./assets/Textarea-lmpAM0DF.js","./assets/FormSelect-CEY0d-Mi.js","./assets/FormSelectOption-WrGl8APi.js","./assets/Checkbox-BZ1EK0-3.js","./assets/Radio-Df72LwQD.js","./assets/Label-D8e0ASUX.js","./assets/Form-CjqX6k7B.js","./assets/Avatar-Pblto2tQ.js","./assets/Card-z8svIObS.js","./assets/Table-rFGm3Zga.js","./assets/Pagination-DfaWUoP1.js","./assets/Breadcrumb-g2i_6lWb.js","./assets/Tabs-C89gsE6f.js","./assets/TabsItem-ClME9Swd.js"])))=>i.map(i=>d[i]);
2
- const P="modulepreload",L=function(d,l){return new URL(d,l).href},p={},t=function(l,s,a){let c=Promise.resolve();if(s&&s.length>0){let f=function(e){return Promise.all(e.map(_=>Promise.resolve(_).then(n=>({status:"fulfilled",value:n}),n=>({status:"rejected",reason:n}))))};const i=document.getElementsByTagName("link"),r=document.querySelector("meta[property=csp-nonce]"),E=r?.nonce||r?.getAttribute("nonce");c=f(s.map(e=>{if(e=L(e,a),e in p)return;p[e]=!0;const _=e.endsWith(".css"),n=_?'[rel="stylesheet"]':"";if(a)for(let m=i.length-1;m>=0;m--){const u=i[m];if(u.href===e&&(!_||u.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${e}"]${n}`))return;const o=document.createElement("link");if(o.rel=_?"stylesheet":P,_||(o.as="script"),o.crossOrigin="",o.href=e,E&&o.setAttribute("nonce",E),document.head.appendChild(o),_)return new Promise((m,u)=>{o.addEventListener("load",m),o.addEventListener("error",()=>u(new Error(`Unable to preload CSS for ${e}`)))})}))}function v(i){const r=new Event("vite:preloadError",{cancelable:!0});if(r.payload=i,window.dispatchEvent(r),!r.defaultPrevented)throw i}return c.then(i=>{for(const r of i||[])r.status==="rejected"&&v(r.reason);return l().catch(v)})};t(()=>import("./assets/Button-BgSoEGtb.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8]),import.meta.url);t(()=>import("./assets/Accordion-CLJVtM3-.js"),__vite__mapDeps([9,1,2,10,3,4,5,6,11]),import.meta.url);t(()=>import("./assets/AccordionItem-COqKC4Sj.js"),__vite__mapDeps([12,1,13,3,4,5,6,11]),import.meta.url);t(()=>import("./assets/Input-DEXz_Amu.js"),__vite__mapDeps([14,1,2,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Textarea-lmpAM0DF.js"),__vite__mapDeps([15,1,5,4,6,8]),import.meta.url);t(()=>import("./assets/FormSelect-CEY0d-Mi.js"),__vite__mapDeps([16,1,13,2,10,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/FormSelectOption-WrGl8APi.js"),__vite__mapDeps([17,1,3,8]),import.meta.url);t(()=>import("./assets/Checkbox-BZ1EK0-3.js"),__vite__mapDeps([18,1,13,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/Radio-Df72LwQD.js"),__vite__mapDeps([19,1,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Label-D8e0ASUX.js"),__vite__mapDeps([20,1,2,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Form-CjqX6k7B.js"),__vite__mapDeps([21,1,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/Avatar-Pblto2tQ.js"),__vite__mapDeps([22,1,2,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Card-z8svIObS.js"),__vite__mapDeps([23,1,13,3,4,6,11,8]),import.meta.url);t(()=>import("./assets/Table-rFGm3Zga.js"),__vite__mapDeps([24,1,2,10,3,4,5,6,7,8]),import.meta.url);t(()=>import("./assets/Pagination-DfaWUoP1.js"),__vite__mapDeps([25,1,2,10,4,5,6,8]),import.meta.url);t(()=>import("./assets/Breadcrumb-g2i_6lWb.js"),__vite__mapDeps([26,1,2,10,4,5,6,8]),import.meta.url);t(()=>import("./assets/Tabs-C89gsE6f.js"),__vite__mapDeps([27,1,13,2,10,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/TabsItem-ClME9Swd.js"),__vite__mapDeps([28,1,3,4,5,8]),import.meta.url);
1
+ const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./assets/Button-D61Hhx1t.js","./assets/custom-element-CcJ8WSV9.js","./assets/if-ClpXslPg.js","./assets/slot-C5Y5a3mg.js","./assets/css-C9RCq3_J.js","./assets/attributes-C4ShczQn.js","./assets/lifecycle-Pq2xpGQC.js","./assets/style-BMG8VovL.js","./assets/props-YueOHezF.js","./assets/Accordion-CLJVtM3-.js","./assets/each-B74lx5Dn.js","./assets/this-CyqMrS8B.js","./assets/AccordionItem-COqKC4Sj.js","./assets/index-client-BgAGEORd.js","./assets/Input-DEXz_Amu.js","./assets/Textarea-lmpAM0DF.js","./assets/FormSelect-CEY0d-Mi.js","./assets/FormSelectOption-WrGl8APi.js","./assets/Checkbox-BZ1EK0-3.js","./assets/Radio-Df72LwQD.js","./assets/Label-D8e0ASUX.js","./assets/Form-CjqX6k7B.js","./assets/Avatar-Pblto2tQ.js","./assets/Card-z8svIObS.js","./assets/Table-rFGm3Zga.js","./assets/Pagination-DfaWUoP1.js","./assets/Breadcrumb-g2i_6lWb.js","./assets/Tabs-C89gsE6f.js","./assets/TabsItem-ClME9Swd.js"])))=>i.map(i=>d[i]);
2
+ const P="modulepreload",L=function(d,l){return new URL(d,l).href},p={},t=function(l,s,a){let c=Promise.resolve();if(s&&s.length>0){let f=function(e){return Promise.all(e.map(_=>Promise.resolve(_).then(n=>({status:"fulfilled",value:n}),n=>({status:"rejected",reason:n}))))};const i=document.getElementsByTagName("link"),r=document.querySelector("meta[property=csp-nonce]"),E=r?.nonce||r?.getAttribute("nonce");c=f(s.map(e=>{if(e=L(e,a),e in p)return;p[e]=!0;const _=e.endsWith(".css"),n=_?'[rel="stylesheet"]':"";if(a)for(let m=i.length-1;m>=0;m--){const u=i[m];if(u.href===e&&(!_||u.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${e}"]${n}`))return;const o=document.createElement("link");if(o.rel=_?"stylesheet":P,_||(o.as="script"),o.crossOrigin="",o.href=e,E&&o.setAttribute("nonce",E),document.head.appendChild(o),_)return new Promise((m,u)=>{o.addEventListener("load",m),o.addEventListener("error",()=>u(new Error(`Unable to preload CSS for ${e}`)))})}))}function v(i){const r=new Event("vite:preloadError",{cancelable:!0});if(r.payload=i,window.dispatchEvent(r),!r.defaultPrevented)throw i}return c.then(i=>{for(const r of i||[])r.status==="rejected"&&v(r.reason);return l().catch(v)})};t(()=>import("./assets/Button-D61Hhx1t.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8]),import.meta.url);t(()=>import("./assets/Accordion-CLJVtM3-.js"),__vite__mapDeps([9,1,2,10,3,4,5,6,11]),import.meta.url);t(()=>import("./assets/AccordionItem-COqKC4Sj.js"),__vite__mapDeps([12,1,13,3,4,5,6,11]),import.meta.url);t(()=>import("./assets/Input-DEXz_Amu.js"),__vite__mapDeps([14,1,2,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Textarea-lmpAM0DF.js"),__vite__mapDeps([15,1,5,4,6,8]),import.meta.url);t(()=>import("./assets/FormSelect-CEY0d-Mi.js"),__vite__mapDeps([16,1,13,2,10,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/FormSelectOption-WrGl8APi.js"),__vite__mapDeps([17,1,3,8]),import.meta.url);t(()=>import("./assets/Checkbox-BZ1EK0-3.js"),__vite__mapDeps([18,1,13,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/Radio-Df72LwQD.js"),__vite__mapDeps([19,1,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Label-D8e0ASUX.js"),__vite__mapDeps([20,1,2,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Form-CjqX6k7B.js"),__vite__mapDeps([21,1,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/Avatar-Pblto2tQ.js"),__vite__mapDeps([22,1,2,3,4,5,6,8]),import.meta.url);t(()=>import("./assets/Card-z8svIObS.js"),__vite__mapDeps([23,1,13,3,4,6,11,8]),import.meta.url);t(()=>import("./assets/Table-rFGm3Zga.js"),__vite__mapDeps([24,1,2,10,3,4,5,6,7,8]),import.meta.url);t(()=>import("./assets/Pagination-DfaWUoP1.js"),__vite__mapDeps([25,1,2,10,4,5,6,8]),import.meta.url);t(()=>import("./assets/Breadcrumb-g2i_6lWb.js"),__vite__mapDeps([26,1,2,10,4,5,6,8]),import.meta.url);t(()=>import("./assets/Tabs-C89gsE6f.js"),__vite__mapDeps([27,1,13,2,10,3,4,5,6,11,8]),import.meta.url);t(()=>import("./assets/TabsItem-ClME9Swd.js"),__vite__mapDeps([28,1,3,4,5,8]),import.meta.url);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "crayon-design-system-ui",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run build:browser && npm run prepack",