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

package/README.md

@@ -4,7 +4,7 @@ A forward-thinking library of web components.
 
 > 🆕 **New since the 1.0 fork:** [`<cw-combobox>`](https://cordwainer.dev/components/combobox) · [`<cw-date-picker>`](https://cordwainer.dev/components/date-picker) · [`<cw-time-picker>`](https://cordwainer.dev/components/time-picker) · [`<cw-pagination>`](https://cordwainer.dev/components/pagination) · [`<cw-data-table>`](https://cordwainer.dev/components/data-table) · [`<cw-header>`](https://cordwainer.dev/components/header) · [`<cw-logo>`](https://cordwainer.dev/components/logo) · [`<cw-primary-navigation>`](https://cordwainer.dev/components/primary-navigation) · [`<cw-secondary-navigation>`](https://cordwainer.dev/components/secondary-navigation) · [`<cw-footer>`](https://cordwainer.dev/components/footer) · [`<cw-social-link>`](https://cordwainer.dev/components/social-link)
 >
-> 🥾 **Coming from Shoelace?** [`@cordwainer/cw-migrate`](https://gitlab.com/cordwainer/cw-migrate) is a CLI that automatically converts a Shoelace project to Cordwainer Elements. It's feature-complete and entering real-world testing ahead of its `1.0.0-alpha` release — see the [migration guide](https://cordwainer.dev/tooling/cw-migrate).
+> 🥾 **Coming from Shoelace?** [`@cordwainer/cw-migrate`](https://gitlab.com/cordwainer/cw-migrate) is a CLI that automatically converts a Shoelace project to Cordwainer Elements. `1.0.0`, stable, and real-world tested against a production Shoelace + Lit codebase ([sample migration PR](https://github.com/matthandus/chromium-dashboard-migrate-shoelace-to-cordwainer/pull/1)) — see the [migration guide](https://cordwainer.dev/tooling/cw-migrate).
 
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
@@ -72,5 +72,3 @@ Cordwainer Elements is an open source project and contributions are encouraged!
 Cordwainer Elements is developed by Matt Hand. It’s available under the terms of the MIT license.
 
 Whether you're building Cordwainer Elements or building something _with_ Cordwainer Elements — have fun creating! 🥾
-
-**Keywords:** Shoelace alternative, Shoelace fork, Shoelace replacement, migrate from Shoelace, Shoelace migration tool, Shoelace web components alternative

package/cdn/chunks/chunk.27UY4KUS.js

@@ -0,0 +1,11 @@
+import {
+  CwCheckbox
+} from "./chunk.RZG35UPT.js";
+
+// src/components/checkbox/checkbox.ts
+var checkbox_default = CwCheckbox;
+CwCheckbox.define("cw-checkbox");
+
+export {
+  checkbox_default
+};

package/cdn/chunks/chunk.2G4LVBCB.js

@@ -0,0 +1,236 @@
+import {
+  details_styles_default
+} from "./chunk.DT2PUVBX.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.JSLXCIMZ.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.3CTNMS55.js";
+import {
+  LocalizeController
+} from "./chunk.4HKHDE3H.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.BNMY7WDB.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n
+} from "./chunk.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/details/details.component.ts
+var CwDetails = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.details.open = true;
+    }
+    this.detailsObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.details.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.detailsObserver.observe(this.details, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.detailsObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleSummaryClick(event) {
+    event.preventDefault();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.details.open = true;
+      const cwShow = this.emit("cw-show", { cancelable: true });
+      if (cwShow.defaultPrevented) {
+        this.open = false;
+        this.details.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("cw-after-show");
+    } else {
+      const cwHide = this.emit("cw-hide", { cancelable: true });
+      if (cwHide.defaultPrevented) {
+        this.details.open = true;
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.details.open = false;
+      this.emit("cw-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "cw-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "cw-after-hide");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return b`
+      <details
+        part="base"
+        class=${e({
+      details: true,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": isRtl
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <cw-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></cw-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <cw-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></cw-icon>
+            </slot>
+          </span>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+CwDetails.styles = [component_styles_default, details_styles_default];
+CwDetails.dependencies = {
+  "cw-icon": CwIcon
+};
+__decorateClass([
+  e2(".details")
+], CwDetails.prototype, "details", 2);
+__decorateClass([
+  e2(".details__header")
+], CwDetails.prototype, "header", 2);
+__decorateClass([
+  e2(".details__body")
+], CwDetails.prototype, "body", 2);
+__decorateClass([
+  e2(".details__expand-icon-slot")
+], CwDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwDetails.prototype, "open", 2);
+__decorateClass([
+  n()
+], CwDetails.prototype, "summary", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwDetails.prototype, "disabled", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], CwDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  CwDetails
+};

package/cdn/chunks/chunk.2ITZLKOX.js

@@ -0,0 +1,77 @@
+import {
+  include_styles_default
+} from "./chunk.4D2OGC2H.js";
+import {
+  requestInclude
+} from "./chunk.XNEONNEJ.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/include/include.component.ts
+var CwInclude = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("cw-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach((script) => this.executeScript(script));
+      }
+      this.emit("cw-load");
+    } catch (e) {
+      this.emit("cw-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return b`<slot></slot>`;
+  }
+};
+CwInclude.styles = [component_styles_default, include_styles_default];
+__decorateClass([
+  n()
+], CwInclude.prototype, "src", 2);
+__decorateClass([
+  n()
+], CwInclude.prototype, "mode", 2);
+__decorateClass([
+  n({ attribute: "allow-scripts", type: Boolean })
+], CwInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], CwInclude.prototype, "handleSrcChange", 1);
+
+export {
+  CwInclude
+};

package/cdn/chunks/chunk.2P33HCGB.js

@@ -0,0 +1,127 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.C2IWTXCI.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.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+var CwBreadcrumbItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.renderType = "button";
+    this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const hasDropdown = this.defaultSlot.assignedElements({ flatten: true }).filter((i) => i.tagName.toLowerCase() === "cw-dropdown").length > 0;
+    if (this.href) {
+      this.renderType = "link";
+      return;
+    }
+    if (hasDropdown) {
+      this.renderType = "dropdown";
+      return;
+    }
+    this.renderType = "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? b`
+                <a
+                  part="label"
+                  class="breadcrumb-item__label breadcrumb-item__label--link"
+                  href="${this.href}"
+                  target="${o(this.target ? this.target : void 0)}"
+                  rel=${o(this.target ? this.rel : void 0)}
+                >
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </a>
+              ` : ""}
+        ${this.renderType === "button" ? b`
+                <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </button>
+              ` : ""}
+        ${this.renderType === "dropdown" ? b`
+                <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </div>
+              ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+CwBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default];
+__decorateClass([
+  e2("slot:not([name])")
+], CwBreadcrumbItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], CwBreadcrumbItem.prototype, "renderType", 2);
+__decorateClass([
+  n()
+], CwBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], CwBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], CwBreadcrumbItem.prototype, "rel", 2);
+__decorateClass([
+  watch("href", { waitUntilFirstUpdate: true })
+], CwBreadcrumbItem.prototype, "hrefChanged", 1);
+
+export {
+  CwBreadcrumbItem
+};

package/cdn/chunks/chunk.2RO5K2XF.js

@@ -0,0 +1,27 @@
+import {
+  carousel_item_styles_default
+} from "./chunk.B2OVHSTD.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement
+} from "./chunk.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+
+// src/components/carousel-item/carousel-item.component.ts
+var CwCarouselItem = class extends CwElement {
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return b` <slot></slot> `;
+  }
+};
+CwCarouselItem.styles = [component_styles_default, carousel_item_styles_default];
+
+export {
+  CwCarouselItem
+};

