@cordwainer/cw-elements 1.5.0-alpha.3 → 1.5.0-alpha.4

package/dist/chunks/chunk.MPQ3EEWH.js

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

package/dist/chunks/chunk.MQVTUC5W.js

@@ -0,0 +1,91 @@
+import {
+  button_group_styles_default
+} from "./chunk.2OUC42YY.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.GXF4MZOO.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/button-group/button-group.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var CwButtonGroup = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        button.toggleAttribute("data-cw-button-group__button", true);
+        button.toggleAttribute("data-cw-button-group__button--first", index === 0);
+        button.toggleAttribute("data-cw-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.toggleAttribute("data-cw-button-group__button--last", index === slottedElements.length - 1);
+        button.toggleAttribute(
+          "data-cw-button-group__button--radio",
+          button.tagName.toLowerCase() === "cw-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class="button-group"
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+CwButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  query("slot")
+], CwButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], CwButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], CwButtonGroup.prototype, "label", 2);
+function findButton(el) {
+  var _a;
+  const selector = "cw-button, cw-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  CwButtonGroup
+};

package/dist/chunks/chunk.MWYQOOVN.js

@@ -0,0 +1,100 @@
+import {
+  LocalizeController
+} from "./chunk.3FPCQD76.js";
+import {
+  CwElement
+} from "./chunk.GXF4MZOO.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/relative-time/relative-time.component.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var availableUnits = [
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Infinity, value: 31536e6, unit: "year" }
+];
+var CwRelativeTime = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isoTime = "";
+    this.relativeTime = "";
+    this.date = /* @__PURE__ */ new Date();
+    this.format = "long";
+    this.numeric = "auto";
+    this.sync = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.updateTimeout);
+  }
+  render() {
+    const now = /* @__PURE__ */ new Date();
+    const then = new Date(this.date);
+    if (isNaN(then.getMilliseconds())) {
+      this.relativeTime = "";
+      this.isoTime = "";
+      return "";
+    }
+    const diff = then.getTime() - now.getTime();
+    const { unit, value } = availableUnits.find((singleUnit) => Math.abs(diff) < singleUnit.max);
+    this.isoTime = then.toISOString();
+    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
+      numeric: this.numeric,
+      style: this.format
+    });
+    clearTimeout(this.updateTimeout);
+    if (this.sync) {
+      let nextInterval;
+      if (unit === "minute") {
+        nextInterval = getTimeUntilNextUnit("second");
+      } else if (unit === "hour") {
+        nextInterval = getTimeUntilNextUnit("minute");
+      } else if (unit === "day") {
+        nextInterval = getTimeUntilNextUnit("hour");
+      } else {
+        nextInterval = getTimeUntilNextUnit("day");
+      }
+      this.updateTimeout = window.setTimeout(() => this.requestUpdate(), nextInterval);
+    }
+    return html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+  }
+};
+__decorateClass([
+  state()
+], CwRelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  state()
+], CwRelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "date", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "format", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CwRelativeTime.prototype, "sync", 2);
+function getTimeUntilNextUnit(unit) {
+  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
+  const value = units[unit];
+  return value - Date.now() % value;
+}
+
+export {
+  CwRelativeTime
+};

package/dist/chunks/chunk.N3DMAJ7C.js

