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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@cordwainer/cw-elements",
-  "version": "1.3.0-alpha.3",
+  "version": "1.3.0-beta.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3072,6 +3072,44 @@
             ]
           }
         },
+        {
+          "name": "cw-footer",
+          "description": "Site footer region composing branding, a flat link list, arbitrary \"about\" content, and a bottom bar\nwith copyright and social links.\n---\n\n\n### **Slots:**\n - **logo** - A `<cw-logo>`.\n- **menu** - Plain `<a>` links. Not a repeating item component — a flat list that reflows into columns (3 wide, 1 narrow) via CSS, no grouping or headings.\n- **about** - Arbitrary content, rendered full width.\n- **social** - Any number of `<cw-social-link>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<footer>` landmark element.\n- **logo** - The container that wraps the slotted logo.\n- **menu** - The container that wraps the slotted menu links.\n- **about** - The container that wraps the slotted about content.\n- **bottom** - The bottom bar that wraps the copyright text and social links.\n- **copyright** - The copyright text.\n- **social** - The container that wraps the slotted social links.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "owner",
+              "description": "The copyright owner's name. When set, the footer renders `© {currentYear} {owner}`. Renders nothing if unset.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "logo", "description": "A `<cw-logo>`." },
+            {
+              "name": "menu",
+              "description": "Plain `<a>` links. Not a repeating item component — a flat list that reflows into columns (3 wide, 1 narrow) via CSS, no grouping or headings."
+            },
+            {
+              "name": "about",
+              "description": "Arbitrary content, rendered full width."
+            },
+            {
+              "name": "social",
+              "description": "Any number of `<cw-social-link>` elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "owner",
+                "description": "The copyright owner's name. When set, the footer renders `© {currentYear} {owner}`. Renders nothing if unset.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "cw-format-bytes",
           "description": "Formats a number as a human readable bytes value.\n---\n",
@@ -3585,6 +3623,11 @@
               "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "rel",
+              "description": "The `rel` attribute for the link. Only used when `href` is set. Defaults to `noreferrer noopener` when `target`\nis set and this is left unset — pass an explicit value (e.g. `me noreferrer noopener`) to override it.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
@@ -3642,6 +3685,11 @@
                 "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
                 "type": "string | undefined"
               },
+              {
+                "name": "rel",
+                "description": "The `rel` attribute for the link. Only used when `href` is set. Defaults to `noreferrer noopener` when `target`\nis set and this is left unset — pass an explicit value (e.g. `me noreferrer noopener`) to override it.",
+                "type": "string | undefined"
+              },
               {
                 "name": "label",
                 "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
@@ -5004,7 +5052,7 @@
         },
         {
           "name": "cw-primary-navigation-item",
-          "description": "A top-level entry in a `<cw-primary-navigation>`, rendered as a link or, when it has a\n`<cw-primary-navigation-menu>` slotted in, a disclosure trigger for a dropdown of sub-links.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the item's dropdown opens.\n- **cw-after-show** - Emitted after the item's dropdown opens and all animations are complete.\n- **cw-hide** - Emitted when the item's dropdown closes.\n- **cw-after-hide** - Emitted after the item's dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the item's dropdown, if it has one. No-op for link/plain items.\n- **hide()** - Closes the item's dropdown, if it has one. No-op for link/plain items.\n\n### **Slots:**\n - _default_ - The item's label content (text, or an icon + text).\n- **menu** - A `<cw-primary-navigation-menu>` with this item's dropdown links. Its presence switches the item from a link to a disclosure trigger. Ignored when `href` is also set.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The internal `<a>`, present only when `href` is set.\n- **trigger** - The internal `<cw-dropdown>`, present only when a dropdown menu is slotted in.",
+          "description": "A top-level entry in a `<cw-primary-navigation>`, rendered as a link or, when it has a\n`<cw-primary-navigation-menu>` slotted in, a disclosure trigger for a dropdown of sub-links. Above the parent\nnavigation's mobile breakpoint, the dropdown is a floating panel; below it, the menu expands inline, full width,\nin place — matching the rest of the mobile hamburger menu.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the item's dropdown opens.\n- **cw-after-show** - Emitted after the item's dropdown opens and all animations are complete.\n- **cw-hide** - Emitted when the item's dropdown closes.\n- **cw-after-hide** - Emitted after the item's dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the item's dropdown, if it has one. No-op for link/plain items.\n- **hide()** - Closes the item's dropdown, if it has one. No-op for link/plain items.\n\n### **Slots:**\n - _default_ - The item's label content (text, or an icon + text).\n- **menu** - A `<cw-primary-navigation-menu>` with this item's dropdown links. Its presence switches the item from a link to a disclosure trigger. Ignored when `href` is also set.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The internal `<a>`, present only when `href` is set.\n- **trigger** - The internal `<cw-dropdown>` above `mobile`, or the disclosure `<button>` below it — present only when a dropdown menu is slotted in.\n- **panel** - The inline menu panel shown below `mobile`, present only when a dropdown menu is slotted in.",
           "doc-url": "",
           "attributes": [
             {
@@ -5028,6 +5076,11 @@
               "name": "current",
               "description": "Indicates this item represents the current page. Reflects `aria-current=\"page\"` on the internal link. The\ncomponent has no router/URL awareness — consumers set this explicitly based on their own routing state.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "mobile",
+              "description": "Set automatically by the parent `<cw-primary-navigation>` when it's in its mobile, hamburger-toggled layout —\nswitches a dropdown menu from a floating panel to an inline, full-width disclosure. Not intended to be set\ndirectly.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -5062,6 +5115,7 @@
             "properties": [
               { "name": "dropdown", "type": "CwDropdown | undefined" },
               { "name": "menuSlot", "type": "HTMLSlotElement | undefined" },
+              { "name": "panel", "type": "HTMLElement | undefined" },
               {
                 "name": "open",
                 "description": "Whether the item's dropdown is currently open. Always `false` for link/plain items.",
@@ -5086,6 +5140,11 @@
                 "name": "current",
                 "description": "Indicates this item represents the current page. Reflects `aria-current=\"page\"` on the internal link. The\ncomponent has no router/URL awareness — consumers set this explicitly based on their own routing state.",
                 "type": "boolean"
+              },
+              {
+                "name": "mobile",
+                "description": "Set automatically by the parent `<cw-primary-navigation>` when it's in its mobile, hamburger-toggled layout —\nswitches a dropdown menu from a floating panel to an inline, full-width disclosure. Not intended to be set\ndirectly.",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -5112,12 +5171,27 @@
           "name": "cw-primary-navigation-menu",
           "description": "A simple flat list of links shown in a `<cw-primary-navigation-item>`'s dropdown. Deliberately\nminimal — no headings, grouping, multi-column layout, or promo slot; styles plain `<a>` elements only.\n---\n\n\n### **Slots:**\n - _default_ - One or more plain `<a>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "mobile",
+              "description": "Set automatically by the parent `<cw-primary-navigation-item>` when its own dropdown is rendered inline for a\nmobile hamburger menu rather than as a floating panel — swaps the card-like floating appearance (border,\nshadow, fixed minimum width) for a full-width, unbordered look that matches the rest of the mobile menu. Not\nintended to be set directly.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
           "slots": [
             { "name": "", "description": "One or more plain `<a>` elements." }
           ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "mobile",
+                "description": "Set automatically by the parent `<cw-primary-navigation-item>` when its own dropdown is rendered inline for a\nmobile hamburger menu rather than as a floating panel — swaps the card-like floating appearance (border,\nshadow, fixed minimum width) for a full-width, unbordered look that matches the rest of the mobile menu. Not\nintended to be set directly.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "cw-progress-bar",
@@ -6428,6 +6502,92 @@
             "events": []
           }
         },
+        {
+          "name": "cw-social-link",
+          "description": "A link to a social or fediverse profile, rendered as a single icon. Purpose-built for this domain rather\nthan a generic icon-link: set `platform` for one of the common networks and both the icon and accessible label\nare filled in for you.\n---\n\n\n### **CSS Parts:**\n - **base** - The internal `<cw-icon-button>`'s exported `base` part.\n- **base__icon-button** - An alias of `base`, kept for consistency with other components that forward an icon-button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "The URL of the profile to link to.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site.",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top'",
+                "default": "'_blank'"
+              }
+            },
+            {
+              "name": "rel",
+              "description": "The `rel` attribute for the link. Defaults to `noreferrer noopener`. To mark this link as a verified profile\nreference — the IndieWeb `rel=\"me\"` convention Mastodon and the wider fediverse use for identity verification —\ninclude `me` yourself, e.g. `rel=\"me noreferrer noopener\"`.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            },
+            {
+              "name": "platform",
+              "description": "One of the common social/fediverse platforms. When set, both the icon and the accessible `label` default to\nthat platform's — set `name`/`library` and/or `label` explicitly to override either, or to support a platform\nnot in this list.",
+              "value": { "type": "Platform | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Defaults to `platform`'s icon when set.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library. Defaults to `system` when `platform` is set.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "A description that gets read by assistive devices. Defaults to `platform`'s name when set.",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "The URL of the profile to link to.",
+                "type": "string"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site.",
+                "type": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              {
+                "name": "rel",
+                "description": "The `rel` attribute for the link. Defaults to `noreferrer noopener`. To mark this link as a verified profile\nreference — the IndieWeb `rel=\"me\"` convention Mastodon and the wider fediverse use for identity verification —\ninclude `me` yourself, e.g. `rel=\"me noreferrer noopener\"`.",
+                "type": "string"
+              },
+              {
+                "name": "platform",
+                "description": "One of the common social/fediverse platforms. When set, both the icon and the accessible `label` default to\nthat platform's — set `name`/`library` and/or `label` explicitly to override either, or to support a platform\nnot in this list.",
+                "type": "Platform | undefined"
+              },
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Defaults to `platform`'s icon when set.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "library",
+                "description": "The name of a registered custom icon library. Defaults to `system` when `platform` is set.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "A description that gets read by assistive devices. Defaults to `platform`'s name when set.",
+                "type": "string | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "cw-spinner",
           "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cordwainer/cw-elements",
   "description": "Cordwainer Elements — Web Component Library, a hard fork of Shoelace (@shoelace-style/shoelace).",
-  "version": "1.3.0-alpha.3",
+  "version": "1.3.0-beta.0",
   "homepage": "https://cordwainer.dev",
   "author": "Matt Hand",
   "license": "MIT",

package/cdn/chunks/chunk.226H2XME.js

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

package/cdn/chunks/chunk.2FBHDZYI.js

@@ -1,158 +0,0 @@
-import {
-  image_comparer_styles_default
-} from "./chunk.IA4JONBK.js";
-import {
-  drag
-} from "./chunk.ESELY2US.js";
-import {
-  o
-} from "./chunk.3KMJJQ2V.js";
-import {
-  clamp
-} from "./chunk.HF7GESMZ.js";
-import {
-  LocalizeController
-} from "./chunk.75ZQOYXC.js";
-import {
-  e
-} from "./chunk.VBR4VS53.js";
-import {
-  CwIcon
-} from "./chunk.IKLTKVD7.js";
-import {
-  watch
-} from "./chunk.RB5L7E7Z.js";
-import {
-  component_styles_default
-} from "./chunk.NJIHXHXI.js";
-import {
-  CwElement,
-  e as e2,
-  n
-} from "./chunk.TEPI7CQM.js";
-import {
-  b
-} from "./chunk.6A2LG33L.js";
-import {
-  __decorateClass
-} from "./chunk.QIOX6AG5.js";
-
-// src/components/image-comparer/image-comparer.component.ts
-var CwImageComparer = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.position = 50;
-  }
-  handleDrag(event) {
-    const { width } = this.base.getBoundingClientRect();
-    const isRtl = this.localize.dir() === "rtl";
-    event.preventDefault();
-    drag(this.base, {
-      onMove: (x) => {
-        this.position = parseFloat(clamp(x / width * 100, 0, 100).toFixed(2));
-        if (isRtl) this.position = 100 - this.position;
-      },
-      initialEvent: event
-    });
-  }
-  handleKeyDown(event) {
-    const isLtr = this.localize.dir() === "ltr";
-    const isRtl = this.localize.dir() === "rtl";
-    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
-      const incr = event.shiftKey ? 10 : 1;
-      let newPosition = this.position;
-      event.preventDefault();
-      if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
-        newPosition -= incr;
-      }
-      if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
-        newPosition += incr;
-      }
-      if (event.key === "Home") {
-        newPosition = 0;
-      }
-      if (event.key === "End") {
-        newPosition = 100;
-      }
-      newPosition = clamp(newPosition, 0, 100);
-      this.position = newPosition;
-    }
-  }
-  handlePositionChange() {
-    this.emit("cw-change");
-  }
-  render() {
-    const isRtl = this.localize.dir() === "rtl";
-    return b`
-      <div
-        part="base"
-        id="image-comparer"
-        class=${e({
-      "image-comparer": true,
-      "image-comparer--rtl": isRtl
-    })}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="image-comparer__image">
-          <div part="before" class="image-comparer__before">
-            <slot name="before"></slot>
-          </div>
-
-          <div
-            part="after"
-            class="image-comparer__after"
-            style=${o({
-      clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`
-    })}
-          >
-            <slot name="after"></slot>
-          </div>
-        </div>
-
-        <div
-          part="divider"
-          class="image-comparer__divider"
-          style=${o({
-      left: isRtl ? `${100 - this.position}%` : `${this.position}%`
-    })}
-          @mousedown=${this.handleDrag}
-          @touchstart=${this.handleDrag}
-        >
-          <div
-            part="handle"
-            class="image-comparer__handle"
-            role="scrollbar"
-            aria-valuenow=${this.position}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            aria-controls="image-comparer"
-            tabindex="0"
-          >
-            <slot name="handle">
-              <cw-icon library="system" name="grip-vertical"></cw-icon>
-            </slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-CwImageComparer.styles = [component_styles_default, image_comparer_styles_default];
-CwImageComparer.scopedElement = { "cw-icon": CwIcon };
-__decorateClass([
-  e2(".image-comparer")
-], CwImageComparer.prototype, "base", 2);
-__decorateClass([
-  e2(".image-comparer__handle")
-], CwImageComparer.prototype, "handle", 2);
-__decorateClass([
-  n({ type: Number, reflect: true })
-], CwImageComparer.prototype, "position", 2);
-__decorateClass([
-  watch("position", { waitUntilFirstUpdate: true })
-], CwImageComparer.prototype, "handlePositionChange", 1);
-
-export {
-  CwImageComparer
-};

package/cdn/chunks/chunk.2HJCX5A6.js

@@ -1,24 +0,0 @@
-import {
-  CwTree
-} from "./chunk.J4NJV6UH.js";
-
-// src/react/tree/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cw-tree";
-CwTree.define("cw-tree");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwTree,
-  react: React,
-  events: {
-    onCwSelectionChange: "cw-selection-change"
-  },
-  displayName: "CwTree"
-});
-var tree_default = reactWrapper;
-
-export {
-  tree_default
-};

