crayon-design-system-ui 0.0.1

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

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

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

@@ -0,0 +1,244 @@
+<svelte:options customElement="ui-form-select" />
+
+<script>
+import { onMount } from "svelte";
+export let value = "";
+export let name = void 0;
+export let id = void 0;
+export let size = "md";
+export let disabled = false;
+export let required = false;
+export let multiple = false;
+export let selectSize = void 0;
+export let ariaLabel = void 0;
+export let ariaDescribedby = void 0;
+export let label = void 0;
+export let hintText = void 0;
+export let options = void 0;
+export let placeholder = void 0;
+export let onchange = void 0;
+let selectEl;
+let slotWrapper;
+let optionsFromChildren = [];
+let optionsObserver = null;
+const OPTION_TAG = "UI-FORM-SELECT-OPTION";
+function getHost(el) {
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+function setupOptionsObserver(slot) {
+  if (optionsObserver) {
+    optionsObserver.disconnect();
+  }
+  optionsObserver = new MutationObserver(() => {
+    syncOptionsFromSlot({ target: slot });
+  });
+  const assigned = slot.assignedElements();
+  assigned.forEach((el) => {
+    optionsObserver?.observe(el, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+  });
+}
+function syncOptionsFromSlot(event) {
+  const slot = event?.target ?? selectEl?.closest(".form-select-wrapper")?.querySelector("slot");
+  if (!slot) return;
+  const nodes = slot.assignedNodes();
+  const optionEls = nodes.filter(
+    (n) => n.nodeType === Node.ELEMENT_NODE && n.tagName === OPTION_TAG
+  );
+  if (optionEls.length > 0) {
+    optionsFromChildren = optionEls.map((el) => ({
+      value: el.getAttribute("value") ?? "",
+      label: el.textContent?.trim() ?? el.getAttribute("label") ?? "",
+      selected: el.hasAttribute("selected")
+    }));
+    return;
+  }
+  const nativeOptions = nodes.filter(
+    (n) => n.nodeType === Node.ELEMENT_NODE && (n.tagName === "OPTION" || n.tagName === "OPTGROUP")
+  );
+  if (nativeOptions.length > 0 && selectEl) {
+    nativeOptions.forEach((n) => selectEl.appendChild(n));
+  }
+}
+function handleChange(event) {
+  const target = event.target;
+  value = target.value;
+  const detail = { value };
+  onchange?.(detail);
+  const host = getHost(target);
+  host?.dispatchEvent(new CustomEvent("change", { detail, bubbles: true }));
+}
+$: if (selectEl != null) {
+  const str = value != null ? String(value) : "";
+  if (selectEl.value !== str) {
+    selectEl.value = str;
+  }
+}
+$: selectId = id ?? `ui-form-select-${Math.random().toString(36).slice(2, 9)}`;
+onMount(() => {
+  const slot = slotWrapper?.querySelector("slot");
+  if (!slot) return;
+  const handler = (e) => {
+    syncOptionsFromSlot(e);
+    setupOptionsObserver(slot);
+  };
+  slot.addEventListener("slotchange", handler);
+  requestAnimationFrame(() => {
+    syncOptionsFromSlot({ target: slot });
+    setupOptionsObserver(slot);
+  });
+  return () => {
+    slot.removeEventListener("slotchange", handler);
+    optionsObserver?.disconnect();
+    optionsObserver = null;
+  };
+});
+</script>
+
+<div class="form-select-wrapper">
+  {#if label}
+    <label for={selectId} class="form-select-label">{label}</label>
+  {/if}
+  <select
+    bind:this={selectEl}
+    id={selectId}
+    {name}
+    {disabled}
+    {required}
+    {multiple}
+    size={selectSize}
+    class={size}
+    aria-label={ariaLabel ?? label}
+    aria-describedby={ariaDescribedby}
+    onchange={handleChange}
+    value={value != null ? String(value) : ""}
+  >
+    {#if Array.isArray(options) && options.length > 0}
+      {#if placeholder != null}
+        <option value="" disabled hidden>{placeholder}</option>
+      {/if}
+      {#each options as opt}
+        <option value={opt.value}>{opt.label}</option>
+      {/each}
+    {:else if optionsFromChildren.length > 0}
+      {#if placeholder != null}
+        <option value="" disabled hidden>{placeholder}</option>
+      {/if}
+      {#each optionsFromChildren as o}
+        <option value={o.value} selected={o.selected}>{o.label}</option>
+      {/each}
+    {/if}
+  </select>
+  {#if hintText}
+    <p class="form-select-hint">{hintText}</p>
+  {/if}
+  <!-- Hidden slot: captures ui-form-select-option children (we render from optionsFromChildren) or native <option> (we move into select) -->
+  <div class="form-select-options-slot" bind:this={slotWrapper}>
+    <slot></slot>
+  </div>
+</div>
+
+<style>
+  .form-select-wrapper {
+    display: block;
+  }
+
+  .form-select-label {
+    display: block;
+    margin-bottom: 0.375rem;
+    font-size: var(--ui-label-font-size, 0.875rem);
+    font-weight: 500;
+    color: var(--ui-label-color, #212529);
+  }
+
+  .form-select-hint {
+    margin: 0.375rem 0 0;
+    font-size: var(--ui-hint-font-size, 0.8125rem);
+    color: var(--ui-hint-color, #6c757d);
+  }
+
+  .form-select-options-slot {
+    display: none;
+  }
+
+  select {
+    display: block;
+    width: 100%;
+    padding: var(--ui-select-padding-y, 0.375rem)
+      var(--ui-select-indicator-padding, 2.25rem)
+      var(--ui-select-padding-y, 0.375rem) var(--ui-select-padding-x, 0.75rem);
+    font-family: inherit;
+    font-size: var(--ui-select-font-size, 1rem);
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--ui-input-color, #212529);
+    background-color: var(--ui-input-bg, #fff);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    border: var(--ui-input-border-width, 1px) solid
+      var(--ui-input-border-color, #dee2e6);
+    border-radius: var(--ui-input-border-radius, 0.375rem);
+    box-shadow: var(
+      --ui-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;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  select:hover:not(:disabled) {
+    border-color: var(--ui-input-hover-border-color, #adb5bd);
+  }
+
+  select:focus {
+    outline: 0;
+    border-color: var(--ui-input-focus-border-color, #86b7fe);
+    box-shadow: 0 0 0 0.25rem
+      var(--ui-input-focus-ring, rgba(13, 110, 253, 0.25));
+  }
+
+  select:disabled {
+    background-color: var(--ui-input-disabled-bg, #e9ecef);
+    color: var(--ui-input-disabled-color, #6c757d);
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  /* Sizes */
+  .sm {
+    padding: var(--ui-select-padding-y-sm, 0.25rem)
+      var(--ui-select-indicator-padding, 2rem)
+      var(--ui-select-padding-y-sm, 0.25rem)
+      var(--ui-select-padding-x-sm, 0.5rem);
+    font-size: var(--ui-input-font-size-sm, 0.875rem);
+    border-radius: var(--ui-input-border-radius-sm, 0.25rem);
+  }
+
+  .md {
+    padding: var(--ui-select-padding-y, 0.375rem)
+      var(--ui-select-indicator-padding, 2.25rem)
+      var(--ui-select-padding-y, 0.375rem) var(--ui-select-padding-x, 0.75rem);
+    font-size: var(--ui-select-font-size, 1rem);
+    border-radius: var(--ui-input-border-radius, 0.375rem);
+  }
+
+  .lg {
+    padding: var(--ui-select-padding-y-lg, 0.5rem)
+      var(--ui-select-indicator-padding, 2.5rem)
+      var(--ui-select-padding-y-lg, 0.5rem) var(--ui-select-padding-x-lg, 1rem);
+    font-size: var(--ui-input-font-size-lg, 1.25rem);
+    border-radius: var(--ui-input-border-radius-lg, 0.5rem);
+  }
+</style>

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

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string;
+        name?: string | undefined;
+        id?: string | undefined;
+        size?: "sm" | "md" | "lg";
+        disabled?: boolean;
+        required?: boolean;
+        multiple?: boolean;
+        selectSize?: number | undefined;
+        ariaLabel?: string | undefined;
+        ariaDescribedby?: string | undefined;
+        /** Label shown above the select (like Crayons fw-select). */ label?: string | undefined;
+        /** Hint text shown below the select (like Crayons hint-text). */ hintText?: string | undefined;
+        /**
+           * Optional: pass options as data instead of using the slot. Use this when slot content
+           * doesn't update correctly (e.g. Svelte 5 custom elements with dynamic {#each} in slot).
+           * Format: [ { value: string, label: string }, ... ]
+           */ options?: Array<{
+            value: string;
+            label: string;
+        }> | undefined;
+        /** Placeholder option label when using `options` (e.g. "Select..."). Shown as first option with value "". */ placeholder?: string | undefined;
+        /** Callback when selection changes (Svelte 5 replacement for deprecated createEventDispatcher). */ onchange?: ((detail: {
+            value: string;
+        }) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormSelectProps = typeof __propDef.props;
+export type FormSelectEvents = typeof __propDef.events;
+export type FormSelectSlots = typeof __propDef.slots;
+export default class FormSelect extends SvelteComponentTyped<FormSelectProps, FormSelectEvents, FormSelectSlots> {
+}
+export {};

package/dist/components/form-select/FormSelectOption.d.ts

@@ -0,0 +1 @@
+export { default } from "./FormSelectOption.svelte";

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

@@ -0,0 +1,3 @@
+import{c as i,p as v,v as p,w as b,i as m,j as _,n as a,A as g,t as x,z as h}from"../../assets/custom-element-CN6vLcFC.js";import{s as S}from"../../assets/slot-CRFQJtYY.js";import{p as s}from"../../assets/props-DbUVX42-.js";function j(c,t){v(t,!1);let r=s(t,"value",12,""),n=s(t,"selected",12,!1),l=s(t,"label",12,void 0);var f={get value(){return r()},set value(e){r(e),a()},get selected(){return n()},set selected(e){n(e),a()},get label(){return l()},set label(e){l(e),a()}},o=p(),d=b(o);return S(d,t,"default",{},e=>{var u=g();x(()=>h(u,l())),m(e,u)}),m(c,o),_(f)}const __Default = (i(j,{value:{},selected:{},label:{}},["default"],[],{mode:"open"}));
+customElements.define("ui-form-select-option", __Default);
+export default __Default;

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

@@ -0,0 +1,10 @@
+<svelte:options customElement="ui-form-select-option" />
+
+<script>
+export let value = "";
+export let selected = false;
+export let label = void 0;
+</script>
+
+<!-- Parent ui-form-select reads this element's value, selected, and textContent/slot for the option label -->
+<slot>{label}</slot>

package/dist/components/form-select/FormSelectOption.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Option value (submitted with the form). */ value?: string;
+        /** Whether this option is selected by default. */ selected?: boolean;
+        /** Optional label (if not using slot content). */ label?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormSelectOptionProps = typeof __propDef.props;
+export type FormSelectOptionEvents = typeof __propDef.events;
+export type FormSelectOptionSlots = typeof __propDef.slots;
+export default class FormSelectOption extends SvelteComponentTyped<FormSelectOptionProps, FormSelectOptionEvents, FormSelectOptionSlots> {
+}
+export {};

package/dist/components/input/Input.d.ts

@@ -0,0 +1 @@
+export { default } from "./Input.svelte";

package/dist/components/input/Input.js

@@ -0,0 +1,24 @@
+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 ie,w as oe,B as ue}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 o,a as Ve}from"../../assets/attributes-o88QCNuy.js";import{p as i}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=ue('<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=ue('<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(--ui-input-border-radius, 8px);border:var(--ui-input-border-width, 1px) solid\r
+      var(--ui-input-border-color-default, #e0e0e0);background-color:var(--ui-input-bg, #feffff);transition:border-color 0.15s ease-in-out,\r
+      box-shadow 0.15s ease-in-out;box-sizing:border-box;}\r
+\r
+  /* Basic/Default: purple border when empty */.input-wrapper.svelte-yoy3nv:not(.has-value):not(.state-error):not(.state-success) {border-color:var(--ui-input-border-color-default, #e0e0e0);}\r
+\r
+  /* 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(--ui-input-focus-border-color, #2563eb);}.input-wrapper.has-value.svelte-yoy3nv:not(.state-error):not(.state-success):not(\r
+      :focus-within\r
+    ) {border-color:var(--ui-input-border-color-data, #e0e0e0);}\r
+\r
+  /* Active (focus): blue border */.input-wrapper.svelte-yoy3nv:focus-within:not(.state-error):not(.state-success) {border-color:var(--ui-input-focus-border-color, #2563eb);box-shadow:0 0 0 0.2rem var(--ui-input-focus-ring, rgba(37, 99, 235, 0.25));}\r
+\r
+  /* Error state */.input-wrapper.state-error.svelte-yoy3nv {border-color:var(--ui-input-error-border-color, #dc2626);}.input-wrapper.state-error.svelte-yoy3nv:focus-within {box-shadow:0 0 0 0.2rem var(--ui-input-error-ring, rgba(220, 38, 38, 0.25));}\r
+\r
+  /* Success state */.input-wrapper.state-success.svelte-yoy3nv {border-color:var(--ui-input-success-border-color, #16a34a);}.input-wrapper.state-success.svelte-yoy3nv:focus-within {box-shadow:0 0 0 0.2rem\r
+      var(--ui-input-success-ring, rgba(22, 163, 74, 0.25));}\r
+\r
+  /* Disabled: light grey border and bg */.input-el.svelte-yoy3nv:disabled {background-color:var(--ui-input-disabled-bg, #e9ecef);color:var(--ui-input-disabled-color, #6c757d);cursor:not-allowed;}.input-wrapper.svelte-yoy3nv:has(:where(.svelte-yoy3nv):disabled) {border-color:var(--ui-input-disabled-border-color, #dee2e6);background-color:var(--ui-input-disabled-bg, #e9ecef);}.input-el.svelte-yoy3nv {display:block;flex:1;min-width:0;padding:var(--ui-input-padding-y, 9px) var(--ui-input-padding-x, 16px);font-family:inherit;font-size:var(--ui-input-font-size, 14px);line-height:1.5;color:var(--ui-input-color, #222121);background:transparent;border:none;outline:0;box-shadow:none;box-sizing:border-box;}.input-el.svelte-yoy3nv::placeholder {color:var(--ui-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(--ui-input-icon-color, #6b7280);}.input-icon-leading.svelte-yoy3nv {left:var(--ui-input-padding-x, 16px);color:var(--ui-input-search-icon-color, #6b7280);}.input-wrapper.variant-search.svelte-yoy3nv:focus-within .input-icon-leading:where(.svelte-yoy3nv) {color:var(--ui-input-focus-border-color, #2563eb);}.input-wrapper.svelte-yoy3nv:has(:where(.svelte-yoy3nv):disabled) .input-icon-leading:where(.svelte-yoy3nv) {color:var(--ui-input-disabled-color, #6c757d);}.input-icon-trailing.svelte-yoy3nv {right:var(--ui-input-padding-x, 16px);}.input-icon-error.svelte-yoy3nv {color:var(--ui-input-error-icon-color, #dc2626);}.input-icon-success.svelte-yoy3nv {color:var(--ui-input-success-icon-color, #16a34a);}.input-icon-disabled.svelte-yoy3nv {color:var(--ui-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(--ui-input-icon-color, #6b7280);}.input-icon-password-toggle.svelte-yoy3nv:hover {color:var(--ui-input-focus-border-color, #2563eb);}\r
+\r
+  /* Sizes */.input-wrapper.sm.svelte-yoy3nv .input-el:where(.svelte-yoy3nv) {padding:var(--ui-input-padding-y-sm, 0.25rem)\r
+      var(--ui-input-padding-x-sm, 0.5rem);font-size:var(--ui-input-font-size-sm, 0.875rem);}.input-wrapper.sm.svelte-yoy3nv {border-radius:var(--ui-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(--ui-input-padding-y, 9px) var(--ui-input-padding-x, 16px);font-size:var(--ui-input-font-size, 14px);}.input-wrapper.md.svelte-yoy3nv {border-radius:var(--ui-input-border-radius, 8px);}.input-wrapper.lg.svelte-yoy3nv .input-el:where(.svelte-yoy3nv) {padding:var(--ui-input-padding-y-lg, 0.5rem)\r
+      var(--ui-input-padding-x-lg, 1rem);font-size:var(--ui-input-font-size-lg, 1.25rem);}.input-wrapper.lg.svelte-yoy3nv {border-radius:var(--ui-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 u=i(t,"value",12,""),d=i(t,"type",12,"text"),B=i(t,"placeholder",12,""),V=i(t,"name",12,void 0),D=i(t,"id",12,void 0),C=i(t,"size",12,"md"),h=i(t,"disabled",12,!1),H=i(t,"readonly",12,!1),S=i(t,"required",12,!1),p=i(t,"variant",12,"default"),v=i(t,"validationState",12,void 0),E=i(t,"autocomplete",12,void 0),Z=i(t,"min",12,void 0),q=i(t,"max",12,void 0),j=i(t,"step",12,void 0),I=i(t,"maxlength",12,void 0),P=i(t,"minlength",12,void 0),R=i(t,"pattern",12,void 0),T=i(t,"ariaLabel",12,void 0),A=i(t,"ariaDescribedby",12,void 0),N=i(t,"oninput",12,void 0),O=i(t,"onchange",12,void 0),_=i(t,"extraClass",12,""),b=x(!1);function X(){d()!=="password"||h()||f(b,!s(b))}function $(e){const r=e.getRootNode();return r instanceof ShadowRoot?r.host:null}function de(e){const r=e.target;u(r.value);const g={value:u()};N()?.(g),$(r)?.dispatchEvent(new CustomEvent("input",{detail:g,bubbles:!0}))}function ve(e){const r=e.target;u(r.value);const g={value:u()};O()?.(g),$(r)?.dispatchEvent(new CustomEvent("change",{detail:g,bubbles:!0}))}L(()=>y(u()),()=>{f(z,u()!=="")}),L(()=>(y(C()),y(p()),y(v()),s(z),y(_())),()=>{f(U,`input-wrapper ${C()} variant-${p()} ${v()?`state-${v()}`:""} ${s(z)?"has-value":""} ${_()}`.trim())}),L(()=>(y(p()),y(d())),()=>{f(M,p()==="search"?"search":d())}),L(()=>(y(d()),s(b),s(M)),()=>{f(W,d()==="password"?s(b)?"text":"password":s(M))}),_e();var pe={get value(){return u()},set value(e){u(e),a()},get type(){return d()},set type(e){d(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 p()},set variant(e){p(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 ce=e=>{var r=De();l(e,r)};K(ee,e=>{p()==="search"&&e(ce)})}var n=ne(ee,2);Be(n),n.__input=de,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=c=>c.key==="Enter"&&X();var g=re(r);{var Y=c=>{var m=ie(),F=oe(m);se(F,t,"password-toggle-visible",{},G=>{var J=Se();l(G,J)}),l(c,m)},me=c=>{var m=ie(),F=oe(m);se(F,t,"password-toggle-hidden",{},G=>{var J=Ee();l(G,J)}),l(c,m)};K(g,c=>{s(b)?c(Y):c(me,!1)})}ae(r),te(()=>o(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):d()==="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"),o(n,"type",s(W)),Ve(n,u()),o(n,"placeholder",B()),o(n,"name",V()),o(n,"id",D()),n.disabled=h(),n.readOnly=H(),n.required=S(),o(n,"autocomplete",E()),o(n,"min",Z()),o(n,"max",q()),o(n,"step",j()),o(n,"maxlength",I()),o(n,"minlength",P()),o(n,"pattern",R()),le(n,1,`input-el ${p()==="search"?"has-leading-icon":""} ${v()||h()||d()==="password"?"has-trailing-icon":""}`,"svelte-yoy3nv"),o(n,"aria-label",T()),o(n,"aria-describedby",A()),o(n,"aria-invalid",v()==="error"?"true":void 0)}),l(Q,k),ke(pe)}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"}));
+customElements.define("ui-input", __Default);
+export default __Default;