reke-ui 0.1.0

package/dist/reke-chip-Xb0Y_Cqo.js

@@ -0,0 +1,3358 @@
+import { LitElement as re, unsafeCSS as te, css as u, nothing as c, html as l } from "lit";
+import { property as i, customElement as b, state as k, query as oe } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+class g extends re {
+  emit(r, a) {
+    return this.dispatchEvent(
+      new CustomEvent(r, {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: a
+      })
+    );
+  }
+}
+const ae = '@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.static{position:static}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}', f = te(ae), ie = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--reke-space-xs, 8px);
+      border: 1px solid transparent;
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-weight: var(--reke-font-weight-medium, 500);
+      cursor: pointer;
+      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+      text-decoration: none;
+      line-height: 1;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    /* === Sizes === */
+
+    .button--xs {
+      padding: var(--reke-space-2xs, 6px) var(--reke-space-xs, 8px);
+      font-size: var(--reke-font-size-2xs, 11px);
+    }
+
+    .button--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .button--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-xl, 24px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .button--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-2xl, 28px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+
+    /* === Variants === */
+
+    .button--primary {
+      background-color: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .button--primary:hover {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 85%, black);
+    }
+
+    .button--secondary {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .button--secondary:hover {
+      background-color: var(--reke-color-surface-elevated, #151515);
+      border-color: var(--reke-color-text-muted, #525252);
+    }
+
+    .button--ghost {
+      background-color: transparent;
+      color: var(--reke-color-text-ghost, #737373);
+      border-color: transparent;
+    }
+
+    .button--ghost:hover {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .button--danger {
+      background-color: var(--reke-color-danger, #EF4444);
+      color: #FFFFFF;
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .button--danger:hover {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 85%, black);
+    }
+
+    .button--danger-outline {
+      background-color: transparent;
+      color: var(--reke-color-danger, #EF4444);
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .button--danger-outline:hover {
+      background-color: var(--reke-color-danger, #EF4444);
+      color: #FFFFFF;
+    }
+
+    .button--icon-only {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .button--icon-only:hover {
+      border-color: var(--reke-color-text-muted, #525252);
+    }
+
+    .button--icon-only.button--xs {
+      padding: var(--reke-space-2xs, 6px);
+    }
+
+    .button--icon-only.button--sm {
+      padding: var(--reke-space-xs, 8px);
+    }
+
+    .button--icon-only.button--md {
+      padding: var(--reke-space-sm, 12px);
+    }
+
+    .button--icon-only.button--lg {
+      padding: var(--reke-space-md, 16px);
+    }
+
+    /* === Loading === */
+
+    .button--loading {
+      position: relative;
+      color: transparent !important;
+      pointer-events: none;
+    }
+
+    .spinner {
+      display: none;
+    }
+
+    .button--loading .spinner {
+      display: block;
+      position: absolute;
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      color: inherit;
+    }
+
+    .button--loading.button--primary .spinner {
+      color: var(--reke-color-on-primary, #0A0A0B);
+    }
+
+    .button--loading.button--secondary .spinner,
+    .button--loading.button--ghost .spinner,
+    .button--loading.button--icon-only .spinner {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .button--loading.button--danger .spinner {
+      color: #FFFFFF;
+    }
+
+    .button--loading.button--danger-outline .spinner {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `
+];
+var se = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, J = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? ne(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && se(r, a, t), t;
+};
+let F = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1;
+  }
+  handleClick(e) {
+    if (this.disabled || this.loading) {
+      e.preventDefault(), e.stopPropagation();
+      return;
+    }
+    this.emit("reke-click");
+  }
+  render() {
+    const e = {
+      button: !0,
+      [`button--${this.variant}`]: !0,
+      [`button--${this.size}`]: !0,
+      "button--loading": this.loading
+    };
+    return l`
+      <button
+        part="button"
+        class=${p(e)}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading}
+        @click=${this.handleClick}
+      >
+        <span class="spinner" aria-hidden="true"></span>
+        ${this.variant !== "icon-only" ? l`<slot name="prefix"></slot>` : c}
+        <slot></slot>
+        ${this.variant !== "icon-only" ? l`<slot name="suffix"></slot>` : c}
+      </button>
+    `;
+  }
+};
+F.styles = ie;
+J([
+  i({ reflect: !0 })
+], F.prototype, "variant", 2);
+J([
+  i({ reflect: !0 })
+], F.prototype, "size", 2);
+J([
+  i({ type: Boolean, reflect: !0 })
+], F.prototype, "disabled", 2);
+J([
+  i({ type: Boolean, reflect: !0 })
+], F.prototype, "loading", 2);
+F = J([
+  b("reke-button")
+], F);
+const le = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: var(--reke-space-2xs, 6px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      color: var(--reke-color-text-label, #8A8A8A);
+    }
+
+    .input {
+      display: block;
+      width: 100%;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      box-sizing: border-box;
+      outline: none;
+      transition: border-color 0.15s ease;
+    }
+
+    .input::placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .input:focus-visible {
+      border-color: var(--reke-color-primary, #22C55E);
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: -1px;
+    }
+
+    .input--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .input--error:focus-visible {
+      border-color: var(--reke-color-danger, #EF4444);
+      outline-color: var(--reke-color-danger, #EF4444);
+    }
+
+    /* === Sizes === */
+
+    .input--xs {
+      padding: var(--reke-space-2xs, 6px) var(--reke-space-xs, 8px);
+      font-size: var(--reke-font-size-2xs, 11px);
+    }
+
+    .input--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-sm, 12px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .input--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .input--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+  `
+];
+var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, z = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? de(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && ce(r, a, t), t;
+};
+let _ = class extends g {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.type = "text", this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
+  }
+  handleInput(e) {
+    const r = e.target;
+    this.value = r.value, this.emit("reke-input", { value: this.value });
+  }
+  handleChange() {
+    this.emit("reke-change", { value: this.value });
+  }
+  render() {
+    const e = {
+      input: !0,
+      [`input--${this.size}`]: !0,
+      "input--error": this.error
+    };
+    return l`
+      ${this.label ? l`<label class="label">${this.label}</label>` : c}
+      <input
+        part="input"
+        class=${p(e)}
+        type=${this.type}
+        .value=${this.value}
+        placeholder=${this.placeholder || c}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled}
+        aria-invalid=${this.error}
+        aria-label=${this.label || c}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      />
+    `;
+  }
+};
+_.styles = le;
+z([
+  i()
+], _.prototype, "value", 2);
+z([
+  i()
+], _.prototype, "placeholder", 2);
+z([
+  i()
+], _.prototype, "type", 2);
+z([
+  i({ reflect: !0 })
+], _.prototype, "size", 2);
+z([
+  i({ type: Boolean, reflect: !0 })
+], _.prototype, "disabled", 2);
+z([
+  i({ type: Boolean, reflect: !0 })
+], _.prototype, "error", 2);
+z([
+  i()
+], _.prototype, "label", 2);
+_ = z([
+  b("reke-input")
+], _);
+const pe = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: var(--reke-space-2xs, 6px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      color: var(--reke-color-text-label, #8A8A8A);
+    }
+
+    .textarea {
+      display: block;
+      width: 100%;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      box-sizing: border-box;
+      outline: none;
+      transition: border-color 0.15s ease;
+      resize: vertical;
+    }
+
+    .textarea::placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .textarea:focus-visible {
+      border-color: var(--reke-color-primary, #22C55E);
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: -1px;
+    }
+
+    .textarea--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .textarea--error:focus-visible {
+      border-color: var(--reke-color-danger, #EF4444);
+      outline-color: var(--reke-color-danger, #EF4444);
+    }
+
+    /* === Sizes === */
+
+    .textarea--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-sm, 12px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .textarea--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .textarea--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+  `
+];
+var he = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, D = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? ue(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && he(r, a, t), t;
+};
+let $ = class extends g {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.rows = 4, this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
+  }
+  handleInput(e) {
+    const r = e.target;
+    this.value = r.value, this.emit("reke-input", { value: this.value });
+  }
+  handleChange() {
+    this.emit("reke-change", { value: this.value });
+  }
+  render() {
+    const e = {
+      textarea: !0,
+      [`textarea--${this.size}`]: !0,
+      "textarea--error": this.error
+    };
+    return l`
+      ${this.label ? l`<label class="label">${this.label}</label>` : c}
+      <textarea
+        part="textarea"
+        class=${p(e)}
+        .value=${this.value}
+        placeholder=${this.placeholder || c}
+        rows=${this.rows}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled}
+        aria-invalid=${this.error}
+        aria-label=${this.label || c}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      ></textarea>
+    `;
+  }
+};
+$.styles = pe;
+D([
+  i()
+], $.prototype, "value", 2);
+D([
+  i()
+], $.prototype, "placeholder", 2);
+D([
+  i({ type: Number })
+], $.prototype, "rows", 2);
+D([
+  i({ reflect: !0 })
+], $.prototype, "size", 2);
+D([
+  i({ type: Boolean, reflect: !0 })
+], $.prototype, "disabled", 2);
+D([
+  i({ type: Boolean, reflect: !0 })
+], $.prototype, "error", 2);
+D([
+  i()
+], $.prototype, "label", 2);
+$ = D([
+  b("reke-textarea")
+], $);
+const be = [
+  f,
+  u`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .container {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      outline: none;
+    }
+
+    .native-input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .box {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: 3px;
+      box-sizing: border-box;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .box--checked,
+    .box--indeterminate {
+      background-color: var(--reke-color-primary, #22C55E);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .container:focus-visible .box {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .checkmark,
+    .indeterminate-mark {
+      width: 12px;
+      height: 12px;
+      color: var(--reke-color-on-primary, #0A0A0B);
+    }
+
+    .label {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+      color: var(--reke-color-text, #E5E5E5);
+      user-select: none;
+    }
+  `
+];
+var ge = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, N = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? fe(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && ge(r, a, t), t;
+};
+let A = class extends g {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.label = "";
+  }
+  handleClick() {
+    this.disabled || (this.checked = !this.checked, this.indeterminate = !1, this.emit("reke-change", { checked: this.checked }));
+  }
+  handleKeyDown(e) {
+    (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.handleClick());
+  }
+  render() {
+    const e = this.indeterminate ? "mixed" : String(this.checked);
+    return l`
+      <div
+        part="container"
+        class="container"
+        role="checkbox"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-checked=${e}
+        aria-disabled=${this.disabled}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <span part="box" class="box ${this.checked ? "box--checked" : ""} ${this.indeterminate ? "box--indeterminate" : ""}">
+          ${this.checked ? l`<svg class="checkmark" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>` : c}
+          ${this.indeterminate && !this.checked ? l`<svg class="indeterminate-mark" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path d="M3 6H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>` : c}
+        </span>
+        ${this.label ? l`<span part="label" class="label">${this.label}</span>` : c}
+      </div>
+    `;
+  }
+};
+A.styles = be;
+N([
+  i({ type: Boolean, reflect: !0 })
+], A.prototype, "checked", 2);
+N([
+  i({ type: Boolean, reflect: !0 })
+], A.prototype, "indeterminate", 2);
+N([
+  i({ type: Boolean, reflect: !0 })
+], A.prototype, "disabled", 2);
+N([
+  i()
+], A.prototype, "label", 2);
+A = N([
+  b("reke-checkbox")
+], A);
+const ve = [
+  f,
+  u`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .toggle:focus-visible .track {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .track {
+      position: relative;
+      width: 40px;
+      height: 22px;
+      border-radius: 11px;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      box-sizing: border-box;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .track--checked {
+      background-color: var(--reke-color-primary, #22C55E);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .thumb {
+      position: absolute;
+      top: 50%;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background-color: var(--reke-color-text-muted, #525252);
+      transform: translateY(-50%);
+      transition: transform 0.15s ease, background-color 0.15s ease;
+    }
+
+    .thumb--checked {
+      background-color: var(--reke-color-on-primary, #0A0A0B);
+      transform: translateX(18px) translateY(-50%);
+    }
+
+    .label {
+      color: var(--reke-color-text, #E5E5E5);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+  `
+];
+var me = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, W = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? xe(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && me(r, a, t), t;
+};
+let T = class extends g {
+  constructor() {
+    super(...arguments), this.checked = !1, this.disabled = !1, this.label = "";
+  }
+  toggle() {
+    this.disabled || (this.checked = !this.checked, this.emit("reke-change", { checked: this.checked }));
+  }
+  handleClick() {
+    this.toggle();
+  }
+  handleKeyDown(e) {
+    (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+  }
+  render() {
+    return l`
+      <div
+        class="toggle"
+        role="switch"
+        aria-checked=${this.checked}
+        aria-label=${this.label || c}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <div part="track" class="track ${this.checked ? "track--checked" : ""}">
+          <div part="thumb" class="thumb ${this.checked ? "thumb--checked" : ""}"></div>
+        </div>
+        ${this.label ? l`<span class="label">${this.label}</span>` : c}
+      </div>
+    `;
+  }
+};
+T.styles = ve;
+W([
+  i({ type: Boolean, reflect: !0 })
+], T.prototype, "checked", 2);
+W([
+  i({ type: Boolean, reflect: !0 })
+], T.prototype, "disabled", 2);
+W([
+  i()
+], T.prototype, "label", 2);
+T = W([
+  b("reke-toggle")
+], T);
+const ye = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-weight: var(--reke-font-weight-medium, 500);
+      border-radius: 9999px;
+      border: 1px solid transparent;
+      line-height: 1;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    /* === Sizes === */
+
+    .badge--sm {
+      padding: 2px 8px;
+      font-size: 11px;
+    }
+
+    .badge--md {
+      padding: 4px 12px;
+      font-size: 12px;
+    }
+
+    /* === Variants === */
+
+    .badge--default {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .badge--primary {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 15%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 30%, transparent);
+    }
+
+    .badge--secondary {
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 15%, transparent);
+      color: var(--reke-color-secondary, #3B82F6);
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 30%, transparent);
+    }
+
+    .badge--danger {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 15%, transparent);
+      color: var(--reke-color-danger, #EF4444);
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 30%, transparent);
+    }
+
+    .badge--warning {
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 15%, transparent);
+      color: var(--reke-color-warning, #F59E0B);
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 30%, transparent);
+    }
+
+    .badge--success {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 15%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 30%, transparent);
+    }
+  `
+];
+var ke = Object.defineProperty, we = Object.getOwnPropertyDescriptor, G = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? we(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && ke(r, a, t), t;
+};
+let L = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "default", this.size = "md";
+  }
+  render() {
+    const e = {
+      badge: !0,
+      [`badge--${this.variant}`]: !0,
+      [`badge--${this.size}`]: !0
+    };
+    return l`
+      <span part="badge" class=${p(e)}>
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+L.styles = ye;
+G([
+  i({ reflect: !0 })
+], L.prototype, "variant", 2);
+G([
+  i({ reflect: !0 })
+], L.prototype, "size", 2);
+L = G([
+  b("reke-badge")
+], L);
+const _e = [
+  f,
+  u`
+    :host {
+      display: block;
+    }
+
+    .card {
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      overflow: hidden;
+    }
+
+    /* === Variants === */
+
+    .card--default {
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .card--elevated {
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      box-shadow: var(--reke-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
+    }
+
+    .card--outlined {
+      background: transparent;
+      border: 1px solid var(--reke-color-border, #252525);
+    }
+
+    /* === Padding (applied to .card-body) === */
+
+    .card--padding-none .card-body {
+      padding: 0;
+    }
+
+    .card--padding-sm .card-body {
+      padding: 12px;
+    }
+
+    .card--padding-md .card-body {
+      padding: 16px;
+    }
+
+    .card--padding-lg .card-body {
+      padding: 24px;
+    }
+
+    /* === Header === */
+
+    .card-header {
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .card--padding-none .card-header {
+      padding: 0;
+    }
+
+    .card--padding-sm .card-header {
+      padding: 12px;
+    }
+
+    .card--padding-md .card-header {
+      padding: 16px;
+    }
+
+    .card--padding-lg .card-header {
+      padding: 24px;
+    }
+
+    /* === Footer === */
+
+    .card-footer {
+      border-top: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .card--padding-none .card-footer {
+      padding: 0;
+    }
+
+    .card--padding-sm .card-footer {
+      padding: 12px;
+    }
+
+    .card--padding-md .card-footer {
+      padding: 16px;
+    }
+
+    .card--padding-lg .card-footer {
+      padding: 24px;
+    }
+  `
+];
+var $e = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, K = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Ce(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && $e(r, a, t), t;
+};
+let O = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "default", this.padding = "md", this._hasHeader = !1, this._hasFooter = !1;
+  }
+  _onSlotChange(e, r) {
+    const o = r.target.assignedNodes({ flatten: !0 }).length > 0;
+    e === "header" ? this._hasHeader = o : this._hasFooter = o;
+  }
+  render() {
+    const e = {
+      card: !0,
+      [`card--${this.variant}`]: !0,
+      [`card--padding-${this.padding}`]: !0
+    };
+    return l`
+      <div class=${p(e)}>
+        ${this._hasHeader ? l`
+          <div class="card-header">
+            <slot name="header" @slotchange=${(r) => this._onSlotChange("header", r)}></slot>
+          </div>
+        ` : l`<slot name="header" @slotchange=${(r) => this._onSlotChange("header", r)} style="display:none"></slot>`}
+        <div class="card-body">
+          <slot></slot>
+        </div>
+        ${this._hasFooter ? l`
+          <div class="card-footer">
+            <slot name="footer" @slotchange=${(r) => this._onSlotChange("footer", r)}></slot>
+          </div>
+        ` : l`<slot name="footer" @slotchange=${(r) => this._onSlotChange("footer", r)} style="display:none"></slot>`}
+      </div>
+    `;
+  }
+};
+O.styles = _e;
+K([
+  i({ reflect: !0 })
+], O.prototype, "variant", 2);
+K([
+  i({ reflect: !0 })
+], O.prototype, "padding", 2);
+K([
+  k()
+], O.prototype, "_hasHeader", 2);
+K([
+  k()
+], O.prototype, "_hasFooter", 2);
+O = K([
+  b("reke-card")
+], O);
+const Ee = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .wrapper {
+      display: inline-block;
+      position: relative;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: 1000;
+      padding: 6px 12px;
+      background-color: var(--reke-color-surface-elevated, #151515);
+      color: var(--reke-color-text, #E5E5E5);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    .tooltip--visible {
+      opacity: 1;
+    }
+
+    .tooltip--top {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 6px;
+    }
+
+    .tooltip--bottom {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 6px;
+    }
+
+    .tooltip--left {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-right: 6px;
+    }
+
+    .tooltip--right {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-left: 6px;
+    }
+  `
+];
+var ze = Object.defineProperty, De = Object.getOwnPropertyDescriptor, H = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? De(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && ze(r, a, t), t;
+};
+let M = class extends g {
+  constructor() {
+    super(...arguments), this.text = "", this.position = "top", this.delay = 200, this._visible = !1;
+  }
+  show() {
+    clearTimeout(this._delayTimeout), this._delayTimeout = setTimeout(() => {
+      this._visible = !0;
+    }, this.delay);
+  }
+  hide() {
+    clearTimeout(this._delayTimeout), this._delayTimeout = setTimeout(() => {
+      this._visible = !1;
+    }, this.delay);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this._delayTimeout);
+  }
+  render() {
+    return l`
+      <div
+        class="wrapper"
+        aria-describedby="tooltip"
+        @mouseenter=${this.show}
+        @mouseleave=${this.hide}
+        @focusin=${this.show}
+        @focusout=${this.hide}
+      >
+        <div
+          id="tooltip"
+          class="tooltip tooltip--${this.position} ${this._visible ? "tooltip--visible" : ""}"
+          role="tooltip"
+        >
+          ${this.text}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+M.styles = Ee;
+H([
+  i()
+], M.prototype, "text", 2);
+H([
+  i({ reflect: !0 })
+], M.prototype, "position", 2);
+H([
+  i({ type: Number })
+], M.prototype, "delay", 2);
+H([
+  k()
+], M.prototype, "_visible", 2);
+M = H([
+  b("reke-tooltip")
+], M);
+const Be = [
+  f,
+  u`
+    :host {
+      display: block;
+    }
+
+    /* === Backdrop === */
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+
+    .backdrop--drawer {
+      align-items: stretch;
+    }
+
+    .backdrop--right {
+      justify-content: flex-end;
+    }
+
+    .backdrop--left {
+      justify-content: flex-start;
+    }
+
+    /* === Modal === */
+
+    .dialog {
+      background: var(--reke-color-bg, #0f0f10);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      min-width: 400px;
+      max-width: 560px;
+      width: 100%;
+      max-height: 80vh;
+      overflow-y: auto;
+      font-family: var(
+        --reke-font-mono,
+        'JetBrains Mono',
+        ui-monospace,
+        monospace
+      );
+    }
+
+    /* === Drawer === */
+
+    .drawer {
+      background: var(--reke-color-bg, #0f0f10);
+      width: 400px;
+      max-width: 90vw;
+      height: 100%;
+      overflow-y: auto;
+      font-family: var(
+        --reke-font-mono,
+        'JetBrains Mono',
+        ui-monospace,
+        monospace
+      );
+      display: flex;
+      flex-direction: column;
+    }
+
+    .drawer--right {
+      border-left: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .drawer--left {
+      border-right: 1px solid var(--reke-color-border, #252525);
+    }
+
+    /* === Shared parts === */
+
+    .dialog-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      flex-shrink: 0;
+    }
+
+    .dialog-title {
+      margin: 0;
+      font-size: var(--reke-font-size-md, 14px);
+      font-weight: var(--reke-font-weight-semibold, 600);
+      color: var(--reke-color-text, #e5e5e5);
+    }
+
+    .close-btn {
+      background: transparent;
+      border: none;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      font-size: 20px;
+      padding: 4px 8px;
+      line-height: 1;
+    }
+
+    .close-btn:hover {
+      color: var(--reke-color-text, #e5e5e5);
+    }
+
+    .close-btn:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22c55e);
+      outline-offset: 2px;
+    }
+
+    .dialog-body {
+      padding: 20px;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .dialog-footer {
+      padding: 12px 20px;
+      border-top: 1px solid var(--reke-color-border, #252525);
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+  `
+];
+var Fe = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, I = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Ae(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && Fe(r, a, t), t;
+};
+let P = class extends g {
+  constructor() {
+    super(...arguments), this.open = !1, this.heading = "", this.variant = "modal", this.position = "right", this._handleKeydown = (e) => {
+      e.key === "Escape" && this.open && this.close();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown);
+  }
+  show() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1, this.emit("reke-close");
+  }
+  render() {
+    if (!this.open) return c;
+    const e = this.variant === "drawer", r = {
+      backdrop: !0,
+      "backdrop--drawer": e,
+      [`backdrop--${this.position}`]: e
+    }, a = {
+      dialog: !e,
+      drawer: e,
+      [`drawer--${this.position}`]: e
+    };
+    return l`
+      <div class=${p(r)} @click=${this.close}>
+        <div
+          class=${p(a)}
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.heading}
+          @click=${(o) => o.stopPropagation()}
+        >
+          ${this.heading ? l`
+                <div class="dialog-header">
+                  <h2 class="dialog-title">${this.heading}</h2>
+                  <button
+                    class="close-btn"
+                    @click=${this.close}
+                    aria-label="Close"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ` : c}
+          <div class="dialog-body">
+            <slot></slot>
+          </div>
+          <div class="dialog-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+P.styles = Be;
+I([
+  i({ type: Boolean, reflect: !0 })
+], P.prototype, "open", 2);
+I([
+  i()
+], P.prototype, "heading", 2);
+I([
+  i({ reflect: !0 })
+], P.prototype, "variant", 2);
+I([
+  i({ reflect: !0 })
+], P.prototype, "position", 2);
+P = I([
+  b("reke-dialog")
+], P);
+const Oe = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: var(--reke-space-2xs, 6px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      color: var(--reke-color-text-label, #8a8a8a);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background-color: var(--reke-color-surface, #1a1a1a);
+      color: var(--reke-color-text, #e5e5e5);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
+      transition: border-color 0.15s ease;
+    }
+
+    .trigger--placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .trigger__chevron {
+      font-size: 8px;
+      margin-left: 8px;
+      flex-shrink: 0;
+    }
+
+    /* === Sizes === */
+
+    .trigger--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-sm, 12px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .trigger--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .trigger--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+
+    .trigger:focus-visible {
+      border-color: var(--reke-color-primary, #22c55e);
+      outline: 2px solid var(--reke-color-primary, #22c55e);
+      outline-offset: -1px;
+    }
+
+    .trigger--error {
+      border-color: var(--reke-color-danger, #ef4444);
+    }
+
+    .trigger--error:focus-visible {
+      border-color: var(--reke-color-danger, #ef4444);
+      outline-color: var(--reke-color-danger, #ef4444);
+    }
+
+    /* === Dropdown === */
+
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin: 0;
+      margin-top: 4px;
+      padding: 0;
+      list-style: none;
+      background-color: var(--reke-color-surface, #1a1a1a);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 100;
+    }
+
+    /* === Option === */
+
+    .option {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-md, 16px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+      color: var(--reke-color-text, #e5e5e5);
+      cursor: pointer;
+    }
+
+    .option:hover {
+      background-color: var(--reke-color-surface-elevated, #151515);
+    }
+
+    .option--selected {
+      color: var(--reke-color-primary, #22c55e);
+    }
+  `
+];
+var Me = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, E = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Pe(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && Me(r, a, t), t;
+};
+let w = class extends g {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "Select...", this.options = [], this.disabled = !1, this.error = !1, this.label = "", this.size = "md", this._open = !1, this._boundHandleOutsideClick = this.handleOutsideClick.bind(this), this._boundHandleKeyDown = this.handleKeyDown.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._boundHandleOutsideClick), document.addEventListener("keydown", this._boundHandleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._boundHandleOutsideClick), document.removeEventListener("keydown", this._boundHandleKeyDown);
+  }
+  handleOutsideClick(e) {
+    e.composedPath().includes(this) || (this._open = !1);
+  }
+  handleKeyDown(e) {
+    e.key === "Escape" && this._open && (this._open = !1);
+  }
+  handleTriggerClick() {
+    this.disabled || (this._open = !this._open);
+  }
+  handleOptionClick(e) {
+    this.value = e, this._open = !1, this.emit("reke-change", { value: this.value });
+  }
+  get selectedLabel() {
+    return this.options.find((r) => r.value === this.value)?.label;
+  }
+  render() {
+    const e = this.selectedLabel, r = !e, a = {
+      trigger: !0,
+      [`trigger--${this.size}`]: !0,
+      "trigger--error": this.error,
+      "trigger--placeholder": r
+    };
+    return l`
+      ${this.label ? l`<label class="label">${this.label}</label>` : c}
+      <button
+        part="trigger"
+        class=${p(a)}
+        type="button"
+        ?disabled=${this.disabled}
+        aria-expanded=${this._open}
+        aria-haspopup="listbox"
+        aria-label=${this.label || c}
+        @click=${this.handleTriggerClick}
+      >
+        <span class="trigger__text">${e ?? this.placeholder}</span>
+        <span class="trigger__chevron" aria-hidden="true">&#9660;</span>
+      </button>
+      ${this._open ? l`
+            <ul
+              part="dropdown"
+              class="dropdown"
+              role="listbox"
+              aria-label=${this.label || c}
+            >
+              ${this.options.map(
+      (o) => l`
+                  <li
+                    class="option ${o.value === this.value ? "option--selected" : ""}"
+                    role="option"
+                    aria-selected=${o.value === this.value}
+                    @click=${() => this.handleOptionClick(o.value)}
+                  >
+                    ${o.label}
+                  </li>
+                `
+    )}
+            </ul>
+          ` : c}
+    `;
+  }
+};
+w.styles = Oe;
+E([
+  i()
+], w.prototype, "value", 2);
+E([
+  i()
+], w.prototype, "placeholder", 2);
+E([
+  i({ attribute: !1 })
+], w.prototype, "options", 2);
+E([
+  i({ type: Boolean, reflect: !0 })
+], w.prototype, "disabled", 2);
+E([
+  i({ type: Boolean, reflect: !0 })
+], w.prototype, "error", 2);
+E([
+  i()
+], w.prototype, "label", 2);
+E([
+  i({ reflect: !0 })
+], w.prototype, "size", 2);
+E([
+  k()
+], w.prototype, "_open", 2);
+w = E([
+  b("reke-select")
+], w);
+const Se = [
+  f,
+  u`
+    :host {
+      display: block;
+    }
+
+    /* === Container (wraps toolbar + table + footer) === */
+
+    .table-container {
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      overflow: hidden;
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+    }
+
+    .table {
+      width: 100%;
+      border-collapse: collapse;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: 13px;
+      color: var(--reke-color-text, #E5E5E5);
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    /* === Toolbar === */
+
+    .table-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    /* === Footer === */
+
+    .table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      border-top: 1px solid var(--reke-color-border, #252525);
+      background: var(--reke-color-surface, #1A1A1A);
+      font-size: 12px;
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    /* === Header === */
+
+    thead {
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    .header-cell {
+      padding: 12px 16px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--reke-color-text-muted, #525252);
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .header-cell--no-sort {
+      cursor: default;
+    }
+
+    .header-cell[data-align='left'] {
+      text-align: left;
+    }
+
+    .header-cell[data-align='center'] {
+      text-align: center;
+    }
+
+    .header-cell[data-align='right'] {
+      text-align: right;
+    }
+
+    .header-cell:hover {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .header-cell--no-sort:hover {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .header-cell--sorted {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .header-content {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .sort-indicator {
+      font-size: 10px;
+    }
+
+    /* === Body === */
+
+    .row {
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .row:last-child {
+      border-bottom: none;
+    }
+
+    .row--expanded {
+      border-bottom: none;
+    }
+
+    .cell {
+      padding: 12px 16px;
+    }
+
+    .cell[data-align='left'] {
+      text-align: left;
+    }
+
+    .cell[data-align='center'] {
+      text-align: center;
+    }
+
+    .cell[data-align='right'] {
+      text-align: right;
+    }
+
+    .cell--empty {
+      text-align: center;
+      color: var(--reke-color-text-muted, #525252);
+      padding: 24px 16px;
+    }
+
+    /* === Expanded row === */
+
+    .expand-row {
+      background: var(--reke-color-surface, #1A1A1A);
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .expand-row:last-child {
+      border-bottom: none;
+    }
+
+    .expand-content {
+      padding: 0 16px 16px 16px;
+    }
+
+    /* === Modifiers === */
+
+    .table--striped .row--even {
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 85%, var(--reke-color-border, #252525));
+    }
+
+    .table--hoverable .row:hover {
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
+      cursor: pointer;
+    }
+
+    .table--dense .header-cell {
+      padding: 8px 12px;
+    }
+
+    .table--dense .cell {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    .table--dense .expand-content {
+      padding: 0 12px 12px 12px;
+    }
+
+    .table--bordered .cell,
+    .table--bordered .header-cell {
+      border-right: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .table--bordered .cell:last-child,
+    .table--bordered .header-cell:last-child {
+      border-right: none;
+    }
+
+    /* === Borderless (for embedding inside cards/containers) === */
+
+    :host([borderless]) .table-container {
+      border: none;
+      border-radius: 0;
+    }
+  `
+];
+var je = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, m = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Re(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && je(r, a, t), t;
+};
+let h = class extends g {
+  constructor() {
+    super(...arguments), this.columns = [], this.rows = [], this.striped = !1, this.dense = !1, this.hoverable = !1, this.bordered = !1, this.borderless = !1, this.sortKey = "", this.sortDirection = "asc", this.expandedRowRender = null, this.expandedRows = /* @__PURE__ */ new Set(), this._hasToolbar = !1, this._hasFooter = !1;
+  }
+  handleHeaderClick(e) {
+    e.sortable !== !1 && (this.sortKey === e.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = e.key, this.sortDirection = "asc"), this.emit("reke-sort", { key: this.sortKey, direction: this.sortDirection }));
+  }
+  handleRowClick(e, r) {
+    this.emit("reke-row-click", { row: e, index: r });
+  }
+  /** Toggle expand state for a row at the given index. */
+  toggleExpand(e) {
+    const r = new Set(this.expandedRows), a = this.rows[e], o = !r.has(e);
+    o ? r.add(e) : r.delete(e), this.expandedRows = r, this.emit("reke-row-expand", { row: a, index: e, expanded: o });
+  }
+  /** Check whether a row at the given index is currently expanded. */
+  isRowExpanded(e) {
+    return this.expandedRows.has(e);
+  }
+  _onToolbarSlotChange(e) {
+    const r = e.target;
+    this._hasToolbar = r.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _onFooterSlotChange(e) {
+    const r = e.target;
+    this._hasFooter = r.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _renderRow(e, r) {
+    const a = this.expandedRows.has(r);
+    return l`
+      <tr
+        part="row"
+        class="row ${r % 2 === 1 ? "row--even" : ""} ${a ? "row--expanded" : ""}"
+        @click=${() => this.handleRowClick(e, r)}
+      >
+        ${this.columns.map(
+      (o) => l`
+            <td
+              part="cell"
+              class="cell"
+              data-align=${o.align || "left"}
+            >
+              ${o.render ? o.render(e[o.key], e, r) : e[o.key] ?? ""}
+            </td>
+          `
+    )}
+      </tr>
+      ${this.expandedRowRender && a ? l`
+            <tr part="expand-row" class="expand-row">
+              <td part="expand-content" class="expand-content" colspan=${this.columns.length}>
+                ${this.expandedRowRender(e, r)}
+              </td>
+            </tr>
+          ` : c}
+    `;
+  }
+  render() {
+    const e = {
+      table: !0,
+      "table--striped": this.striped,
+      "table--dense": this.dense,
+      "table--hoverable": this.hoverable,
+      "table--bordered": this.bordered
+    };
+    return l`
+      <div class="table-container">
+        ${this._hasToolbar ? l`
+              <div part="toolbar" class="table-toolbar">
+                <slot name="toolbar" @slotchange=${this._onToolbarSlotChange}></slot>
+              </div>
+            ` : l`<slot name="toolbar" @slotchange=${this._onToolbarSlotChange} style="display:none"></slot>`}
+
+        <div class="table-wrapper">
+          <table part="table" class=${p(e)} role="table">
+            <thead part="header">
+              <tr>
+                ${this.columns.map(
+      (r) => l`
+                    <th
+                      part="header-cell"
+                      class="header-cell ${this.sortKey === r.key ? "header-cell--sorted" : ""} ${r.sortable === !1 ? "header-cell--no-sort" : ""}"
+                      style=${r.width ? `width: ${r.width}` : ""}
+                      data-align=${r.align || "left"}
+                      @click=${() => this.handleHeaderClick(r)}
+                    >
+                      <span class="header-content">
+                        ${r.header}
+                        ${this.sortKey === r.key ? l`<span class="sort-indicator" aria-hidden="true">${this.sortDirection === "asc" ? "↑" : "↓"}</span>` : c}
+                      </span>
+                    </th>
+                  `
+    )}
+              </tr>
+            </thead>
+            <tbody part="body">
+              ${this.rows.map((r, a) => this._renderRow(r, a))}
+              ${this.rows.length === 0 ? l`
+                    <tr class="row row--empty">
+                      <td class="cell cell--empty" colspan=${this.columns.length}>
+                        <slot name="empty">No data</slot>
+                      </td>
+                    </tr>
+                  ` : c}
+            </tbody>
+          </table>
+        </div>
+
+        ${this._hasFooter ? l`
+              <div part="footer" class="table-footer">
+                <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+              </div>
+            ` : l`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+      </div>
+    `;
+  }
+};
+h.styles = Se;
+m([
+  i({ attribute: !1 })
+], h.prototype, "columns", 2);
+m([
+  i({ attribute: !1 })
+], h.prototype, "rows", 2);
+m([
+  i({ type: Boolean, reflect: !0 })
+], h.prototype, "striped", 2);
+m([
+  i({ type: Boolean, reflect: !0 })
+], h.prototype, "dense", 2);
+m([
+  i({ type: Boolean, reflect: !0 })
+], h.prototype, "hoverable", 2);
+m([
+  i({ type: Boolean, reflect: !0 })
+], h.prototype, "bordered", 2);
+m([
+  i({ type: Boolean, reflect: !0 })
+], h.prototype, "borderless", 2);
+m([
+  i({ reflect: !0, attribute: "sort-key" })
+], h.prototype, "sortKey", 2);
+m([
+  i({ reflect: !0, attribute: "sort-direction" })
+], h.prototype, "sortDirection", 2);
+m([
+  i({ attribute: !1 })
+], h.prototype, "expandedRowRender", 2);
+m([
+  i({ attribute: !1 })
+], h.prototype, "expandedRows", 2);
+m([
+  k()
+], h.prototype, "_hasToolbar", 2);
+m([
+  k()
+], h.prototype, "_hasFooter", 2);
+h = m([
+  b("reke-table")
+], h);
+const Te = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /* === Label === */
+
+    .label {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 12px;
+      color: var(--reke-color-text-ghost, #737373);
+      transition: color 0.15s ease;
+    }
+
+    .label--active {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    /* === Trigger === */
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      color: var(--reke-color-text, #E5E5E5);
+      font-family: inherit;
+      font-size: 13px;
+      cursor: pointer;
+      transition: border-color 0.15s ease;
+      min-width: 200px;
+      box-sizing: border-box;
+    }
+
+    .trigger:hover {
+      border-color: var(--reke-color-text-muted, #525252);
+    }
+
+    .trigger--open {
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .trigger--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .trigger--placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .trigger__icon {
+      display: inline-flex;
+      width: 16px;
+      height: 16px;
+      color: var(--reke-color-text-muted, #525252);
+      transition: color 0.15s ease;
+    }
+
+    .trigger--open .trigger__icon {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .trigger__icon svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .trigger__text {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .trigger__separator {
+      color: var(--reke-color-text-disabled, #3B3B3B);
+    }
+
+    .trigger__chevron {
+      display: inline-flex;
+      width: 16px;
+      height: 16px;
+      color: var(--reke-color-text-muted, #525252);
+      transition: transform 0.15s ease, color 0.15s ease;
+    }
+
+    .trigger--open .trigger__chevron {
+      transform: rotate(180deg);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .trigger__chevron svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    /* === Calendar dropdown === */
+
+    .calendar {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 50;
+      margin-top: 4px;
+      padding: 16px;
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
+      min-width: 280px;
+    }
+
+    /* === Calendar header (month/year + nav) === */
+
+    .calendar__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+
+    .calendar__title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .calendar__nav {
+      display: flex;
+      gap: 4px;
+    }
+
+    .calendar__nav-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: var(--reke-radius, 4px);
+      background: transparent;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    .calendar__nav-btn:hover {
+      color: var(--reke-color-text, #E5E5E5);
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
+    }
+
+    .calendar__nav-btn svg {
+      width: 14px;
+      height: 14px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    /* === Weekday header === */
+
+    .calendar__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      margin-bottom: 4px;
+    }
+
+    .calendar__weekday {
+      text-align: center;
+      font-size: 9px;
+      font-weight: 600;
+      color: var(--reke-color-text-disabled, #3B3B3B);
+      padding: 4px 0;
+      text-transform: uppercase;
+    }
+
+    /* === Day grid === */
+
+    .calendar__grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+    }
+
+    .calendar__day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      font-size: 11px;
+      border: none;
+      border-radius: var(--reke-radius, 4px);
+      background: transparent;
+      color: var(--reke-color-text, #E5E5E5);
+      cursor: pointer;
+      padding: 0;
+      font-family: inherit;
+      transition: background-color 0.1s ease;
+    }
+
+    .calendar__day:hover {
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 70%, var(--reke-color-border, #252525));
+    }
+
+    .calendar__day--other {
+      color: var(--reke-color-text-disabled, #3B3B3B);
+    }
+
+    .calendar__day--today {
+      font-weight: 600;
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .calendar__day--selected {
+      background: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      font-weight: 600;
+      border-radius: 14px;
+    }
+
+    .calendar__day--selected:hover {
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 85%, black);
+    }
+
+    .calendar__day--in-range {
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 10%, transparent);
+      border-radius: var(--reke-radius, 4px);
+    }
+
+    .calendar__day--range-start {
+      background: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      font-weight: 600;
+      border-radius: 14px 4px 4px 14px;
+    }
+
+    .calendar__day--range-end {
+      background: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      font-weight: 600;
+      border-radius: 4px 14px 14px 4px;
+    }
+
+    .calendar__day--range-start.calendar__day--range-end {
+      border-radius: 14px;
+    }
+
+    .calendar__day--disabled {
+      color: var(--reke-color-text-disabled, #3B3B3B);
+      cursor: default;
+      pointer-events: none;
+    }
+
+    /* === Calendar footer === */
+
+    .calendar__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      padding-top: 8px;
+    }
+
+    .calendar__action {
+      font-family: inherit;
+      font-size: 11px;
+      font-weight: 600;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0;
+    }
+
+    .calendar__action--today {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .calendar__action--today:hover {
+      text-decoration: underline;
+    }
+
+    .calendar__action--clear {
+      color: var(--reke-color-text-muted, #525252);
+      font-weight: 400;
+    }
+
+    .calendar__action--clear:hover {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+  `
+];
+var Le = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, v = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Ye(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && Le(r, a, t), t;
+};
+const Je = [
+  "Enero",
+  "Febrero",
+  "Marzo",
+  "Abril",
+  "Mayo",
+  "Junio",
+  "Julio",
+  "Agosto",
+  "Septiembre",
+  "Octubre",
+  "Noviembre",
+  "Diciembre"
+], Ne = ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"];
+function x(e) {
+  if (!e) return null;
+  const [r, a, o] = e.split("-").map(Number);
+  return !r || !a || !o ? null : new Date(r, a - 1, o);
+}
+function B(e) {
+  const r = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"), o = String(e.getDate()).padStart(2, "0");
+  return `${r}-${a}-${o}`;
+}
+function q(e) {
+  const r = String(e.getDate()).padStart(2, "0"), a = String(e.getMonth() + 1).padStart(2, "0");
+  return `${r}/${a}/${e.getFullYear()}`;
+}
+function X(e, r) {
+  return e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate();
+}
+function Ke(e, r) {
+  let o = new Date(e, r, 1).getDay() - 1;
+  o < 0 && (o = 6);
+  const t = new Date(e, r, 1 - o), s = [];
+  for (let n = 0; n < 42; n++) {
+    const R = new Date(t.getFullYear(), t.getMonth(), t.getDate() + n);
+    s.push({ date: R, day: R.getDate(), otherMonth: R.getMonth() !== r });
+  }
+  return s;
+}
+let d = class extends g {
+  constructor() {
+    super(...arguments), this.mode = "range", this.value = "", this.from = "", this.to = "", this.label = "", this.placeholder = "", this.min = "", this.max = "", this.disabled = !1, this.error = !1, this._open = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._rangeSelecting = !1, this._boundOutsideClick = this._onOutsideClick.bind(this), this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) {
+        if (this._rangeSelecting && this.from) {
+          this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+          return;
+        }
+        this._open = !1, this._rangeSelecting = !1;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._boundOutsideClick, !0), document.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick, !0), document.removeEventListener("keydown", this._onKeyDown);
+  }
+  _onOutsideClick(e) {
+    if (!this._open) return;
+    if (!e.composedPath().includes(this)) {
+      if (this._rangeSelecting && this.from) {
+        this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+        return;
+      }
+      this._open = !1, this._rangeSelecting = !1;
+    }
+  }
+  _toggleOpen() {
+    if (!this.disabled)
+      if (this._open = !this._open, this._open)
+        this._syncView();
+      else {
+        if (this._rangeSelecting && this.from) {
+          this.to = this.from, this._rangeSelecting = !1, this.emit("reke-change", { from: this.from, to: this.to });
+          return;
+        }
+        this._rangeSelecting = !1;
+      }
+  }
+  /** Sync calendar view to the current selection. */
+  _syncView() {
+    let e = null;
+    if (this.mode === "single" ? e = x(this.value) : e = x(this.from), e)
+      this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth();
+    else {
+      const r = /* @__PURE__ */ new Date();
+      this._viewYear = r.getFullYear(), this._viewMonth = r.getMonth();
+    }
+  }
+  _prevYear() {
+    this._viewYear--;
+  }
+  _nextYear() {
+    this._viewYear++;
+  }
+  _prevMonth() {
+    this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear--) : this._viewMonth--;
+  }
+  _nextMonth() {
+    this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear++) : this._viewMonth++;
+  }
+  _isDisabledDate(e) {
+    const r = x(this.min), a = x(this.max);
+    return !!(r && e < r || a && e > a);
+  }
+  _selectDay(e) {
+    if (!this._isDisabledDate(e.date)) {
+      if (this.mode === "single") {
+        this.value = B(e.date), this._open = !1, this.emit("reke-change", { value: this.value });
+        return;
+      }
+      if (!this._rangeSelecting)
+        this.from = B(e.date), this.to = "", this._rangeSelecting = !0;
+      else {
+        let r = x(this.from), a = e.date;
+        a < r && ([r, a] = [a, r]), this.from = B(r), this.to = B(a), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+      }
+    }
+  }
+  _goToday() {
+    const e = /* @__PURE__ */ new Date(), r = B(e);
+    if (this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth(), this.mode === "single")
+      this.value = r, this._open = !1, this.emit("reke-change", { value: this.value });
+    else if (this._rangeSelecting && this.from) {
+      let a = x(this.from), o = e;
+      o < a && ([a, o] = [o, a]), this.from = B(a), this.to = B(o), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+    } else
+      this.from = r, this.to = r, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+  }
+  _clear() {
+    this.mode === "single" ? (this.value = "", this.emit("reke-change", { value: "" })) : (this.from = "", this.to = "", this._rangeSelecting = !1, this.emit("reke-change", { from: "", to: "" })), this._open = !1;
+  }
+  _getDayClasses(e) {
+    const r = /* @__PURE__ */ new Date(), a = X(e.date, r), o = this._isDisabledDate(e.date);
+    if (this.mode === "single") {
+      const Z = x(this.value);
+      return {
+        calendar__day: !0,
+        "calendar__day--other": e.otherMonth,
+        "calendar__day--today": a,
+        "calendar__day--selected": !!Z && X(e.date, Z),
+        "calendar__day--disabled": o
+      };
+    }
+    const t = x(this.from), s = x(this.to), n = !!t && X(e.date, t), R = !!s && X(e.date, s), ee = !!t && !!s && e.date > t && e.date < s;
+    return {
+      calendar__day: !0,
+      "calendar__day--other": e.otherMonth,
+      "calendar__day--today": a && !n && !R,
+      "calendar__day--selected": (this.mode === "range", !1),
+      "calendar__day--in-range": ee,
+      "calendar__day--range-start": n,
+      "calendar__day--range-end": R,
+      "calendar__day--disabled": o
+    };
+  }
+  _getDisplayText() {
+    if (this.mode === "single") {
+      const t = x(this.value);
+      return t ? q(t) : this.placeholder || "Seleccionar fecha";
+    }
+    const e = x(this.from), r = x(this.to);
+    if (!e && !r)
+      return this.placeholder || "Seleccionar rango";
+    const a = e ? q(e) : "—", o = r ? q(r) : "—";
+    return l`${a} <span class="trigger__separator">→</span> ${o}`;
+  }
+  _hasValue() {
+    return this.mode === "single" ? !!this.value : !!(this.from || this.to);
+  }
+  _renderCalendarIcon() {
+    return l`
+      <span class="trigger__icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+      </span>
+    `;
+  }
+  _renderChevron() {
+    return l`
+      <span class="trigger__chevron" aria-hidden="true">
+        <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
+      </span>
+    `;
+  }
+  render() {
+    const e = Ke(this._viewYear, this._viewMonth), r = !this._hasValue(), a = `${Je[this._viewMonth]} ${this._viewYear}`, o = {
+      trigger: !0,
+      "trigger--open": this._open,
+      "trigger--error": this.error,
+      "trigger--placeholder": r
+    }, t = {
+      label: !0,
+      "label--active": this._open
+    };
+    return l`
+      ${this.label ? l`<span class=${p(t)}>${this.label}</span>` : c}
+
+      <button
+        part="trigger"
+        class=${p(o)}
+        type="button"
+        @click=${this._toggleOpen}
+        aria-haspopup="dialog"
+        aria-expanded=${this._open}
+        ?disabled=${this.disabled}
+      >
+        ${this._renderCalendarIcon()}
+        <span class="trigger__text">${this._getDisplayText()}</span>
+        ${this._renderChevron()}
+      </button>
+
+      ${this._open ? l`
+            <div part="calendar" class="calendar" role="dialog" aria-label="Calendar">
+              <div class="calendar__header">
+                <span class="calendar__title">${a}</span>
+                <div class="calendar__nav">
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._prevYear}
+                    aria-label="Previous year"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="17 18 11 12 17 6"/><polyline points="11 18 5 12 11 6"/></svg>
+                  </button>
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._prevMonth}
+                    aria-label="Previous month"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
+                  </button>
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._nextMonth}
+                    aria-label="Next month"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg>
+                  </button>
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._nextYear}
+                    aria-label="Next year"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="7 6 13 12 7 18"/><polyline points="13 6 19 12 13 18"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="calendar__weekdays">
+                ${Ne.map(
+      (s) => l`<span class="calendar__weekday">${s}</span>`
+    )}
+              </div>
+
+              <div class="calendar__grid">
+                ${e.map(
+      (s) => l`
+                    <button
+                      class=${p(this._getDayClasses(s))}
+                      type="button"
+                      @click=${() => this._selectDay(s)}
+                      ?disabled=${this._isDisabledDate(s.date)}
+                      aria-label="${s.date.toLocaleDateString("es-ES", { day: "numeric", month: "long", year: "numeric" })}"
+                    >
+                      ${s.day}
+                    </button>
+                  `
+    )}
+              </div>
+
+              <div class="calendar__footer">
+                <button class="calendar__action calendar__action--today" type="button" @click=${this._goToday}>
+                  Hoy
+                </button>
+                <button class="calendar__action calendar__action--clear" type="button" @click=${this._clear}>
+                  Limpiar
+                </button>
+              </div>
+            </div>
+          ` : c}
+    `;
+  }
+};
+d.styles = Te;
+v([
+  i({ reflect: !0 })
+], d.prototype, "mode", 2);
+v([
+  i()
+], d.prototype, "value", 2);
+v([
+  i()
+], d.prototype, "from", 2);
+v([
+  i()
+], d.prototype, "to", 2);
+v([
+  i()
+], d.prototype, "label", 2);
+v([
+  i()
+], d.prototype, "placeholder", 2);
+v([
+  i()
+], d.prototype, "min", 2);
+v([
+  i()
+], d.prototype, "max", 2);
+v([
+  i({ type: Boolean, reflect: !0 })
+], d.prototype, "disabled", 2);
+v([
+  i({ type: Boolean, reflect: !0 })
+], d.prototype, "error", 2);
+v([
+  k()
+], d.prototype, "_open", 2);
+v([
+  k()
+], d.prototype, "_viewYear", 2);
+v([
+  k()
+], d.prototype, "_viewMonth", 2);
+v([
+  k()
+], d.prototype, "_rangeSelecting", 2);
+d = v([
+  b("reke-date-range")
+], d);
+const He = [
+  f,
+  u`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .dropzone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--reke-space-sm, 12px);
+      padding: var(--reke-space-xl, 24px) var(--reke-space-lg, 20px);
+      border-radius: var(--reke-radius, 4px);
+      border: 1px dashed var(--reke-color-border, #252525);
+      background-color: transparent;
+      cursor: pointer;
+      transition: border-color 0.2s ease, background-color 0.2s ease;
+      text-align: center;
+    }
+
+    .dropzone:hover {
+      border-color: var(--reke-color-text-muted, #525252);
+    }
+
+    .dropzone--dragging {
+      border-color: var(--reke-color-primary, #22c55e);
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22c55e) 5%, transparent);
+    }
+
+    .dropzone--error {
+      border-color: var(--reke-color-danger, #ef4444);
+    }
+
+    .dropzone--compact {
+      flex-direction: row;
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+    }
+
+    .icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22c55e) 10%, transparent);
+      border: 1px solid color-mix(in srgb, var(--reke-color-primary, #22c55e) 20%, transparent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--reke-color-primary, #22c55e);
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+
+    .dropzone--compact .icon {
+      width: 28px;
+      height: 28px;
+      font-size: 14px;
+    }
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .text__primary {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      color: var(--reke-color-text, #e5e5e5);
+    }
+
+    .text__secondary {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      color: var(--reke-color-text-disabled, #3b3b3b);
+    }
+
+    .text__file {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      color: var(--reke-color-primary, #22c55e);
+    }
+
+    .text__error {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      color: var(--reke-color-danger, #ef4444);
+    }
+
+    input[type='file'] {
+      display: none;
+    }
+  `
+];
+var Ie = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, C = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Ve(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && Ie(r, a, t), t;
+};
+let y = class extends g {
+  constructor() {
+    super(...arguments), this.accept = "", this.hint = "", this.disabled = !1, this.error = !1, this.errorMessage = "", this.compact = !1, this._dragging = !1, this._fileName = "";
+  }
+  handleClick() {
+    this.disabled || this._input.click();
+  }
+  handleDragOver(e) {
+    e.preventDefault(), e.stopPropagation(), this.disabled || (this._dragging = !0);
+  }
+  handleDragLeave(e) {
+    e.preventDefault(), e.stopPropagation(), this._dragging = !1;
+  }
+  handleDrop(e) {
+    if (e.preventDefault(), e.stopPropagation(), this._dragging = !1, this.disabled) return;
+    const r = e.dataTransfer?.files[0];
+    r && (this._fileName = r.name, this.emit("reke-file-select", { file: r }));
+  }
+  handleInputChange() {
+    const e = this._input.files?.[0];
+    e && (this._fileName = e.name, this.emit("reke-file-select", { file: e }));
+  }
+  /** Clear the selected file programmatically. */
+  clear() {
+    this._fileName = "", this._input && (this._input.value = ""), this.emit("reke-file-clear");
+  }
+  render() {
+    const e = {
+      dropzone: !0,
+      "dropzone--dragging": this._dragging,
+      "dropzone--error": this.error,
+      "dropzone--compact": this.compact
+    };
+    return l`
+      <div
+        part="dropzone"
+        class=${p(e)}
+        @click=${this.handleClick}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+        role="button"
+        tabindex="0"
+        aria-label="Upload file"
+        @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this.handleClick());
+    }}
+      >
+        <div class="icon" aria-hidden="true">&#8593;</div>
+        <div class="text">
+          ${this._fileName ? l`<span class="text__file">${this._fileName}</span>` : l`<span class="text__primary">
+                ${this._dragging ? "drop file here" : "drag or select file"}
+              </span>`}
+          ${this.error && this.errorMessage ? l`<span class="text__error">${this.errorMessage}</span>` : this.hint ? l`<span class="text__secondary">${this.hint}</span>` : c}
+        </div>
+      </div>
+      <input
+        type="file"
+        accept=${this.accept || c}
+        @change=${this.handleInputChange}
+      />
+    `;
+  }
+};
+y.styles = He;
+C([
+  i()
+], y.prototype, "accept", 2);
+C([
+  i()
+], y.prototype, "hint", 2);
+C([
+  i({ type: Boolean, reflect: !0 })
+], y.prototype, "disabled", 2);
+C([
+  i({ type: Boolean, reflect: !0 })
+], y.prototype, "error", 2);
+C([
+  i({ attribute: "error-message" })
+], y.prototype, "errorMessage", 2);
+C([
+  i({ type: Boolean, reflect: !0 })
+], y.prototype, "compact", 2);
+C([
+  k()
+], y.prototype, "_dragging", 2);
+C([
+  k()
+], y.prototype, "_fileName", 2);
+C([
+  oe('input[type="file"]')
+], y.prototype, "_input", 2);
+y = C([
+  b("reke-file-upload")
+], y);
+const Ue = [
+  f,
+  u`
+    :host {
+      display: block;
+    }
+
+    .alert {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-sm, 12px);
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      border-radius: var(--reke-radius, 4px);
+      border: 1px solid transparent;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+      line-height: 1.5;
+      box-sizing: border-box;
+    }
+
+    /* === Variants === */
+
+    .alert--success {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 6%, transparent);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 19%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .alert--error {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 6%, transparent);
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 19%, transparent);
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .alert--warning {
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 6%, transparent);
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 19%, transparent);
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .alert--info {
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 6%, transparent);
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 19%, transparent);
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    /* === Content === */
+
+    .alert__content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* === Dismissible === */
+
+    .alert__close {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      background: transparent;
+      border: none;
+      color: currentColor;
+      opacity: 0.5;
+      cursor: pointer;
+      padding: 0;
+      font-size: 16px;
+      line-height: 1;
+      transition: opacity 0.15s ease;
+    }
+
+    .alert__close:hover {
+      opacity: 1;
+    }
+
+    .alert__close:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  `
+];
+var Xe = Object.defineProperty, We = Object.getOwnPropertyDescriptor, Q = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? We(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && Xe(r, a, t), t;
+};
+let Y = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "info", this.dismissible = !1;
+  }
+  handleClose() {
+    this.emit("reke-close"), this.remove();
+  }
+  render() {
+    const e = {
+      alert: !0,
+      [`alert--${this.variant}`]: !0
+    };
+    return l`
+      <div part="alert" class=${p(e)} role="alert">
+        <span class="alert__content">
+          <slot></slot>
+        </span>
+        ${this.dismissible ? l`
+              <button
+                class="alert__close"
+                @click=${this.handleClose}
+                aria-label="Close"
+              >
+                &times;
+              </button>
+            ` : c}
+      </div>
+    `;
+  }
+};
+Y.styles = Ue;
+Q([
+  i({ reflect: !0 })
+], Y.prototype, "variant", 2);
+Q([
+  i({ type: Boolean, reflect: !0 })
+], Y.prototype, "dismissible", 2);
+Y = Q([
+  b("reke-alert")
+], Y);
+const qe = [
+  f,
+  u`
+    :host {
+      display: block;
+    }
+
+    .toast {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--reke-space-sm, 12px);
+      padding: var(--reke-space-sm, 14px) var(--reke-space-lg, 20px);
+      border-radius: var(--reke-radius, 4px);
+      border: 1px solid var(--reke-color-border, #252525);
+      background-color: var(--reke-color-surface, #1a1a1a);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+      box-sizing: border-box;
+      transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+
+    .toast--error {
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 25%, transparent);
+    }
+
+    .toast--success {
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 25%, transparent);
+    }
+
+    .toast--warning {
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 25%, transparent);
+    }
+
+    .toast--info {
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 25%, transparent);
+    }
+
+    /* === Left section === */
+
+    .toast__left {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-sm, 12px);
+      min-width: 0;
+      flex: 1;
+    }
+
+    .toast__icon {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .toast__icon svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .toast--success .toast__icon {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .toast--error .toast__icon {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .toast--warning .toast__icon {
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .toast--info .toast__icon {
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    .toast__message {
+      color: var(--reke-color-text, #e5e5e5);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* === Right section === */
+
+    .toast__right {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-xs, 8px);
+      flex-shrink: 0;
+    }
+
+    .toast__action {
+      background: transparent;
+      border: none;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      cursor: pointer;
+      padding: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    .toast--error .toast__action {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .toast--success .toast__action {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .toast--warning .toast__action {
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .toast--info .toast__action {
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    .toast__action:hover {
+      opacity: 0.8;
+    }
+
+    .toast__action:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    .toast__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      background: transparent;
+      border: none;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      padding: 0;
+      font-size: 14px;
+      line-height: 1;
+      transition: color 0.15s ease;
+    }
+
+    .toast__close:hover {
+      color: var(--reke-color-text, #e5e5e5);
+    }
+
+    .toast__close:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22c55e);
+      outline-offset: 2px;
+    }
+  `
+];
+var Ge = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, V = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? Qe(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && Ge(r, a, t), t;
+};
+const Ze = {
+  success: l`<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,
+  error: l`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+  warning: l`<svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+  info: l`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`
+};
+let S = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "success", this.message = "", this.action = "", this.duration = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.startTimer();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearTimer();
+  }
+  startTimer() {
+    this.clearTimer(), this.duration > 0 && (this._timer = setTimeout(() => this.dismiss(), this.duration));
+  }
+  clearTimer() {
+    this._timer !== void 0 && (clearTimeout(this._timer), this._timer = void 0);
+  }
+  dismiss() {
+    this.emit("reke-close"), this.remove();
+  }
+  handleAction() {
+    this.emit("reke-action");
+  }
+  render() {
+    const e = {
+      toast: !0,
+      [`toast--${this.variant}`]: !0
+    };
+    return l`
+      <div part="toast" class=${p(e)} role="status">
+        <div class="toast__left">
+          <span class="toast__icon" aria-hidden="true">
+            ${Ze[this.variant]}
+          </span>
+          <span class="toast__message">${this.message}</span>
+        </div>
+        <div class="toast__right">
+          ${this.action ? l`
+                <button
+                  class="toast__action"
+                  type="button"
+                  @click=${this.handleAction}
+                >
+                  ${this.action}
+                </button>
+              ` : c}
+          <button
+            class="toast__close"
+            @click=${() => this.dismiss()}
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+S.styles = qe;
+V([
+  i({ reflect: !0 })
+], S.prototype, "variant", 2);
+V([
+  i()
+], S.prototype, "message", 2);
+V([
+  i()
+], S.prototype, "action", 2);
+V([
+  i({ type: Number })
+], S.prototype, "duration", 2);
+S = V([
+  b("reke-toast")
+], S);
+const er = [
+  f,
+  u`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 3px 10px;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      line-height: 1.4;
+      border: 1px solid var(--reke-color-border-subtle, #1F1F1F);
+      border-radius: var(--reke-radius, 4px);
+      background: transparent;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+      box-sizing: border-box;
+      white-space: nowrap;
+    }
+
+    .chip:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .chip:hover:not(:disabled) {
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    /* === Active states by color === */
+
+    .chip--primary.chip--active {
+      border-color: var(--reke-color-primary, #22C55E);
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 10%, black);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .chip--secondary.chip--active {
+      border-color: var(--reke-color-secondary, #3B82F6);
+      background: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 10%, black);
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    .chip--danger.chip--active {
+      border-color: var(--reke-color-danger, #EF4444);
+      background: color-mix(in srgb, var(--reke-color-danger, #EF4444) 10%, black);
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .chip--warning.chip--active {
+      border-color: var(--reke-color-warning, #F59E0B);
+      background: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 10%, black);
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    /* === Dismiss button === */
+
+    .chip__dismiss {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      cursor: pointer;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    .chip__dismiss:hover {
+      opacity: 1;
+    }
+
+    .chip__dismiss svg {
+      width: 10px;
+      height: 10px;
+      stroke: currentColor;
+      stroke-width: 2.5;
+      stroke-linecap: round;
+      fill: none;
+    }
+  `
+];
+var rr = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, U = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? tr(r, a) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (t = (o ? n(r, a, t) : n(t)) || t);
+  return o && t && rr(r, a, t), t;
+};
+let j = class extends g {
+  constructor() {
+    super(...arguments), this.color = "primary", this.active = !1, this.dismissible = !1, this.disabled = !1;
+  }
+  _handleClick() {
+    this.disabled || this.emit("reke-click");
+  }
+  _handleDismiss(e) {
+    e.stopPropagation(), !this.disabled && this.emit("reke-dismiss");
+  }
+  render() {
+    const e = {
+      chip: !0,
+      [`chip--${this.color}`]: !0,
+      "chip--active": this.active
+    };
+    return l`
+      <button
+        part="chip"
+        class=${p(e)}
+        type="button"
+        ?disabled=${this.disabled}
+        aria-pressed=${this.active}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+        ${this.dismissible ? l`
+              <span
+                part="dismiss"
+                class="chip__dismiss"
+                role="button"
+                aria-label="Dismiss"
+                @click=${this._handleDismiss}
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </span>
+            ` : c}
+      </button>
+    `;
+  }
+};
+j.styles = er;
+U([
+  i({ reflect: !0 })
+], j.prototype, "color", 2);
+U([
+  i({ type: Boolean, reflect: !0 })
+], j.prototype, "active", 2);
+U([
+  i({ type: Boolean, reflect: !0 })
+], j.prototype, "dismissible", 2);
+U([
+  i({ type: Boolean, reflect: !0 })
+], j.prototype, "disabled", 2);
+j = U([
+  b("reke-chip")
+], j);
+export {
+  Y as R,
+  L as a,
+  F as b,
+  O as c,
+  A as d,
+  j as e,
+  d as f,
+  P as g,
+  g as h,
+  y as i,
+  _ as j,
+  w as k,
+  h as l,
+  $ as m,
+  S as n,
+  T as o,
+  M as p
+};