@cordwainer/cw-elements 1.3.0-alpha.0 → 1.3.0-alpha.2

package/cdn/chunks/chunk.3IUWADBZ.js

@@ -0,0 +1,216 @@
+import {
+  animation_styles_default
+} from "./chunk.DAHAODPG.js";
+import {
+  dist_exports
+} from "./chunk.6ZOD5D54.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n,
+  r3 as r
+} from "./chunk.ASUHMZ5Z.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/animation/animation.component.ts
+var CwAnimation = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("cw-finish");
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("cw-cancel");
+    };
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    var _a, _b;
+    return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    var _a, _b;
+    const easing = (_a = dist_exports.easings[this.easing]) != null ? _a : this.easing;
+    const keyframes = (_b = this.keyframes) != null ? _b : dist_exports[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.emit("cw-start");
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.emit("cw-start");
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  cancel() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.finish();
+  }
+  render() {
+    return b` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+CwAnimation.styles = [component_styles_default, animation_styles_default];
+__decorateClass([
+  r("slot")
+], CwAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  n()
+], CwAnimation.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwAnimation.prototype, "play", 2);
+__decorateClass([
+  n({ type: Number })
+], CwAnimation.prototype, "delay", 2);
+__decorateClass([
+  n()
+], CwAnimation.prototype, "direction", 2);
+__decorateClass([
+  n({ type: Number })
+], CwAnimation.prototype, "duration", 2);
+__decorateClass([
+  n()
+], CwAnimation.prototype, "easing", 2);
+__decorateClass([
+  n({ attribute: "end-delay", type: Number })
+], CwAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  n()
+], CwAnimation.prototype, "fill", 2);
+__decorateClass([
+  n({ type: Number })
+], CwAnimation.prototype, "iterations", 2);
+__decorateClass([
+  n({ attribute: "iteration-start", type: Number })
+], CwAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  n({ attribute: false })
+], CwAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  n({ attribute: "playback-rate", type: Number })
+], CwAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch([
+    "name",
+    "delay",
+    "direction",
+    "duration",
+    "easing",
+    "endDelay",
+    "fill",
+    "iterations",
+    "iterationsStart",
+    "keyframes"
+  ])
+], CwAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], CwAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], CwAnimation.prototype, "handlePlaybackRateChange", 1);
+
+export {
+  CwAnimation
+};

package/cdn/chunks/chunk.3J7CB5LK.js

@@ -0,0 +1,24 @@
+import {
+  CwTab
+} from "./chunk.FUI6TCOP.js";
+
+// src/react/tab/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-tab";
+CwTab.define("cw-tab");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwTab,
+  react: React,
+  events: {
+    onCwClose: "cw-close"
+  },
+  displayName: "CwTab"
+});
+var tab_default = reactWrapper;
+
+export {
+  tab_default
+};

package/cdn/chunks/chunk.3K3JJKK4.js

@@ -0,0 +1,73 @@
+import {
+  LocalizeController
+} from "./chunk.RJM4Q2BU.js";
+import {
+  CwElement,
+  n
+} from "./chunk.ASUHMZ5Z.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/format-number/format-number.component.ts
+var CwFormatNumber = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.type = "decimal";
+    this.noGrouping = false;
+    this.currency = "USD";
+    this.currencyDisplay = "symbol";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    return this.localize.number(this.value, {
+      style: this.type,
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      useGrouping: !this.noGrouping,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumSignificantDigits: this.minimumSignificantDigits,
+      maximumSignificantDigits: this.maximumSignificantDigits
+    });
+  }
+};
+__decorateClass([
+  n({ type: Number })
+], CwFormatNumber.prototype, "value", 2);
+__decorateClass([
+  n()
+], CwFormatNumber.prototype, "type", 2);
+__decorateClass([
+  n({ attribute: "no-grouping", type: Boolean })
+], CwFormatNumber.prototype, "noGrouping", 2);
+__decorateClass([
+  n()
+], CwFormatNumber.prototype, "currency", 2);
+__decorateClass([
+  n({ attribute: "currency-display" })
+], CwFormatNumber.prototype, "currencyDisplay", 2);
+__decorateClass([
+  n({ attribute: "minimum-integer-digits", type: Number })
+], CwFormatNumber.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-fraction-digits", type: Number })
+], CwFormatNumber.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-fraction-digits", type: Number })
+], CwFormatNumber.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-significant-digits", type: Number })
+], CwFormatNumber.prototype, "minimumSignificantDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-significant-digits", type: Number })
+], CwFormatNumber.prototype, "maximumSignificantDigits", 2);
+
+export {
+  CwFormatNumber
+};

package/cdn/chunks/chunk.3PDPHGHG.js

@@ -0,0 +1,255 @@
+import {
+  switch_styles_default
+} from "./chunk.IO2GKNYB.js";
+import {
+  defaultValue,
+  l
+} from "./chunk.747MVI2Y.js";
+import {
+  form_control_styles_default
+} from "./chunk.DJVND463.js";
+import {
+  FormControlController
+} from "./chunk.FIVNGT4O.js";
+import {
+  o
+} from "./chunk.LRAERZML.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.ASUHMZ5Z.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/switch/switch.component.ts
+var CwSwitch = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text");
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+    this.helpText = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("cw-blur");
+  }
+  handleInput() {
+    this.emit("cw-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.emit("cw-change");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("cw-focus");
+  }
+  handleKeyDown(event) {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.checked = false;
+      this.emit("cw-change");
+      this.emit("cw-input");
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.checked = true;
+      this.emit("cw-change");
+      this.emit("cw-input");
+    }
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(true);
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    return b`
+      <div
+        class=${e({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          part="base"
+          class=${e({
+      switch: true,
+      "switch--checked": this.checked,
+      "switch--disabled": this.disabled,
+      "switch--focused": this.hasFocus,
+      "switch--small": this.size === "small",
+      "switch--medium": this.size === "medium",
+      "switch--large": this.size === "large"
+    })}
+        >
+          <input
+            class="switch__input"
+            type="checkbox"
+            title=${this.title}
+            name=${this.name}
+            value=${o(this.value)}
+            .checked=${l(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            role="switch"
+            aria-checked=${this.checked ? "true" : "false"}
+            aria-describedby="help-text"
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @invalid=${this.handleInvalid}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+            @keydown=${this.handleKeyDown}
+          />
+
+          <span part="control" class="switch__control">
+            <span part="thumb" class="switch__thumb"></span>
+          </span>
+
+          <div part="label" class="switch__label">
+            <slot></slot>
+          </div>
+        </label>
+
+        <div
+          aria-hidden=${hasHelpText ? "false" : "true"}
+          class="form-control__help-text"
+          id="help-text"
+          part="form-control-help-text"
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+CwSwitch.styles = [component_styles_default, form_control_styles_default, switch_styles_default];
+__decorateClass([
+  e2('input[type="checkbox"]')
+], CwSwitch.prototype, "input", 2);
+__decorateClass([
+  r()
+], CwSwitch.prototype, "hasFocus", 2);
+__decorateClass([
+  n()
+], CwSwitch.prototype, "title", 2);
+__decorateClass([
+  n()
+], CwSwitch.prototype, "name", 2);
+__decorateClass([
+  n()
+], CwSwitch.prototype, "value", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwSwitch.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwSwitch.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwSwitch.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], CwSwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwSwitch.prototype, "form", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwSwitch.prototype, "required", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], CwSwitch.prototype, "helpText", 2);
+__decorateClass([
+  watch("checked", { waitUntilFirstUpdate: true })
+], CwSwitch.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CwSwitch.prototype, "handleDisabledChange", 1);
+
+export {
+  CwSwitch
+};

package/cdn/chunks/chunk.3PZEB6JT.js

@@ -0,0 +1,11 @@
+import {
+  CwAvatar
+} from "./chunk.NQ3SOIHB.js";
+
+// src/components/avatar/avatar.ts
+var avatar_default = CwAvatar;
+CwAvatar.define("cw-avatar");
+
+export {
+  avatar_default
+};

package/cdn/chunks/chunk.3TPA7GQN.js

@@ -0,0 +1,24 @@
+import {
+  CwTag
+} from "./chunk.EGCD4LGL.js";
+
+// src/react/tag/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-tag";
+CwTag.define("cw-tag");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwTag,
+  react: React,
+  events: {
+    onCwRemove: "cw-remove"
+  },
+  displayName: "CwTag"
+});
+var tag_default = reactWrapper;
+
+export {
+  tag_default
+};

package/cdn/chunks/chunk.3WY5UV4F.js

@@ -0,0 +1,68 @@
+import {
+  i
+} from "./chunk.6A2LG33L.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.styles.ts
+var primary_navigation_item_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  .primary-navigation-item {
+    display: block;
+  }
+
+  .primary-navigation-item__link,
+  .primary-navigation-item__trigger,
+  .primary-navigation-item__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cw-spacing-small);
+    font-family: var(--cw-font-sans);
+    font-size: var(--cw-font-size-medium);
+    font-weight: var(--cw-font-weight-semibold);
+    line-height: var(--cw-line-height-normal);
+    color: var(--cw-color-neutral-700);
+    text-decoration: none;
+    white-space: nowrap;
+    background: none;
+    border: none;
+    border-radius: var(--cw-border-radius-medium);
+    padding: var(--cw-spacing-small) var(--cw-spacing-x-small);
+    cursor: pointer;
+    transition: var(--cw-transition-fast) color;
+  }
+
+  .primary-navigation-item__link:hover,
+  .primary-navigation-item__trigger:hover {
+    color: var(--cw-color-primary-600);
+  }
+
+  .primary-navigation-item__link:focus,
+  .primary-navigation-item__trigger:focus {
+    outline: none;
+  }
+
+  .primary-navigation-item__link:focus-visible,
+  .primary-navigation-item__trigger:focus-visible {
+    outline: var(--cw-focus-ring);
+    outline-offset: var(--cw-focus-ring-offset);
+  }
+
+  :host([current]) .primary-navigation-item__link {
+    color: var(--cw-color-primary-700);
+  }
+
+  .primary-navigation-item__trigger cw-icon {
+    font-size: 0.75rem;
+    transition: var(--cw-transition-fast) rotate;
+  }
+
+  cw-dropdown[open] .primary-navigation-item__trigger cw-icon {
+    rotate: 180deg;
+  }
+`;
+
+export {
+  primary_navigation_item_styles_default
+};

package/cdn/chunks/chunk.45KMUOKV.js

@@ -0,0 +1,11 @@
+import {
+  CwButton
+} from "./chunk.32ZRRHBU.js";
+
+// src/components/button/button.ts
+var button_default = CwButton;
+CwButton.define("cw-button");
+
+export {
+  button_default
+};

package/cdn/chunks/chunk.4G6AE6LA.js

@@ -0,0 +1,24 @@
+import {
+  CwMenu
+} from "./chunk.YSYZNFML.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-menu";
+CwMenu.define("cw-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwMenu,
+  react: React,
+  events: {
+    onCwSelect: "cw-select"
+  },
+  displayName: "CwMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};