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

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

@@ -12,8 +12,8 @@ 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 { CwColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { CwCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { CwColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { CwCombobox } from "../../components/combobox/combobox.component.js";
 import type { CwCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type {
@@ -29,9 +29,11 @@ import type { CwDialog } from "../../components/dialog/dialog.component.js";
 import type { CwDivider } from "../../components/divider/divider.component.js";
 import type { CwDrawer } from "../../components/drawer/drawer.component.js";
 import type { CwDropdown } from "../../components/dropdown/dropdown.component.js";
+import type { CwFooter } from "../../components/footer/footer.component.js";
 import type { CwFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { CwFormatDate } from "../../components/format-date/format-date.component.js";
 import type { CwFormatNumber } from "../../components/format-number/format-number.component.js";
+import type { CwHeader } from "../../components/header/header.component.js";
 import type { CwIcon } from "../../components/icon/icon.component.js";
 import type { CwIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { CwImageComparer } from "../../components/image-comparer/image-comparer.component.js";
@@ -62,6 +64,7 @@ import type { CwSecondaryNavigation } from "../../components/secondary-navigatio
 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 { CwSocialLink } from "../../components/social-link/social-link.component.js";
 import type { CwSpinner } from "../../components/spinner/spinner.component.js";
 import type { CwSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { CwSwitch } from "../../components/switch/switch.component.js";
@@ -330,6 +333,50 @@ 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
@@ -396,50 +443,6 @@ 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"];
@@ -857,6 +860,11 @@ components that use a dropdown internally. */
   "oncw-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type CwFooterProps = {
+  /** The copyright owner's name. When set, the footer renders `© {currentYear} {owner}`. Renders nothing if unset. */
+  owner?: CwFooter["owner"];
+};
+
 type CwFormatBytesProps = {
   /** The number to format in bytes. */
   value?: CwFormatBytes["value"];
@@ -918,6 +926,32 @@ type CwFormatNumberProps = {
   "maximum-significant-digits"?: CwFormatNumber["maximumSignificantDigits"];
 };
 
+type CwHeaderProps = {
+  /** The viewport width, in pixels, below which the header switches to its stacked mobile layout. */
+  "mobile-breakpoint"?: CwHeader["mobileBreakpoint"];
+  /**  */
+  panel?: CwHeader["panel"];
+  /**  */
+  actionsRow?: CwHeader["actionsRow"];
+  /**  */
+  indicator?: CwHeader["indicator"];
+  /**  */
+  triggers?: CwHeader["triggers"];
+  /** The name of the currently open action panel, or `null` if none is open. Not reflected as an attribute — `null`
+is a legitimate, frequently-reached value here (no panel open), which doesn't play well with `CwElement`'s
+reflected-attribute "morph fix" (`src/internal/cw-element.ts`), designed around properties whose first non-null
+value is a permanent default rather than a value that legitimately toggles back to `null` at runtime. */
+  activePanel?: CwHeader["activePanel"];
+  /** Emitted when an action panel opens. */
+  "oncw-panel-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted after an action panel opens and all animations are complete. */
+  "oncw-panel-after-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted when an action panel closes. */
+  "oncw-panel-hide"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted after an action panel closes and all animations are complete. */
+  "oncw-panel-after-hide"?: (e: CustomEvent<{ name: String }>) => void;
+};
+
 type CwIconProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: CwIcon["name"];
@@ -950,6 +984,9 @@ can result in XSS attacks. */
   target?: CwIconButton["target"];
   /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
   download?: CwIconButton["download"];
+  /** The `rel` attribute for the link. Only used when `href` is set. Defaults to `noreferrer noopener` when `target`
+is set and this is left unset — pass an explicit value (e.g. `me noreferrer noopener`) to override it. */
+  rel?: CwIconButton["rel"];
   /** A description that gets read by assistive devices. For optimal accessibility, you should always include a label
 that describes what the icon button does. */
   label?: CwIconButton["label"];
@@ -1639,6 +1676,27 @@ type CwSkeletonProps = {
   effect?: CwSkeleton["effect"];
 };
 
+type CwSocialLinkProps = {
+  /** The URL of the profile to link to. */
+  href?: CwSocialLink["href"];
+  /** Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site. */
+  target?: CwSocialLink["target"];
+  /** The `rel` attribute for the link. Defaults to `noreferrer noopener`. To mark this link as a verified profile
+reference — the IndieWeb `rel="me"` convention Mastodon and the wider fediverse use for identity verification —
+include `me` yourself, e.g. `rel="me noreferrer noopener"`. */
+  rel?: CwSocialLink["rel"];
+  /** One of the common social/fediverse platforms. When set, both the icon and the accessible `label` default to
+that platform's — set `name`/`library` and/or `label` explicitly to override either, or to support a platform
+not in this list. */
+  platform?: CwSocialLink["platform"];
+  /** The name of the icon to draw. Defaults to `platform`'s icon when set. */
+  name?: CwSocialLink["name"];
+  /** The name of a registered custom icon library. Defaults to `system` when `platform` is set. */
+  library?: CwSocialLink["library"];
+  /** A description that gets read by assistive devices. Defaults to `platform`'s name when set. */
+  label?: CwSocialLink["label"];
+};
+
 type CwSpinnerProps = {};
 
 type CwSplitPanelProps = {
@@ -2284,6 +2342,44 @@ 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.
    * ---
@@ -2346,44 +2442,6 @@ 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.
    * ---
@@ -2734,6 +2792,29 @@ export type CustomElements = {
    */
   "cw-dropdown": DefineComponent<CwDropdownProps>;
 
+  /**
+   * Site footer region composing branding, a flat link list, arbitrary "about" content, and a bottom bar
+   * with copyright and social links.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **logo** - A `<cw-logo>`.
+   * - **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.
+   * - **about** - Arbitrary content, rendered full width.
+   * - **social** - Any number of `<cw-social-link>` elements.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, a `<footer>` landmark element.
+   * - **logo** - The container that wraps the slotted logo.
+   * - **menu** - The container that wraps the slotted menu links.
+   * - **about** - The container that wraps the slotted about content.
+   * - **bottom** - The bottom bar that wraps the copyright text and social links.
+   * - **copyright** - The copyright text.
+   * - **social** - The container that wraps the slotted social links.
+   */
+  "cw-footer": DefineComponent<CwFooterProps>;
+
   /**
    * Formats a number as a human readable bytes value.
    * ---
@@ -2755,6 +2836,53 @@ export type CustomElements = {
    */
   "cw-format-number": DefineComponent<CwFormatNumberProps>;
 
+  /**
+   * Page header region composing branding, primary navigation, icon-triggered action panels, and secondary
+   * navigation into one piece of chrome.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-panel-show** - Emitted when an action panel opens.
+   * - **cw-panel-after-show** - Emitted after an action panel opens and all animations are complete.
+   * - **cw-panel-hide** - Emitted when an action panel closes.
+   * - **cw-panel-after-hide** - Emitted after an action panel closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **showPanel(name: _HeaderAction['name']_)** - Opens the named action panel. No-op if that slot has no content.
+   * - **hidePanel()** - Closes the currently open action panel, if any.
+   *
+   * ### **Slots:**
+   *  - **logo** - A `<cw-logo>`.
+   * - **primary-navigation** - A `<cw-primary-navigation>`.
+   * - **utility** - Content for the utility action panel, opened via a gear icon trigger.
+   * - **search** - Content for the search action panel, opened via a search icon trigger.
+   * - **notification** - Content for the notification action panel, opened via a bell icon trigger.
+   * - **user** - Content for the user/account action panel, opened via a person icon trigger.
+   * - **cart** - Content for the cart action panel, opened via a cart icon trigger.
+   * - **secondary-navigation** - A `<cw-secondary-navigation>`, rendered on its own row below everything else.
+   *
+   * ### **CSS Properties:**
+   *  - **--panel-width** - The width of an open action panel above `mobile-breakpoint`. Below it, panels are always full width. Defaults to `50%`. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, a `<header>` landmark element.
+   * - **logo** - The container that wraps the slotted logo.
+   * - **primary-navigation** - The container that wraps the slotted primary navigation.
+   * - **actions** - The container that wraps the action triggers.
+   * - **trigger** - Each action trigger, a `<cw-icon-button>`.
+   * - **trigger--utility** - The utility action trigger.
+   * - **trigger--search** - The search action trigger.
+   * - **trigger--notification** - The notification action trigger.
+   * - **trigger--user** - The user action trigger.
+   * - **trigger--cart** - The cart action trigger.
+   * - **trigger__base** - A trigger's exported `base` part.
+   * - **indicator** - The line that highlights the currently open action trigger.
+   * - **panel** - The panel shown below the header when an action trigger is open.
+   * - **secondary-navigation** - The container that wraps the slotted secondary navigation.
+   */
+  "cw-header": DefineComponent<CwHeaderProps>;
+
   /**
    * Icons are symbols that can be used to represent various options within an application.
    * ---
@@ -3428,6 +3556,19 @@ export type CustomElements = {
    */
   "cw-skeleton": DefineComponent<CwSkeletonProps>;
 
+  /**
+   * A link to a social or fediverse profile, rendered as a single icon. Purpose-built for this domain rather
+   * than a generic icon-link: set `platform` for one of the common networks and both the icon and accessible label
+   * are filled in for you.
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The internal `<cw-icon-button>`'s exported `base` part.
+   * - **base__icon-button** - An alias of `base`, kept for consistency with other components that forward an icon-button's exported `base` part.
+   */
+  "cw-social-link": DefineComponent<CwSocialLinkProps>;
+
   /**
    * Spinners are used to show the progress of an indeterminate operation.
    * ---

package/cdn/utilities/localize.d.ts

@@ -7,7 +7,9 @@ export interface Translation extends DefaultTranslation {
     $code: string;
     $name: string;
     $dir: 'ltr' | 'rtl';
+    account?: string;
     carousel: string;
+    cart?: string;
     clearEntry: string;
     close: string;
     closeMenu?: string;
@@ -26,6 +28,7 @@ export interface Translation extends DefaultTranslation {
     nextMonth?: string;
     nextPage?: string;
     nextSlide: string;
+    notifications?: string;
     numOptionsSelected: (num: number) => string;
     openMenu?: string;
     pagination?: string;
@@ -39,9 +42,11 @@ export interface Translation extends DefaultTranslation {
     resize: string;
     scrollToEnd: string;
     scrollToStart: string;
+    search?: string;
     secondaryNavigation?: string;
     selectAColorFromTheScreen: string;
     showPassword: string;
     slideNum: (slide: number) => string;
     toggleColorFormat: string;
+    utility?: string;
 }

package/cdn/utilities/localize.js

@@ -1,7 +1,7 @@
 import {
   LocalizeController
-} from "../chunks/chunk.RJM4Q2BU.js";
-import "../chunks/chunk.G2NWQJHP.js";
+} from "../chunks/chunk.75ZQOYXC.js";
+import "../chunks/chunk.3BIGWCZ4.js";
 import {
   registerTranslation
 } from "../chunks/chunk.FFUIYPKD.js";