@nitramburesh/wcds 0.3.10

package/dist/wcds.js

@@ -0,0 +1,809 @@
+import { css as b, html as d, LitElement as g } from "lit";
+import { property as s, customElement as h, state as $ } from "lit/decorators.js";
+const f = b`
+  :host {
+    font-family: var(
+      --wcds-font-family-sans,
+      'Plus Jakarta Sans',
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      sans-serif
+    );
+    font-weight: var(--wcds-font-weight-regular, 400);
+    line-height: var(--wcds-font-line-height-normal, 1.5);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`, C = (r) => typeof r != "string" || r === "", S = (r) => {
+  const o = Math.floor(Math.random() * 1e4);
+  return `wcds-${r}-${o}`;
+};
+var O = Object.defineProperty, j = Object.getOwnPropertyDescriptor, x = (r, o, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? j(o, a) : o, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (t = (e ? i(o, a, t) : i(t)) || t);
+  return e && t && O(o, a, t), t;
+};
+const k = {
+  "arrow-left": d` <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M20 12H4m0 0 6-6m-6 6 6 6"
+    />
+  </svg>`,
+  "arrow-right": d` <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M5 12h14m0 0-6-6m6 6-6 6"
+    />
+  </svg>`,
+  check: d`
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 12.6111L8.92308 17.5L20 6.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </svg>
+  `,
+  close: d`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"
+      />
+    </svg>
+  `,
+  menu: d`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" />
+    </svg>
+  `,
+  search: d`
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+  location: d` <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 21c3.5-3.6 7-6.8 7-10.8 0-4-3.1-7.2-7-7.2s-7 3.2-7 7.2 3.5 7.2 7 10.8Z"
+    />
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+    />
+  </svg>`
+};
+let m = class extends g {
+  constructor() {
+    super(...arguments), this.size = "md";
+  }
+  render() {
+    const r = k[this.icon];
+    return r ? d` <span class="wcds-icon" role="img" aria-hidden="true"> ${r} </span> ` : null;
+  }
+};
+m.styles = [
+  f,
+  b`
+      :host {
+      --wcds-icon-size: var(--wcds-icon-size-md);
+      --wcds-icon-color: var(--wcds-icon-color-neutral);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--wcds-icon-size);
+      height: var(--wcds-icon-size);
+      line-height: 0;
+    }
+
+    .wcds-icon {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+    }
+
+    svg path {
+      width: 100%;
+      height: 100%;
+    }
+  `
+];
+x([
+  s({ type: String, reflect: !0 })
+], m.prototype, "icon", 2);
+x([
+  s({ type: String })
+], m.prototype, "size", 2);
+m = x([
+  h("wcds-icon")
+], m);
+var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, v = (r, o, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? E(o, a) : o, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (t = (e ? i(o, a, t) : i(t)) || t);
+  return e && t && P(o, a, t), t;
+};
+let c = class extends g {
+  constructor() {
+    super(...arguments), this.id = S("button"), this.size = "md", this.variant = "solid", this.colorScheme = "primary", this.type = "button", this.disabled = !1;
+  }
+  handleClick(r) {
+    this.dispatchEvent(
+      new CustomEvent("click", {
+        detail: r,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return d`
+      <button @click=${this.handleClick} type=${this.type} ?disabled=${this.disabled}>
+        ${this.iconLeft && d`<wcds-icon .icon=${this.iconLeft} />`}
+        <slot></slot>
+        ${this.iconRight && d`<wcds-icon .icon=${this.iconRight} />`}
+      </button>
+    `;
+  }
+};
+c.styles = [
+  f,
+  b`
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--wcds-button-padding);
+        border-radius: var(--wcds-button-radius);
+        font-size: var(--wcds-button-font-size);
+        font-weight: 500;
+        background-color: var(--wcds-button-bg-color);
+        color: var(--wcds-button-fg-color);
+        border: 1px solid var(--wcds-button-border-color);
+        gap: var(--wcds-spacing-xs);
+        cursor: pointer;
+        transition: all 0.15s ease-out;
+        box-sizing: border-box;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      button:not([disabled]):hover {
+        filter: brightness(1.1);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      }
+
+      button:not([disabled]):active {
+        transform: scale(0.98);
+        box-shadow: none;
+      }
+
+      /* Solid variant */
+      :host([variant='solid'][colorScheme='primary']),
+      :host([variant='solid']:not([colorScheme])),
+      :host(:not([variant])[colorScheme='primary']),
+      :host(:not([variant]):not([colorScheme])) {
+        --wcds-button-bg-color: var(--wcds-button-solid-primary-bg);
+        --wcds-button-fg-color: var(--wcds-button-solid-primary-fg);
+        --wcds-button-border-color: var(--wcds-button-solid-primary-border);
+      }
+
+      :host([variant='solid'][colorScheme='secondary']),
+      :host(:not([variant])[colorScheme='secondary']) {
+        --wcds-button-bg-color: var(--wcds-button-solid-secondary-bg);
+        --wcds-button-fg-color: var(--wcds-button-solid-secondary-fg);
+        --wcds-button-border-color: var(--wcds-button-solid-secondary-border);
+      }
+
+      :host([variant='solid'][colorScheme='neutral']),
+      :host(:not([variant])[colorScheme='neutral']) {
+        --wcds-button-bg-color: var(--wcds-button-solid-neutral-bg);
+        --wcds-button-fg-color: var(--wcds-button-solid-neutral-fg);
+        --wcds-button-border-color: var(--wcds-button-solid-neutral-border);
+      }
+
+      /* Outlined variant */
+      :host([variant='outlined'][colorScheme='primary']),
+      :host([variant='outlined']:not([colorScheme])) {
+        --wcds-button-bg-color: var(--wcds-button-outlined-primary-bg);
+        --wcds-button-fg-color: var(--wcds-button-outlined-primary-fg);
+        --wcds-button-border-color: var(--wcds-button-outlined-primary-border);
+      }
+
+      :host([variant='outlined'][colorScheme='primary']) button:not([disabled]):hover,
+      :host([variant='outlined']:not([colorScheme])) button:not([disabled]):hover {
+        background-color: var(--wcds-button-outlined-primary-bg-hover);
+      }
+
+      :host([variant='outlined'][colorScheme='secondary']) {
+        --wcds-button-bg-color: var(--wcds-button-outlined-secondary-bg);
+        --wcds-button-fg-color: var(--wcds-button-outlined-secondary-fg);
+        --wcds-button-border-color: var(--wcds-button-outlined-secondary-border);
+      }
+
+      :host([variant='outlined'][colorScheme='secondary']) button:not([disabled]):hover {
+        background-color: var(--wcds-button-outlined-secondary-bg-hover);
+      }
+
+      :host([variant='outlined'][colorScheme='neutral']) {
+        --wcds-button-bg-color: var(--wcds-button-outlined-neutral-bg);
+        --wcds-button-fg-color: var(--wcds-button-outlined-neutral-fg);
+        --wcds-button-border-color: var(--wcds-button-outlined-neutral-border);
+      }
+
+      :host([variant='outlined'][colorScheme='neutral']) button:not([disabled]):hover {
+        background-color: var(--wcds-button-outlined-neutral-bg-hover);
+      }
+
+      /* Ghost variant */
+      :host([variant='ghost'][colorScheme='primary']),
+      :host([variant='ghost']:not([colorScheme])) {
+        --wcds-button-bg-color: var(--wcds-button-ghost-primary-bg);
+        --wcds-button-fg-color: var(--wcds-button-ghost-primary-fg);
+        --wcds-button-border-color: var(--wcds-button-ghost-primary-border);
+      }
+
+      :host([variant='ghost'][colorScheme='primary']) button:not([disabled]):hover,
+      :host([variant='ghost']:not([colorScheme])) button:not([disabled]):hover {
+        background-color: var(--wcds-button-ghost-primary-bg-hover);
+      }
+
+      :host([variant='ghost'][colorScheme='secondary']) {
+        --wcds-button-bg-color: var(--wcds-button-ghost-secondary-bg);
+        --wcds-button-fg-color: var(--wcds-button-ghost-secondary-fg);
+        --wcds-button-border-color: var(--wcds-button-ghost-secondary-border);
+      }
+
+      :host([variant='ghost'][colorScheme='secondary']) button:not([disabled]):hover {
+        background-color: var(--wcds-button-ghost-secondary-bg-hover);
+      }
+
+      :host([variant='ghost'][colorScheme='neutral']) {
+        --wcds-button-bg-color: var(--wcds-button-ghost-neutral-bg);
+        --wcds-button-fg-color: var(--wcds-button-ghost-neutral-fg);
+        --wcds-button-border-color: var(--wcds-button-ghost-neutral-border);
+      }
+
+      :host([variant='ghost'][colorScheme='neutral']) button:not([disabled]):hover {
+        background-color: var(--wcds-button-ghost-neutral-bg-hover);
+      }
+
+      /* Icon styling */
+      wcds-icon {
+        --wcds-icon-size: var(--wcds-button-icon-size, 1em);
+        color: inherit;
+      }
+
+      /* Size: sm */
+      :host([size='sm']) {
+        --wcds-button-padding: var(--wcds-button-size-sm-padding)
+          calc(var(--wcds-button-size-sm-padding) * 2);
+        --wcds-button-radius: var(--wcds-button-size-sm-radius);
+        --wcds-button-font-size: var(--wcds-button-size-sm-font-size);
+        --wcds-button-icon-size: var(--wcds-button-size-sm-icon-size);
+      }
+
+      /* Size: md */
+      :host([size='md']) {
+        --wcds-button-padding: var(--wcds-button-size-md-padding);
+        --wcds-button-radius: var(--wcds-button-size-md-radius);
+        --wcds-button-font-size: var(--wcds-button-size-md-font-size);
+        --wcds-button-icon-size: var(--wcds-button-size-md-icon-size);
+      }
+
+      /* Size: lg */
+      :host([size='lg']) {
+        --wcds-button-padding: var(--wcds-button-size-lg-padding);
+        --wcds-button-radius: var(--wcds-button-size-lg-radius);
+        --wcds-button-font-size: var(--wcds-button-size-lg-font-size);
+        --wcds-button-icon-size: var(--wcds-button-size-lg-icon-size);
+      }
+    `
+];
+v([
+  s({ type: String, reflect: !0 })
+], c.prototype, "id", 2);
+v([
+  s({ type: String, reflect: !0 })
+], c.prototype, "size", 2);
+v([
+  s({ type: String, reflect: !0 })
+], c.prototype, "variant", 2);
+v([
+  s({ type: String, reflect: !0, attribute: "colorScheme" })
+], c.prototype, "colorScheme", 2);
+v([
+  s({ type: String, reflect: !0 })
+], c.prototype, "type", 2);
+v([
+  s({ type: String })
+], c.prototype, "iconLeft", 2);
+v([
+  s({ type: String })
+], c.prototype, "iconRight", 2);
+v([
+  s({ type: Boolean, reflect: !0 })
+], c.prototype, "disabled", 2);
+c = v([
+  h("wcds-button")
+], c);
+const D = [
+  "arrow-left",
+  "arrow-right",
+  "check",
+  "close",
+  "menu",
+  "search",
+  "location"
+], W = ["sm", "md", "lg"], H = ["solid", "outlined", "ghost"], q = ["primary", "secondary", "neutral"], U = ["button", "submit", "reset"], Y = ["plain", "outlined", "elevated"], F = ["circular", "rounded", "square"];
+var I = Object.defineProperty, B = Object.getOwnPropertyDescriptor, w = (r, o, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? B(o, a) : o, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (t = (e ? i(o, a, t) : i(t)) || t);
+  return e && t && I(o, a, t), t;
+};
+let l = class extends g {
+  constructor() {
+    super(...arguments), this.id = S("input"), this.value = "", this.size = "md", this.disabled = !1;
+  }
+  _hasIcon() {
+    return this.icon !== void 0 && !C(this.icon) && D.includes(this.icon);
+  }
+  _onInput(r) {
+    const o = r.target;
+    this.value = o.value, this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.error && this.dispatchEvent(new CustomEvent("clear-error"));
+  }
+  _onChange() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  updated(r) {
+    super.updated(r);
+    const o = this.shadowRoot?.querySelector("input");
+    o && (r.has("value") && o.value !== this.value && (o.value = this.value), r.has("error") && (this.error ? o.setCustomValidity(this.error) : o.setCustomValidity("")));
+  }
+  render() {
+    try {
+      return d`
+        <div class="field">
+          <span class="input-wrapper">
+            ${this._hasIcon() && this.icon ? d`<span class="icon"><wcds-icon .icon=${this.icon} /></span>` : null}
+            <input
+              @input=${this._onInput}
+              @change=${this._onChange}
+              .value=${this.value}
+              ?disabled=${this.disabled}
+              .id=${this.id}
+              .placeholder=${this.placeholder ?? " "}
+              aria-invalid=${this.error ? "true" : "false"}
+              type="text"
+            />
+          </span>
+
+          <label for=${this.id}>${this.label}</label>
+
+          <span class="error-text">${this.error ?? ""}</span>
+        </div>
+      `;
+    } catch (r) {
+      return console.error(r), d`<div class="error-box">Error: ${r.message}</div>`;
+    }
+  }
+};
+l.styles = [
+  f,
+  b`
+      :host {
+        --wcds-input-padding: var(--wcds-input-text-size-md-padding);
+        --wcds-input-border-radius: var(--wcds-input-text-border-radius);
+        --wcds-input-border-color-default: var(--wcds-input-text-border-color-default);
+        --wcds-input-border-color-focus: var(--wcds-input-text-border-color-focus);
+        --wcds-input-box-shadow: 5px 5px 14px #ced8d7, -2px -2px 14px white;
+        --wcds-icon-size: var(--wcds-icon-size-md);
+        --wcds-icon-color: var(--wcds-icon-color-neutral);
+      }
+
+      input {
+        padding: calc(1.2 * var(--wcds-input-padding));
+        border-radius: var(--wcds-input-border-radius);
+        border: var(--wcds-input-text-border-width-default) solid
+          var(--wcds-input-border-color-default);
+        box-shadow: none;
+        transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
+        width: 100%;
+      }
+
+      input:focus {
+        outline: none;
+        border-color: var(--wcds-input-border-color-focus);
+        box-shadow: var(--wcds-input-box-shadow);
+        transition: box-shadow 0.3s ease-out, border-color 0.3s ease-in-out;
+      }
+
+      input:invalid {
+        border-color: var(--wcds-color-error-content);
+      }
+
+      :host([size='sm']) {
+        --wcds-input-padding: var(--wcds-input-text-size-sm-padding);
+        --wcds-icon-size: var(--wcds-icon-size-sm);
+      }
+
+      :host([size='lg']) {
+        --wcds-input-padding: var(--wcds-input-text-size-lg-padding);
+        --wcds-icon-size: var(--wcds-icon-size-lg);
+      }
+
+      :host([size='sm']) wcds-icon {
+        --wcds-icon-size: var(--wcds-icon-size-sm);
+      }
+
+      :host([size='lg']) wcds-icon {
+        --wcds-icon-size: var(--wcds-icon-size-lg);
+      }
+
+      :host([icon]) input {
+        padding-left: calc(2 * var(--wcds-input-padding) + var(--wcds-icon-size));
+      }
+
+      label {
+        display: none;
+      }
+
+      .field {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: var(--wcds-spacing-xs);
+        width: 100%;
+      }
+
+      .input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      .error-text {
+        color: var(--wcds-color-error-content);
+        font-size: var(--wcds-text-size-sm);
+        margin-left: var(--wcds-spacing-md);
+      }
+
+      wcds-icon {
+        position: absolute;
+        top: 50%;
+        left: var(--wcds-input-padding);
+        transform: translateY(-50%);
+        color: var(--wcds-input-icon-color, var(--wcds-icon-color-neutral));
+      }
+    `
+];
+w([
+  s({ type: String, reflect: !0 })
+], l.prototype, "id", 2);
+w([
+  s({ type: String, reflect: !0 })
+], l.prototype, "value", 2);
+w([
+  s({ type: String, reflect: !0 })
+], l.prototype, "size", 2);
+w([
+  s({ type: String })
+], l.prototype, "label", 2);
+w([
+  s({ type: String })
+], l.prototype, "placeholder", 2);
+w([
+  s({ type: String, reflect: !0 })
+], l.prototype, "icon", 2);
+w([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+w([
+  s({ type: String, reflect: !0 })
+], l.prototype, "error", 2);
+l = w([
+  h("wcds-input")
+], l);
+var L = Object.getOwnPropertyDescriptor, M = (r, o, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? L(o, a) : o, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (t = i(t) || t);
+  return t;
+};
+let z = class extends g {
+  render() {
+    return d`
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+  }
+};
+z.styles = [
+  f,
+  b`
+      :host {
+        display: block;
+        box-sizing: border-box;
+        transition: box-shadow 0.3s ease-in-out;
+        display: flex;
+        align-items: center;
+        gap: var(--wcds-spacing-lg);
+        padding: var(--wcds-card-padding);
+        box-sizing: border-box;
+        background-color: var(--wcds-card-bg-color);
+        border: 1px solid var(--wcds-card-border-color);
+        border-radius: var(--wcds-card-radius);
+        box-shadow: var(--wcds-card-shadow);
+        min-height: 64px;
+
+        --wcds-card-padding: var(--wcds-card-padding-default);
+        --wcds-card-radius: var(--wcds-card-border-radius-default);
+        --wcds-card-bg-color: var(--wcds-card-background-color-default);
+        --wcds-card-border-color: var(--wcds-card-border-color-default);
+        --wcds-card-shadow: var(--wcds-card-shadow-plain);
+      }
+
+      slot[name='header'],
+      slot[name='footer'] {
+        display: block;
+      }
+
+      slot:not([name]) {
+        display: flex;
+        flex: 1;
+      }
+    `
+];
+z = M([
+  h("wcds-card")
+], z);
+var A = Object.defineProperty, R = Object.getOwnPropertyDescriptor, _ = (r, o, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? R(o, a) : o, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (t = (e ? i(o, a, t) : i(t)) || t);
+  return e && t && A(o, a, t), t;
+};
+let y = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "info";
+  }
+  render() {
+    return d` <span class="badge">
+      <slot></slot>
+    </span>`;
+  }
+};
+y.styles = [
+  f,
+  b`
+      :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+
+      --wcds-badge-padding: var(--wcds-badge-appearance-padding-vertical)
+        var(--wcds-badge-appearance-padding-horizontal);
+      --wcds-badge-radius: var(--wcds-badge-appearance-radius);
+      --wcds-badge-font-size: var(--wcds-badge-appearance-font-size);
+      --wcds-badge-bg: var(--wcds-badge-variant-info-bg);
+      --wcds-badge-fg: var(--wcds-badge-variant-info-fg);
+    }
+
+    :host([variant='success']) {
+      --wcds-badge-bg: var(--wcds-badge-variant-success-bg);
+      --wcds-badge-fg: var(--wcds-badge-variant-success-fg);
+    }
+
+    :host([variant='warning']) {
+      --wcds-badge-bg: var(--wcds-badge-variant-warning-bg);
+      --wcds-badge-fg: var(--wcds-badge-variant-warning-fg);
+    }
+
+    :host([variant='error']) {
+      --wcds-badge-bg: var(--wcds-badge-variant-error-bg);
+      --wcds-badge-fg: var(--wcds-badge-variant-error-fg);
+    }
+
+    .badge {
+      padding: var(--wcds-badge-padding);
+      border-radius: var(--wcds-badge-radius);
+      font-size: var(--wcds-badge-font-size);
+      background: var(--wcds-badge-bg);
+      color: var(--wcds-badge-fg);
+      border: 1px solid color-mix(in srgb, var(--wcds-badge-fg) 25%, transparent);
+      font-weight: 600;
+      line-height: 1;
+      letter-spacing: 0.01em;
+      white-space: nowrap;
+    }
+  `
+];
+_([
+  s({ type: String, reflect: !0 })
+], y.prototype, "variant", 2);
+y = _([
+  h("wcds-badge")
+], y);
+var T = Object.defineProperty, N = Object.getOwnPropertyDescriptor, p = (r, o, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? N(o, a) : o, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (t = (e ? i(o, a, t) : i(t)) || t);
+  return e && t && T(o, a, t), t;
+};
+let u = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "circular", this.size = "md", this.imageError = !1;
+  }
+  handleError() {
+    this.imageError = !0;
+  }
+  get fallbackText() {
+    const r = this.name ?? this.alt;
+    return r && r.trim().split(/\s+/).map((a) => a[0] ?? "").join("").slice(0, 2).toUpperCase() || "?";
+  }
+  render() {
+    const r = !!this.src && !this.imageError, o = this.alt ?? this.name ?? "Avatar";
+    return d`
+      <div class="avatar" aria-label=${o} role="img">
+        ${r ? d`<img src=${this.src} alt=${o} @error=${this.handleError} />` : d`<div class="fallback"><slot>${this.fallbackText}</slot></div>`}
+      </div>
+    `;
+  }
+};
+u.styles = [
+  f,
+  b`
+      :host {
+      --wcds-avatar-size: var(--wcds-avatar-size-md);
+      --wcds-avatar-radius: var(--wcds-avatar-shape-circular);
+      --wcds-avatar-bg: var(--wcds-avatar-bg-default);
+      --wcds-avatar-fg: var(--wcds-avatar-fg-default);
+      --wcds-avatar-font-size: var(--wcds-avatar-font-size-md);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+
+    :host([variant='rounded']) {
+      --wcds-avatar-radius: var(--wcds-avatar-shape-rounded);
+    }
+
+    :host([variant='square']) {
+      --wcds-avatar-radius: var(--wcds-avatar-shape-square);
+    }
+
+    :host([size='sm']) {
+      --wcds-avatar-size: var(--wcds-avatar-size-sm);
+      --wcds-avatar-font-size: var(--wcds-avatar-font-size-sm);
+    }
+
+    :host([size='md']) {
+      --wcds-avatar-size: var(--wcds-avatar-size-md);
+      --wcds-avatar-font-size: var(--wcds-avatar-font-size-md);
+    }
+
+    :host([size='lg']) {
+      --wcds-avatar-size: var(--wcds-avatar-size-lg);
+      --wcds-avatar-font-size: var(--wcds-avatar-font-size-lg);
+    }
+
+    .avatar {
+      width: var(--wcds-avatar-size);
+      height: var(--wcds-avatar-size);
+      border-radius: var(--wcds-avatar-radius);
+      background: var(--wcds-avatar-bg);
+      color: var(--wcds-avatar-fg);
+      font-size: var(--wcds-avatar-font-size);
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      user-select: none;
+    }
+
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: cover;
+      border-radius: inherit;
+    }
+
+    .fallback {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `
+];
+p([
+  s({ type: String })
+], u.prototype, "src", 2);
+p([
+  s({ type: String })
+], u.prototype, "alt", 2);
+p([
+  s({ type: String })
+], u.prototype, "name", 2);
+p([
+  s({ type: String, reflect: !0 })
+], u.prototype, "variant", 2);
+p([
+  s({ type: String, reflect: !0 })
+], u.prototype, "size", 2);
+p([
+  $()
+], u.prototype, "imageError", 2);
+u = p([
+  h("wcds-avatar")
+], u);
+export {
+  F as AVATAR_VARIANT,
+  U as BUTTON_TYPE,
+  H as BUTTON_VARIANT,
+  Y as CARD_VARIANT,
+  q as COLOR_SCHEME,
+  D as ICONS,
+  W as SIZE,
+  u as WCDSAvatar,
+  y as WCDSBadge,
+  c as WCDSButton,
+  z as WCDSCard,
+  m as WCDSIcon,
+  l as WCDSInput,
+  f as baseStyles
+};