package/cdn/chunks/chunk.2SV5FYYM.js

@@ -0,0 +1,11 @@
+import {
+  CwMutationObserver
+} from "./chunk.FXJULIU5.js";
+
+// src/components/mutation-observer/mutation-observer.ts
+var mutation_observer_default = CwMutationObserver;
+CwMutationObserver.define("cw-mutation-observer");
+
+export {
+  mutation_observer_default
+};

package/cdn/chunks/chunk.2TG3D325.js

@@ -0,0 +1,11 @@
+import {
+  CwButtonGroup
+} from "./chunk.U4ZHL7VU.js";
+
+// src/components/button-group/button-group.ts
+var button_group_default = CwButtonGroup;
+CwButtonGroup.define("cw-button-group");
+
+export {
+  button_group_default
+};

package/cdn/chunks/chunk.2VDZHJYP.js

@@ -0,0 +1,33 @@
+import {
+  CwSelect
+} from "./chunk.UTVIAM62.js";
+
+// src/react/select/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-select";
+CwSelect.define("cw-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwSelect,
+  react: React,
+  events: {
+    onCwChange: "cw-change",
+    onCwClear: "cw-clear",
+    onCwInput: "cw-input",
+    onCwFocus: "cw-focus",
+    onCwBlur: "cw-blur",
+    onCwShow: "cw-show",
+    onCwAfterShow: "cw-after-show",
+    onCwHide: "cw-hide",
+    onCwAfterHide: "cw-after-hide",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};

package/cdn/chunks/chunk.2W26L43F.js

@@ -0,0 +1,11 @@
+import {
+  CwProgressBar
+} from "./chunk.MXICKTJN.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = CwProgressBar;
+CwProgressBar.define("cw-progress-bar");
+
+export {
+  progress_bar_default
+};

package/cdn/chunks/chunk.32TXK7LZ.js

@@ -0,0 +1,11 @@
+import {
+  CwSocialLink
+} from "./chunk.KM4PUUJR.js";
+
+// src/components/social-link/social-link.ts
+var social_link_default = CwSocialLink;
+CwSocialLink.define("cw-social-link");
+
+export {
+  social_link_default
+};

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

@@ -0,0 +1,21 @@
+import {
+  CwLogo
+} from "./chunk.5FO33VXB.js";
+
+// src/react/logo/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-logo";
+CwLogo.define("cw-logo");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwLogo,
+  react: React,
+  events: {},
+  displayName: "CwLogo"
+});
+var logo_default = reactWrapper;
+
+export {
+  logo_default
+};

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

@@ -0,0 +1,21 @@
+import {
+  CwSpinner
+} from "./chunk.UYE3L3WD.js";
+
+// src/react/spinner/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-spinner";
+CwSpinner.define("cw-spinner");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwSpinner,
+  react: React,
+  events: {},
+  displayName: "CwSpinner"
+});
+var spinner_default = reactWrapper;
+
+export {
+  spinner_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  CwResizeObserver
+} from "./chunk.BT3BUDHN.js";
+
+// src/components/resize-observer/resize-observer.ts
+var resize_observer_default = CwResizeObserver;
+CwResizeObserver.define("cw-resize-observer");
+
+export {
+  resize_observer_default
+};