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

package/dist/chunks/chunk.5CCJ5XKE.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.NB4MG53P.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.5GXIU7UK.js

@@ -0,0 +1,202 @@
+// src/components/data-table/data-table.styles.ts
+import { css } from "lit";
+var data_table_styles_default = css`
+  :host {
+    --cw-data-table-border-color: var(--cw-color-neutral-200);
+    --cw-data-table-stripe-color: var(--cw-color-neutral-50);
+    --cw-data-table-row-hover-color: var(--cw-color-neutral-100);
+    --cw-data-table-selected-row-color: var(--cw-color-primary-50);
+    --cw-data-table-header-background: var(--cw-color-neutral-50);
+
+    display: block;
+  }
+
+  /* Base wrapper */
+  .data-table {
+    position: relative;
+    overflow-x: auto;
+    border: solid 1px var(--cw-data-table-border-color);
+    border-radius: var(--cw-border-radius-medium);
+    font-family: var(--cw-font-sans);
+    font-size: var(--cw-font-size-medium);
+    color: var(--cw-color-neutral-900);
+  }
+
+  /* Table */
+  .data-table__table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  /* Header */
+  .data-table__header-row {
+    background: var(--cw-data-table-header-background);
+    border-bottom: solid 1px var(--cw-data-table-border-color);
+  }
+
+  .data-table__header-cell {
+    padding: var(--cw-spacing-small) var(--cw-spacing-medium);
+    font-size: var(--cw-font-size-small);
+    font-weight: var(--cw-font-weight-semibold);
+    color: var(--cw-color-neutral-700);
+    text-align: start;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .data-table__header-cell--sortable {
+    padding: 0;
+  }
+
+  /* Sort button */
+  .data-table__sort-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cw-spacing-2x-small);
+    width: 100%;
+    padding: var(--cw-spacing-small) var(--cw-spacing-medium);
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--cw-font-weight-semibold);
+    font-size: var(--cw-font-size-small);
+    text-align: start;
+    cursor: pointer;
+    transition: var(--cw-transition-fast) color;
+  }
+
+  .data-table__sort-button:hover {
+    color: var(--cw-color-neutral-900);
+  }
+
+  .data-table__sort-button:focus-visible {
+    outline: var(--cw-focus-ring);
+    outline-offset: -2px;
+  }
+
+  .data-table__sort-icon {
+    font-size: var(--cw-font-size-small);
+    color: var(--cw-color-neutral-400);
+    transition: var(--cw-transition-fast) color;
+  }
+
+  .data-table__sort-icon--active {
+    color: var(--cw-color-primary-600);
+  }
+
+  /* Body rows */
+  .data-table__body-row {
+    border-top: solid 1px var(--cw-data-table-border-color);
+    transition: var(--cw-transition-fast) background-color;
+  }
+
+  .data-table__body-row:first-child {
+    border-top: none;
+  }
+
+  .data-table__body-row--clickable {
+    cursor: pointer;
+  }
+
+  .data-table__body-row:hover {
+    background-color: var(--cw-data-table-row-hover-color);
+  }
+
+  .data-table__body-row--selected,
+  .data-table__body-row--selected:hover {
+    background-color: var(--cw-data-table-selected-row-color);
+  }
+
+  /* Body cells */
+  .data-table__body-cell {
+    padding: var(--cw-spacing-small) var(--cw-spacing-medium);
+    color: var(--cw-color-neutral-800);
+    vertical-align: middle;
+  }
+
+  /* Checkbox cells */
+  .data-table__checkbox-cell {
+    width: 1px;
+    padding-inline: var(--cw-spacing-medium);
+    white-space: nowrap;
+  }
+
+  /* Striped variant */
+  .data-table--striped .data-table__body-row:nth-child(even) {
+    background-color: var(--cw-data-table-stripe-color);
+  }
+
+  .data-table--striped .data-table__body-row:nth-child(even):hover {
+    background-color: var(--cw-data-table-row-hover-color);
+  }
+
+  .data-table--striped .data-table__body-row--selected:nth-child(even),
+  .data-table--striped .data-table__body-row--selected:nth-child(even):hover {
+    background-color: var(--cw-data-table-selected-row-color);
+  }
+
+  /* Bordered variant */
+  .data-table--bordered .data-table__header-cell,
+  .data-table--bordered .data-table__body-cell {
+    border-inline-end: solid 1px var(--cw-data-table-border-color);
+  }
+
+  .data-table--bordered .data-table__header-cell:last-child,
+  .data-table--bordered .data-table__body-cell:last-child {
+    border-inline-end: none;
+  }
+
+  /* Empty state */
+  .data-table__empty-cell {
+    padding: 0;
+  }
+
+  .data-table__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--cw-spacing-3x-large);
+    color: var(--cw-color-neutral-500);
+    font-size: var(--cw-font-size-medium);
+  }
+
+  /* Loading overlay */
+  .data-table__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(255 255 255 / 0.7);
+    border-radius: inherit;
+  }
+
+  :host-context(.cw-theme-dark) .data-table__loading {
+    background: rgb(0 0 0 / 0.5);
+  }
+
+  /* WebKit doesn't support :host-context() — data-table.component.ts feature-detects that and, only
+     on engines that need it, toggles this class itself after walking up for a .cw-theme-dark ancestor. */
+  :host(.cw-data-table-dark-fallback) .data-table__loading {
+    background: rgb(0 0 0 / 0.5);
+  }
+
+  /* Visually hidden caption and screen-reader-only slot content */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+
+export {
+  data_table_styles_default
+};

package/dist/chunks/chunk.5JEYDXUT.js

@@ -0,0 +1,231 @@
+import {
+  details_styles_default
+} from "./chunk.YEBXROLJ.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.TJQYJP53.js";
+import {
+  LocalizeController
+} from "./chunk.DVGAJ3DA.js";
+import {
+  CwIcon
+} from "./chunk.3AFGTKZX.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.NB4MG53P.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/details/details.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+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 html`
+      <details
+        part="base"
+        class=${classMap({
+      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([
+  query(".details")
+], CwDetails.prototype, "details", 2);
+__decorateClass([
+  query(".details__header")
+], CwDetails.prototype, "header", 2);
+__decorateClass([
+  query(".details__body")
+], CwDetails.prototype, "body", 2);
+__decorateClass([
+  query(".details__expand-icon-slot")
+], CwDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwDetails.prototype, "open", 2);
+__decorateClass([
+  property()
+], CwDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ 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/dist/chunks/chunk.5N3A2GXA.js

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

package/dist/chunks/chunk.5QBMC36T.js

@@ -0,0 +1,11 @@
+import {
+  CwMenu
+} from "./chunk.VUP4OXM6.js";
+
+// src/components/menu/menu.ts
+var menu_default = CwMenu;
+CwMenu.define("cw-menu");
+
+export {
+  menu_default
+};

package/dist/chunks/chunk.5SMTGQNW.js

@@ -0,0 +1,11 @@
+import {
+  CwRadioGroup
+} from "./chunk.G366KAC6.js";
+
+// src/components/radio-group/radio-group.ts
+var radio_group_default = CwRadioGroup;
+CwRadioGroup.define("cw-radio-group");
+
+export {
+  radio_group_default
+};

package/dist/chunks/chunk.65CWOEZ2.js

@@ -0,0 +1,22 @@
+import {
+  menu_label_styles_default
+} from "./chunk.5EKYGMIG.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.NB4MG53P.js";
+
+// src/components/menu-label/menu-label.component.ts
+import { html } from "lit";
+var CwMenuLabel = class extends CwElement {
+  render() {
+    return html` <slot part="base" class="menu-label"></slot> `;
+  }
+};
+CwMenuLabel.styles = [component_styles_default, menu_label_styles_default];
+
+export {
+  CwMenuLabel
+};

package/dist/chunks/chunk.6CA6X2V3.js

@@ -0,0 +1,21 @@
+import {
+  CwQrCode
+} from "./chunk.KEDNZZ3P.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.6OCDHTPA.js

@@ -0,0 +1,28 @@
+import {
+  CwRange
+} from "./chunk.F5CGWV23.js";
+
+// src/react/range/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-range";
+CwRange.define("cw-range");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwRange,
+  react: React,
+  events: {
+    onCwBlur: "cw-blur",
+    onCwChange: "cw-change",
+    onCwFocus: "cw-focus",
+    onCwInput: "cw-input",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwRange"
+});
+var range_default = reactWrapper;
+
+export {
+  range_default
+};

package/dist/chunks/chunk.774JT5LG.js

@@ -0,0 +1,25 @@
+import {
+  CwInclude
+} from "./chunk.APE5GL5Y.js";
+
+// src/react/include/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-include";
+CwInclude.define("cw-include");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwInclude,
+  react: React,
+  events: {
+    onCwLoad: "cw-load",
+    onCwError: "cw-error"
+  },
+  displayName: "CwInclude"
+});
+var include_default = reactWrapper;
+
+export {
+  include_default
+};

package/dist/chunks/chunk.7BQQMODJ.js

@@ -0,0 +1,33 @@
+import {
+  CwCombobox
+} from "./chunk.NZKCYY52.js";
+
+// src/react/combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-combobox";
+CwCombobox.define("cw-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwCombobox,
+  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: "CwCombobox"
+});
+var combobox_default = reactWrapper;
+
+export {
+  combobox_default
+};