crayon-design-system-ui 0.0.1

package/dist/components/card/Card.js

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

package/dist/components/card/Card.svelte

@@ -0,0 +1,244 @@
+<svelte:options customElement="ui-card" />
+
+<script>
+import { onMount } from "svelte";
+export let variant = "default";
+export let textAlign = "start";
+export let extraClass = "";
+let cardEl;
+let hasHeader = false;
+let hasFooter = false;
+let hasImageTop = false;
+let hasImageBottom = false;
+function updateSlotVisibility() {
+  if (!cardEl) return;
+  const root = cardEl.getRootNode();
+  if (!root) return;
+  const slotHeader = root.querySelector('slot[name="header"]');
+  const slotFooter = root.querySelector('slot[name="footer"]');
+  const slotImgTop = root.querySelector('slot[name="image-top"]');
+  const slotImgBottom = root.querySelector('slot[name="image-bottom"]');
+  hasHeader = (slotHeader?.assignedNodes().length ?? 0) > 0;
+  hasFooter = (slotFooter?.assignedNodes().length ?? 0) > 0;
+  hasImageTop = (slotImgTop?.assignedNodes().length ?? 0) > 0;
+  hasImageBottom = (slotImgBottom?.assignedNodes().length ?? 0) > 0;
+}
+onMount(() => {
+  updateSlotVisibility();
+  const mo = new MutationObserver(updateSlotVisibility);
+  const root = cardEl?.getRootNode();
+  const host = root?.host;
+  if (host) mo.observe(host, { childList: true, subtree: true });
+  return () => mo.disconnect();
+});
+$: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.trim();
+</script>
+
+<div class={rootClass} bind:this={cardEl}>
+  <div class="card-img-top-wrapper" class:has-content={hasImageTop}>
+    <slot name="image-top"></slot>
+  </div>
+  <div class="card-header" class:has-content={hasHeader}>
+    <slot name="header"></slot>
+  </div>
+  <div class="card-body">
+    <slot></slot>
+  </div>
+  <div class="card-footer" class:has-content={hasFooter}>
+    <slot name="footer"></slot>
+  </div>
+  <div class="card-img-bottom-wrapper" class:has-content={hasImageBottom}>
+    <slot name="image-bottom"></slot>
+  </div>
+</div>
+
+<style>
+  .card-root {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: var(--ui-card-font-size, 14px);
+    line-height: 1.5;
+    color: var(--ui-card-color, #212529);
+    background-color: var(--ui-card-bg, #fff);
+    border: var(--ui-card-border-width, 1px) solid
+      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));
+    border-radius: var(--ui-card-border-radius, 8px);
+    box-shadow: var(--ui-card-box-shadow, none);
+  }
+
+  /* Variants: default uses CSS vars above; others set bg + border + color */
+  .card-root.variant-primary {
+    background-color: var(--ui-card-primary-bg, #0d6efd);
+    border-color: var(--ui-card-primary-border, #0d6efd);
+    color: var(--ui-card-primary-color, #fff);
+  }
+
+  .card-root.variant-secondary {
+    background-color: var(--ui-card-secondary-bg, #6c757d);
+    border-color: var(--ui-card-secondary-border, #6c757d);
+    color: var(--ui-card-secondary-color, #fff);
+  }
+
+  .card-root.variant-success {
+    background-color: var(--ui-card-success-bg, #198754);
+    border-color: var(--ui-card-success-border, #198754);
+    color: var(--ui-card-success-color, #fff);
+  }
+
+  .card-root.variant-danger {
+    background-color: var(--ui-card-danger-bg, #dc3545);
+    border-color: var(--ui-card-danger-border, #dc3545);
+    color: var(--ui-card-danger-color, #fff);
+  }
+
+  .card-root.variant-warning {
+    background-color: var(--ui-card-warning-bg, #ffc107);
+    border-color: var(--ui-card-warning-border, #ffc107);
+    color: var(--ui-card-warning-color, #000);
+  }
+
+  .card-root.variant-info {
+    background-color: var(--ui-card-info-bg, #0dcaf0);
+    border-color: var(--ui-card-info-border, #0dcaf0);
+    color: var(--ui-card-info-color, #000);
+  }
+
+  .card-root.variant-light {
+    background-color: var(--ui-card-light-bg, #f8f9fa);
+    border-color: var(--ui-card-light-border, #e9ecef);
+    color: var(--ui-card-light-color, #212529);
+  }
+
+  .card-root.variant-dark {
+    background-color: var(--ui-card-dark-bg, #212529);
+    border-color: var(--ui-card-dark-border, #212529);
+    color: var(--ui-card-dark-color, #fff);
+  }
+
+  /* Text alignment */
+  .card-root.text-start {
+    text-align: start;
+  }
+
+  .card-root.text-center {
+    text-align: center;
+  }
+
+  .card-root.text-end {
+    text-align: end;
+  }
+
+  .card-header {
+    padding: var(--ui-card-header-padding-y, 0.5rem) var(--ui-card-header-padding-x, 1rem);
+    margin-bottom: 0;
+    background-color: var(--ui-card-header-bg, rgba(0, 0, 0, 0.03));
+    border-bottom: var(--ui-card-border-width, 1px) solid
+      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));
+    border-radius: calc(var(--ui-card-border-radius, 8px) - 1px) calc(var(--ui-card-border-radius, 8px) - 1px) 0 0;
+  }
+
+  .card-root.variant-default .card-header {
+    background-color: var(--ui-card-header-bg, rgba(0, 0, 0, 0.03));
+  }
+
+  .card-root.variant-primary .card-header,
+  .card-root.variant-secondary .card-header,
+  .card-root.variant-success .card-header,
+  .card-root.variant-danger .card-header,
+  .card-root.variant-warning .card-header,
+  .card-root.variant-info .card-header,
+  .card-root.variant-dark .card-header {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-bottom-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .card-header:not(.has-content) {
+    display: none;
+  }
+
+  .card-body {
+    flex: 1 1 auto;
+    padding: var(--ui-card-body-padding-y, 1rem) var(--ui-card-body-padding-x, 1rem);
+  }
+
+  .card-body ::slotted(h1),
+  .card-body ::slotted(h2),
+  .card-body ::slotted(h3),
+  .card-body ::slotted(h4),
+  .card-body ::slotted(h5),
+  .card-body ::slotted(h6) {
+    margin-top: 0;
+    margin-bottom: var(--ui-card-title-margin-bottom, 0.5rem);
+    font-size: var(--ui-card-title-font-size, 1.25rem);
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  .card-body ::slotted(p) {
+    margin-top: 0;
+    margin-bottom: var(--ui-card-text-margin-bottom, 0.5rem);
+  }
+
+  .card-body ::slotted(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .card-footer {
+    padding: var(--ui-card-footer-padding-y, 0.5rem) var(--ui-card-footer-padding-x, 1rem);
+    background-color: var(--ui-card-footer-bg, rgba(0, 0, 0, 0.03));
+    border-top: var(--ui-card-border-width, 1px) solid
+      var(--ui-card-border-color, rgba(0, 0, 0, 0.125));
+    border-radius: 0 0 calc(var(--ui-card-border-radius, 8px) - 1px)
+      calc(var(--ui-card-border-radius, 8px) - 1px);
+  }
+
+  .card-root.variant-primary .card-footer,
+  .card-root.variant-secondary .card-footer,
+  .card-root.variant-success .card-footer,
+  .card-root.variant-danger .card-footer,
+  .card-root.variant-warning .card-footer,
+  .card-root.variant-info .card-footer,
+  .card-root.variant-dark .card-footer {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .card-footer:not(.has-content) {
+    display: none;
+  }
+
+  .card-img-top-wrapper:not(.has-content),
+  .card-img-bottom-wrapper:not(.has-content) {
+    display: none;
+  }
+
+  .card-img-top-wrapper.has-content {
+    overflow: hidden;
+    border-top-left-radius: var(--ui-card-border-radius, 8px);
+    border-top-right-radius: var(--ui-card-border-radius, 8px);
+  }
+
+  .card-img-top-wrapper.has-content ::slotted(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+  .card-img-bottom-wrapper.has-content {
+    overflow: hidden;
+    border-bottom-left-radius: var(--ui-card-border-radius, 8px);
+    border-bottom-right-radius: var(--ui-card-border-radius, 8px);
+  }
+
+  .card-img-bottom-wrapper.has-content ::slotted(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+</style>

package/dist/components/card/Card.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * Visual variant: background and border (Bootstrap-style).
+           * `default` = white bg with border; others = colored bg + contrasting text.
+           */ variant?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+        /** Text alignment for the card body (and header/footer when applicable). */ textAlign?: "start" | "center" | "end";
+        /** Extra class(es) for the card root. Set via the extra-class attribute. */ extraClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'image-top': {};
+        header: {};
+        default: {};
+        footer: {};
+        'image-bottom': {};
+    };
+};
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/dist/components/checkbox/Checkbox.d.ts

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

package/dist/components/checkbox/Checkbox.js

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

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,196 @@
+<svelte:options customElement="ui-checkbox" />
+
+<script>
+import { onMount } from "svelte";
+export let checked = false;
+export let disabled = false;
+export let indeterminate = false;
+export let name = void 0;
+export let value = void 0;
+export let ariaLabel = void 0;
+export let ariaDescribedby = void 0;
+export let onchange = void 0;
+function toBool(v) {
+  if (typeof v === "boolean") return v;
+  if (v == null) return false;
+  return String(v).toLowerCase() === "true";
+}
+$: checkedBool = toBool(checked);
+$: disabledBool = toBool(disabled);
+$: indeterminateBool = toBool(indeterminate);
+let inputEl;
+function getHost(el) {
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+function syncIndeterminate() {
+  if (inputEl) {
+    inputEl.indeterminate = indeterminateBool;
+  }
+}
+onMount(syncIndeterminate);
+$: syncIndeterminate();
+function handleChange(event) {
+  const target = event.target;
+  checked = target.checked;
+  if (indeterminateBool) {
+    indeterminate = false;
+    syncIndeterminate();
+  }
+  const detail = { checked: target.checked, indeterminate: false };
+  onchange?.(detail);
+  const host = getHost(target);
+  host?.dispatchEvent(new CustomEvent("change", { detail, bubbles: true }));
+}
+</script>
+
+<label
+  class="checkbox-root {checkedBool ? 'is-checked' : ''} {indeterminateBool
+    ? 'is-indeterminate'
+    : ''} {disabledBool ? 'is-disabled' : ''}"
+>
+  <span class="checkbox-control">
+    <input
+      bind:this={inputEl}
+      type="checkbox"
+      {name}
+      {value}
+      checked={checkedBool}
+      disabled={disabledBool}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedby}
+      aria-checked={indeterminateBool ? "mixed" : checkedBool ? "true" : "false"}
+      on:change={handleChange}
+    />
+    <span class="checkbox-box" aria-hidden="true"></span>
+  </span>
+  <span class="checkbox-label">
+    <slot />
+  </span>
+</label>
+
+<style>
+  .checkbox-root {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      sans-serif;
+    font-size: 14px;
+    line-height: 1.3;
+    color: var(--ui-checkbox-label-color, #111827);
+    cursor: pointer;
+    /* Prevent vertical shift when state or focus changes */
+    min-height: var(--ui-checkbox-size, 22px);
+  }
+
+  .checkbox-control {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Fixed size so layout doesn’t shift when checkmark appears or on focus */
+    width: var(--ui-checkbox-size, 22px);
+    height: var(--ui-checkbox-size, 22px);
+    flex-shrink: 0;
+  }
+
+  .checkbox-control input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: inherit;
+    outline: none;
+  }
+
+  .checkbox-box {
+    width: var(--ui-checkbox-size, 22px);
+    height: var(--ui-checkbox-size, 22px);
+    min-width: var(--ui-checkbox-size, 22px);
+    min-height: var(--ui-checkbox-size, 22px);
+    flex-shrink: 0;
+    border-radius: var(--ui-checkbox-radius, 4px);
+    border: 2px solid var(--ui-checkbox-border-color, #111111);
+    background-color: var(--ui-checkbox-bg, transparent);
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  /* Out of flow so checkmark/indeterminate never affect layout */
+  .checkbox-box::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    opacity: 0;
+    transition:
+      opacity 0.1s ease,
+      transform 0.1s ease;
+  }
+
+  /* Checked: solid purple square with checkmark */
+  .checkbox-root.is-checked .checkbox-box {
+    background-color: var(--ui-checkbox-checked-bg, var(--ui-primary, #474bff));
+    border-color: var(--ui-checkbox-checked-border, var(--ui-primary, #474bff));
+  }
+
+  .checkbox-root.is-checked .checkbox-box::before {
+    width: 26%;
+    height: 50%;
+    border-right: 3px solid var(--ui-checkbox-check-color, #ffffff);
+    border-bottom: 3px solid var(--ui-checkbox-check-color, #ffffff);
+    transform: rotate(45deg) translate(-8%, -8%);
+    transform-origin: center center;
+    opacity: 1;
+  }
+
+  /* Indeterminate: solid purple with dash */
+  .checkbox-root.is-indeterminate .checkbox-box {
+    background-color: var(--ui-checkbox-checked-bg, var(--ui-primary, #474bff));
+    border-color: var(--ui-checkbox-checked-border, var(--ui-primary, #474bff));
+  }
+
+  .checkbox-root.is-indeterminate .checkbox-box::before {
+    width: 70%;
+    height: 0;
+    border-bottom: 3px solid var(--ui-checkbox-check-color, #ffffff);
+    opacity: 1;
+    transform: none;
+  }
+
+  /* Hover + focus ring */
+  .checkbox-root:not(.is-disabled)
+    .checkbox-control
+    input:focus-visible
+    + .checkbox-box {
+    box-shadow: 0 0 0 3px var(--ui-checkbox-focus-ring, rgba(71, 75, 255, 0.45));
+  }
+
+
+  .checkbox-root.is-disabled {
+    cursor: not-allowed;
+    color: var(--ui-checkbox-label-disabled, #9ca3af);
+  }
+
+  .checkbox-root.is-disabled .checkbox-box {
+    border-color: var(--ui-checkbox-border-disabled, #bdbdbc);
+    background-color: var(--ui-checkbox-bg-disabled, #e5e7eb);
+  }
+
+  .checkbox-label:empty {
+    display: none;
+  }
+</style>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        checked?: boolean;
+        disabled?: boolean;
+        /** Visual indeterminate state (dash) for tri-state checkboxes. */ indeterminate?: boolean;
+        name?: string | undefined;
+        value?: string | undefined;
+        ariaLabel?: string | undefined;
+        ariaDescribedby?: string | undefined;
+        /** Callback when checked state changes. */ onchange?: ((detail: {
+            checked: boolean;
+            indeterminate: boolean;
+        }) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/dist/components/form/Form.d.ts

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

package/dist/components/form/Form.js

@@ -0,0 +1,4 @@
+import{c as S,p as D,t as E,f as k,i as F,j as R,k as j,b as B,n as o,r as H,g as m,s as I,m as M}from"../../assets/custom-element-CN6vLcFC.js";import{s as N}from"../../assets/slot-CRFQJtYY.js";import{a as U,i as q,s as z}from"../../assets/lifecycle-BK5NY8qp.js";import{s as r}from"../../assets/attributes-o88QCNuy.js";import{b as A}from"../../assets/this-DllEouAd.js";import{p as n}from"../../assets/props-DbUVX42-.js";var G=j("<form><!></form>");const J={hash:"svelte-1a6csuh",code:`.form-root.svelte-1a6csuh {display:block;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;}`};function K(y,a){D(a,!1),U(y,J);let l=n(a,"action",12,void 0),i=n(a,"method",12,"get"),u=n(a,"enctype",12,"application/x-www-form-urlencoded"),c=n(a,"target",12,void 0),f=n(a,"name",12,void 0),d=n(a,"autocomplete",12,void 0),g=n(a,"noValidate",12,!1),h=n(a,"extraClass",12,""),p=n(a,"onsubmit",12,void 0),s=M();function x(t){const b=t.getRootNode();return b instanceof ShadowRoot?b.host:null}function w(t){if(!m(s))return;t.preventDefault();const v={formData:new FormData(m(s)),form:m(s)};p()?.(v);const _=x(m(s));_&&_.dispatchEvent(new CustomEvent("submit",{detail:v,bubbles:!0,cancelable:!0}))}var C={get action(){return l()},set action(t){l(t),o()},get method(){return i()},set method(t){i(t),o()},get enctype(){return u()},set enctype(t){u(t),o()},get target(){return c()},set target(t){c(t),o()},get name(){return f()},set name(t){f(t),o()},get autocomplete(){return d()},set autocomplete(t){d(t),o()},get noValidate(){return g()},set noValidate(t){g(t),o()},get extraClass(){return h()},set extraClass(t){h(t),o()},get onsubmit(){return p()},set onsubmit(t){p(t),o()}};q();var e=G(),V=B(e);return N(V,a,"default",{},null),H(e),A(e,t=>I(s,t),()=>m(s)),E(()=>{z(e,1,`form-root ${h()??""}`,"svelte-1a6csuh"),r(e,"action",l()),r(e,"method",i()),r(e,"enctype",u()),r(e,"target",c()),r(e,"name",f()),r(e,"autocomplete",d()),e.noValidate=g()}),k("submit",e,w),F(y,e),R(C)}const __Default = (S(K,{action:{},method:{},enctype:{},target:{},name:{},autocomplete:{},noValidate:{},extraClass:{},onsubmit:{}},["default"],[],{mode:"open"}));
+customElements.define("ui-form", __Default);
+export default __Default;

package/dist/components/form/Form.svelte

@@ -0,0 +1,54 @@
+<svelte:options customElement="ui-form" />
+
+<script>
+export let action = void 0;
+export let method = "get";
+export let enctype = "application/x-www-form-urlencoded";
+export let target = void 0;
+export let name = void 0;
+export let autocomplete = void 0;
+export let noValidate = false;
+export let extraClass = "";
+export let onsubmit = void 0;
+let formEl;
+function getHost(el) {
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+function handleSubmit(event) {
+  if (!formEl) return;
+  event.preventDefault();
+  const formData = new FormData(formEl);
+  const detail = { formData, form: formEl };
+  onsubmit?.(detail);
+  const host = getHost(formEl);
+  if (host) {
+    host.dispatchEvent(
+      new CustomEvent("submit", { detail, bubbles: true, cancelable: true })
+    );
+  }
+}
+</script>
+
+<form
+  bind:this={formEl}
+  class="form-root {extraClass}"
+  {action}
+  {method}
+  enctype={enctype}
+  {target}
+  {name}
+  autocomplete={autocomplete}
+  noValidate={noValidate}
+  on:submit={handleSubmit}
+>
+  <slot />
+</form>
+
+<style>
+  .form-root {
+    display: block;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+  }
+</style>

package/dist/components/form/Form.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Form submission URL (native `action`). */ action?: string | undefined;
+        /** HTTP method: get or post. */ method?: "get" | "post";
+        /** Encoding for form data (e.g. multipart/form-data for file uploads). */ enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+        /** Where to open the response: _self, _blank, _parent, _top, or frame name. */ target?: string | undefined;
+        /** Form name (for scripting). */ name?: string | undefined;
+        /** Autocomplete for the form: on or off. */ autocomplete?: "on" | "off" | undefined;
+        /** When true, disables browser native validation (use with custom validation). */ noValidate?: boolean;
+        /** Extra class(es) for the form element. Set via the extra-class attribute. */ extraClass?: string;
+        /** Callback when form is submitted. Receives FormData; return false or call preventDefault on event to cancel. */ onsubmit?: ((detail: {
+            formData: FormData;
+            form: HTMLFormElement;
+        }) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponentTyped<FormProps, FormEvents, FormSlots> {
+}
+export {};

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

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