@cordwainer/cw-elements 1.3.0-alpha.3 → 1.3.0-beta.0

package/dist/chunks/chunk.HBLSLABK.js

@@ -0,0 +1,111 @@
+import {
+  mutation_observer_styles_default
+} from "./chunk.2W6X55FG.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/mutation-observer/mutation-observer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CwMutationObserver = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.attrOldValue = false;
+    this.charData = false;
+    this.charDataOldValue = false;
+    this.childList = false;
+    this.disabled = false;
+    this.handleMutation = (mutationList) => {
+      this.emit("cw-mutation", {
+        detail: { mutationList }
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver = new MutationObserver(this.handleMutation);
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  startObserver() {
+    const observeAttributes = typeof this.attr === "string" && this.attr.length > 0;
+    const attributeFilter = observeAttributes && this.attr !== "*" ? this.attr.split(" ") : void 0;
+    try {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        childList: this.childList,
+        attributes: observeAttributes,
+        attributeFilter,
+        attributeOldValue: this.attrOldValue,
+        characterData: this.charData,
+        characterDataOldValue: this.charDataOldValue
+      });
+    } catch (e) {
+    }
+  }
+  stopObserver() {
+    this.mutationObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  handleChange() {
+    this.stopObserver();
+    this.startObserver();
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+CwMutationObserver.styles = [component_styles_default, mutation_observer_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], CwMutationObserver.prototype, "attr", 2);
+__decorateClass([
+  property({ attribute: "attr-old-value", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "attrOldValue", 2);
+__decorateClass([
+  property({ attribute: "char-data", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "charData", 2);
+__decorateClass([
+  property({ attribute: "char-data-old-value", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "charDataOldValue", 2);
+__decorateClass([
+  property({ attribute: "child-list", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "childList", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], CwMutationObserver.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("attr", { waitUntilFirstUpdate: true }),
+  watch("attr-old-value", { waitUntilFirstUpdate: true }),
+  watch("char-data", { waitUntilFirstUpdate: true }),
+  watch("char-data-old-value", { waitUntilFirstUpdate: true }),
+  watch("childList", { waitUntilFirstUpdate: true })
+], CwMutationObserver.prototype, "handleChange", 1);
+
+export {
+  CwMutationObserver
+};

package/dist/chunks/chunk.HD6KWYDQ.js

@@ -0,0 +1,24 @@
+import {
+  CwCarousel
+} from "./chunk.V56YMHPQ.js";
+
+// src/react/carousel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-carousel";
+CwCarousel.define("cw-carousel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwCarousel,
+  react: React,
+  events: {
+    onCwSlideChange: "cw-slide-change"
+  },
+  displayName: "CwCarousel"
+});
+var carousel_default = reactWrapper;
+
+export {
+  carousel_default
+};

package/dist/chunks/chunk.HLUAFHUJ.js

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

package/dist/chunks/chunk.HOKHQD4A.js

@@ -0,0 +1,95 @@
+// src/components/primary-navigation-item/primary-navigation-item.styles.ts
+import { css } from "lit";
+var primary_navigation_item_styles_default = css`
+  :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;
+  }
+
+  /*
+   * Below the parent navigation's mobile breakpoint, a dropdown menu expands inline instead of floating —
+   * full width, in normal document flow, so there's nothing for an ancestor's overflow:hidden (used for the
+   * mobile menu's own open/close slide animation) to clip.
+   */
+  :host([mobile]) .primary-navigation-item__trigger {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    border-bottom: solid 2px transparent;
+    border-radius: 0;
+  }
+
+  /* The same line-underneath treatment cw-header's action triggers use for their active indicator. */
+  :host([mobile]) .primary-navigation-item--open .primary-navigation-item__trigger {
+    border-bottom-color: var(--cw-color-primary-600);
+  }
+
+  :host([mobile]) .primary-navigation-item--open .primary-navigation-item__trigger cw-icon {
+    rotate: 180deg;
+  }
+
+  .primary-navigation-item__panel {
+    overflow: hidden;
+  }
+
+  .primary-navigation-item__panel[hidden] {
+    display: none;
+  }
+`;
+
+export {
+  primary_navigation_item_styles_default
+};

package/dist/chunks/chunk.I2NBHC2D.js

@@ -0,0 +1,87 @@
+import {
+  social_link_styles_default
+} from "./chunk.5K4OADKV.js";
+import {
+  CwIconButton
+} from "./chunk.4LYTQNWC.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/social-link/social-link.component.ts
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+var PLATFORMS = {
+  bluesky: { icon: "bluesky", label: "Bluesky" },
+  discord: { icon: "discord", label: "Discord" },
+  facebook: { icon: "facebook", label: "Facebook" },
+  github: { icon: "github", label: "GitHub" },
+  instagram: { icon: "instagram", label: "Instagram" },
+  linkedin: { icon: "linkedin", label: "LinkedIn" },
+  mastodon: { icon: "mastodon", label: "Mastodon" },
+  threads: { icon: "threads", label: "Threads" },
+  tiktok: { icon: "tiktok", label: "TikTok" },
+  twitter: { icon: "twitter-x", label: "X (Twitter)" },
+  youtube: { icon: "youtube", label: "YouTube" }
+};
+var CwSocialLink = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.target = "_blank";
+    this.rel = "noreferrer noopener";
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const platformInfo = this.platform ? PLATFORMS[this.platform] : void 0;
+    const resolvedName = (_a = this.name) != null ? _a : platformInfo == null ? void 0 : platformInfo.icon;
+    const resolvedLibrary = (_b = this.library) != null ? _b : platformInfo ? "system" : void 0;
+    const resolvedLabel = (_d = (_c = this.label) != null ? _c : platformInfo == null ? void 0 : platformInfo.label) != null ? _d : "";
+    return html`
+      <cw-icon-button
+        part="base"
+        exportparts="base:base__icon-button"
+        href=${this.href}
+        target=${this.target}
+        rel=${this.rel}
+        name=${ifDefined(resolvedName)}
+        library=${ifDefined(resolvedLibrary)}
+        label=${resolvedLabel}
+      ></cw-icon-button>
+    `;
+  }
+};
+CwSocialLink.styles = [component_styles_default, social_link_styles_default];
+CwSocialLink.dependencies = { "cw-icon-button": CwIconButton };
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "href", 2);
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "target", 2);
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "rel", 2);
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "platform", 2);
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "name", 2);
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "library", 2);
+__decorateClass([
+  property()
+], CwSocialLink.prototype, "label", 2);
+
+export {
+  CwSocialLink
+};

package/dist/chunks/chunk.I2OV67N4.js

@@ -0,0 +1,276 @@
+import {
+  primary_navigation_item_styles_default
+} from "./chunk.HOKHQD4A.js";
+import {
+  CwDropdown
+} from "./chunk.DCKLM62N.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.TJQYJP53.js";
+import {
+  LocalizeController
+} from "./chunk.OFFCHZOX.js";
+import {
+  CwIcon
+} from "./chunk.4QFXWB46.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var id = 0;
+var CwPrimaryNavigationItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.componentId = `cw-primary-navigation-item-${++id}`;
+    this.localize = new LocalizeController(this);
+    this.hasMenu = false;
+    this.open = false;
+    this.rel = "noreferrer noopener";
+    this.current = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.panel && this.panel !== this.lastPanel) {
+      this.panel.hidden = !this.open;
+    }
+    this.lastPanel = this.panel;
+  }
+  // Queried by light-DOM `slot` attribute rather than the currently-rendered `<slot name="menu">` node's
+  // `assignedElements()` — which branch (and therefore which slot node) is active can change independently of
+  // this, so re-deriving from the host's actual children stays correct across a mobile/desktop switch.
+  syncMenuMobileState() {
+    [...this.children].forEach((el) => {
+      if (el.slot === "menu" && el.tagName.toLowerCase() === "cw-primary-navigation-menu") {
+        el.mobile = this.mobile;
+      }
+    });
+  }
+  handleMenuSlotChange() {
+    var _a;
+    this.hasMenu = Boolean((_a = this.menuSlot) == null ? void 0 : _a.assignedElements({ flatten: true }).length);
+    this.syncMenuMobileState();
+  }
+  handleDropdownShow() {
+    this.open = true;
+  }
+  handleDropdownHide() {
+    this.open = false;
+  }
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  handleMobileChange() {
+    var _a;
+    (_a = this.dropdown) == null ? void 0 : _a.hide();
+    this.open = false;
+    this.syncMenuMobileState();
+  }
+  async showInlineMenu() {
+    if (this.open) {
+      return void 0;
+    }
+    const cwShow = this.emit("cw-show", { cancelable: true });
+    if (cwShow.defaultPrevented) {
+      return void 0;
+    }
+    this.open = true;
+    await stopAnimations(this.panel);
+    this.panel.hidden = false;
+    const { keyframes, options } = getAnimation(this, "primary-navigation-item.show", { dir: this.localize.dir() });
+    await animateTo(this.panel, shimKeyframesHeightAuto(keyframes, this.panel.scrollHeight), options);
+    this.emit("cw-after-show");
+    return void 0;
+  }
+  async hideInlineMenu() {
+    if (!this.open) {
+      return void 0;
+    }
+    const cwHide = this.emit("cw-hide", { cancelable: true });
+    if (cwHide.defaultPrevented) {
+      return void 0;
+    }
+    await stopAnimations(this.panel);
+    const { keyframes, options } = getAnimation(this, "primary-navigation-item.hide", { dir: this.localize.dir() });
+    await animateTo(this.panel, shimKeyframesHeightAuto(keyframes, this.panel.scrollHeight), options);
+    this.panel.hidden = true;
+    this.open = false;
+    this.emit("cw-after-hide");
+    return void 0;
+  }
+  /** Opens the item's dropdown, if it has one. No-op for link/plain items. */
+  async show() {
+    var _a;
+    if (this.mobile) {
+      return this.showInlineMenu();
+    }
+    return (_a = this.dropdown) == null ? void 0 : _a.show();
+  }
+  /** Closes the item's dropdown, if it has one. No-op for link/plain items. */
+  async hide() {
+    var _a;
+    if (this.mobile) {
+      return this.hideInlineMenu();
+    }
+    return (_a = this.dropdown) == null ? void 0 : _a.hide();
+  }
+  render() {
+    const ariaCurrent = this.current ? "page" : nothing;
+    const menuSlot = html`<slot name="menu" @slotchange=${this.handleMenuSlotChange} hidden></slot>`;
+    let content;
+    if (this.href) {
+      content = html`
+        <a
+          part="link"
+          class="primary-navigation-item__link"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(this.rel || void 0)}
+          aria-current=${ariaCurrent}
+        >
+          <slot></slot>
+        </a>
+        ${menuSlot}
+      `;
+    } else if (this.hasMenu && this.mobile) {
+      content = html`
+        <button
+          part="trigger"
+          type="button"
+          id=${`${this.componentId}-trigger`}
+          class="primary-navigation-item__trigger"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${`${this.componentId}-panel`}
+          @click=${this.handleTriggerClick}
+        >
+          <slot></slot>
+          <cw-icon library="system" name="chevron-down"></cw-icon>
+        </button>
+
+        <div
+          part="panel"
+          id=${`${this.componentId}-panel`}
+          class="primary-navigation-item__panel"
+          role="region"
+          aria-labelledby=${`${this.componentId}-trigger`}
+        >
+          <slot name="menu" @slotchange=${this.handleMenuSlotChange}></slot>
+        </div>
+      `;
+    } else if (this.hasMenu) {
+      content = html`
+        <cw-dropdown
+          part="trigger"
+          placement="bottom-start"
+          @cw-show=${this.handleDropdownShow}
+          @cw-hide=${this.handleDropdownHide}
+        >
+          <button slot="trigger" type="button" class="primary-navigation-item__trigger">
+            <slot></slot>
+            <cw-icon library="system" name="chevron-down"></cw-icon>
+          </button>
+          <slot name="menu" @slotchange=${this.handleMenuSlotChange}></slot>
+        </cw-dropdown>
+      `;
+    } else {
+      content = html`
+        <span class="primary-navigation-item__label"><slot></slot></span>
+        ${menuSlot}
+      `;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "primary-navigation-item": true,
+      "primary-navigation-item--current": this.current,
+      "primary-navigation-item--open": this.open,
+      "primary-navigation-item--mobile": this.mobile
+    })}
+      >
+        ${content}
+      </div>
+    `;
+  }
+};
+CwPrimaryNavigationItem.styles = [component_styles_default, primary_navigation_item_styles_default];
+CwPrimaryNavigationItem.dependencies = { "cw-dropdown": CwDropdown, "cw-icon": CwIcon };
+__decorateClass([
+  query("cw-dropdown")
+], CwPrimaryNavigationItem.prototype, "dropdown", 2);
+__decorateClass([
+  query('slot[name="menu"]')
+], CwPrimaryNavigationItem.prototype, "menuSlot", 2);
+__decorateClass([
+  query(".primary-navigation-item__panel")
+], CwPrimaryNavigationItem.prototype, "panel", 2);
+__decorateClass([
+  state()
+], CwPrimaryNavigationItem.prototype, "hasMenu", 2);
+__decorateClass([
+  state()
+], CwPrimaryNavigationItem.prototype, "open", 2);
+__decorateClass([
+  property()
+], CwPrimaryNavigationItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], CwPrimaryNavigationItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], CwPrimaryNavigationItem.prototype, "rel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwPrimaryNavigationItem.prototype, "current", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwPrimaryNavigationItem.prototype, "mobile", 2);
+__decorateClass([
+  watch("mobile", { waitUntilFirstUpdate: true })
+], CwPrimaryNavigationItem.prototype, "handleMobileChange", 1);
+setDefaultAnimation("primary-navigation-item.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 200, easing: "ease" }
+});
+setDefaultAnimation("primary-navigation-item.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 200, easing: "ease" }
+});
+
+export {
+  CwPrimaryNavigationItem
+};

package/dist/chunks/chunk.IBN2I4NP.js

@@ -0,0 +1,25 @@
+import {
+  CwCopyButton
+} from "./chunk.OWZBYMHC.js";
+
+// src/react/copy-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-copy-button";
+CwCopyButton.define("cw-copy-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwCopyButton,
+  react: React,
+  events: {
+    onCwCopy: "cw-copy",
+    onCwError: "cw-error"
+  },
+  displayName: "CwCopyButton"
+});
+var copy_button_default = reactWrapper;
+
+export {
+  copy_button_default
+};