@@ -0,0 +1,21 @@
+// src/components/stepper/stepper.styles.ts
+import { css } from "lit";
+var stepper_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  .stepper {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  :host([orientation='vertical']) .stepper {
+    flex-direction: column;
+    align-items: stretch;
+  }
+`;
+
+export {
+  stepper_styles_default
+};

package/dist/chunks/chunk.N5732JGD.js

@@ -0,0 +1,42 @@
+import {
+  divider_styles_default
+} from "./chunk.A7CLNPHG.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.GXF4MZOO.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/divider/divider.component.ts
+import { property } from "lit/decorators.js";
+var CwDivider = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+CwDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], CwDivider.prototype, "handleVerticalChange", 1);
+
+export {
+  CwDivider
+};

package/dist/chunks/chunk.N5RVHBJK.js

@@ -0,0 +1,198 @@
+import {
+  CwMenu
+} from "./chunk.TTSKADR6.js";
+import {
+  CwMenuItem
+} from "./chunk.6L4T7EWM.js";
+import {
+  CwDropdown
+} from "./chunk.OUQQ6FMW.js";
+import {
+  breadcrumb_styles_default
+} from "./chunk.VO5IVFWZ.js";
+import {
+  CwButton
+} from "./chunk.OBS5SE77.js";
+import {
+  LocalizeController
+} from "./chunk.3FPCQD76.js";
+import {
+  CwIcon
+} from "./chunk.3XZXANTS.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.GXF4MZOO.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.overflowItem = null;
+    this.label = "";
+    this.noCollapse = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.updateOverflow());
+  }
+  firstUpdated() {
+    this.resizeObserver.observe(this.nav);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this.nav);
+  }
+  handleNoCollapseChange() {
+    this.updateOverflow();
+  }
+  getRealItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "cw-breadcrumb-item" && item !== this.overflowItem
+    );
+  }
+  showAllItems(items) {
+    var _a;
+    items.forEach((item) => {
+      item.style.display = "";
+    });
+    (_a = this.overflowItem) == null ? void 0 : _a.remove();
+    this.overflowItem = null;
+  }
+  updateOverflow() {
+    const items = this.getRealItems();
+    if (this.noCollapse || items.length <= 2) {
+      this.showAllItems(items);
+      return;
+    }
+    this.showAllItems(items);
+    if (this.nav.scrollWidth <= this.nav.clientWidth + 1) {
+      return;
+    }
+    const [first] = items;
+    const hiddenItems = items.slice(1, -1);
+    hiddenItems.forEach((item) => {
+      item.style.display = "none";
+    });
+    this.overflowItem = this.buildOverflowItem(hiddenItems);
+    first.after(this.overflowItem);
+  }
+  // Builds a synthetic breadcrumb item housing a dropdown menu of the collapsed items. Each menu item proxies
+  // activation to its corresponding real item's internal label element (link or button), rather than duplicating
+  // href/click-handler logic — the real items stay in the DOM (just visually hidden), so whatever behavior a
+  // consumer already attached to them keeps working exactly as it did before collapsing.
+  buildOverflowItem(hiddenItems) {
+    const menu = document.createElement("cw-menu");
+    hiddenItems.forEach((item) => {
+      var _a, _b, _c;
+      const labelSlot = (_a = item.shadowRoot) == null ? void 0 : _a.querySelector("slot:not([name])");
+      const labelText = ((_b = labelSlot == null ? void 0 : labelSlot.assignedNodes({ flatten: true })) != null ? _b : []).map((node) => {
+        var _a2;
+        return (_a2 = node.textContent) != null ? _a2 : "";
+      }).join("").trim();
+      const label = (_c = item.shadowRoot) == null ? void 0 : _c.querySelector('[part="label"]');
+      const menuItem = document.createElement("cw-menu-item");
+      menuItem.textContent = labelText;
+      menuItem.addEventListener("click", () => label == null ? void 0 : label.click());
+      menu.append(menuItem);
+    });
+    const trigger = document.createElement("cw-button");
+    trigger.slot = "trigger";
+    trigger.variant = "text";
+    trigger.size = "small";
+    trigger.textContent = "\u2026";
+    trigger.setAttribute("aria-label", this.localize.term("breadcrumbMore"));
+    const dropdown = document.createElement("cw-dropdown");
+    dropdown.append(trigger, menu);
+    const overflowItem = document.createElement("cw-breadcrumb-item");
+    overflowItem.append(dropdown);
+    return overflowItem;
+  }
+  // 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,
+  "cw-dropdown": CwDropdown,
+  "cw-menu": CwMenu,
+  "cw-menu-item": CwMenuItem,
+  "cw-button": CwButton
+};
+__decorateClass([
+  query("nav")
+], CwBreadcrumb.prototype, "nav", 2);
+__decorateClass([
+  query("slot")
+], CwBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], CwBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], CwBreadcrumb.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "no-collapse", type: Boolean, reflect: true })
+], CwBreadcrumb.prototype, "noCollapse", 2);
+__decorateClass([
+  watch("noCollapse", { waitUntilFirstUpdate: true })
+], CwBreadcrumb.prototype, "handleNoCollapseChange", 1);
+
+export {
+  CwBreadcrumb
+};

package/dist/chunks/chunk.N6KDDXPE.js

@@ -0,0 +1,25 @@
+import {
+  CwRadioButton
+} from "./chunk.CBWY4GIE.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
+};

package/dist/chunks/chunk.N775JSXP.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.GXF4MZOO.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.NCHU27GX.js

@@ -0,0 +1,62 @@
+import {
+  footer_styles_default
+} from "./chunk.7PJPS3CA.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.GXF4MZOO.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/footer/footer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CwFooter = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "logo", "menu", "about", "social");
+    this.owner = "";
+  }
+  render() {
+    const year = (/* @__PURE__ */ new Date()).getFullYear();
+    const hasSocial = this.hasSlotController.test("social");
+    const hasBottom = Boolean(this.owner) || hasSocial;
+    return html`
+      <footer part="base" class="footer">
+        <div part="logo" class="footer__logo" ?hidden=${!this.hasSlotController.test("logo")}>
+          <slot name="logo"></slot>
+        </div>
+
+        <div part="menu" class="footer__menu" ?hidden=${!this.hasSlotController.test("menu")}>
+          <slot name="menu"></slot>
+        </div>
+
+        <div part="about" class="footer__about" ?hidden=${!this.hasSlotController.test("about")}>
+          <slot name="about"></slot>
+        </div>
+
+        <div part="bottom" class="footer__bottom" ?hidden=${!hasBottom}>
+          ${this.owner ? html`<div part="copyright" class="footer__copyright">© ${year} ${this.owner}</div>` : ""}
+
+          <div part="social" class="footer__social" ?hidden=${!hasSocial}>
+            <slot name="social"></slot>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+};
+CwFooter.styles = [component_styles_default, footer_styles_default];
+__decorateClass([
+  property()
+], CwFooter.prototype, "owner", 2);
+
+export {
+  CwFooter
+};