@webmcpui/core 0.2.0 → 0.3.0

package/dist/index.js

@@ -2096,6 +2096,8 @@ var WmcpPopover = class extends WmcpAction {
     this.trigger = "click";
   }
   static {
+    // Typed `string` (not the narrow literal) so subclasses like <wmcp-tooltip>
+    // can override it.
     this.tagName = "wmcp-popover";
   }
   static {
@@ -2556,6 +2558,511 @@ __decorateClass([
   state6()
 ], WmcpToast.prototype, "toasts", 2);
 
+// src/elements/switch.ts
+import {
+  html as html13,
+  css as css13,
+  nothing as nothing12
+} from "lit";
+import { property as property15 } from "lit/decorators.js";
+var WmcpSwitch = class extends WmcpFormControl {
+  constructor() {
+    super();
+    this.checked = false;
+    this.defaultChecked = false;
+    this.value = "on";
+  }
+  static {
+    this.tagName = "wmcp-switch";
+  }
+  static {
+    this.styles = [
+      WmcpFormControl.styles,
+      css13`
+      .row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--input-gap-icon, 0.5rem);
+        cursor: pointer;
+        font-weight: 400;
+      }
+      .row:has(.control:disabled) {
+        cursor: not-allowed;
+        color: var(--input-text-disabled, var(--muted-foreground, oklch(0.556 0 0)));
+      }
+      .control {
+        appearance: none;
+        box-sizing: border-box;
+        position: relative;
+        flex-shrink: 0;
+        width: var(--switch-width, 2.25rem);
+        height: var(--switch-height, 1.35rem);
+        margin: 0;
+        padding: 0;
+        border-radius: 999px;
+        background: var(--switch-track, var(--input, oklch(0.922 0 0)));
+        cursor: inherit;
+        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .control::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: var(--switch-gap, 0.15rem);
+        width: var(--switch-thumb, 1.05rem);
+        height: var(--switch-thumb, 1.05rem);
+        border-radius: 50%;
+        background: var(--switch-thumb-color, var(--background, oklch(1 0 0)));
+        translate: 0 -50%;
+        transition: translate 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 1px 2px color-mix(in oklch, oklch(0 0 0) 25%, transparent);
+      }
+      .control:checked {
+        background: var(--switch-track-on, var(--primary, oklch(0.205 0 0)));
+      }
+      .control:checked::before {
+        translate: calc(var(--switch-width, 2.25rem) - var(--switch-thumb, 1.05rem) - var(--switch-gap, 0.15rem) * 2) -50%;
+      }
+      .control:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 var(--ring-width, 3px)
+          color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+      }
+      .control:disabled {
+        opacity: 0.5;
+      }
+      .label-text {
+        font-size: var(--input-font-size, 0.875rem);
+        color: var(--input-text, var(--foreground, oklch(0.145 0 0)));
+      }
+    `
+    ];
+  }
+  get controlNoun() {
+    return "switch";
+  }
+  connectedCallback() {
+    this.defaultChecked = this.checked;
+    super.connectedCallback();
+  }
+  getFormValue() {
+    return this.checked ? this.value : null;
+  }
+  get validationValue() {
+    return this.checked;
+  }
+  get isEmpty() {
+    return !this.checked;
+  }
+  get requiredMessageDefault() {
+    return "Please turn this on.";
+  }
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        checked: {
+          type: "boolean",
+          description: this.label || this.name || "Whether the switch is on."
+        }
+      },
+      required: ["checked"]
+    };
+  }
+  async applyAgentValue(args) {
+    this.checked = Boolean(args.checked);
+    await this.validate();
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  stateDescription() {
+    return this.checked ? "on" : "off";
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+    this.error = "";
+    this.toggleAttribute("invalid", false);
+    void this.validate(false);
+  }
+  async onToggle(event) {
+    this.checked = event.target.checked;
+    await this.validate();
+  }
+  renderControl() {
+    return html13`
+      <input
+        id="control"
+        class="control"
+        part="control"
+        type="checkbox"
+        role="switch"
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${this.describedBy ?? nothing12}
+        @change=${this.onToggle}
+      />
+    `;
+  }
+  render() {
+    return html13`
+      <label class="row">
+        ${this.renderControl()}
+        ${this.label ? html13`<span class="label-text">${this.label}</span>` : nothing12}
+      </label>
+      ${this.renderMessage()}
+    `;
+  }
+};
+__decorateClass([
+  property15({ type: Boolean, reflect: true })
+], WmcpSwitch.prototype, "checked", 2);
+
+// src/elements/badge.ts
+import { LitElement as LitElement3, html as html14, css as css14 } from "lit";
+import { property as property16 } from "lit/decorators.js";
+var WmcpBadge = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+  }
+  static {
+    this.tagName = "wmcp-badge";
+  }
+  static {
+    this.styles = css14`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--badge-gap, 0.25rem);
+      padding: var(--badge-padding, 0.125rem 0.5rem);
+      font-family: var(--badge-font-family, ui-sans-serif, system-ui, sans-serif);
+      font-size: var(--badge-font-size, 0.75rem);
+      font-weight: var(--badge-font-weight, 500);
+      line-height: 1.2;
+      border: 1px solid transparent;
+      border-radius: var(--badge-radius, 999px);
+      white-space: nowrap;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    :host {
+      color: var(--badge-primary-text, var(--primary-foreground, oklch(0.985 0 0)));
+      background: var(--badge-primary-bg, var(--primary, oklch(0.205 0 0)));
+    }
+    :host([variant='secondary']) {
+      color: var(--badge-secondary-text, var(--secondary-foreground, oklch(0.205 0 0)));
+      background: var(--badge-secondary-bg, var(--secondary, oklch(0.97 0 0)));
+    }
+    :host([variant='destructive']) {
+      color: var(--badge-destructive-text, var(--destructive-foreground, oklch(0.985 0 0)));
+      background: var(--badge-destructive-bg, var(--destructive, oklch(0.577 0.245 27.325)));
+    }
+    :host([variant='outline']) {
+      color: var(--badge-outline-text, var(--foreground, oklch(0.145 0 0)));
+      border-color: var(--badge-outline-border, var(--border, oklch(0.922 0 0)));
+    }
+  `;
+  }
+  render() {
+    return html14`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property16({ reflect: true })
+], WmcpBadge.prototype, "variant", 2);
+
+// src/elements/separator.ts
+import { LitElement as LitElement4, css as css15 } from "lit";
+import { property as property17 } from "lit/decorators.js";
+var WmcpSeparator = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+  }
+  static {
+    this.tagName = "wmcp-separator";
+  }
+  static {
+    this.styles = css15`
+    :host {
+      display: block;
+      background: var(--separator-color, var(--border, oklch(0.922 0 0)));
+      border: 0;
+      flex-shrink: 0;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    :host([orientation='horizontal']) {
+      width: 100%;
+      height: var(--separator-size, 1px);
+    }
+    :host([orientation='vertical']) {
+      width: var(--separator-size, 1px);
+      height: 100%;
+      align-self: stretch;
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+    if (this.orientation === "vertical") {
+      this.setAttribute("aria-orientation", "vertical");
+    }
+  }
+};
+__decorateClass([
+  property17({ reflect: true })
+], WmcpSeparator.prototype, "orientation", 2);
+
+// src/elements/tooltip.ts
+var WmcpTooltip = class extends WmcpPopover {
+  static {
+    this.tagName = "wmcp-tooltip";
+  }
+  constructor() {
+    super();
+    this.trigger = "hover";
+  }
+  get defaultNameSuffix() {
+    return "tooltip";
+  }
+};
+
+// src/elements/alert.ts
+import {
+  LitElement as LitElement5,
+  html as html15,
+  css as css16,
+  nothing as nothing13
+} from "lit";
+import { property as property18 } from "lit/decorators.js";
+var WmcpAlert = class extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.variant = "info";
+    this.title = "";
+  }
+  static {
+    this.tagName = "wmcp-alert";
+  }
+  static {
+    this.styles = css16`
+    :host {
+      display: block;
+      padding: var(--alert-padding, 0.75rem 1rem);
+      color: var(--alert-text, var(--foreground, oklch(0.145 0 0)));
+      background: var(--alert-bg, var(--background, oklch(1 0 0)));
+      border: 1px solid var(--alert-border, var(--border, oklch(0.922 0 0)));
+      border-left: 3px solid var(--alert-accent, var(--border, oklch(0.922 0 0)));
+      border-radius: var(--alert-radius, var(--radius, 0.625rem));
+      font-family: var(--alert-font-family, ui-sans-serif, system-ui, sans-serif);
+      font-size: var(--alert-font-size, 0.875rem);
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    :host([variant='success']) {
+      --alert-accent: var(--alert-accent-success, oklch(0.627 0.13 160));
+    }
+    :host([variant='warning']) {
+      --alert-accent: var(--alert-accent-warning, oklch(0.7 0.16 75));
+    }
+    :host([variant='error']) {
+      --alert-accent: var(--alert-accent-error, var(--destructive, oklch(0.577 0.245 27.325)));
+    }
+    :host([variant='info']) {
+      --alert-accent: var(--alert-accent-info, var(--primary, oklch(0.205 0 0)));
+    }
+    .title {
+      font-weight: 600;
+      margin-bottom: 0.125rem;
+    }
+    .message {
+      color: var(--alert-message, var(--muted-foreground, oklch(0.556 0 0)));
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute(
+      "role",
+      this.variant === "error" || this.variant === "warning" ? "alert" : "status"
+    );
+  }
+  render() {
+    return html15`
+      ${this.title ? html15`<div class="title">${this.title}</div>` : nothing13}
+      <div class="message"><slot></slot></div>
+    `;
+  }
+};
+__decorateClass([
+  property18({ reflect: true })
+], WmcpAlert.prototype, "variant", 2);
+__decorateClass([
+  property18()
+], WmcpAlert.prototype, "title", 2);
+
+// src/elements/progress.ts
+import {
+  LitElement as LitElement6,
+  html as html16,
+  css as css17
+} from "lit";
+import { property as property19 } from "lit/decorators.js";
+var WmcpProgress = class extends LitElement6 {
+  constructor() {
+    super(...arguments);
+    this.max = 100;
+    this.indeterminate = false;
+  }
+  static {
+    this.tagName = "wmcp-progress";
+  }
+  static {
+    this.styles = css17`
+    :host {
+      display: block;
+      width: 100%;
+      height: var(--progress-height, 0.5rem);
+      overflow: hidden;
+      background: var(--progress-track, var(--secondary, oklch(0.97 0 0)));
+      border-radius: var(--progress-radius, 999px);
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .bar {
+      height: 100%;
+      background: var(--progress-bar, var(--primary, oklch(0.205 0 0)));
+      border-radius: inherit;
+      transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .bar.indeterminate {
+      width: 40% !important;
+      animation: progress-slide 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    @keyframes progress-slide {
+      from {
+        translate: -100%;
+      }
+      to {
+        translate: 350%;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .bar.indeterminate {
+        animation: none;
+        width: 100% !important;
+        opacity: 0.5;
+      }
+    }
+  `;
+  }
+  get isIndeterminate() {
+    return this.indeterminate || this.value == null;
+  }
+  updated() {
+    this.setAttribute("role", "progressbar");
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("aria-valuemax", String(this.max));
+    if (this.isIndeterminate) this.removeAttribute("aria-valuenow");
+    else this.setAttribute("aria-valuenow", String(this.value));
+  }
+  render() {
+    const pct = this.isIndeterminate ? 0 : Math.max(0, Math.min(100, (this.value ?? 0) / this.max * 100));
+    return html16`<div
+      class="bar ${this.isIndeterminate ? "indeterminate" : ""}"
+      style=${this.isIndeterminate ? "" : `width: ${pct}%`}
+    ></div>`;
+  }
+};
+__decorateClass([
+  property19({ type: Number })
+], WmcpProgress.prototype, "value", 2);
+__decorateClass([
+  property19({ type: Number })
+], WmcpProgress.prototype, "max", 2);
+__decorateClass([
+  property19({ type: Boolean })
+], WmcpProgress.prototype, "indeterminate", 2);
+
+// src/elements/avatar.ts
+import {
+  LitElement as LitElement7,
+  html as html17,
+  css as css18,
+  nothing as nothing14
+} from "lit";
+import { property as property20, state as state7 } from "lit/decorators.js";
+var WmcpAvatar = class extends LitElement7 {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.alt = "";
+    this.fallback = "";
+    this.failed = false;
+  }
+  static {
+    this.tagName = "wmcp-avatar";
+  }
+  static {
+    this.styles = css18`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--avatar-size, 2.5rem);
+      height: var(--avatar-size, 2.5rem);
+      overflow: hidden;
+      border-radius: var(--avatar-radius, 50%);
+      background: var(--avatar-bg, var(--muted, oklch(0.97 0 0)));
+      color: var(--avatar-text, var(--muted-foreground, oklch(0.556 0 0)));
+      font-family: var(--avatar-font-family, ui-sans-serif, system-ui, sans-serif);
+      font-size: var(--avatar-font-size, 0.875rem);
+      font-weight: var(--avatar-font-weight, 500);
+      user-select: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  `;
+  }
+  willUpdate(changed) {
+    if (changed.has("src")) this.failed = false;
+  }
+  render() {
+    const showImg = this.src && !this.failed;
+    return showImg ? html17`<img
+          src=${this.src}
+          alt=${this.alt || nothing14}
+          @error=${() => this.failed = true}
+        />` : html17`<span aria-label=${this.alt || nothing14}>${this.fallback}</span>`;
+  }
+};
+__decorateClass([
+  property20()
+], WmcpAvatar.prototype, "src", 2);
+__decorateClass([
+  property20()
+], WmcpAvatar.prototype, "alt", 2);
+__decorateClass([
+  property20()
+], WmcpAvatar.prototype, "fallback", 2);
+__decorateClass([
+  state7()
+], WmcpAvatar.prototype, "failed", 2);
+
 // src/register.ts
 var elements = [
   WmcpInput,
@@ -2569,7 +3076,14 @@ var elements = [
   WmcpMenu,
   WmcpTabs,
   WmcpPopover,
-  WmcpToast
+  WmcpToast,
+  WmcpSwitch,
+  WmcpBadge,
+  WmcpSeparator,
+  WmcpTooltip,
+  WmcpAlert,
+  WmcpProgress,
+  WmcpAvatar
 ];
 function defineComponents() {
   if (typeof customElements === "undefined") return;
@@ -2581,6 +3095,9 @@ function defineComponents() {
 }
 export {
   WmcpAction,
+  WmcpAlert,
+  WmcpAvatar,
+  WmcpBadge,
   WmcpButton,
   WmcpCheckbox,
   WmcpDialog,
@@ -2589,12 +3106,16 @@ export {
   WmcpInput,
   WmcpMenu,
   WmcpPopover,
+  WmcpProgress,
   WmcpRadio,
   WmcpRadioGroup,
   WmcpSelect,
+  WmcpSeparator,
+  WmcpSwitch,
   WmcpTabs,
   WmcpTextarea,
   WmcpToast,
+  WmcpTooltip,
   defineComponents,
   exposeTool,
   isStandardSchema,