crayon-design-system-ui 0.0.1

package/dist/components/input/Input.svelte

@@ -0,0 +1,429 @@
+<svelte:options customElement="ui-input" />
+
+<script>
+export let value = "";
+export let type = "text";
+export let placeholder = "";
+export let name = void 0;
+export let id = void 0;
+export let size = "md";
+export let disabled = false;
+export let readonly = false;
+export let required = false;
+export let variant = "default";
+export let validationState = void 0;
+export let autocomplete = void 0;
+export let min = void 0;
+export let max = void 0;
+export let step = void 0;
+export let maxlength = void 0;
+export let minlength = void 0;
+export let pattern = void 0;
+export let ariaLabel = void 0;
+export let ariaDescribedby = void 0;
+export let oninput = void 0;
+export let onchange = void 0;
+export let extraClass = "";
+$: hasValue = value !== "";
+$: wrapperClass = `input-wrapper ${size} variant-${variant} ${validationState ? `state-${validationState}` : ""} ${hasValue ? "has-value" : ""} ${extraClass}`.trim();
+$: inputType = variant === "search" ? "search" : type;
+let showPassword = false;
+$: effectiveInputType = type === "password" ? showPassword ? "text" : "password" : inputType;
+function togglePassword() {
+  if (type !== "password" || disabled) return;
+  showPassword = !showPassword;
+}
+function getHost(el) {
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+function handleInput(event) {
+  const target = event.target;
+  value = target.value;
+  const detail = { value };
+  oninput?.(detail);
+  const host = getHost(target);
+  host?.dispatchEvent(new CustomEvent("input", { detail, bubbles: true }));
+}
+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 }));
+}
+</script>
+
+<div
+  class={wrapperClass}
+  role="presentation"
+>
+  {#if variant === "search"}
+    <span class="input-icon input-icon-leading" 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"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.35-4.35"></path>
+      </svg>
+    </span>
+  {/if}
+  <input
+    type={effectiveInputType}
+    {value}
+    {placeholder}
+    {name}
+    {id}
+    {disabled}
+    {readonly}
+    {required}
+    autocomplete={autocomplete}
+    {min}
+    {max}
+    {step}
+    {maxlength}
+    {minlength}
+    {pattern}
+    class="input-el {variant === 'search'
+      ? 'has-leading-icon'
+      : ''} {validationState || disabled || type === 'password'
+      ? 'has-trailing-icon'
+      : ''}"
+    aria-label={ariaLabel}
+    aria-describedby={ariaDescribedby}
+    aria-invalid={validationState === "error" ? "true" : undefined}
+    oninput={handleInput}
+    onchange={handleChange}
+  />
+  {#if disabled}
+    <span
+      class="input-icon input-icon-trailing input-icon-disabled"
+      aria-hidden="true"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <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"
+        />
+      </svg>
+    </span>
+  {:else if type === "password"}
+    <button
+      type="button"
+      class="input-icon input-icon-trailing input-icon-password-toggle"
+      aria-label={showPassword ? "Hide password" : "Show password"}
+      tabindex="-1"
+      onclick={togglePassword}
+      onkeydown={(e) => e.key === "Enter" && togglePassword()}
+    >
+      {#if showPassword}
+        <slot name="password-toggle-visible">
+          <!-- Default: eye-off (hide password) -->
+          <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"
+          >
+            <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"
+            />
+            <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+            <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"
+            />
+            <path d="m2 2 20 20" />
+          </svg>
+        </slot>
+      {:else}
+        <slot name="password-toggle-hidden">
+          <!-- Default: eye (show password) -->
+          <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"
+          >
+            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        </slot>
+      {/if}
+    </button>
+  {:else if validationState === "error"}
+    <span
+      class="input-icon input-icon-trailing input-icon-error"
+      aria-hidden="true"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <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"
+        />
+      </svg>
+    </span>
+  {:else if validationState === "success"}
+    <span
+      class="input-icon input-icon-trailing input-icon-success"
+      aria-hidden="true"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <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"
+        />
+      </svg>
+    </span>
+  {/if}
+</div>
+
+<style>
+  .input-wrapper {
+    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
+      var(--ui-input-border-color-default, #e0e0e0);
+    background-color: var(--ui-input-bg, #feffff);
+    transition:
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+    box-sizing: border-box;
+  }
+
+  /* Basic/Default: purple border when empty */
+  .input-wrapper:not(.has-value):not(.state-error):not(.state-success) {
+    border-color: var(--ui-input-border-color-default, #e0e0e0);
+  }
+
+  /* Data: grey border when has value, not focused */
+  .input-wrapper.has-value:not(.state-error):not(.state-success):focus-within {
+    border-color: var(--ui-input-focus-border-color, #2563eb);
+  }
+
+  .input-wrapper.has-value:not(.state-error):not(.state-success):not(
+      :focus-within
+    ) {
+    border-color: var(--ui-input-border-color-data, #e0e0e0);
+  }
+
+  /* Active (focus): blue border */
+  .input-wrapper: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));
+  }
+
+  /* Error state */
+  .input-wrapper.state-error {
+    border-color: var(--ui-input-error-border-color, #dc2626);
+  }
+
+  .input-wrapper.state-error:focus-within {
+    box-shadow: 0 0 0 0.2rem var(--ui-input-error-ring, rgba(220, 38, 38, 0.25));
+  }
+
+  /* Success state */
+  .input-wrapper.state-success {
+    border-color: var(--ui-input-success-border-color, #16a34a);
+  }
+
+  .input-wrapper.state-success:focus-within {
+    box-shadow: 0 0 0 0.2rem
+      var(--ui-input-success-ring, rgba(22, 163, 74, 0.25));
+  }
+
+  /* Disabled: light grey border and bg */
+  .input-el:disabled {
+    background-color: var(--ui-input-disabled-bg, #e9ecef);
+    color: var(--ui-input-disabled-color, #6c757d);
+    cursor: not-allowed;
+  }
+
+  .input-wrapper:has(:disabled) {
+    border-color: var(--ui-input-disabled-border-color, #dee2e6);
+    background-color: var(--ui-input-disabled-bg, #e9ecef);
+  }
+
+  .input-el {
+    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::placeholder {
+    color: var(--ui-input-placeholder-color, #bdbdbc);
+  }
+
+  .input-el.has-leading-icon {
+    padding-left: 2.5rem !important;
+  }
+
+  .input-el.has-trailing-icon {
+    padding-right: 2.5rem !important;
+  }
+
+  .input-icon {
+    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 {
+    left: var(--ui-input-padding-x, 16px);
+    color: var(--ui-input-search-icon-color, #6b7280);
+  }
+
+  .input-wrapper.variant-search:focus-within .input-icon-leading {
+    color: var(--ui-input-focus-border-color, #2563eb);
+  }
+
+  .input-wrapper:has(:disabled) .input-icon-leading {
+    color: var(--ui-input-disabled-color, #6c757d);
+  }
+
+  .input-icon-trailing {
+    right: var(--ui-input-padding-x, 16px);
+  }
+
+  .input-icon-error {
+    color: var(--ui-input-error-icon-color, #dc2626);
+  }
+
+  .input-icon-success {
+    color: var(--ui-input-success-icon-color, #16a34a);
+  }
+
+  .input-icon-disabled {
+    color: var(--ui-input-disabled-color, #6c757d);
+  }
+
+  .input-icon-password-toggle {
+    pointer-events: auto;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--ui-input-icon-color, #6b7280);
+  }
+
+  .input-icon-password-toggle:hover {
+    color: var(--ui-input-focus-border-color, #2563eb);
+  }
+
+  /* Sizes */
+  .input-wrapper.sm .input-el {
+    padding: var(--ui-input-padding-y-sm, 0.25rem)
+      var(--ui-input-padding-x-sm, 0.5rem);
+    font-size: var(--ui-input-font-size-sm, 0.875rem);
+  }
+
+  .input-wrapper.sm {
+    border-radius: var(--ui-input-border-radius-sm, 0.25rem);
+  }
+
+  .input-wrapper.sm .input-el.has-leading-icon {
+    padding-left: 1.75rem;
+  }
+
+  .input-wrapper.sm .input-el.has-trailing-icon {
+    padding-right: 1.75rem;
+  }
+
+  .input-wrapper.sm .input-icon-leading {
+    left: 0.5rem;
+  }
+
+  .input-wrapper.sm .input-icon-trailing {
+    right: 0.5rem;
+  }
+
+  .input-wrapper.md .input-el {
+    padding: var(--ui-input-padding-y, 9px) var(--ui-input-padding-x, 16px);
+    font-size: var(--ui-input-font-size, 14px);
+  }
+
+  .input-wrapper.md {
+    border-radius: var(--ui-input-border-radius, 8px);
+  }
+
+  .input-wrapper.lg .input-el {
+    padding: var(--ui-input-padding-y-lg, 0.5rem)
+      var(--ui-input-padding-x-lg, 1rem);
+    font-size: var(--ui-input-font-size-lg, 1.25rem);
+  }
+
+  .input-wrapper.lg {
+    border-radius: var(--ui-input-border-radius-lg, 0.5rem);
+  }
+
+  .input-wrapper.lg .input-el.has-leading-icon {
+    padding-left: 2.75rem;
+  }
+
+  .input-wrapper.lg .input-el.has-trailing-icon {
+    padding-right: 2.75rem;
+  }
+</style>

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

@@ -0,0 +1,48 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * Current value. In Svelte, use value={x} and oninput={(e) => x = e.detail.value} instead of bind:value
+           * (bind:value is not supported on custom elements).
+           */ value?: string;
+        type?: string;
+        placeholder?: string;
+        name?: string | undefined;
+        id?: string | undefined;
+        size?: "sm" | "md" | "lg";
+        disabled?: boolean;
+        readonly?: boolean;
+        required?: boolean;
+        /** Visual variant: default (basic) or search (with leading magnifying glass). */ variant?: "default" | "search";
+        /** Validation state: error (red + exclamation) or success (green + checkmark). When set, overrides border/icon. */ validationState?: "error" | "success" | undefined;
+        autocomplete?: string | undefined;
+        min?: string | undefined;
+        max?: string | undefined;
+        step?: string | undefined;
+        maxlength?: number | undefined;
+        minlength?: number | undefined;
+        pattern?: string | undefined;
+        ariaLabel?: string | undefined;
+        ariaDescribedby?: string | undefined;
+        /** Callback when value changes on input (Svelte 5 replacement for deprecated createEventDispatcher). */ oninput?: ((detail: {
+            value: string;
+        }) => void) | undefined;
+        /** Callback when value is committed on change (Svelte 5 replacement for deprecated createEventDispatcher). */ onchange?: ((detail: {
+            value: string;
+        }) => void) | undefined;
+        /** Extra class(es) for the inner wrapper (e.g. full-width). Set via the extra-class attribute. */ extraClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'password-toggle-visible': {};
+        'password-toggle-hidden': {};
+    };
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/dist/components/label/Label.d.ts

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

package/dist/components/label/Label.js

@@ -0,0 +1,3 @@
+import{c as y,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(--ui-label-color, #111827);cursor:default;}.label-root.is-disabled.svelte-10jnxwn {color:var(--ui-label-disabled-color, #9ca3af);cursor:not-allowed;}.label-root.state-error.svelte-10jnxwn {color:var(--ui-label-error-color, #dc2626);}.label-root.state-success.svelte-10jnxwn {color:var(--ui-label-success-color, #16a34a);}.label-root.size-sm.svelte-10jnxwn {font-size:var(--ui-label-font-size-sm, 12px);}.label-root.size-md.svelte-10jnxwn {font-size:var(--ui-label-font-size-md, 14px);}.label-root.size-lg.svelte-10jnxwn {font-size:var(--ui-label-font-size-lg, 16px);}.label-text.svelte-10jnxwn {display:inline;}.label-required.svelte-10jnxwn {color:var(--ui-label-required-color, #dc2626);font-weight:600;}.label-root.is-disabled.svelte-10jnxwn .label-required:where(.svelte-10jnxwn) {color:var(--ui-label-disabled-color, #9ca3af);}'};function P(b,a){q(a,!1),A(b,O);const v=L();let f=s(a,"forId",12,void 0),u=s(a,"required",12,!1),i=s(a,"disabled",12,!1),o=s(a,"size",12,"md"),t=s(a,"validationState",12,void 0),n=s(a,"extraClass",12,"");S(()=>(d(o()),d(i()),d(t()),d(n())),()=>{E(v,`label-root size-${o()} ${i()?"is-disabled":""} ${t()?`state-${t()}`:""} ${n()}`.trim())}),C();var w={get forId(){return f()},set forId(e){f(e),l()},get required(){return u()},set required(e){u(e),l()},get disabled(){return i()},set disabled(e){i(e),l()},get size(){return o()},set size(e){o(e),l()},get validationState(){return t()},set validationState(e){t(e),l()},get extraClass(){return n()},set extraClass(e){n(e),l()}};D();var r=N(),c=x(r),_=x(c);U(_,a,"default",{},null),p(c);var j=I(c,2);{var z=e=>{var h=K();m(e,h)};M(j,e=>{u()&&e(z)})}return p(r),k(()=>{G(r,1,H(F(v)),"svelte-10jnxwn"),J(r,"for",f())}),m(b,r),B(w)}const __Default = (y(P,{forId:{},required:{},disabled:{},size:{},validationState:{},extraClass:{}},["default"],[],{mode:"open"}));
+customElements.define("ui-label", __Default);
+export default __Default;

package/dist/components/label/Label.svelte

@@ -0,0 +1,74 @@
+<svelte:options customElement="ui-label" />
+
+<script>
+export let forId = void 0;
+export let required = false;
+export let disabled = false;
+export let size = "md";
+export let validationState = void 0;
+export let extraClass = "";
+$: rootClass = `label-root size-${size} ${disabled ? "is-disabled" : ""} ${validationState ? `state-${validationState}` : ""} ${extraClass}`.trim();
+</script>
+
+<label
+  class={rootClass}
+  for={forId}
+>
+  <span class="label-text">
+    <slot />
+  </span>
+  {#if required}
+    <span class="label-required" aria-hidden="true">*</span>
+  {/if}
+</label>
+
+<style>
+  .label-root {
+    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(--ui-label-color, #111827);
+    cursor: default;
+  }
+
+  .label-root.is-disabled {
+    color: var(--ui-label-disabled-color, #9ca3af);
+    cursor: not-allowed;
+  }
+
+  .label-root.state-error {
+    color: var(--ui-label-error-color, #dc2626);
+  }
+
+  .label-root.state-success {
+    color: var(--ui-label-success-color, #16a34a);
+  }
+
+  .label-root.size-sm {
+    font-size: var(--ui-label-font-size-sm, 12px);
+  }
+
+  .label-root.size-md {
+    font-size: var(--ui-label-font-size-md, 14px);
+  }
+
+  .label-root.size-lg {
+    font-size: var(--ui-label-font-size-lg, 16px);
+  }
+
+  .label-text {
+    display: inline;
+  }
+
+  .label-required {
+    color: var(--ui-label-required-color, #dc2626);
+    font-weight: 600;
+  }
+
+  .label-root.is-disabled .label-required {
+    color: var(--ui-label-disabled-color, #9ca3af);
+  }
+</style>

package/dist/components/label/Label.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** ID of the form control this label is associated with (sets the `for` attribute). */ forId?: string | undefined;
+        /** When true, shows a required indicator (e.g. asterisk) after the label text. */ required?: boolean;
+        /** Visual disabled state (e.g. muted color). */ disabled?: boolean;
+        /** Size; aligns with form control sizes (e.g. ui-input). */ size?: "sm" | "md" | "lg";
+        /** Validation state for form context: error (red) or success (green). */ validationState?: "error" | "success" | undefined;
+        /** Extra class(es) for the label element. Set via the extra-class attribute. */ extraClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LabelProps = typeof __propDef.props;
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/dist/components/radio/Radio.d.ts

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

package/dist/components/radio/Radio.js

@@ -0,0 +1,16 @@
+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 g,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
+      sans-serif;font-size:14px;line-height:1.3;color:var(--ui-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(--ui-radio-size, 22px);height:var(--ui-radio-size, 22px);border-radius:999px;box-sizing:border-box;border:2px solid var(--ui-radio-border-color, #111111);background-color:var(--ui-radio-bg, transparent);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
+      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
+      box-shadow 0.12s ease,\r
+      transform 0.12s ease;}\r
+\r
+  /* Checked: purple ring with white center like screenshot */.radio-root.is-checked.svelte-jsov6r .radio-circle:where(.svelte-jsov6r) {background-color:var(--ui-radio-checked-bg, var(--ui-primary, #474bff));border-color:var(--ui-radio-checked-border, var(--ui-primary, #474bff));}.radio-root.is-checked.svelte-jsov6r .radio-circle:where(.svelte-jsov6r)::before {background-color:var(--ui-radio-inner, #ffffff);box-shadow:0 0 0 4px\r
+      var(--ui-radio-checked-bg, var(--ui-primary, #474bff));opacity:1;transform:scale(1);}\r
+\r
+  /* 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
+    + .radio-circle:where(.svelte-jsov6r) {box-shadow:0 0 0 3px\r
+      var(--ui-radio-focus-ring, rgba(71, 75, 255, 0.45));}.radio-root.is-disabled.svelte-jsov6r {cursor:not-allowed;color:var(--ui-radio-label-disabled, #9ca3af);}.radio-root.is-disabled.svelte-jsov6r .radio-circle:where(.svelte-jsov6r) {border-color:var(--ui-radio-border-disabled, #bdbdbc);background-color:var(--ui-radio-bg-disabled, #e5e7eb);}.radio-label.svelte-jsov6r:empty {display:none;}`};function J(m,r){D(r,!1),I(m,G);let i=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),u=s(r,"onchange",12,void 0);function k(e){const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}function w(e){const t=e.target;if(!t.checked)return;i(!0);const y={checked:i()};u()?.(y),k(t)?.dispatchEvent(new CustomEvent("change",{detail:y,bubbles:!0}))}var x={get checked(){return i()},set checked(e){i(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 u()},set onchange(e){u(e),o()}};M();var l=A(),h=f(l),a=f(h);U(a),B(2),p(h);var j=L(h,2),_=f(j);return F(_,r,"default",{},null),p(j),p(l),z(()=>{N(l,1,`radio-root ${i()?"is-checked":""} ${n()?"is-disabled":""}`,"svelte-jsov6r"),g(a,"name",d()),Y(a,c()),q(a,i()),a.disabled=n(),g(a,"aria-label",v()),g(a,"aria-describedby",b())}),S("change",a,w),E(m,l),R(x)}const __Default = (C(J,{checked:{},disabled:{},name:{},value:{},ariaLabel:{},ariaDescribedby:{},onchange:{}},["default"],[],{mode:"open"}));
+customElements.define("ui-radio", __Default);
+export default __Default;