@cordwainer/cw-elements 1.2.3 → 1.3.0-alpha.1

package/dist/types/vue/index.d.ts

@@ -37,6 +37,7 @@ import type { CwIconButton } from "../../components/icon-button/icon-button.comp
 import type { CwImageComparer } from "../../components/image-comparer/image-comparer.component.js";
 import type { CwInclude } from "../../components/include/include.component.js";
 import type { CwInput } from "../../components/input/input.component.js";
+import type { CwLogo } from "../../components/logo/logo.component.js";
 import type { CwMenu } from "../../components/menu/menu.component.js";
 import type { CwMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { CwMenuLabel } from "../../components/menu-label/menu-label.component.js";
@@ -44,6 +45,9 @@ import type { CwMutationObserver } from "../../components/mutation-observer/muta
 import type { CwOption } from "../../components/option/option.component.js";
 import type { CwPagination } from "../../components/pagination/pagination.component.js";
 import type { CwPopup } from "../../components/popup/popup.component.js";
+import type { CwPrimaryNavigation } from "../../components/primary-navigation/primary-navigation.component.js";
+import type { CwPrimaryNavigationItem } from "../../components/primary-navigation-item/primary-navigation-item.component.js";
+import type { CwPrimaryNavigationMenu } from "../../components/primary-navigation-menu/primary-navigation-menu.component.js";
 import type { CwProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { CwProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { CwQrCode } from "../../components/qr-code/qr-code.component.js";
@@ -1082,6 +1086,23 @@ keyboard on supportive devices. */
   "oncw-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type CwLogoProps = {
+  /** The default (light-mode) logo image URL. */
+  image?: CwLogo["image"];
+  /** The dark-mode logo image URL. Falls back to `image` when unset. */
+  "dark-image"?: CwLogo["darkImage"];
+  /** When set, the logo renders as a link to this URL — typically the site's home page. */
+  href?: CwLogo["href"];
+  /** Tells the browser where to open the link. Only used when `href` is present. */
+  target?: CwLogo["target"];
+  /** The `rel` attribute for the link. Only used when `href` is present. Mirrors `<cw-button>`'s
+default of `noreferrer noopener` as a safe default when `target` is used. */
+  rel?: CwLogo["rel"];
+  /** The accessible name for the logo. Defaults to a localized "Home" — for the best experience,
+pass a brand-specific value instead, e.g. `label="Acme home"`. */
+  label?: CwLogo["label"];
+};
+
 type CwMenuProps = {
   /**  */
   defaultSlot?: CwMenu["defaultSlot"];
@@ -1240,6 +1261,56 @@ active. */
   "oncw-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type CwPrimaryNavigationProps = {
+  /** Indicates whether or not the mobile navigation panel is open. Only meaningful below `mobile-breakpoint` — use
+`show()`/`hide()` to animate it, or toggle this attribute directly. */
+  open?: CwPrimaryNavigation["open"];
+  /** The accessible label for the `<nav>` landmark. Defaults to a localized "Main navigation". */
+  label?: CwPrimaryNavigation["label"];
+  /** The viewport width, in pixels, below which the hamburger toggle and collapsible panel engage. */
+  "mobile-breakpoint"?: CwPrimaryNavigation["mobileBreakpoint"];
+  /**  */
+  menu?: CwPrimaryNavigation["menu"];
+  /**  */
+  defaultSlot?: CwPrimaryNavigation["defaultSlot"];
+  /** Emitted when the mobile navigation panel opens. */
+  "oncw-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the mobile navigation panel opens and all animations are complete. */
+  "oncw-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the mobile navigation panel closes. */
+  "oncw-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the mobile navigation panel closes and all animations are complete. */
+  "oncw-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
+type CwPrimaryNavigationItemProps = {
+  /** The URL to navigate to. When set, the item renders as a link. Mutually exclusive with a slotted dropdown menu. */
+  href?: CwPrimaryNavigationItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: CwPrimaryNavigationItem["target"];
+  /** The `rel` attribute for the link. Only used when `href` is set. */
+  rel?: CwPrimaryNavigationItem["rel"];
+  /** Indicates this item represents the current page. Reflects `aria-current="page"` on the internal link. The
+component has no router/URL awareness — consumers set this explicitly based on their own routing state. */
+  current?: CwPrimaryNavigationItem["current"];
+  /**  */
+  dropdown?: CwPrimaryNavigationItem["dropdown"];
+  /**  */
+  menuSlot?: CwPrimaryNavigationItem["menuSlot"];
+  /** Whether the item's dropdown is currently open. Always `false` for link/plain items. */
+  open?: CwPrimaryNavigationItem["open"];
+  /** Emitted when the item's dropdown opens. */
+  "oncw-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the item's dropdown opens and all animations are complete. */
+  "oncw-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the item's dropdown closes. */
+  "oncw-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the item's dropdown closes and all animations are complete. */
+  "oncw-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
+type CwPrimaryNavigationMenuProps = {};
+
 type CwProgressBarProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: CwProgressBar["value"];
@@ -2782,6 +2853,25 @@ export type CustomElements = {
    */
   "cw-input": DefineComponent<CwInputProps>;
 
+  /**
+   * A branding mark for a site's navigation, header, or footer, with automatic light/dark
+   * image swapping and an optional home link.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Custom logo markup (e.g. an inline `<svg>` or `<picture>`), overriding `image`/`dark-image`.
+   *
+   * ### **CSS Properties:**
+   *  - **--cw-logo-height** - The height of the logo. Width scales automatically. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper (an `<a>` when `href` is set, otherwise a `<span>`).
+   * - **image** - The light-mode (default) logo image.
+   * - **image-dark** - The dark-mode logo image.
+   */
+  "cw-logo": DefineComponent<CwLogoProps>;
+
   /**
    * Menus provide a list of options for the user to choose from.
    * ---
@@ -2919,6 +3009,72 @@ export type CustomElements = {
    */
   "cw-popup": DefineComponent<CwPopupProps>;
 
+  /**
+   * Top-level site navigation with a responsive hamburger disclosure for narrow viewports.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-show** - Emitted when the mobile navigation panel opens.
+   * - **cw-after-show** - Emitted after the mobile navigation panel opens and all animations are complete.
+   * - **cw-hide** - Emitted when the mobile navigation panel closes.
+   * - **cw-after-hide** - Emitted after the mobile navigation panel closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Opens the mobile navigation panel. No-op above `mobile-breakpoint`.
+   * - **hide()** - Closes the mobile navigation panel. No-op above `mobile-breakpoint`.
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<cw-primary-navigation-item>` elements.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, a `<nav>` landmark element.
+   * - **toggle** - The hamburger toggle button, shown below `mobile-breakpoint`.
+   * - **menu** - The container that wraps the slotted navigation items.
+   */
+  "cw-primary-navigation": DefineComponent<CwPrimaryNavigationProps>;
+
+  /**
+   * A top-level entry in a `<cw-primary-navigation>`, rendered as a link or, when it has a
+   * `<cw-primary-navigation-menu>` slotted in, a disclosure trigger for a dropdown of sub-links.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-show** - Emitted when the item's dropdown opens.
+   * - **cw-after-show** - Emitted after the item's dropdown opens and all animations are complete.
+   * - **cw-hide** - Emitted when the item's dropdown closes.
+   * - **cw-after-hide** - Emitted after the item's dropdown closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Opens the item's dropdown, if it has one. No-op for link/plain items.
+   * - **hide()** - Closes the item's dropdown, if it has one. No-op for link/plain items.
+   *
+   * ### **Slots:**
+   *  - _default_ - The item's label content (text, or an icon + text).
+   * - **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.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **link** - The internal `<a>`, present only when `href` is set.
+   * - **trigger** - The internal `<cw-dropdown>`, present only when a dropdown menu is slotted in.
+   */
+  "cw-primary-navigation-item": DefineComponent<CwPrimaryNavigationItemProps>;
+
+  /**
+   * A simple flat list of links shown in a `<cw-primary-navigation-item>`'s dropdown. Deliberately
+   * minimal — no headings, grouping, multi-column layout, or promo slot; styles plain `<a>` elements only.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more plain `<a>` elements.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "cw-primary-navigation-menu": DefineComponent<CwPrimaryNavigationMenuProps>;
+
   /**
    * Progress bars are used to show the status of an ongoing operation.
    * ---

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.RN7BZPQ4.js";
+} from "../chunks/chunk.XIIPR36B.js";
 import "../chunks/chunk.CJFFVBAI.js";
-import "../chunks/chunk.V7PVKTVW.js";
+import "../chunks/chunk.PLKIFY5H.js";
 import "../chunks/chunk.4EHT37C5.js";
 import "../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/utilities/localize.d.ts

@@ -10,6 +10,7 @@ export interface Translation extends DefaultTranslation {
     carousel: string;
     clearEntry: string;
     close: string;
+    closeMenu?: string;
     copied: string;
     copy: string;
     currentValue: string;
@@ -17,6 +18,7 @@ export interface Translation extends DefaultTranslation {
     goToSlide: (slide: number, count: number) => string;
     hidePassword: string;
     goToPage?: (page: number) => string;
+    home?: string;
     hour?: string;
     loading: string;
     meridiem?: string;
@@ -25,10 +27,12 @@ export interface Translation extends DefaultTranslation {
     nextPage?: string;
     nextSlide: string;
     numOptionsSelected: (num: number) => string;
+    openMenu?: string;
     pagination?: string;
     previousMonth?: string;
     previousPage?: string;
     previousSlide: string;
+    primaryNavigation?: string;
     second?: string;
     progress: string;
     remove: string;

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.2H4HZOD6.js";
-import "../chunks/chunk.RGBGPSJY.js";
+} from "../chunks/chunk.746GMAQ3.js";
+import "../chunks/chunk.47CTIY27.js";
 import "../chunks/chunk.Q44EX5TP.js";
 export {
   LocalizeController,

package/dist/vscode.html-custom-data.json

@@ -1773,6 +1773,54 @@
         }
       ]
     },
+    {
+      "name": "cw-logo",
+      "description": "A branding mark for a site's navigation, header, or footer, with automatic light/dark\nimage swapping and an optional home link.\n---\n\n\n### **Slots:**\n - _default_ - Custom logo markup (e.g. an inline `<svg>` or `<picture>`), overriding `image`/`dark-image`.\n\n### **CSS Properties:**\n - **--cw-logo-height** - The height of the logo. Width scales automatically. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (an `<a>` when `href` is set, otherwise a `<span>`).\n- **image** - The light-mode (default) logo image.\n- **image-dark** - The dark-mode logo image.",
+      "attributes": [
+        {
+          "name": "image",
+          "description": "The default (light-mode) logo image URL.",
+          "values": []
+        },
+        {
+          "name": "dark-image",
+          "description": "The dark-mode logo image URL. Falls back to `image` when unset.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "When set, the logo renders as a link to this URL — typically the site's home page.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is present.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" },
+            { "name": "''" }
+          ]
+        },
+        {
+          "name": "rel",
+          "description": "The `rel` attribute for the link. Only used when `href` is present. Mirrors `<cw-button>`'s\ndefault of `noreferrer noopener` as a safe default when `target` is used.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The accessible name for the logo. Defaults to a localized \"Home\" — for the best experience,\npass a brand-specific value instead, e.g. `label=\"Acme home\"`.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/logo"
+        }
+      ]
+    },
     {
       "name": "cw-menu",
       "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **cw-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
@@ -2096,6 +2144,81 @@
         }
       ]
     },
+    {
+      "name": "cw-primary-navigation",
+      "description": "Top-level site navigation with a responsive hamburger disclosure for narrow viewports.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the mobile navigation panel opens.\n- **cw-after-show** - Emitted after the mobile navigation panel opens and all animations are complete.\n- **cw-hide** - Emitted when the mobile navigation panel closes.\n- **cw-after-hide** - Emitted after the mobile navigation panel closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the mobile navigation panel. No-op above `mobile-breakpoint`.\n- **hide()** - Closes the mobile navigation panel. No-op above `mobile-breakpoint`.\n\n### **Slots:**\n - _default_ - One or more `<cw-primary-navigation-item>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<nav>` landmark element.\n- **toggle** - The hamburger toggle button, shown below `mobile-breakpoint`.\n- **menu** - The container that wraps the slotted navigation items.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the mobile navigation panel is open. Only meaningful below `mobile-breakpoint` — use\n`show()`/`hide()` to animate it, or toggle this attribute directly.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Main navigation\".",
+          "values": []
+        },
+        {
+          "name": "mobile-breakpoint",
+          "description": "The viewport width, in pixels, below which the hamburger toggle and collapsible panel engage.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/primary-navigation"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The URL to navigate to. When set, the item renders as a link. Mutually exclusive with a slotted dropdown menu.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "rel",
+          "description": "The `rel` attribute for the link. Only used when `href` is set.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/primary-navigation-item"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/primary-navigation-menu"
+        }
+      ]
+    },
     {
       "name": "cw-progress-bar",
       "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",