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

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

@@ -12,17 +12,17 @@ import type { CwButtonGroup } from "../../components/button-group/button-group.c
 import type { CwCard } from "../../components/card/card.component.js";
 import type { CwCarousel } from "../../components/carousel/carousel.component.js";
 import type { CwCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { CwCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { CwColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { CwCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { CwCombobox } from "../../components/combobox/combobox.component.js";
 import type { CwCopyButton } from "../../components/copy-button/copy-button.component.js";
-import type { CwDataTableColumn } from "../../components/data-table-column/data-table-column.component.js";
 import type {
   CwDataTable,
   SortChangeEvent,
   CwRowSelectionChangeEvent,
   RowClickEvent,
 } from "../../components/data-table/data-table.component.js";
+import type { CwDataTableColumn } from "../../components/data-table-column/data-table-column.component.js";
 import type { CwDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { CwDetails } from "../../components/details/details.component.js";
 import type { CwDialog } from "../../components/dialog/dialog.component.js";
@@ -58,6 +58,8 @@ import type { CwRange } from "../../components/range/range.component.js";
 import type { CwRating } from "../../components/rating/rating.component.js";
 import type { CwRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { CwResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
+import type { CwSecondaryNavigation } from "../../components/secondary-navigation/secondary-navigation.component.js";
+import type { CwSecondaryNavigationItem } from "../../components/secondary-navigation-item/secondary-navigation-item.component.js";
 import type { CwSelect } from "../../components/select/select.component.js";
 import type { CwSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { CwSpinner } from "../../components/spinner/spinner.component.js";
@@ -328,50 +330,6 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type CwCarouselItemProps = {};
 
-type CwCheckboxProps = {
-  /**  */
-  title?: CwCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: CwCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: CwCheckbox["value"];
-  /** The checkbox's size. */
-  size?: CwCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: CwCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: CwCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: CwCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: CwCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: CwCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: CwCheckbox["helpText"];
-  /**  */
-  input?: CwCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: CwCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: CwCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: CwCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "oncw-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "oncw-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "oncw-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "oncw-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "oncw-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type CwColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -438,6 +396,50 @@ the same document or shadow root for this to work. */
   "oncw-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type CwCheckboxProps = {
+  /**  */
+  title?: CwCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: CwCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: CwCheckbox["value"];
+  /** The checkbox's size. */
+  size?: CwCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: CwCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: CwCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: CwCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: CwCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: CwCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: CwCheckbox["helpText"];
+  /**  */
+  input?: CwCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: CwCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: CwCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: CwCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "oncw-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "oncw-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "oncw-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "oncw-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "oncw-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type CwComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: CwCombobox["name"];
@@ -577,26 +579,6 @@ scenarios. */
   "oncw-error"?: (e: CustomEvent<never>) => void;
 };
 
-type CwDataTableColumnProps = {
-  /** The key in each row data object that this column displays. Required. */
-  name?: CwDataTableColumn["name"];
-  /** The column header label. Falls back to `name` if not set. */
-  label?: CwDataTableColumn["label"];
-  /** Makes the column header clickable for sorting. */
-  sortable?: CwDataTableColumn["sortable"];
-  /** A CSS width value for this column, e.g. "200px" or "20%". */
-  width?: CwDataTableColumn["width"];
-  /** A CSS min-width value for this column. */
-  "min-width"?: CwDataTableColumn["minWidth"];
-  /** Alignment of cell content within the column. */
-  align?: CwDataTableColumn["align"];
-  /** Hides the column without removing it from the DOM. */
-  hidden?: CwDataTableColumn["hidden"];
-  /** A custom cell renderer. Called once per row with the cell value, the full row object,
-and this column element. Return a Lit `TemplateResult` or a plain string. */
-  renderCell?: CwDataTableColumn["renderCell"];
-};
-
 type CwDataTableProps = {
   /** The key in each row object used as a stable row identity for selection. Falls back to row index when not set. */
   "row-id"?: CwDataTable["rowId"];
@@ -632,6 +614,26 @@ Each object's keys correspond to column `name` values. */
   "oncw-row-click"?: (e: CustomEvent<RowClickEvent>) => void;
 };
 
+type CwDataTableColumnProps = {
+  /** The key in each row data object that this column displays. Required. */
+  name?: CwDataTableColumn["name"];
+  /** The column header label. Falls back to `name` if not set. */
+  label?: CwDataTableColumn["label"];
+  /** Makes the column header clickable for sorting. */
+  sortable?: CwDataTableColumn["sortable"];
+  /** A CSS width value for this column, e.g. "200px" or "20%". */
+  width?: CwDataTableColumn["width"];
+  /** A CSS min-width value for this column. */
+  "min-width"?: CwDataTableColumn["minWidth"];
+  /** Alignment of cell content within the column. */
+  align?: CwDataTableColumn["align"];
+  /** Hides the column without removing it from the DOM. */
+  hidden?: CwDataTableColumn["hidden"];
+  /** A custom cell renderer. Called once per row with the cell value, the full row object,
+and this column element. Return a Lit `TemplateResult` or a plain string. */
+  renderCell?: CwDataTableColumn["renderCell"];
+};
+
 type CwDatePickerProps = {
   /** The name of the date picker, submitted as a name/value pair with form data. */
   name?: CwDatePicker["name"];
@@ -1520,6 +1522,27 @@ type CwResizeObserverProps = {
   "oncw-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
+type CwSecondaryNavigationProps = {
+  /** The accessible label for the `<nav>` landmark. Defaults to a localized "Secondary navigation". */
+  label?: CwSecondaryNavigation["label"];
+  /** Disables the scroll arrows that appear when items overflow. */
+  "no-scroll-controls"?: CwSecondaryNavigation["noScrollControls"];
+  /**  */
+  nav?: CwSecondaryNavigation["nav"];
+};
+
+type CwSecondaryNavigationItemProps = {
+  /** The URL to navigate to. */
+  href?: CwSecondaryNavigationItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: CwSecondaryNavigationItem["target"];
+  /** The `rel` attribute for the link. Only used when `href` is set. */
+  rel?: CwSecondaryNavigationItem["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?: CwSecondaryNavigationItem["current"];
+};
+
 type CwSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: CwSelect["name"];
@@ -2261,44 +2284,6 @@ export type CustomElements = {
    */
   "cw-carousel-item": DefineComponent<CwCarouselItemProps>;
 
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **cw-blur** - Emitted when the checkbox loses focus.
-   * - **cw-change** - Emitted when the checked state changes.
-   * - **cw-focus** - Emitted when the checkbox gains focus.
-   * - **cw-input** - Emitted when the checkbox receives input.
-   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   *
-   * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<cw-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "cw-checkbox": DefineComponent<CwCheckboxProps>;
-
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2361,6 +2346,44 @@ export type CustomElements = {
    */
   "cw-color-picker": DefineComponent<CwColorPickerProps>;
 
+  /**
+   * Checkboxes allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-blur** - Emitted when the checkbox loses focus.
+   * - **cw-change** - Emitted when the checked state changes.
+   * - **cw-focus** - Emitted when the checkbox gains focus.
+   * - **cw-input** - Emitted when the checkbox receives input.
+   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<cw-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "cw-checkbox": DefineComponent<CwCheckboxProps>;
+
   /**
    * Comboboxes combine a text input with a listbox, allowing users to filter a list of options by typing.
    * ---
@@ -2451,16 +2474,6 @@ export type CustomElements = {
    */
   "cw-copy-button": DefineComponent<CwCopyButtonProps>;
 
-  /**
-   * Data table columns define the columns of a [data table](/components/data-table).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - This element has no rendered output; it is a configuration element only.
-   */
-  "cw-data-table-column": DefineComponent<CwDataTableColumnProps>;
-
   /**
    * Data tables display structured tabular data with support for sorting, row selection, and custom cell rendering.
    * ---
@@ -2498,6 +2511,16 @@ export type CustomElements = {
    */
   "cw-data-table": DefineComponent<CwDataTableProps>;
 
+  /**
+   * Data table columns define the columns of a [data table](/components/data-table).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - This element has no rendered output; it is a configuration element only.
+   */
+  "cw-data-table-column": DefineComponent<CwDataTableColumnProps>;
+
   /**
    * Date pickers let users select a date from a calendar.
    * ---
@@ -3298,6 +3321,40 @@ export type CustomElements = {
    */
   "cw-resize-observer": DefineComponent<CwResizeObserverProps>;
 
+  /**
+   * Second-level site navigation for linking pages related to the current one, beneath a
+   * `<cw-primary-navigation>`. A flat, horizontal strip of links — unlike primary navigation, it has no
+   * disclosure/dropdown items; overflow is handled with scroll buttons instead.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<cw-secondary-navigation-item>` elements.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, a `<nav>` landmark element.
+   * - **nav** - The container that wraps the slotted navigation items and the scroll buttons.
+   * - **scroll-button** - The previous/next scroll buttons that show when items overflow, an `<cw-icon-button>`.
+   * - **scroll-button--start** - The starting scroll button.
+   * - **scroll-button--end** - The ending scroll button.
+   * - **scroll-button__base** - The scroll button's exported `base` part.
+   */
+  "cw-secondary-navigation": DefineComponent<CwSecondaryNavigationProps>;
+
+  /**
+   * A link in a `<cw-secondary-navigation>`, pointing to a page related to the current one.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The item's label content (text, or an icon + text).
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **link** - The internal `<a>`, present only when `href` is set.
+   */
+  "cw-secondary-navigation-item": DefineComponent<CwSecondaryNavigationItemProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---

package/dist/utilities/localize.d.ts

@@ -39,6 +39,7 @@ export interface Translation extends DefaultTranslation {
     resize: string;
     scrollToEnd: string;
     scrollToStart: string;
+    secondaryNavigation?: string;
     selectAColorFromTheScreen: string;
     showPassword: string;
     slideNum: (slide: number) => string;

package/dist/utilities/localize.js

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