@cordwainer/cw-elements 1.4.0-alpha.1 → 1.5.0-alpha.0

package/dist/chunks/chunk.IJI4QG3G.js

@@ -0,0 +1,11 @@
+import {
+  CwIcon
+} from "./chunk.5BKJIZQD.js";
+
+// src/components/icon/icon.ts
+var icon_default = CwIcon;
+CwIcon.define("cw-icon");
+
+export {
+  icon_default
+};

package/dist/chunks/chunk.IQ5FLTXV.js

@@ -0,0 +1,90 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.P4NYDBZP.js";
+import {
+  LocalizeController
+} from "./chunk.OFFCHZOX.js";
+import {
+  CwIcon
+} from "./chunk.5BKJIZQD.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.T7DYO7YZ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var CwBreadcrumb = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "cw-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return html`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <cw-icon name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"} library="system"></cw-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+CwBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default];
+CwBreadcrumb.dependencies = { "cw-icon": CwIcon };
+__decorateClass([
+  query("slot")
+], CwBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], CwBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], CwBreadcrumb.prototype, "label", 2);
+
+export {
+  CwBreadcrumb
+};

package/dist/chunks/chunk.IYRUDLXZ.js

@@ -0,0 +1,11 @@
+import {
+  CwIconButton
+} from "./chunk.C3LNVYCP.js";
+
+// src/components/icon-button/icon-button.ts
+var icon_button_default = CwIconButton;
+CwIconButton.define("cw-icon-button");
+
+export {
+  icon_button_default
+};

package/dist/chunks/chunk.IZKYEODC.js

@@ -0,0 +1,59 @@
+import {
+  badge_styles_default
+} from "./chunk.35DMG7O7.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.T7DYO7YZ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/badge/badge.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CwBadge = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.pill = false;
+    this.pulse = false;
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      badge: true,
+      "badge--primary": this.variant === "primary",
+      "badge--success": this.variant === "success",
+      "badge--neutral": this.variant === "neutral",
+      "badge--warning": this.variant === "warning",
+      "badge--danger": this.variant === "danger",
+      "badge--pill": this.pill,
+      "badge--pulse": this.pulse
+    })}
+        role="status"
+      >
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+CwBadge.styles = [component_styles_default, badge_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], CwBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwBadge.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwBadge.prototype, "pulse", 2);
+
+export {
+  CwBadge
+};

package/dist/chunks/chunk.J5NCWFXY.js

@@ -0,0 +1,135 @@
+import {
+  menu_styles_default
+} from "./chunk.3NY4TZFN.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.T7DYO7YZ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/menu/menu.component.ts
+import { html } from "lit";
+import { query } from "lit/decorators.js";
+var CwMenu = class extends CwElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el) => {
+      var _a;
+      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+    });
+    if (!target) return;
+    const closestMenu = composedPath.find((el) => {
+      var _a;
+      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+    });
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("cw-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "cw-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return html`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+CwMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  query("slot")
+], CwMenu.prototype, "defaultSlot", 2);
+
+export {
+  CwMenu
+};

package/dist/chunks/chunk.JAJM4XAX.js

@@ -0,0 +1,276 @@
+import {
+  primary_navigation_item_styles_default
+} from "./chunk.HOKHQD4A.js";
+import {
+  CwDropdown
+} from "./chunk.XJQJRCXQ.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.5BKJIZQD.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.T7DYO7YZ.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.JDNDIDZC.js

@@ -0,0 +1,11 @@
+import {
+  CwBreadcrumb
+} from "./chunk.IQ5FLTXV.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+var breadcrumb_default = CwBreadcrumb;
+CwBreadcrumb.define("cw-breadcrumb");
+
+export {
+  breadcrumb_default
+};

package/dist/chunks/chunk.JF5CGZDU.js

@@ -0,0 +1,63 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.BQSEJD7X.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.T7DYO7YZ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var id = 0;
+var CwTabPanel = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `cw-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+      ></slot>
+    `;
+  }
+};
+CwTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], CwTabPanel.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], CwTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  CwTabPanel
+};

package/dist/chunks/chunk.JFYKJAPL.js

@@ -0,0 +1,25 @@
+import {
+  CwRadioButton
+} from "./chunk.Q4ER4DQI.js";
+
+// src/react/radio-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-radio-button";
+CwRadioButton.define("cw-radio-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwRadioButton,
+  react: React,
+  events: {
+    onCwBlur: "cw-blur",
+    onCwFocus: "cw-focus"
+  },
+  displayName: "CwRadioButton"
+});
+var radio_button_default = reactWrapper;
+
+export {
+  radio_button_default
+};