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

package/dist/chunks/chunk.3V3P3I3Y.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.OFFCHZOX.js";
+import {
+  CwIcon
+} from "./chunk.CT7B5CJS.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.BZOZDWV5.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.3VWUJKYK.js

@@ -0,0 +1,11 @@
+import {
+  CwHeader
+} from "./chunk.6C2VUMBB.js";
+
+// src/components/header/header.ts
+var header_default = CwHeader;
+CwHeader.define("cw-header");
+
+export {
+  header_default
+};

package/dist/chunks/chunk.43NGHCL6.js

@@ -0,0 +1,11 @@
+import {
+  CwMenuLabel
+} from "./chunk.5XL3NEA5.js";
+
+// src/components/menu-label/menu-label.ts
+var menu_label_default = CwMenuLabel;
+CwMenuLabel.define("cw-menu-label");
+
+export {
+  menu_label_default
+};

package/dist/chunks/chunk.4H55T6YI.js

@@ -0,0 +1,87 @@
+import {
+  social_link_styles_default
+} from "./chunk.5K4OADKV.js";
+import {
+  CwIconButton
+} from "./chunk.4U7HXTV6.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.BZOZDWV5.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.4O5YILN4.js

@@ -0,0 +1,24 @@
+import {
+  CwPopup
+} from "./chunk.NHEWBIPG.js";
+
+// src/react/popup/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-popup";
+CwPopup.define("cw-popup");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwPopup,
+  react: React,
+  events: {
+    onCwReposition: "cw-reposition"
+  },
+  displayName: "CwPopup"
+});
+var popup_default = reactWrapper;
+
+export {
+  popup_default
+};

package/dist/chunks/chunk.4U7HXTV6.js

@@ -0,0 +1,130 @@
+import {
+  icon_button_styles_default
+} from "./chunk.IRARCVGH.js";
+import {
+  CwIcon
+} from "./chunk.CT7B5CJS.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.BZOZDWV5.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/icon-button/icon-button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var CwIconButton = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasFocus = false;
+    this.label = "";
+    this.disabled = false;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("cw-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("cw-focus");
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    var _a;
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      "icon-button": true,
+      "icon-button--disabled": !isLink && this.disabled,
+      "icon-button--focused": this.hasFocus
+    })}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : "button")}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink ? (_a = this.rel) != null ? _a : this.target ? "noreferrer noopener" : void 0 : void 0)}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label="${this.label}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <cw-icon
+          class="icon-button__icon"
+          name=${ifDefined(this.name)}
+          library=${ifDefined(this.library)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+        ></cw-icon>
+      </${tag}>
+    `;
+  }
+};
+CwIconButton.styles = [component_styles_default, icon_button_styles_default];
+CwIconButton.dependencies = { "cw-icon": CwIcon };
+__decorateClass([
+  query(".icon-button")
+], CwIconButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], CwIconButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "library", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "src", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwIconButton.prototype, "disabled", 2);
+
+export {
+  CwIconButton
+};

package/dist/chunks/chunk.52JO3JL6.js

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import {
+  CwInclude
+} from "./chunk.TYDVCTTU.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.5XL3NEA5.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.BZOZDWV5.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
+};