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

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

@@ -506,6 +506,68 @@
         }
       ]
     },
+    {
+      "name": "cw-checkbox",
+      "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the checkbox loses focus.\n- **cw-change** - Emitted when the checked state changes.\n- **cw-focus** - Emitted when the checkbox gains focus.\n- **cw-input** - Emitted when the checkbox receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<cw-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
+      "attributes": [
+        { "name": "title", "values": [] },
+        {
+          "name": "name",
+          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The checkbox's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the checkbox.",
+          "values": []
+        },
+        {
+          "name": "checked",
+          "description": "Draws the checkbox in a checked state.",
+          "values": []
+        },
+        {
+          "name": "indeterminate",
+          "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the checkbox a required field.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/checkbox"
+        }
+      ]
+    },
     {
       "name": "cw-color-picker",
       "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the color picker loses focus.\n- **cw-change** - Emitted when the color picker's value changes.\n- **cw-focus** - Emitted when the color picker receives focus.\n- **cw-input** - Emitted when the color picker receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
@@ -597,68 +659,6 @@
         }
       ]
     },
-    {
-      "name": "cw-checkbox",
-      "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the checkbox loses focus.\n- **cw-change** - Emitted when the checked state changes.\n- **cw-focus** - Emitted when the checkbox gains focus.\n- **cw-input** - Emitted when the checkbox receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<cw-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
-      "attributes": [
-        { "name": "title", "values": [] },
-        {
-          "name": "name",
-          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The checkbox's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the checkbox.",
-          "values": []
-        },
-        {
-          "name": "checked",
-          "description": "Draws the checkbox in a checked state.",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-          "values": []
-        },
-        {
-          "name": "form",
-          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "Makes the checkbox a required field.",
-          "values": []
-        },
-        {
-          "name": "help-text",
-          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://cordwainer.dev/components/checkbox"
-        }
-      ]
-    },
     {
       "name": "cw-combobox",
       "description": "Comboboxes combine a text input with a listbox, allowing users to filter a list of options by typing.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the control's value changes.\n- **cw-clear** - Emitted when the control's value is cleared.\n- **cw-input** - Emitted when the control receives input, including as the user types to filter options.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-blur** - Emitted when the control loses focus.\n- **cw-show** - Emitted when the combobox's listbox opens.\n- **cw-after-show** - Emitted after the combobox's listbox opens and all animations are complete.\n- **cw-hide** - Emitted when the combobox's listbox closes.\n- **cw-after-hide** - Emitted after the combobox's listbox closes and all animations are complete.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<cw-option>` elements. You can use `<cw-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **no-options** - Content to show in the listbox when no options match the current filter.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, suffix, input, tags, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The component's `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **no-options** - The container shown when no options match the current filter.\n- **loading** - The container shown while `loading` is set.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each selected option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -1246,6 +1246,23 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "owner",
+          "description": "The copyright owner's name. When set, the footer renders `© {currentYear} {owner}`. Renders nothing if unset.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/footer"
+        }
+      ]
+    },
     {
       "name": "cw-format-bytes",
       "description": "Formats a number as a human readable bytes value.\n---\n",
@@ -1434,6 +1451,23 @@
         }
       ]
     },
+    {
+      "name": "cw-header",
+      "description": "Page header region composing branding, primary navigation, icon-triggered action panels, and secondary\nnavigation into one piece of chrome.\n---\n\n\n### **Events:**\n - **cw-panel-show** - Emitted when an action panel opens.\n- **cw-panel-after-show** - Emitted after an action panel opens and all animations are complete.\n- **cw-panel-hide** - Emitted when an action panel closes.\n- **cw-panel-after-hide** - Emitted after an action panel closes and all animations are complete.\n\n### **Methods:**\n - **showPanel(name: _HeaderAction['name']_)** - Opens the named action panel. No-op if that slot has no content.\n- **hidePanel()** - Closes the currently open action panel, if any.\n\n### **Slots:**\n - **logo** - A `<cw-logo>`.\n- **primary-navigation** - A `<cw-primary-navigation>`.\n- **utility** - Content for the utility action panel, opened via a gear icon trigger.\n- **search** - Content for the search action panel, opened via a search icon trigger.\n- **notification** - Content for the notification action panel, opened via a bell icon trigger.\n- **user** - Content for the user/account action panel, opened via a person icon trigger.\n- **cart** - Content for the cart action panel, opened via a cart icon trigger.\n- **secondary-navigation** - A `<cw-secondary-navigation>`, rendered on its own row below everything else.\n\n### **CSS Properties:**\n - **--panel-width** - The width of an open action panel above `mobile-breakpoint`. Below it, panels are always full width. Defaults to `50%`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<header>` landmark element.\n- **logo** - The container that wraps the slotted logo.\n- **primary-navigation** - The container that wraps the slotted primary navigation.\n- **actions** - The container that wraps the action triggers.\n- **trigger** - Each action trigger, a `<cw-icon-button>`.\n- **trigger--utility** - The utility action trigger.\n- **trigger--search** - The search action trigger.\n- **trigger--notification** - The notification action trigger.\n- **trigger--user** - The user action trigger.\n- **trigger--cart** - The cart action trigger.\n- **trigger__base** - A trigger's exported `base` part.\n- **indicator** - The line that highlights the currently open action trigger.\n- **panel** - The panel shown below the header when an action trigger is open.\n- **secondary-navigation** - The container that wraps the slotted secondary navigation.",
+      "attributes": [
+        {
+          "name": "mobile-breakpoint",
+          "description": "The viewport width, in pixels, below which the header switches to its stacked mobile layout.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/header"
+        }
+      ]
+    },
     {
       "name": "cw-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **cw-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **cw-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",
@@ -1505,6 +1539,11 @@
           "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
           "values": []
         },
+        {
+          "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.",
+          "values": []
+        },
         {
           "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.",
@@ -2790,6 +2829,58 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The URL of the profile to link to.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_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\"`.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": [{ "name": "Platform" }]
+        },
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Defaults to `platform`'s icon when set.",
+          "values": []
+        },
+        {
+          "name": "library",
+          "description": "The name of a registered custom icon library. Defaults to `system` when `platform` is set.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A description that gets read by assistive devices. Defaults to `platform`'s name when set.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/social-link"
+        }
+      ]
+    },
     {
       "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.",