package/cdn/chunks/chunk.2KLLANX4.js

@@ -1,42 +0,0 @@
-import {
-  divider_styles_default
-} from "./chunk.H4GSBSFJ.js";
-import {
-  watch
-} from "./chunk.RB5L7E7Z.js";
-import {
-  component_styles_default
-} from "./chunk.NJIHXHXI.js";
-import {
-  CwElement,
-  n
-} from "./chunk.TEPI7CQM.js";
-import {
-  __decorateClass
-} from "./chunk.QIOX6AG5.js";
-
-// src/components/divider/divider.component.ts
-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([
-  n({ type: Boolean, reflect: true })
-], CwDivider.prototype, "vertical", 2);
-__decorateClass([
-  watch("vertical")
-], CwDivider.prototype, "handleVerticalChange", 1);
-
-export {
-  CwDivider
-};

package/cdn/chunks/chunk.2VXFCBQH.js

@@ -1,21 +0,0 @@
-import {
-  CwFormatDate
-} from "./chunk.GGU42YBU.js";
-
-// src/react/format-date/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "cw-format-date";
-CwFormatDate.define("cw-format-date");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwFormatDate,
-  react: React,
-  events: {},
-  displayName: "CwFormatDate"
-});
-var format_date_default = reactWrapper;
-
-export {
-  format_date_default
-};

package/cdn/chunks/chunk.2WPE5WVD.js

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

package/cdn/chunks/chunk.2Y6D4M3M.js

@@ -1,11 +0,0 @@
-import {
-  CwSplitPanel
-} from "./chunk.P64DGGOT.js";
-
-// src/components/split-panel/split-panel.ts
-var split_panel_default = CwSplitPanel;
-CwSplitPanel.define("cw-split-panel");
-
-export {
-  split_panel_default
-};

package/cdn/chunks/chunk.33JDR4KU.js

@@ -1,11 +0,0 @@
-import {
-  CwTabPanel
-} from "./chunk.SBBB4QH5.js";
-
-// src/components/tab-panel/tab-panel.ts
-var tab_panel_default = CwTabPanel;
-CwTabPanel.define("cw-tab-panel");
-
-export {
-  tab_panel_default
-};

package/cdn/chunks/chunk.3BJV72HE.js

@@ -1,11 +0,0 @@
-import {
-  CwDropdown
-} from "./chunk.7Y6PL4W4.js";
-
-// src/components/dropdown/dropdown.ts
-var dropdown_default = CwDropdown;
-CwDropdown.define("cw-dropdown");
-
-export {
-  dropdown_default
-};