crayon-design-system-ui 0.0.2 → 0.0.3
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 +1 -1
- package/dist/components/accordion/Accordion.js +2 -2
- package/dist/components/accordion/Accordion.svelte +10 -10
- package/dist/components/accordion-item/AccordionItem.js +1 -1
- package/dist/components/accordion-item/AccordionItem.svelte +10 -10
- package/dist/components/avatar/Avatar.js +2 -2
- package/dist/components/avatar/Avatar.svelte +14 -14
- package/dist/components/button/Button.js +21 -12
- package/dist/components/button/Button.svelte +38 -29
- package/dist/components/card/Card.js +10 -10
- package/dist/components/card/Card.svelte +51 -51
- package/dist/components/checkbox/Checkbox.js +7 -7
- package/dist/components/checkbox/Checkbox.svelte +22 -22
- package/dist/components/form-select/FormSelect.js +15 -15
- package/dist/components/form-select/FormSelect.svelte +35 -35
- package/dist/components/input/Input.js +13 -13
- package/dist/components/input/Input.svelte +43 -43
- package/dist/components/label/Label.js +1 -1
- package/dist/components/label/Label.svelte +9 -9
- package/dist/components/radio/Radio.js +5 -5
- package/dist/components/radio/Radio.svelte +13 -13
- package/dist/components/textarea/Textarea.js +2 -2
- package/dist/components/textarea/Textarea.svelte +23 -23
- package/dist/tokens.css +158 -158
- package/dist-browser/assets/Accordion-BdCoTKVi.js +3 -0
- package/dist-browser/assets/AccordionItem-1t1Zhjrw.js +1 -0
- package/dist-browser/assets/Avatar-DhSRGD6B.js +2 -0
- package/dist-browser/assets/Button-Z-no-wum.js +42 -0
- package/dist-browser/assets/Card-BWTKqCMd.js +27 -0
- package/dist-browser/assets/Checkbox-DDlm5gjw.js +21 -0
- package/dist-browser/assets/FormSelect-Baelf6Fj.js +18 -0
- package/dist-browser/assets/Input-D_X-2zGG.js +22 -0
- package/dist-browser/assets/Label-C_I7LolH.js +1 -0
- package/dist-browser/assets/Radio-B8Tzan31.js +14 -0
- package/dist-browser/assets/Textarea-CLicCbYy.js +3 -0
- package/dist-browser/bundle.js +2 -2
- package/dist-browser/tokens.css +158 -158
- package/package.json +3 -2
- package/dist-browser/assets/Accordion-CwOMoX3u.js +0 -3
- package/dist-browser/assets/AccordionItem-CuTFqdt6.js +0 -1
- package/dist-browser/assets/Avatar-Ct0ZUf_m.js +0 -2
- package/dist-browser/assets/Button-BvYyhPrn.js +0 -33
- package/dist-browser/assets/Card-DM0rPY9s.js +0 -27
- package/dist-browser/assets/Checkbox-DK1LWC1i.js +0 -21
- package/dist-browser/assets/FormSelect-CBTpNNrh.js +0 -18
- package/dist-browser/assets/Input-DZZF_45U.js +0 -22
- package/dist-browser/assets/Label-BX3_KNGn.js +0 -1
- package/dist-browser/assets/Radio-Bwape_rC.js +0 -14
- package/dist-browser/assets/Textarea-BYsLYgK4.js +0 -3
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import{o as fe,c as xe,p as Ce,l as L,a as _e,t as te,i as l,j as ke,k as w,e as ne,n as a,s as f,d as y,g as s,b as re,r as ae,m as x,v as
|
|
2
|
-
var(--
|
|
1
|
+
import{o as fe,c as xe,p as Ce,l as L,a as _e,t as te,i as l,j as ke,k as w,e as ne,n as a,s as f,d as y,g as s,b as re,r as ae,m as x,v as oe,w as ie,B as de}from"../../assets/custom-element-CN6vLcFC.js";import{i as K}from"../../assets/if-DdiIl-sg.js";import{s as se}from"../../assets/slot-CRFQJtYY.js";import{a as Le,i as ze,s as le,c as Me}from"../../assets/lifecycle-BK5NY8qp.js";import{r as Be,s as i,a as Ve}from"../../assets/attributes-o88QCNuy.js";import{p as o}from"../../assets/props-DbUVX42-.js";var De=w('<span class="input-icon input-icon-leading svelte-yoy3nv" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-yoy3nv"><circle cx="11" cy="11" r="8" class="svelte-yoy3nv"></circle><path d="m21 21-4.35-4.35" class="svelte-yoy3nv"></path></svg></span>'),He=w('<span class="input-icon input-icon-trailing input-icon-disabled svelte-yoy3nv" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="svelte-yoy3nv"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9973 4.5167C11.9184 2.37704 10.159 0.666656 8.00004 0.666656C5.7909 0.666656 4.00004 2.45752 4.00004 4.66666V6.66666H3.33337C2.2288 6.66666 1.33337 7.56209 1.33337 8.66666V13.3333C1.33337 14.4379 2.2288 15.3333 3.33337 15.3333H12.6667C13.7713 15.3333 14.6667 14.4379 14.6667 13.3333V8.66666C14.6667 7.56209 13.7713 6.66666 12.6667 6.66666H12V4.66666L11.9973 4.5167ZM11.3342 7.99999C11.3339 7.99999 11.3336 7.99999 11.3334 7.99999C11.3331 7.99999 11.3328 7.99999 11.3326 7.99999H4.66751C4.66724 7.99999 4.66698 7.99999 4.66671 7.99999C4.66644 7.99999 4.66617 7.99999 4.6659 7.99999H3.33337C2.96518 7.99999 2.66671 8.29847 2.66671 8.66666V13.3333C2.66671 13.7015 2.96518 14 3.33337 14H12.6667C13.0349 14 13.3334 13.7015 13.3334 13.3333V8.66666C13.3334 8.29847 13.0349 7.99999 12.6667 7.99999H11.3342ZM5.33337 6.66666H10.6667V4.66666C10.6667 3.1939 9.4728 1.99999 8.00004 1.99999C6.57191 1.99999 5.40599 3.12264 5.33664 4.53356L5.33337 4.66666V6.66666Z" fill="#BDBDBC" class="svelte-yoy3nv"></path></svg></span>'),Se=de('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="svelte-yoy3nv"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" class="svelte-yoy3nv"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" class="svelte-yoy3nv"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-4.444" class="svelte-yoy3nv"></path><path d="m2 2 20 20" class="svelte-yoy3nv"></path></svg>'),Ee=de('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="svelte-yoy3nv"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" class="svelte-yoy3nv"></path><circle cx="12" cy="12" r="3" class="svelte-yoy3nv"></circle></svg>'),Ze=w('<button type="button" class="input-icon input-icon-trailing input-icon-password-toggle svelte-yoy3nv" tabindex="-1"><!></button>'),qe=w('<span class="input-icon input-icon-trailing input-icon-error svelte-yoy3nv" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="svelte-yoy3nv"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM7.99996 2.00001C11.3137 2.00001 14 4.6863 14 8.00001C14 11.3137 11.3137 14 7.99996 14C4.68625 14 1.99996 11.3137 1.99996 8.00001C1.99996 4.6863 4.68625 2.00001 7.99996 2.00001ZM7.99996 4.66667C8.34185 4.66667 8.62363 4.92403 8.66214 5.25559L8.66663 5.33334V8.00001C8.66663 8.3682 8.36815 8.66667 7.99996 8.66667C7.65807 8.66667 7.37629 8.40931 7.33778 8.07775L7.33329 8.00001V5.33334C7.33329 4.96515 7.63177 4.66667 7.99996 4.66667ZM8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10L7.92221 10.0045C7.59065 10.043 7.33329 10.3248 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333L8.08437 11.3289C8.41593 11.2903 8.67329 11.0086 8.67329 10.6667Z" fill="#E03E52" class="svelte-yoy3nv"></path></svg></span>'),je=w('<span class="input-icon input-icon-trailing input-icon-success svelte-yoy3nv" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="svelte-yoy3nv"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.8619 4.19526C13.1223 3.93491 13.5444 3.93491 13.8047 4.19526C14.0451 4.43558 14.0635 4.81374 13.8602 5.07527L13.8047 5.13807L6.4714 12.4714C6.23108 12.7117 5.85293 12.7302 5.5914 12.5269L5.5286 12.4714L2.19526 9.13807C1.93491 8.87772 1.93491 8.45561 2.19526 8.19526C2.43558 7.95494 2.81374 7.93645 3.07527 8.1398L3.13807 8.19526L6 11.0567L12.8619 4.19526Z" fill="#222121" class="svelte-yoy3nv"></path></svg></span>'),Ie=w('<div role="presentation"><!> <input/> <!></div>');const Pe={hash:"svelte-yoy3nv",code:`.input-wrapper.svelte-yoy3nv {position:relative;display:flex;align-items:center;width:100%;border-radius:var(--crayon-input-border-radius, 8px);border:var(--crayon-input-border-width, 1px) solid\r
|
|
2
|
+
var(--crayon-input-border-color-default, #e0e0e0);background-color:var(--crayon-input-bg, #feffff);transition:border-color 0.15s ease-in-out,\r
|
|
3
3
|
box-shadow 0.15s ease-in-out;box-sizing:border-box;}\r
|
|
4
4
|
\r
|
|
5
|
-
/* Basic/Default: purple border when empty */.input-wrapper.svelte-yoy3nv:not(.has-value):not(.state-error):not(.state-success) {border-color:var(--
|
|
5
|
+
/* Basic/Default: purple border when empty */.input-wrapper.svelte-yoy3nv:not(.has-value):not(.state-error):not(.state-success) {border-color:var(--crayon-input-border-color-default, #e0e0e0);}\r
|
|
6
6
|
\r
|
|
7
|
-
/* Data: grey border when has value, not focused */.input-wrapper.has-value.svelte-yoy3nv:not(.state-error):not(.state-success):focus-within {border-color:var(--
|
|
7
|
+
/* Data: grey border when has value, not focused */.input-wrapper.has-value.svelte-yoy3nv:not(.state-error):not(.state-success):focus-within {border-color:var(--crayon-input-focus-border-color, #2563eb);}.input-wrapper.has-value.svelte-yoy3nv:not(.state-error):not(.state-success):not(\r
|
|
8
8
|
:focus-within\r
|
|
9
|
-
) {border-color:var(--
|
|
9
|
+
) {border-color:var(--crayon-input-border-color-data, #e0e0e0);}\r
|
|
10
10
|
\r
|
|
11
|
-
/* Active (focus): blue border */.input-wrapper.svelte-yoy3nv:focus-within:not(.state-error):not(.state-success) {border-color:var(--
|
|
11
|
+
/* Active (focus): blue border */.input-wrapper.svelte-yoy3nv:focus-within:not(.state-error):not(.state-success) {border-color:var(--crayon-input-focus-border-color, #2563eb);box-shadow:0 0 0 0.2rem var(--crayon-input-focus-ring, rgba(37, 99, 235, 0.25));}\r
|
|
12
12
|
\r
|
|
13
|
-
/* Error state */.input-wrapper.state-error.svelte-yoy3nv {border-color:var(--
|
|
13
|
+
/* Error state */.input-wrapper.state-error.svelte-yoy3nv {border-color:var(--crayon-input-error-border-color, #dc2626);}.input-wrapper.state-error.svelte-yoy3nv:focus-within {box-shadow:0 0 0 0.2rem var(--crayon-input-error-ring, rgba(220, 38, 38, 0.25));}\r
|
|
14
14
|
\r
|
|
15
|
-
/* Success state */.input-wrapper.state-success.svelte-yoy3nv {border-color:var(--
|
|
16
|
-
var(--
|
|
15
|
+
/* Success state */.input-wrapper.state-success.svelte-yoy3nv {border-color:var(--crayon-input-success-border-color, #16a34a);}.input-wrapper.state-success.svelte-yoy3nv:focus-within {box-shadow:0 0 0 0.2rem\r
|
|
16
|
+
var(--crayon-input-success-ring, rgba(22, 163, 74, 0.25));}\r
|
|
17
17
|
\r
|
|
18
|
-
/* Disabled: light grey border and bg */.input-el.svelte-yoy3nv:disabled {background-color:var(--
|
|
18
|
+
/* Disabled: light grey border and bg */.input-el.svelte-yoy3nv:disabled {background-color:var(--crayon-input-disabled-bg, #e9ecef);color:var(--crayon-input-disabled-color, #6c757d);cursor:not-allowed;}.input-wrapper.svelte-yoy3nv:has(:where(.svelte-yoy3nv):disabled) {border-color:var(--crayon-input-disabled-border-color, #dee2e6);background-color:var(--crayon-input-disabled-bg, #e9ecef);}.input-el.svelte-yoy3nv {display:block;flex:1;min-width:0;padding:var(--crayon-input-padding-y, 9px) var(--crayon-input-padding-x, 16px);font-family:inherit;font-size:var(--crayon-input-font-size, 14px);line-height:1.5;color:var(--crayon-input-color, #222121);background:transparent;border:none;outline:0;box-shadow:none;box-sizing:border-box;}.input-el.svelte-yoy3nv::placeholder {color:var(--crayon-input-placeholder-color, #bdbdbc);}.input-el.has-leading-icon.svelte-yoy3nv {padding-left:2.5rem !important;}.input-el.has-trailing-icon.svelte-yoy3nv {padding-right:2.5rem !important;}.input-icon.svelte-yoy3nv {position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--crayon-input-icon-color, #6b7280);}.input-icon-leading.svelte-yoy3nv {left:var(--crayon-input-padding-x, 16px);color:var(--crayon-input-search-icon-color, #6b7280);}.input-wrapper.variant-search.svelte-yoy3nv:focus-within .input-icon-leading:where(.svelte-yoy3nv) {color:var(--crayon-input-focus-border-color, #2563eb);}.input-wrapper.svelte-yoy3nv:has(:where(.svelte-yoy3nv):disabled) .input-icon-leading:where(.svelte-yoy3nv) {color:var(--crayon-input-disabled-color, #6c757d);}.input-icon-trailing.svelte-yoy3nv {right:var(--crayon-input-padding-x, 16px);}.input-icon-error.svelte-yoy3nv {color:var(--crayon-input-error-icon-color, #dc2626);}.input-icon-success.svelte-yoy3nv {color:var(--crayon-input-success-icon-color, #16a34a);}.input-icon-disabled.svelte-yoy3nv {color:var(--crayon-input-disabled-color, #6c757d);}.input-icon-password-toggle.svelte-yoy3nv {pointer-events:auto;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--crayon-input-icon-color, #6b7280);}.input-icon-password-toggle.svelte-yoy3nv:hover {color:var(--crayon-input-focus-border-color, #2563eb);}\r
|
|
19
19
|
\r
|
|
20
|
-
/* Sizes */.input-wrapper.sm.svelte-yoy3nv .input-el:where(.svelte-yoy3nv) {padding:var(--
|
|
21
|
-
var(--
|
|
22
|
-
var(--
|
|
20
|
+
/* Sizes */.input-wrapper.sm.svelte-yoy3nv .input-el:where(.svelte-yoy3nv) {padding:var(--crayon-input-padding-y-sm, 0.25rem)\r
|
|
21
|
+
var(--crayon-input-padding-x-sm, 0.5rem);font-size:var(--crayon-input-font-size-sm, 0.875rem);}.input-wrapper.sm.svelte-yoy3nv {border-radius:var(--crayon-input-border-radius-sm, 0.25rem);}.input-wrapper.sm.svelte-yoy3nv .input-el.has-leading-icon:where(.svelte-yoy3nv) {padding-left:1.75rem;}.input-wrapper.sm.svelte-yoy3nv .input-el.has-trailing-icon:where(.svelte-yoy3nv) {padding-right:1.75rem;}.input-wrapper.sm.svelte-yoy3nv .input-icon-leading:where(.svelte-yoy3nv) {left:0.5rem;}.input-wrapper.sm.svelte-yoy3nv .input-icon-trailing:where(.svelte-yoy3nv) {right:0.5rem;}.input-wrapper.md.svelte-yoy3nv .input-el:where(.svelte-yoy3nv) {padding:var(--crayon-input-padding-y, 9px) var(--crayon-input-padding-x, 16px);font-size:var(--crayon-input-font-size, 14px);}.input-wrapper.md.svelte-yoy3nv {border-radius:var(--crayon-input-border-radius, 8px);}.input-wrapper.lg.svelte-yoy3nv .input-el:where(.svelte-yoy3nv) {padding:var(--crayon-input-padding-y-lg, 0.5rem)\r
|
|
22
|
+
var(--crayon-input-padding-x-lg, 1rem);font-size:var(--crayon-input-font-size-lg, 1.25rem);}.input-wrapper.lg.svelte-yoy3nv {border-radius:var(--crayon-input-border-radius-lg, 0.5rem);}.input-wrapper.lg.svelte-yoy3nv .input-el.has-leading-icon:where(.svelte-yoy3nv) {padding-left:2.75rem;}.input-wrapper.lg.svelte-yoy3nv .input-el.has-trailing-icon:where(.svelte-yoy3nv) {padding-right:2.75rem;}`};function Re(Q,t){Ce(t,!1),Le(Q,Pe);const z=x(),U=x(),M=x(),W=x();let d=o(t,"value",12,""),c=o(t,"type",12,"text"),B=o(t,"placeholder",12,""),V=o(t,"name",12,void 0),D=o(t,"id",12,void 0),C=o(t,"size",12,"md"),h=o(t,"disabled",12,!1),H=o(t,"readonly",12,!1),S=o(t,"required",12,!1),u=o(t,"variant",12,"default"),v=o(t,"validationState",12,void 0),E=o(t,"autocomplete",12,void 0),Z=o(t,"min",12,void 0),q=o(t,"max",12,void 0),j=o(t,"step",12,void 0),I=o(t,"maxlength",12,void 0),P=o(t,"minlength",12,void 0),R=o(t,"pattern",12,void 0),T=o(t,"ariaLabel",12,void 0),A=o(t,"ariaDescribedby",12,void 0),N=o(t,"oninput",12,void 0),O=o(t,"onchange",12,void 0),_=o(t,"extraClass",12,""),b=x(!1);function X(){c()!=="password"||h()||f(b,!s(b))}function $(e){const r=e.getRootNode();return r instanceof ShadowRoot?r.host:null}function ce(e){const r=e.target;d(r.value);const g={value:d()};N()?.(g),$(r)?.dispatchEvent(new CustomEvent("input",{detail:g,bubbles:!0}))}function ve(e){const r=e.target;d(r.value);const g={value:d()};O()?.(g),$(r)?.dispatchEvent(new CustomEvent("change",{detail:g,bubbles:!0}))}L(()=>y(d()),()=>{f(z,d()!=="")}),L(()=>(y(C()),y(u()),y(v()),s(z),y(_())),()=>{f(U,`input-wrapper ${C()} variant-${u()} ${v()?`state-${v()}`:""} ${s(z)?"has-value":""} ${_()}`.trim())}),L(()=>(y(u()),y(c())),()=>{f(M,u()==="search"?"search":c())}),L(()=>(y(c()),s(b),s(M)),()=>{f(W,c()==="password"?s(b)?"text":"password":s(M))}),_e();var ue={get value(){return d()},set value(e){d(e),a()},get type(){return c()},set type(e){c(e),a()},get placeholder(){return B()},set placeholder(e){B(e),a()},get name(){return V()},set name(e){V(e),a()},get id(){return D()},set id(e){D(e),a()},get size(){return C()},set size(e){C(e),a()},get disabled(){return h()},set disabled(e){h(e),a()},get readonly(){return H()},set readonly(e){H(e),a()},get required(){return S()},set required(e){S(e),a()},get variant(){return u()},set variant(e){u(e),a()},get validationState(){return v()},set validationState(e){v(e),a()},get autocomplete(){return E()},set autocomplete(e){E(e),a()},get min(){return Z()},set min(e){Z(e),a()},get max(){return q()},set max(e){q(e),a()},get step(){return j()},set step(e){j(e),a()},get maxlength(){return I()},set maxlength(e){I(e),a()},get minlength(){return P()},set minlength(e){P(e),a()},get pattern(){return R()},set pattern(e){R(e),a()},get ariaLabel(){return T()},set ariaLabel(e){T(e),a()},get ariaDescribedby(){return A()},set ariaDescribedby(e){A(e),a()},get oninput(){return N()},set oninput(e){N(e),a()},get onchange(){return O()},set onchange(e){O(e),a()},get extraClass(){return _()},set extraClass(e){_(e),a()}};ze();var k=Ie(),ee=re(k);{var pe=e=>{var r=De();l(e,r)};K(ee,e=>{u()==="search"&&e(pe)})}var n=ne(ee,2);Be(n),n.__input=ce,n.__change=ve;var ye=ne(n,2);{var ge=e=>{var r=He();l(e,r)},he=e=>{var r=Ze();r.__click=X,r.__keydown=p=>p.key==="Enter"&&X();var g=re(r);{var Y=p=>{var m=oe(),F=ie(m);se(F,t,"password-toggle-visible",{},G=>{var J=Se();l(G,J)}),l(p,m)},me=p=>{var m=oe(),F=ie(m);se(F,t,"password-toggle-hidden",{},G=>{var J=Ee();l(G,J)}),l(p,m)};K(g,p=>{s(b)?p(Y):p(me,!1)})}ae(r),te(()=>i(r,"aria-label",s(b)?"Hide password":"Show password")),l(e,r)},be=e=>{var r=qe();l(e,r)},we=e=>{var r=je();l(e,r)};K(ye,e=>{h()?e(ge):c()==="password"?e(he,1):v()==="error"?e(be,2):v()==="success"&&e(we,3)})}return ae(k),te(()=>{le(k,1,Me(s(U)),"svelte-yoy3nv"),i(n,"type",s(W)),Ve(n,d()),i(n,"placeholder",B()),i(n,"name",V()),i(n,"id",D()),n.disabled=h(),n.readOnly=H(),n.required=S(),i(n,"autocomplete",E()),i(n,"min",Z()),i(n,"max",q()),i(n,"step",j()),i(n,"maxlength",I()),i(n,"minlength",P()),i(n,"pattern",R()),le(n,1,`input-el ${u()==="search"?"has-leading-icon":""} ${v()||h()||c()==="password"?"has-trailing-icon":""}`,"svelte-yoy3nv"),i(n,"aria-label",T()),i(n,"aria-describedby",A()),i(n,"aria-invalid",v()==="error"?"true":void 0)}),l(Q,k),ke(ue)}fe(["input","change","click","keydown"]);const __Default = (xe(Re,{value:{},type:{},placeholder:{},name:{},id:{},size:{},disabled:{},readonly:{},required:{},variant:{},validationState:{},autocomplete:{},min:{},max:{},step:{},maxlength:{},minlength:{},pattern:{},ariaLabel:{},ariaDescribedby:{},oninput:{},onchange:{},extraClass:{}},["password-toggle-visible","password-toggle-hidden"],[],{mode:"open"}));
|
|
23
23
|
customElements.define("ui-input", __Default);
|
|
24
24
|
export default __Default;
|
|
@@ -228,10 +228,10 @@ function handleChange(event) {
|
|
|
228
228
|
display: flex;
|
|
229
229
|
align-items: center;
|
|
230
230
|
width: 100%;
|
|
231
|
-
border-radius: var(--
|
|
232
|
-
border: var(--
|
|
233
|
-
var(--
|
|
234
|
-
background-color: var(--
|
|
231
|
+
border-radius: var(--crayon-input-border-radius, 8px);
|
|
232
|
+
border: var(--crayon-input-border-width, 1px) solid
|
|
233
|
+
var(--crayon-input-border-color-default, #e0e0e0);
|
|
234
|
+
background-color: var(--crayon-input-bg, #feffff);
|
|
235
235
|
transition:
|
|
236
236
|
border-color 0.15s ease-in-out,
|
|
237
237
|
box-shadow 0.15s ease-in-out;
|
|
@@ -240,66 +240,66 @@ function handleChange(event) {
|
|
|
240
240
|
|
|
241
241
|
/* Basic/Default: purple border when empty */
|
|
242
242
|
.input-wrapper:not(.has-value):not(.state-error):not(.state-success) {
|
|
243
|
-
border-color: var(--
|
|
243
|
+
border-color: var(--crayon-input-border-color-default, #e0e0e0);
|
|
244
244
|
}
|
|
245
245
|
|
|
246
246
|
/* Data: grey border when has value, not focused */
|
|
247
247
|
.input-wrapper.has-value:not(.state-error):not(.state-success):focus-within {
|
|
248
|
-
border-color: var(--
|
|
248
|
+
border-color: var(--crayon-input-focus-border-color, #2563eb);
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
.input-wrapper.has-value:not(.state-error):not(.state-success):not(
|
|
252
252
|
:focus-within
|
|
253
253
|
) {
|
|
254
|
-
border-color: var(--
|
|
254
|
+
border-color: var(--crayon-input-border-color-data, #e0e0e0);
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
/* Active (focus): blue border */
|
|
258
258
|
.input-wrapper:focus-within:not(.state-error):not(.state-success) {
|
|
259
|
-
border-color: var(--
|
|
260
|
-
box-shadow: 0 0 0 0.2rem var(--
|
|
259
|
+
border-color: var(--crayon-input-focus-border-color, #2563eb);
|
|
260
|
+
box-shadow: 0 0 0 0.2rem var(--crayon-input-focus-ring, rgba(37, 99, 235, 0.25));
|
|
261
261
|
}
|
|
262
262
|
|
|
263
263
|
/* Error state */
|
|
264
264
|
.input-wrapper.state-error {
|
|
265
|
-
border-color: var(--
|
|
265
|
+
border-color: var(--crayon-input-error-border-color, #dc2626);
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
.input-wrapper.state-error:focus-within {
|
|
269
|
-
box-shadow: 0 0 0 0.2rem var(--
|
|
269
|
+
box-shadow: 0 0 0 0.2rem var(--crayon-input-error-ring, rgba(220, 38, 38, 0.25));
|
|
270
270
|
}
|
|
271
271
|
|
|
272
272
|
/* Success state */
|
|
273
273
|
.input-wrapper.state-success {
|
|
274
|
-
border-color: var(--
|
|
274
|
+
border-color: var(--crayon-input-success-border-color, #16a34a);
|
|
275
275
|
}
|
|
276
276
|
|
|
277
277
|
.input-wrapper.state-success:focus-within {
|
|
278
278
|
box-shadow: 0 0 0 0.2rem
|
|
279
|
-
var(--
|
|
279
|
+
var(--crayon-input-success-ring, rgba(22, 163, 74, 0.25));
|
|
280
280
|
}
|
|
281
281
|
|
|
282
282
|
/* Disabled: light grey border and bg */
|
|
283
283
|
.input-el:disabled {
|
|
284
|
-
background-color: var(--
|
|
285
|
-
color: var(--
|
|
284
|
+
background-color: var(--crayon-input-disabled-bg, #e9ecef);
|
|
285
|
+
color: var(--crayon-input-disabled-color, #6c757d);
|
|
286
286
|
cursor: not-allowed;
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
.input-wrapper:has(:disabled) {
|
|
290
|
-
border-color: var(--
|
|
291
|
-
background-color: var(--
|
|
290
|
+
border-color: var(--crayon-input-disabled-border-color, #dee2e6);
|
|
291
|
+
background-color: var(--crayon-input-disabled-bg, #e9ecef);
|
|
292
292
|
}
|
|
293
293
|
|
|
294
294
|
.input-el {
|
|
295
295
|
display: block;
|
|
296
296
|
flex: 1;
|
|
297
297
|
min-width: 0;
|
|
298
|
-
padding: var(--
|
|
298
|
+
padding: var(--crayon-input-padding-y, 9px) var(--crayon-input-padding-x, 16px);
|
|
299
299
|
font-family: inherit;
|
|
300
|
-
font-size: var(--
|
|
300
|
+
font-size: var(--crayon-input-font-size, 14px);
|
|
301
301
|
line-height: 1.5;
|
|
302
|
-
color: var(--
|
|
302
|
+
color: var(--crayon-input-color, #222121);
|
|
303
303
|
background: transparent;
|
|
304
304
|
border: none;
|
|
305
305
|
outline: 0;
|
|
@@ -308,7 +308,7 @@ function handleChange(event) {
|
|
|
308
308
|
}
|
|
309
309
|
|
|
310
310
|
.input-el::placeholder {
|
|
311
|
-
color: var(--
|
|
311
|
+
color: var(--crayon-input-placeholder-color, #bdbdbc);
|
|
312
312
|
}
|
|
313
313
|
|
|
314
314
|
.input-el.has-leading-icon {
|
|
@@ -327,36 +327,36 @@ function handleChange(event) {
|
|
|
327
327
|
align-items: center;
|
|
328
328
|
justify-content: center;
|
|
329
329
|
pointer-events: none;
|
|
330
|
-
color: var(--
|
|
330
|
+
color: var(--crayon-input-icon-color, #6b7280);
|
|
331
331
|
}
|
|
332
332
|
|
|
333
333
|
.input-icon-leading {
|
|
334
|
-
left: var(--
|
|
335
|
-
color: var(--
|
|
334
|
+
left: var(--crayon-input-padding-x, 16px);
|
|
335
|
+
color: var(--crayon-input-search-icon-color, #6b7280);
|
|
336
336
|
}
|
|
337
337
|
|
|
338
338
|
.input-wrapper.variant-search:focus-within .input-icon-leading {
|
|
339
|
-
color: var(--
|
|
339
|
+
color: var(--crayon-input-focus-border-color, #2563eb);
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
.input-wrapper:has(:disabled) .input-icon-leading {
|
|
343
|
-
color: var(--
|
|
343
|
+
color: var(--crayon-input-disabled-color, #6c757d);
|
|
344
344
|
}
|
|
345
345
|
|
|
346
346
|
.input-icon-trailing {
|
|
347
|
-
right: var(--
|
|
347
|
+
right: var(--crayon-input-padding-x, 16px);
|
|
348
348
|
}
|
|
349
349
|
|
|
350
350
|
.input-icon-error {
|
|
351
|
-
color: var(--
|
|
351
|
+
color: var(--crayon-input-error-icon-color, #dc2626);
|
|
352
352
|
}
|
|
353
353
|
|
|
354
354
|
.input-icon-success {
|
|
355
|
-
color: var(--
|
|
355
|
+
color: var(--crayon-input-success-icon-color, #16a34a);
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
.input-icon-disabled {
|
|
359
|
-
color: var(--
|
|
359
|
+
color: var(--crayon-input-disabled-color, #6c757d);
|
|
360
360
|
}
|
|
361
361
|
|
|
362
362
|
.input-icon-password-toggle {
|
|
@@ -366,22 +366,22 @@ function handleChange(event) {
|
|
|
366
366
|
border: none;
|
|
367
367
|
background: transparent;
|
|
368
368
|
cursor: pointer;
|
|
369
|
-
color: var(--
|
|
369
|
+
color: var(--crayon-input-icon-color, #6b7280);
|
|
370
370
|
}
|
|
371
371
|
|
|
372
372
|
.input-icon-password-toggle:hover {
|
|
373
|
-
color: var(--
|
|
373
|
+
color: var(--crayon-input-focus-border-color, #2563eb);
|
|
374
374
|
}
|
|
375
375
|
|
|
376
376
|
/* Sizes */
|
|
377
377
|
.input-wrapper.sm .input-el {
|
|
378
|
-
padding: var(--
|
|
379
|
-
var(--
|
|
380
|
-
font-size: var(--
|
|
378
|
+
padding: var(--crayon-input-padding-y-sm, 0.25rem)
|
|
379
|
+
var(--crayon-input-padding-x-sm, 0.5rem);
|
|
380
|
+
font-size: var(--crayon-input-font-size-sm, 0.875rem);
|
|
381
381
|
}
|
|
382
382
|
|
|
383
383
|
.input-wrapper.sm {
|
|
384
|
-
border-radius: var(--
|
|
384
|
+
border-radius: var(--crayon-input-border-radius-sm, 0.25rem);
|
|
385
385
|
}
|
|
386
386
|
|
|
387
387
|
.input-wrapper.sm .input-el.has-leading-icon {
|
|
@@ -401,22 +401,22 @@ function handleChange(event) {
|
|
|
401
401
|
}
|
|
402
402
|
|
|
403
403
|
.input-wrapper.md .input-el {
|
|
404
|
-
padding: var(--
|
|
405
|
-
font-size: var(--
|
|
404
|
+
padding: var(--crayon-input-padding-y, 9px) var(--crayon-input-padding-x, 16px);
|
|
405
|
+
font-size: var(--crayon-input-font-size, 14px);
|
|
406
406
|
}
|
|
407
407
|
|
|
408
408
|
.input-wrapper.md {
|
|
409
|
-
border-radius: var(--
|
|
409
|
+
border-radius: var(--crayon-input-border-radius, 8px);
|
|
410
410
|
}
|
|
411
411
|
|
|
412
412
|
.input-wrapper.lg .input-el {
|
|
413
|
-
padding: var(--
|
|
414
|
-
var(--
|
|
415
|
-
font-size: var(--
|
|
413
|
+
padding: var(--crayon-input-padding-y-lg, 0.5rem)
|
|
414
|
+
var(--crayon-input-padding-x-lg, 1rem);
|
|
415
|
+
font-size: var(--crayon-input-font-size-lg, 1.25rem);
|
|
416
416
|
}
|
|
417
417
|
|
|
418
418
|
.input-wrapper.lg {
|
|
419
|
-
border-radius: var(--
|
|
419
|
+
border-radius: var(--crayon-input-border-radius-lg, 0.5rem);
|
|
420
420
|
}
|
|
421
421
|
|
|
422
422
|
.input-wrapper.lg .input-el.has-leading-icon {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{c as
|
|
1
|
+
import{c as h,p as q,l as S,d,a as C,e as I,t as k,i as m,j as B,k as g,b as x,n as l,s as E,r as p,g as F,m as L}from"../../assets/custom-element-CN6vLcFC.js";import{i as M}from"../../assets/if-DdiIl-sg.js";import{s as U}from"../../assets/slot-CRFQJtYY.js";import{a as A,i as D,s as G,c as H}from"../../assets/lifecycle-BK5NY8qp.js";import{s as J}from"../../assets/attributes-o88QCNuy.js";import{p as s}from"../../assets/props-DbUVX42-.js";var K=g('<span class="label-required svelte-10jnxwn" aria-hidden="true">*</span>'),N=g('<label><span class="label-text svelte-10jnxwn"><!></span> <!></label>');const O={hash:"svelte-10jnxwn",code:'.label-root.svelte-10jnxwn {display:inline-flex;align-items:baseline;gap:0.25rem;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-weight:500;line-height:1.3;color:var(--crayon-label-color, #111827);cursor:default;}.label-root.is-disabled.svelte-10jnxwn {color:var(--crayon-label-disabled-color, #9ca3af);cursor:not-allowed;}.label-root.state-error.svelte-10jnxwn {color:var(--crayon-label-error-color, #dc2626);}.label-root.state-success.svelte-10jnxwn {color:var(--crayon-label-success-color, #16a34a);}.label-root.size-sm.svelte-10jnxwn {font-size:var(--crayon-label-font-size-sm, 12px);}.label-root.size-md.svelte-10jnxwn {font-size:var(--crayon-label-font-size-md, 14px);}.label-root.size-lg.svelte-10jnxwn {font-size:var(--crayon-label-font-size-lg, 16px);}.label-text.svelte-10jnxwn {display:inline;}.label-required.svelte-10jnxwn {color:var(--crayon-label-required-color, #dc2626);font-weight:600;}.label-root.is-disabled.svelte-10jnxwn .label-required:where(.svelte-10jnxwn) {color:var(--crayon-label-disabled-color, #9ca3af);}'};function P(v,a){q(a,!1),A(v,O);const u=L();let c=s(a,"forId",12,void 0),f=s(a,"required",12,!1),o=s(a,"disabled",12,!1),n=s(a,"size",12,"md"),t=s(a,"validationState",12,void 0),i=s(a,"extraClass",12,"");S(()=>(d(n()),d(o()),d(t()),d(i())),()=>{E(u,`label-root size-${n()} ${o()?"is-disabled":""} ${t()?`state-${t()}`:""} ${i()}`.trim())}),C();var w={get forId(){return c()},set forId(e){c(e),l()},get required(){return f()},set required(e){f(e),l()},get disabled(){return o()},set disabled(e){o(e),l()},get size(){return n()},set size(e){n(e),l()},get validationState(){return t()},set validationState(e){t(e),l()},get extraClass(){return i()},set extraClass(e){i(e),l()}};D();var r=N(),b=x(r),y=x(b);U(y,a,"default",{},null),p(b);var _=I(b,2);{var j=e=>{var z=K();m(e,z)};M(_,e=>{f()&&e(j)})}return p(r),k(()=>{G(r,1,H(F(u)),"svelte-10jnxwn"),J(r,"for",c())}),m(v,r),B(w)}const __Default = (h(P,{forId:{},required:{},disabled:{},size:{},validationState:{},extraClass:{}},["default"],[],{mode:"open"}));
|
|
2
2
|
customElements.define("ui-label", __Default);
|
|
3
3
|
export default __Default;
|
|
@@ -30,33 +30,33 @@ $: rootClass = `label-root size-${size} ${disabled ? "is-disabled" : ""} ${valid
|
|
|
30
30
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
31
31
|
font-weight: 500;
|
|
32
32
|
line-height: 1.3;
|
|
33
|
-
color: var(--
|
|
33
|
+
color: var(--crayon-label-color, #111827);
|
|
34
34
|
cursor: default;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.label-root.is-disabled {
|
|
38
|
-
color: var(--
|
|
38
|
+
color: var(--crayon-label-disabled-color, #9ca3af);
|
|
39
39
|
cursor: not-allowed;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.label-root.state-error {
|
|
43
|
-
color: var(--
|
|
43
|
+
color: var(--crayon-label-error-color, #dc2626);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.label-root.state-success {
|
|
47
|
-
color: var(--
|
|
47
|
+
color: var(--crayon-label-success-color, #16a34a);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.label-root.size-sm {
|
|
51
|
-
font-size: var(--
|
|
51
|
+
font-size: var(--crayon-label-font-size-sm, 12px);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.label-root.size-md {
|
|
55
|
-
font-size: var(--
|
|
55
|
+
font-size: var(--crayon-label-font-size-md, 14px);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.label-root.size-lg {
|
|
59
|
-
font-size: var(--
|
|
59
|
+
font-size: var(--crayon-label-font-size-lg, 16px);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.label-text {
|
|
@@ -64,11 +64,11 @@ $: rootClass = `label-root size-${size} ${disabled ? "is-disabled" : ""} ${valid
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
.label-required {
|
|
67
|
-
color: var(--
|
|
67
|
+
color: var(--crayon-label-required-color, #dc2626);
|
|
68
68
|
font-weight: 600;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.label-root.is-disabled .label-required {
|
|
72
|
-
color: var(--
|
|
72
|
+
color: var(--crayon-label-disabled-color, #9ca3af);
|
|
73
73
|
}
|
|
74
74
|
</style>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import{c as C,p as D,e as L,t as z,f as S,i as E,j as R,k as H,b as f,n as o,x as B,r as p}from"../../assets/custom-element-CN6vLcFC.js";import{s as F}from"../../assets/slot-CRFQJtYY.js";import{a as I,i as M,s as N}from"../../assets/lifecycle-BK5NY8qp.js";import{r as U,s as
|
|
2
|
-
sans-serif;font-size:14px;line-height:1.3;color:var(--
|
|
1
|
+
import{c as C,p as D,e as L,t as z,f as S,i as E,j as R,k as H,b as f,n as o,x as B,r as p}from"../../assets/custom-element-CN6vLcFC.js";import{s as F}from"../../assets/slot-CRFQJtYY.js";import{a as I,i as M,s as N}from"../../assets/lifecycle-BK5NY8qp.js";import{r as U,s as y,a as Y,d as q}from"../../assets/attributes-o88QCNuy.js";import{p as s}from"../../assets/props-DbUVX42-.js";var A=H('<label><span class="radio-control svelte-jsov6r"><input type="radio" class="svelte-jsov6r"/> <span class="radio-circle svelte-jsov6r" aria-hidden="true"></span></span> <span class="radio-label svelte-jsov6r"><!></span></label>');const G={hash:"svelte-jsov6r",code:`.radio-root.svelte-jsov6r {display:inline-flex;align-items:center;gap:0.5rem;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",\r
|
|
2
|
+
sans-serif;font-size:14px;line-height:1.3;color:var(--crayon-radio-label-color, #111827);cursor:pointer;}.radio-control.svelte-jsov6r {position:relative;display:inline-flex;align-items:center;justify-content:center;}.radio-control.svelte-jsov6r input:where(.svelte-jsov6r) {position:absolute;inset:0;margin:0;opacity:0;cursor:inherit;}.radio-circle.svelte-jsov6r {width:var(--crayon-radio-size, 22px);height:var(--crayon-radio-size, 22px);border-radius:999px;box-sizing:border-box;border:2px solid var(--crayon-radio-border-color, #111111);background-color:var(--crayon-radio-bg, transparent);display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,\r
|
|
3
3
|
border-color 0.15s ease,\r
|
|
4
4
|
box-shadow 0.15s ease,\r
|
|
5
5
|
transform 0.1s ease;}.radio-circle.svelte-jsov6r::before {content:"";display:block;width:60%;height:60%;border-radius:inherit;background-color:transparent;box-shadow:0 0 0 0 transparent;opacity:0;transition:opacity 0.12s ease,\r
|
|
6
6
|
box-shadow 0.12s ease,\r
|
|
7
7
|
transform 0.12s ease;}\r
|
|
8
8
|
\r
|
|
9
|
-
/* Checked: purple ring with white center like screenshot */.radio-root.is-checked.svelte-jsov6r .radio-circle:where(.svelte-jsov6r) {background-color:var(--
|
|
10
|
-
var(--
|
|
9
|
+
/* Checked: purple ring with white center like screenshot */.radio-root.is-checked.svelte-jsov6r .radio-circle:where(.svelte-jsov6r) {background-color:var(--crayon-radio-checked-bg, var(--crayon-primary, #474bff));border-color:var(--crayon-radio-checked-border, var(--crayon-primary, #474bff));}.radio-root.is-checked.svelte-jsov6r .radio-circle:where(.svelte-jsov6r)::before {background-color:var(--crayon-radio-inner, #ffffff);box-shadow:0 0 0 4px\r
|
|
10
|
+
var(--crayon-radio-checked-bg, var(--crayon-primary, #474bff));opacity:1;transform:scale(1);}\r
|
|
11
11
|
\r
|
|
12
12
|
/* Hover + focus */.radio-root.svelte-jsov6r:not(.is-disabled):hover .radio-circle:where(.svelte-jsov6r) {transform:translateY(-0.5px);}.radio-root.svelte-jsov6r:not(.is-disabled) .radio-control:where(.svelte-jsov6r) input:where(.svelte-jsov6r):focus-visible\r
|
|
13
13
|
+ .radio-circle:where(.svelte-jsov6r) {box-shadow:0 0 0 3px\r
|
|
14
|
-
var(--
|
|
14
|
+
var(--crayon-radio-focus-ring, rgba(71, 75, 255, 0.45));}.radio-root.is-disabled.svelte-jsov6r {cursor:not-allowed;color:var(--crayon-radio-label-disabled, #9ca3af);}.radio-root.is-disabled.svelte-jsov6r .radio-circle:where(.svelte-jsov6r) {border-color:var(--crayon-radio-border-disabled, #bdbdbc);background-color:var(--crayon-radio-bg-disabled, #e5e7eb);}.radio-label.svelte-jsov6r:empty {display:none;}`};function J(g,r){D(r,!1),I(g,G);let t=s(r,"checked",12,!1),n=s(r,"disabled",12,!1),d=s(r,"name",12,void 0),c=s(r,"value",12,void 0),v=s(r,"ariaLabel",12,void 0),b=s(r,"ariaDescribedby",12,void 0),h=s(r,"onchange",12,void 0);function k(e){const i=e.getRootNode();return i instanceof ShadowRoot?i.host:null}function w(e){const i=e.target;if(!i.checked)return;t(!0);const j={checked:t()};h()?.(j),k(i)?.dispatchEvent(new CustomEvent("change",{detail:j,bubbles:!0}))}var x={get checked(){return t()},set checked(e){t(e),o()},get disabled(){return n()},set disabled(e){n(e),o()},get name(){return d()},set name(e){d(e),o()},get value(){return c()},set value(e){c(e),o()},get ariaLabel(){return v()},set ariaLabel(e){v(e),o()},get ariaDescribedby(){return b()},set ariaDescribedby(e){b(e),o()},get onchange(){return h()},set onchange(e){h(e),o()}};M();var l=A(),u=f(l),a=f(u);U(a),B(2),p(u);var m=L(u,2),_=f(m);return F(_,r,"default",{},null),p(m),p(l),z(()=>{N(l,1,`radio-root ${t()?"is-checked":""} ${n()?"is-disabled":""}`,"svelte-jsov6r"),y(a,"name",d()),Y(a,c()),q(a,t()),a.disabled=n(),y(a,"aria-label",v()),y(a,"aria-describedby",b())}),S("change",a,w),E(g,l),R(x)}const __Default = (C(J,{checked:{},disabled:{},name:{},value:{},ariaLabel:{},ariaDescribedby:{},onchange:{}},["default"],[],{mode:"open"}));
|
|
15
15
|
customElements.define("ui-radio", __Default);
|
|
16
16
|
export default __Default;
|
|
@@ -54,7 +54,7 @@ function handleChange(event) {
|
|
|
54
54
|
sans-serif;
|
|
55
55
|
font-size: 14px;
|
|
56
56
|
line-height: 1.3;
|
|
57
|
-
color: var(--
|
|
57
|
+
color: var(--crayon-radio-label-color, #111827);
|
|
58
58
|
cursor: pointer;
|
|
59
59
|
}
|
|
60
60
|
|
|
@@ -74,12 +74,12 @@ function handleChange(event) {
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.radio-circle {
|
|
77
|
-
width: var(--
|
|
78
|
-
height: var(--
|
|
77
|
+
width: var(--crayon-radio-size, 22px);
|
|
78
|
+
height: var(--crayon-radio-size, 22px);
|
|
79
79
|
border-radius: 999px;
|
|
80
80
|
box-sizing: border-box;
|
|
81
|
-
border: 2px solid var(--
|
|
82
|
-
background-color: var(--
|
|
81
|
+
border: 2px solid var(--crayon-radio-border-color, #111111);
|
|
82
|
+
background-color: var(--crayon-radio-bg, transparent);
|
|
83
83
|
display: inline-flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
justify-content: center;
|
|
@@ -107,14 +107,14 @@ function handleChange(event) {
|
|
|
107
107
|
|
|
108
108
|
/* Checked: purple ring with white center like screenshot */
|
|
109
109
|
.radio-root.is-checked .radio-circle {
|
|
110
|
-
background-color: var(--
|
|
111
|
-
border-color: var(--
|
|
110
|
+
background-color: var(--crayon-radio-checked-bg, var(--crayon-primary, #474bff));
|
|
111
|
+
border-color: var(--crayon-radio-checked-border, var(--crayon-primary, #474bff));
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.radio-root.is-checked .radio-circle::before {
|
|
115
|
-
background-color: var(--
|
|
115
|
+
background-color: var(--crayon-radio-inner, #ffffff);
|
|
116
116
|
box-shadow: 0 0 0 4px
|
|
117
|
-
var(--
|
|
117
|
+
var(--crayon-radio-checked-bg, var(--crayon-primary, #474bff));
|
|
118
118
|
opacity: 1;
|
|
119
119
|
transform: scale(1);
|
|
120
120
|
}
|
|
@@ -127,17 +127,17 @@ function handleChange(event) {
|
|
|
127
127
|
.radio-root:not(.is-disabled) .radio-control input:focus-visible
|
|
128
128
|
+ .radio-circle {
|
|
129
129
|
box-shadow: 0 0 0 3px
|
|
130
|
-
var(--
|
|
130
|
+
var(--crayon-radio-focus-ring, rgba(71, 75, 255, 0.45));
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
.radio-root.is-disabled {
|
|
134
134
|
cursor: not-allowed;
|
|
135
|
-
color: var(--
|
|
135
|
+
color: var(--crayon-radio-label-disabled, #9ca3af);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.radio-root.is-disabled .radio-circle {
|
|
139
|
-
border-color: var(--
|
|
140
|
-
background-color: var(--
|
|
139
|
+
border-color: var(--crayon-radio-border-disabled, #bdbdbc);
|
|
140
|
+
background-color: var(--crayon-radio-bg-disabled, #e5e7eb);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.radio-label:empty {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{o as C,c as S,p as R,t as j,i as H,j as I,k as N,n as
|
|
1
|
+
import{o as C,c as S,p as R,t as j,i as H,j as I,k as N,n as t}from"../../assets/custom-element-CN6vLcFC.js";import{b as O,a as T,s as i}from"../../assets/attributes-o88QCNuy.js";import{a as A,i as B,s as F,c as G}from"../../assets/lifecycle-BK5NY8qp.js";import{p as n}from"../../assets/props-DbUVX42-.js";var J=N("<textarea></textarea>");const K={hash:"svelte-gdvnmx",code:`textarea.svelte-gdvnmx {display:block;width:100%;padding:var(--crayon-input-padding-y, 0.375rem) var(--crayon-input-padding-x, 0.75rem);font-family:inherit;font-size:var(--crayon-input-font-size, 1rem);font-weight:400;line-height:1.5;color:var(--crayon-input-color, #212529);background-color:var(--crayon-input-bg, #fff);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(--crayon-input-box-shadow, inset 0 1px 2px rgba(0, 0, 0, 0.075));transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;box-sizing:border-box;resize:vertical;min-height:calc(1.5em + 0.75rem + 2px);}textarea.svelte-gdvnmx::placeholder {color:var(--crayon-input-placeholder-color, #6c757d);}textarea.svelte-gdvnmx:hover:not(:disabled):not(:read-only) {border-color:var(--crayon-input-hover-border-color, #adb5bd);}textarea.svelte-gdvnmx:focus {outline:0;border-color:var(--crayon-input-focus-border-color, #86b7fe);box-shadow:0 0 0 0.25rem var(--crayon-input-focus-ring, rgba(13, 110, 253, 0.25));}textarea.svelte-gdvnmx:disabled {background-color:var(--crayon-input-disabled-bg, #e9ecef);color:var(--crayon-input-disabled-color, #6c757d);cursor:not-allowed;opacity:1;}textarea.svelte-gdvnmx:read-only {background-color:var(--crayon-input-bg, #fff);}\r
|
|
2
2
|
\r
|
|
3
|
-
/* Sizes */.sm.svelte-gdvnmx {padding:var(--
|
|
3
|
+
/* Sizes */.sm.svelte-gdvnmx {padding:var(--crayon-input-padding-y-sm, 0.25rem) var(--crayon-input-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-gdvnmx {padding:var(--crayon-input-padding-y, 0.375rem) var(--crayon-input-padding-x, 0.75rem);font-size:var(--crayon-input-font-size, 1rem);border-radius:var(--crayon-input-border-radius, 0.375rem);}.lg.svelte-gdvnmx {padding:var(--crayon-input-padding-y-lg, 0.5rem) var(--crayon-input-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 M(_,a){R(a,!1),A(_,K);let d=n(a,"value",12,""),s=n(a,"placeholder",12,""),u=n(a,"name",12,void 0),c=n(a,"id",12,void 0),g=n(a,"rows",12,3),m=n(a,"size",12,"md"),b=n(a,"disabled",12,!1),v=n(a,"readonly",12,!1),h=n(a,"required",12,!1),p=n(a,"maxlength",12,void 0),y=n(a,"minlength",12,void 0),f=n(a,"ariaLabel",12,void 0),x=n(a,"ariaDescribedby",12,void 0),w=n(a,"oninput",12,void 0),z=n(a,"onchange",12,void 0);function q(e){const o=e.getRootNode();return o instanceof ShadowRoot?o.host:null}function k(e){const o=e.target;d(o.value);const l={value:d()};w()?.(l),q(o)?.dispatchEvent(new CustomEvent("input",{detail:l,bubbles:!0}))}function D(e){const o=e.target;d(o.value);const l={value:d()};z()?.(l),q(o)?.dispatchEvent(new CustomEvent("change",{detail:l,bubbles:!0}))}var E={get value(){return d()},set value(e){d(e),t()},get placeholder(){return s()},set placeholder(e){s(e),t()},get name(){return u()},set name(e){u(e),t()},get id(){return c()},set id(e){c(e),t()},get rows(){return g()},set rows(e){g(e),t()},get size(){return m()},set size(e){m(e),t()},get disabled(){return b()},set disabled(e){b(e),t()},get readonly(){return v()},set readonly(e){v(e),t()},get required(){return h()},set required(e){h(e),t()},get maxlength(){return p()},set maxlength(e){p(e),t()},get minlength(){return y()},set minlength(e){y(e),t()},get ariaLabel(){return f()},set ariaLabel(e){f(e),t()},get ariaDescribedby(){return x()},set ariaDescribedby(e){x(e),t()},get oninput(){return w()},set oninput(e){w(e),t()},get onchange(){return z()},set onchange(e){z(e),t()}};B();var r=J();return O(r),r.__input=k,r.__change=D,j(()=>{T(r,d()),i(r,"placeholder",s()),i(r,"name",u()),i(r,"id",c()),i(r,"rows",g()),r.disabled=b(),r.readOnly=v(),r.required=h(),i(r,"maxlength",p()),i(r,"minlength",y()),F(r,1,G(m()),"svelte-gdvnmx"),i(r,"aria-label",f()),i(r,"aria-describedby",x())}),H(_,r),I(E)}C(["input","change"]);const __Default = (S(M,{value:{},placeholder:{},name:{},id:{},rows:{},size:{},disabled:{},readonly:{},required:{},maxlength:{},minlength:{},ariaLabel:{},ariaDescribedby:{},oninput:{},onchange:{}},[],[],{mode:"open"}));
|
|
4
4
|
customElements.define("ui-textarea", __Default);
|
|
5
5
|
export default __Default;
|
|
@@ -60,16 +60,16 @@ function handleChange(event) {
|
|
|
60
60
|
textarea {
|
|
61
61
|
display: block;
|
|
62
62
|
width: 100%;
|
|
63
|
-
padding: var(--
|
|
63
|
+
padding: var(--crayon-input-padding-y, 0.375rem) var(--crayon-input-padding-x, 0.75rem);
|
|
64
64
|
font-family: inherit;
|
|
65
|
-
font-size: var(--
|
|
65
|
+
font-size: var(--crayon-input-font-size, 1rem);
|
|
66
66
|
font-weight: 400;
|
|
67
67
|
line-height: 1.5;
|
|
68
|
-
color: var(--
|
|
69
|
-
background-color: var(--
|
|
70
|
-
border: var(--
|
|
71
|
-
border-radius: var(--
|
|
72
|
-
box-shadow: var(--
|
|
68
|
+
color: var(--crayon-input-color, #212529);
|
|
69
|
+
background-color: var(--crayon-input-bg, #fff);
|
|
70
|
+
border: var(--crayon-input-border-width, 1px) solid var(--crayon-input-border-color, #dee2e6);
|
|
71
|
+
border-radius: var(--crayon-input-border-radius, 0.375rem);
|
|
72
|
+
box-shadow: var(--crayon-input-box-shadow, inset 0 1px 2px rgba(0, 0, 0, 0.075));
|
|
73
73
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
74
74
|
box-sizing: border-box;
|
|
75
75
|
resize: vertical;
|
|
@@ -77,46 +77,46 @@ function handleChange(event) {
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
textarea::placeholder {
|
|
80
|
-
color: var(--
|
|
80
|
+
color: var(--crayon-input-placeholder-color, #6c757d);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
textarea:hover:not(:disabled):not(:read-only) {
|
|
84
|
-
border-color: var(--
|
|
84
|
+
border-color: var(--crayon-input-hover-border-color, #adb5bd);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
textarea:focus {
|
|
88
88
|
outline: 0;
|
|
89
|
-
border-color: var(--
|
|
90
|
-
box-shadow: 0 0 0 0.25rem var(--
|
|
89
|
+
border-color: var(--crayon-input-focus-border-color, #86b7fe);
|
|
90
|
+
box-shadow: 0 0 0 0.25rem var(--crayon-input-focus-ring, rgba(13, 110, 253, 0.25));
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
textarea:disabled {
|
|
94
|
-
background-color: var(--
|
|
95
|
-
color: var(--
|
|
94
|
+
background-color: var(--crayon-input-disabled-bg, #e9ecef);
|
|
95
|
+
color: var(--crayon-input-disabled-color, #6c757d);
|
|
96
96
|
cursor: not-allowed;
|
|
97
97
|
opacity: 1;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
textarea:read-only {
|
|
101
|
-
background-color: var(--
|
|
101
|
+
background-color: var(--crayon-input-bg, #fff);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
/* Sizes */
|
|
105
105
|
.sm {
|
|
106
|
-
padding: var(--
|
|
107
|
-
font-size: var(--
|
|
108
|
-
border-radius: var(--
|
|
106
|
+
padding: var(--crayon-input-padding-y-sm, 0.25rem) var(--crayon-input-padding-x-sm, 0.5rem);
|
|
107
|
+
font-size: var(--crayon-input-font-size-sm, 0.875rem);
|
|
108
|
+
border-radius: var(--crayon-input-border-radius-sm, 0.25rem);
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.md {
|
|
112
|
-
padding: var(--
|
|
113
|
-
font-size: var(--
|
|
114
|
-
border-radius: var(--
|
|
112
|
+
padding: var(--crayon-input-padding-y, 0.375rem) var(--crayon-input-padding-x, 0.75rem);
|
|
113
|
+
font-size: var(--crayon-input-font-size, 1rem);
|
|
114
|
+
border-radius: var(--crayon-input-border-radius, 0.375rem);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.lg {
|
|
118
|
-
padding: var(--
|
|
119
|
-
font-size: var(--
|
|
120
|
-
border-radius: var(--
|
|
118
|
+
padding: var(--crayon-input-padding-y-lg, 0.5rem) var(--crayon-input-padding-x-lg, 1rem);
|
|
119
|
+
font-size: var(--crayon-input-font-size-lg, 1.25rem);
|
|
120
|
+
border-radius: var(--crayon-input-border-radius-lg, 0.5rem);
|
|
121
121
|
}
|
|
122
122
|
</style>
|